Slides från morgonseminarie hos Bouvet i Malmö, 29 augusti 2012

1. Design för mobil mångfald Anna Dahlström
co-founder byflock
Bouvet Syd, Malmö 30:e augusti 2012 www.annadahlstrom.com
annadahlstrom

2. Hej!
IA & UX DESIGNER | BOR I LONDON |
FÖRKÄRLEK FÖR CITAT & UTMANINGAR |
FRILANSAR & JOBBAR PÅ EN STARTUP
Det här är jag på mitt favoritställe, Knäbäckshusen
Photo curtesy of my sister

3. MOBIL ENHET: ett föremål gjort för
ett specifikt ändamål eller syfte & som
kan kopplas upp på nätet
http://desktopwallpaper-s.com/19-Computers/-/Future/

4. FOKUS FÖR IDAG
SMARTPHONES | DESKTOP ( SURFPLATTOR) - iOS & ANDROID
http://desktopwallpaper-s.com/19-Computers/-/Future/

5. AGENDA
1. FÖRSTÅELSE FÖR ANVÄNDNINGS-
& BETEENDEMÖNSTER AV MOBILA
ENHETER
2. RIKTLINJER FÖR VAL AV MOBIL SITE
vs. RESPONSIVE SITE vs. EN APP
3. TITTA NÄRMARE PÅ RESPONSIVE
DESIGN
4.UX PRINCIPER FÖR APPAR & OLIKA
PLATFORMAR
www.flickr.com/photos/marfis75/2939337382

6. FÖRST UT...
ANVÄNDNINGS
& BETEENDE-
MÖNSTER
www.flickr.com/photos/publicenergy/1846375599

7. 29 JUNI 2007
DEN FÖRSTA iPHONEN
www.flickr.com/photos/lori_greig/2202727502

8. 03 APRIL 2010
DEN FÖRSTA iPADEN
www.flickr.com/photos/scobleizer/4317207778

9. År 2011 använde mer än en tredjedel av
jordens 7 miljarder invånare internet.
En ökning med 17% sedan 2010.*
* Source: www.itu.int/ITU-D/ict/facts/2011/index.htmll
www.flickr.com/photos/jamescridland/613445810

10. Vid slutet av 2012 kommer antalet internet-
uppkopplade mobila enheter att överträffa
antalet personer på jorden & år 2016
kommer det finnas 1.4 enheter per invånare.*
* Source: www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
www.flickr.com/photos/nasamarshall/6289116940

11. Den genomsnittlige svensken använder
internet 2 timmar & 13 minuter om dagen &
2 av 3 använder internet på mobiltelefonen.*
* Source; www.internetstatistik.se/artiklar/2-timmar-och-13-minuter-om-dagenl
www.flickr.com/photos/jsolomon/612237912

12. Hälften av alla treåringar i Sverige
använder internet.*
* Source; www.iis.se/docs/SOI2011-en.pdf
www.flickr.com/photos/tocaboca/5523596357

13. I genomsnitt tittar vi på vår telefon
150 gånger om dagen.*
* Source: www.textually.org/textually/archives/2012/02/030229.htm
www.flickr.com/photos/jorgeq82/4732700819

14. 40% erkänner att de använder sin
telefon på toaletten
* Source: http://www.lukew.com/ff/entry.asp?1500
www.flickr.com/photos/exlibris/2552107635

15. MOBILA ENHETER
ANVÄNDS ÖVERALLT
& NÄRSOMHELST
” The best computer is
the one you have with
you when you want
something done. “
- JACOB NIELSEN
www.flickr.com/photos/yahnyahn/2996454839

16. 20% av alla emails öppnas
på mobila enheter.*
* Source: www.campaignmonitor.com/guides/mobile
www.flickr.com/photos/25228175@N08/5127055942

17. ANVÄNDAR-
MÖNSTER FÖR
MOBILA ENHETER
“...as devices become
more mobile, it’s not
only changing where
we read, but when. ”
- POCKET (formerly Read it Later)
www.flickr.com/photos/brandoncwarren/4236278556

18. POCKETS STATISTIK
FÖR DESKTOP
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
www.flickr.com/photos/brandoncwarren/4236278556

19. POCKETS STATISTIK
FÖR iPHONE
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
www.flickr.com/photos/brandoncwarren/4236278556

20. POCKETS STATISTIK
FÖR iPAD
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
www.flickr.com/photos/brandoncwarren/4236278556

21. HÖGSTA
TOPPARNA
•När vi går upp
•På väg eller just kommit till jobbet
•På väg hem
•Efter kvällsmaten
Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read

22. “ MOBILA ANVÄNDARE HAR
BRÅTTOM & ÄR ALLTID PÅ VÄG ”
INTE SANT. DETTA ÄR EN MYT
www.flickr.com/photos/yahnyahn/2996453841/in/photostream

23. EN STOR DEL AV
ANVÄNDANDET
SKER NÄR VI HAR
TID ATT DÖDA
VÄNTAR, RESER, SOFTAR
www.flickr.com/photos/s8an/7303973840

24. SAMMA UPPGIFTER
UTFÖRS ALLTMER
PÅ SMARTPHONES
SOM PÅ DATORN
JU MER OPTIMERADE MOBILA ENHETER
SAMT LÖSNINGAR BLIR DESTO MER
KOMMER DETTA BETEENDE ÖKA
www.flickr.com/photos/edduddiee/4307943164

25. 3 köp görs varje sekund genom
eBays mobila lösningar
Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods
www.flickr.com/photos/stuckincustoms/440157748

26. 2. DETTA HAR...
BETYDELSE FÖR
UX & DESIGN
http://www.flickr.com/photos/eyesore9/3206408088/

27. BEGRÄNSNINGAR MED MOBILA
ENHETER BRUKADE MEDFÖRA
BEGRÄNSAT ANVÄNDANDE
T.E.X FOKUS VAR PÅ SÖKNINGAR, ÖPPETTIDER, MENYER,
www.flickr.com/photos/possan/5401428913 RECENSIONER

28. VILKET I SIG RESULTERADE I
BEGRÄNSADE MOBILA SITER
MINDRE INNEHÅLL & LÄNKAR TILLBAKA TILL WEBBVERSIONEN
HELA HÄRLIGHETEN
EN
LITEN
DEL
EN LITEN
DEL
http://desktopwallpaper-s.com/19-Computers/-/Future/

29. MEN...
FOLK KLICKAR
‘WEBBVERSION’
LÄNKAR
& DET FINNS DET EN
ANLEDNING TILL
www.flickr.com/photos/demandaj/7287174776

30. EN ENHETLIG &
KONTINUERLIG
UPPLEVELSE OAVSETT ENHET
DENNA FÖRVÄNTNING & ÖNSKAN
www.flickr.com/photos/joachim_s_mueller/7110473339 KOMMER ENDAST BLI STARKARE

31. 3. EN NÄRMARE TITT PÅ...
SPECIFIKA
MOBILA SITER vs.
RESPONSIVE
DESIGN vs. APPAR
http://www.flickr.com/photos/young_einstein/74097753/

32. PRIMÄRA GRUNDER
FÖR EN SPECIFIK
MOBIL SITE
• BEHÖVS FÖR MÅLGRUPPEN
• TEKNISKA BEGRÄNSNINGAR MED CMS
www.flickr.com/photos/st3f4n/3476036180

33. BÄST ATT
UNDVIKA
OM DET GÅR
LÄTT ATT BRÄNNA
FINGRARNA
http://www.flickr.com/photos/edenandjosh/2892956576/

34. VAFFÖDÅDÅ?
” Today's popular devices are
not tomorrow's so building
something which works on any
device is better than building
something which works on
today's devices “
- KOMBINERAD VISDOM FRÅN @ONEXTRAPIXEL &
@TRENTWALTON
www.flickr.com/photos/lastquest/1472794031

35. ALTERNATIVET ÄR
RÖRIGT & KOSTSAMT
UNDERHÅLLNING AV OLIKA
VERSIONER
SVÅRT FÖR ANVÄNDARE ATT
HITTA DET DE SÖKER
www.flickr.com/photos/ericconstantineau/5618576278

36. BIBEHÅLL HUVUD-
INNEHÅLLET MEN
OPTIMERA FÖR MOBILA
ENHETER & TOUCH
GÄLLER PRESENTATION & ANVÄNDNING
AV ENHETENS INBYGGDA FUNKTIONALITET
www.flickr.com/photos/jmtimages/2883279193

37. OPTIMERAD SITE vs. EN APP?
ANVÄND WEBBANALYTICS SOM EN FÖRSTA GUIDE
•MEST DIREKT TRAFIK
POTENTIELLT ARUGUMENT FÖR EN APP
•MEST VIA DELADE LÄNKAR
EN APP RÄCKER INTE. MOBILOPTIMERAD SITE BEHÖVS.
•EN BIT AV BÅDA
TÄNK DÅ PÅ ATT....
www.flickr.com/photos/andwhynot/2946734025

38. GÖRA EN APP
ELLER INTE BEROR PÅ...
• SYFTET & VISION (ANVÄNDAR & FÖRETAGETS)
• OM TILLGÅNG TILL SPECIFIK ENHETSFUNKTIONALITET KRÄVS
• OM OFFLINE ANVÄNDNING ÄR ETT KRAV
• & SJÄLVKLART VILKEN BUDGET SOM FINNS
www.flickr.com/photos/aidanmorgan/2327622517

39. OLIKA TYPER
AV APPAR
DE TVÅ STÖRSTA ÄR
NATIVE (t ex. Instagram)
• DEN MEST OPTIMERADE ANVÄNDARUPPLEVELSEN
• TILLGÅNG TILL ENHETSFUNKTIONALITET & APIs
• MEN KRÄVER PLATFORMSSPECIFIK KODBAS
HYBRID (t ex Facebook)
• ANVÄNDER HTML5 & JAVASRIPT
• EN “WRAPPER” SOM GER TILLGÅNG TILL NATIVE FUNKTIONALITET
• FÄRRE VERSIONER ATT HÅLLA UPPDATERADE
• KAN VARA TIDSKRÄVANDE ATT SKAPA APPLIKNANDE FUNKTIONALITET
• MÅSTE HA APPLIKNANDE FUNKTIONALITET

40. ” Money spent developing a pretty but limited
iPhone app only benefits...the few, but money
spent on the website UI would have benefitted
everyone “
- Gary Marshall on ‘The app trap’ in .net Magaizine
www.flickr.com/photos/cristiano_betta/2909483129

41. 4. DET FINNS NÅGOT SOM
HETER...
RESPONSIVE
DESIGN
http://www.flickr.com/photos/paperpariah/4301471586/

42. “ Design & development should respond to
the user’s behaviour & environment based on
screen size, platform & orientation.
[It’s]...a mix of flexible grids & layouts, images
& an intelligent use of media queries. ”
- SMASHING MAGAZINE
www.flickr.com/photos/adactio/5818096043

43. GRID &
BREAK
POINTS
• ANVÄND SOM BAS
FÖR SIDLAYOUTS
• GUIDE FÖR
MODULSTORLEKAR &
VARIATIONER
• FIXED ELLER FLUID
• DEFINERAR HUR
INNEHÅLLET KOMMER
BETE SIG PÅ OLIKA
ENHETER
http://foundation.zurb.com/docs/layout.php

44. DEFINERA DIN CONTENT
STACKING STRATEGI
FÖR OLIKA ENHETER SAMT ORIENTERING
Smartphone
1
2 Header
“ Content needs to be
Logo
3
Nav
choreographed to Desktop & surfplattor
4
Bath
section
intro
5
Ad
ensure the intended 1
Logo
2
Header
message is preserved 4
Bath section intro
5
Ad
6
on any device and at
Types of baths
3
Nav
any width ” 6
Types of baths
7
Related 7
products Related products
- TRENT WALTON
8 Store
locator
9 Tools 8 Store
9 Tools
locator
10 10
Footer Footer

45. MOBILE FIRST VS. DESKTOP FIRST
• BÖRJA SMÅTT ELLER STORT
DET SOM FUNGERAR BÄST FÖR DIG
• FOKUS ÄR PÅ INNEHÅLLET, HUR DETTA PRIORITERAS SAMT
VISAS PÅ OLIKA ENHETER
www.flickr.com/photos/cedrouille/3312593086

46. WEBBEN ÄR
FYLLD MED
EXEMPEL
MEN VAR INTE RÄDD FÖR
ATT UTMANA ELLER KOMMA
UPP MED NÅGOT... BÄTTRE
http://mediaqueri.es/popular/

47. TÄNK PÅ NAVIGERING
OLIKA SÄTT ATT OPTIMERA SAMT FÖR- & NACKDELAR
www.flickr.com/photos/tim_norris/2789759648

48. LÄSTIPS
‘RESPONSIVE NAVIGATION PATTERNS’
av Brad Frost.
Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns

49. GLÖM INTE BORT EMAIL
20% ÖPPNAS PÅ MOBILTELEFONER
www.flickr.com/photos/awiederhoeft/3348255014

50. www.flickr.com/photos/dopey/123646856

51. 5. MEN VAD GÄLLER NÄR
MAN SKA GÖRA...
EN APP?
http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/

52. APPAR ÄR FOKUSERADE
& PERSONLIGA
” Small, downloadable chunks
of software, they give people
access to information in a
neatly packaged format “
- Apps on tap, The Economist Oct 8th 2011
www.flickr.com/photos/elwillo/5247084642

53. VARJE
PLATTFORM
ÄR ETT EGET
LITET
SAMHÄLLE
SPECIFIKA UI
GUIDELINES SOM
ANVÄNDARNA
ÄR VANA VID
www.flickr.com/photos/gadl/3570118243

54. INTE SÅ
ENKELT
SOM BARA
ANDROID
ELLER iOS
FRAGMENTERING
MELLAN VERSIONER &
BAKÅT-KOMPABILITET
SKA HÅLLAS I ÅTANKE
www.flickr.com/photos/nrkbeta/3906687294/in/photostream

55. FÖRDELNING AV AKTIVA
ANDROID ENHETER
Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1
www.flickr.com/photos/blakespot/4773693893

56. EXEMPEL PÅ ADOPTION AV iOS 5.1
Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1
www.flickr.com/photos/blakespot/4773693893

57. HUVUDSKILLNADERNA MELLAN
ATT DESIGNA FÖR ANDROID & iOS
ANDROID iOS
FRAGMENTERAD Design ENHETLIG
OLIKA MELLAN OLIKA VERSIONER & UI element & ENHETLIGHET MELLAN VERSIONER
ENHETER riktlinjer & ENHETER
LÅNGSAMMARE IMPLEMENTERING & Version adoption SNABB ADOPTION AV NYA
ADOPTION AV NYA VERSIONER VERSIONER
HANTERAS ANTINGEN MED SYSTEM Bakåt navigering BACK KNAPP
BACK (TIDIGARE VERSIONER) ELLER
BACK & UP KNAPPEN (SENASTE)
APP INSTÄLLNINGAR & INFORMATION Inställningar INSTÄLLNINGSMENY ELLER 'MORE'
FINNS I OPTIONS MENYN FÖR ATT FÅ TILLGÅNG TILL APP
etc. INSTÄLLNINGAR & INFORMATION
www.flickr.com/photos/nrkbeta/3906687294/in/photostream

58. iPHONE
RESURSER
VÄLDOKUMENTERADE
RIKTLINJER & INSPIRATION

59. ANDROID
RESURSER
MINDRE VÄLDOKUMENTERADE
RIKTLINJER & INSPIRATION FÖR
TIDIGARE VERSIONER

60. iPhone 12:15 PM More
iOS
Customise
APP NAME
IMG Item
NAVIGERING
IMG Item
IMG Item
IMG Item
KONSEKVENT MELLAN OLIKA IMG Item
VERSIONER Content area
IMG Item
IMG Item
NAVIGATION BAR IMG Item
Möjliggör navigering genom app IMG
hierarkin. Håller back knappen, titleln Home Item Item Item More
samt funktioner för att manipulera innehållet
Home Item Item Item More
BACK
Bör alltid ta användaren ett steg bakåt baserat
på var de kom from samt vara deskriptiv.
TAB BAR
Kan oftas anpassas. Håller huvudsektionerna av
appen
‘MORE’
Används till att ge tillgång till alla andra delar av
appen samt de sektioner som inte fick plats i
tab baren
Source: http://developer.android.com/design/patterns/new-4-0.html

61. ANDROID
NAVIGERING
OLIKA MELLAN OLIKA
VERSIONER. MED
ICE CREAM SANDWICH:
NAVIGATION BAR
För enheter som inte har hårdvara-
knappear Håller 'Back', 'Home'
och 'Recents'
ACTION BAR
Håller de viktigaste ‘action buttons’ för din app
(3 + overflow menu)
UP VS. BACK
‘Up’ tar användaren ett nivå upp i app
strukturhierarkin.
‘Back’ används för att gå ett steg bakåt till var
användaren kom ifrån
Source: http://developer.android.com/design/patterns/new-4-0.html

62. HUR GRIPER
MAN NU AN
DET HÄR?
JO, SOM ALLTID...
www.flickr.com/photos/jojoneil/6359536591

63. 6.ÖVNING GER
FÄRDIGHET
NÅGOT ATT SÄTTA TÄNDERNA I
http://www.flickr.com/photos/kalexanderson/6302660289/

64. SPECIFIK MOBIL SITE
vs RESPONSIVE vs
EN APP
BEGRUNDA FÖLJANDE FIKTIVA SITUATION ELLER
ANVÄND ETT EGET PROJECT:
Som en del av förberedelserna inför Eurovision Song
Contest i Malmö 2013 i överväger fiktiva Malmö Stad att
ÖVNING ETT skapa en specifik sektion av sin site fokuserad på Eurovision
Song Contest samt Öresundsregionen.
Vad rekommenderar du i förhållande till vad de borde satsa
på, framför allt med tanke på mobila enheter, samt varför?
10 MINUTER
www.flickr.com/photos/jojoneil/6359536591

65. DESIGNA EN
RESPONSIVE SITE
FIKTIVA MALMÖ STAD VILL INKLUDERA FÖLJANDE:
• Fakta om länderna • Kalender
• Anknytning till regionen • Social media feeds
• Reseplanerare • Restaurang guide
• Tips om vad som • Länkar till partner siter
händer i regionen (SVT, Eurovision Song Contest)
ÖVNING TVÅ DEL 1
Välj antingen smartphone eller desktop & gör en skiss på hur
hemsidan ska se ut & vad den ska innehålla, samt hur
innehållet ska prioriteras. Där du anser det relevant inkludera
referenser till där bilder ska finnas.
DEL 2
Med hjälp av content stacking methodologin definera hur
innehållet ska prioritieras & anpassas för desktop samt olika
mobila enheter.
www.flickr.com/photos/jojoneil/6359536591
15 MINUTER

66. DESIGNA EN APP
FIKTIVA MALMÖ STAD VILL DESSUTOM GÖRA EN APP.
BASERAT PÅ INNEHÅLLET AV SITEN & VAD DU
KÄNNER TILL OM ÖRESUNDSREGIONEN, VAD TYCKER
DU ATT MALMÖ STAD SKA INKLUDERA?
• Fakta om länderna • Kalender
• Anknytning till regionen • Social media feeds
• Reseplanerare • Restaurang guide
• Tips om vad som • Länkar till partner siter
händer i regionen (SVT, Eurovision Song Contest)
ÖVNING TRE DEL 1
Definera huvudsektionerna av appen
DEL 2
Hur skulle du strukturera dessa sektioner i din app, både vad
gäller iOS & Android. Fokusera på Tab bar elementen
respektive Action bar elementen på Android & vad du skulle
placera i ‘More’ respektive ‘Overflow’ menyn.
www.flickr.com/photos/jojoneil/6359536591 15 MINUTER

67. 7. FÖR ATT...
SUMMERA
http://www.flickr.com/photos/martinteschner/4569495912/

68. ANVÄNDNINGS-
& BETEENDE
MÖNSTER
FRAMTIDA ENHETER
Antalet olika enheter kommer endast
öka & vi vet inte vad som kommer
ANVÄNDS VARSOMHELST &
NÄRSOMHELST
Och inte endast när vi är ute men
alltmer när vi har dötid eller sitter i
soffan.
HUR VI ANVÄNDER DEM
Vad vi använder mobila enheter till blir
mer & mer detsamma som på
www.flickr.com/photos/thecaucas/2597813380 desktops

69. INVERKAN PÅ
UX & DESIGN
TÄNKANDE
EN ENHETLIG & KONTINUERLIG
UPPLEVELSE
Ju mer sofistikerade dessa enheter &
det vi desingar blir desto mer kommer
vi förvänta av de enheter vi använder.
BIBEHÅLL HUVUDINNEHÅLLET
MEN OPTIMERA
Tänk på begränsningarna med mobilt
men också på möjligheterna.
www.flickr.com/photos/thecaucas/2597813380

70. NÄR MAN SKA
GÖRA VAD
SPECIFIK MOBIL SITE
Försök att undvika det om det går
RESPONSIVE DESIGN
Den mest adaptiva & “framtidsäkra”
lösningen just nu. Använd om det går
men utmana hur innehållet
presenteras.
APP
Använd om offline eller enhetsspecifik
funktionalitet krävs. Basera besluten på
syfte, mål och statistik
www.flickr.com/photos/thecaucas/2597813380

71. FÖR
RESPONSIVE
DEFINERA DIN GRID &
BREAKPOINTS
Detta är ryggraden för responsive
design & hur innehållet kommer
visas på olika enheter.
GLÖM INTE BORT NAVIGERING
Tänk på för & nackdelar samt olika
metoder
TESTA & SAMARBETA
Detta är ny mark & vi lär allihop hur
bäst man löser de utmaningarna det
www.flickr.com/photos/thecaucas/2597813380 medför. Jobba tvärs över discipliner

72. FÖR APPAR
TA HÄNSYN TILL PLATFORMS-
SPECIFIKA RIKTLINJER
Håller du dig till dem blir din app
lättare att använda för din målgrupp
TÄNK PÅ BAKÅTKOMPABILITET
Bara för att en ny version är ute
innebär inte att alla har den. Se till
att du tar han om majoriteten av din
målgrupp
TA HJÄLP AV INTERNET
Till inspiration & lärdom men också
för vad som kan göras ännu bättre.
www.flickr.com/photos/thecaucas/2597813380

73. OCH KOM IHÅG ATT
DESIGNA FÖR MÅNGFALD...
www.flickr.com/photos/iscene/6713283751

74. ...INTE ENBART HANDLAR
OM DE SMÅ SKÄRMARNA
www.flickr.com/photos/jolives/2889944573/ UTAN OCKSÅ DE STORA

75. DET HANDLAR OM
ATT TÄNKA FRAMÅT
PLANERA 5 ÅR FRAMÅT I TIDEN & MED
“FUTURE PROOFING” I ÅTANKE
www.flickr.com/photos/jolives/2889944573/

76. UTMANA DET SOM
FINNS IDAG & VAR KREATIV
DET BEHÖVER INTE VARA DYRT & KOMPLICERAT
www.flickr.com/photos/oter/5090592214

77. TÄTARE & MER
GIVANDE SAMARBETE
MELLAN DISCIPLINER SAMT KUNDER
www.flickr.com/photos/stevendepolo/3378152784

78. HÅLL I ÅTANKE
“ We’re not just making pretty
interfaces. We’re actually in the process of
making an environment where we’ll spend
most of our time, for the rest of our lives.
We’re the designers.We’re the builders.
What do we want that environment to feel
like? What do we want to feel like. ”
- Wilson Minor
http://www.flickr.com/photos/funch/4679422945/

79. PLATFORM
RIKTLINJER
http://developer.apple.com/library/ios/
#DOCUMENTATION/UserExperience/
Conceptual/MobileHIG/
UIElementGuidelines/
UIElementGuidelines.html
http://mrgan.tumblr.com/post/
10492926111/labeling-the-back-button
http://developer.android.com/design/
index.html
www.flickr.com/photos/st3f4n/4387291247

80. PATTERN
LIBRARIES
http://pttrns.com/
http://mobile-patterns.com/
http://www.patternsofdesign.co.uk/
http://
www.mobiledesignpatterngallery.com/
mobile-patterns.php
http://www.androidpatterns.com/
http://androidpttrns.com/
www.flickr.com/photos/st3f4n/4387291247

81. RESPONSIVE
DESIGN
http://mediaqueri.es/popular/
http://www.alistapart.com/articles/responsive-
web-design/
http://designmodo.com/responsive-design-
examples/
http://jamus.co.uk/demos/rwd-
demonstrations/
http://bradfrostweb.com/blog/web/
responsive-nav-patterns/
http://www.gridsetapp.com/
http://grid.mindplay.dk
http://goldengridsystem.com/
http://foundation.zurb.com/docs/layout.php www.flickr.com/photos/st3f4n/4387291247

82. TACK!
FRÅGOR?
annadahlstrom
annadahlstrom
www.annadahlstrom.com