Bouvet - Design för mobilt mångfald

1,076
-1

Published on

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

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,076
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bouvet - Design för mobilt mångfald

  1. 1. Design för mobil mångfald Anna Dahlström co-founder byflockBouvet Syd, Malmö 30:e augusti 2012 www.annadahlstrom.com annadahlstrom
  2. 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äckshusenPhoto curtesy of my sister
  3. 3. MOBIL ENHET: ett föremål gjort för ett specifikt ändamål eller syfte & som kan kopplas upp på nätethttp://desktopwallpaper-s.com/19-Computers/-/Future/
  4. 4. FOKUS FÖR IDAG SMARTPHONES | DESKTOP ( SURFPLATTOR) - iOS & ANDROIDhttp://desktopwallpaper-s.com/19-Computers/-/Future/
  5. 5. AGENDA1. FÖRSTÅELSE FÖR ANVÄNDNINGS-& BETEENDEMÖNSTER AV MOBILAENHETER2. RIKTLINJER FÖR VAL AV MOBIL SITEvs. RESPONSIVE SITE vs. EN APP3. TITTA NÄRMARE PÅ RESPONSIVEDESIGN4.UX PRINCIPER FÖR APPAR & OLIKAPLATFORMARwww.flickr.com/photos/marfis75/2939337382
  6. 6. FÖRST UT... ANVÄNDNINGS & BETEENDE- MÖNSTERwww.flickr.com/photos/publicenergy/1846375599
  7. 7. 29 JUNI 2007 DEN FÖRSTA iPHONENwww.flickr.com/photos/lori_greig/2202727502
  8. 8. 03 APRIL 2010 DEN FÖRSTA iPADENwww.flickr.com/photos/scobleizer/4317207778
  9. 9. År 2011 använde mer än en tredjedel avjordens 7 miljarder invånare internet.En ökning med 17% sedan 2010.* * Source: www.itu.int/ITU-D/ict/facts/2011/index.htmllwww.flickr.com/photos/jamescridland/613445810
  10. 10. Vid slutet av 2012 kommer antalet internet-uppkopplade mobila enheter att överträffaantalet personer på jorden & år 2016kommer 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.htmlwww.flickr.com/photos/nasamarshall/6289116940
  11. 11. Den genomsnittlige svensken använderinternet 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-dagenlwww.flickr.com/photos/jsolomon/612237912
  12. 12. Hälften av alla treåringar i Sverigeanvänder internet.** Source; www.iis.se/docs/SOI2011-en.pdfwww.flickr.com/photos/tocaboca/5523596357
  13. 13. I genomsnitt tittar vi på vår telefon150 gånger om dagen.* * Source: www.textually.org/textually/archives/2012/02/030229.htmwww.flickr.com/photos/jorgeq82/4732700819
  14. 14. 40% erkänner att de använder sintelefon på toaletten * Source: http://www.lukew.com/ff/entry.asp?1500www.flickr.com/photos/exlibris/2552107635
  15. 15. MOBILA ENHETER ANVÄNDS ÖVERALLT & NÄRSOMHELST ” The best computer is the one you have with you when you want something done. “ - JACOB NIELSENwww.flickr.com/photos/yahnyahn/2996454839
  16. 16. 20% av alla emails öppnaspå mobila enheter.** Source: www.campaignmonitor.com/guides/mobilewww.flickr.com/photos/25228175@N08/5127055942
  17. 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. 18. POCKETS STATISTIK FÖR DESKTOP Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-readwww.flickr.com/photos/brandoncwarren/4236278556
  19. 19. POCKETS STATISTIK FÖR iPHONE Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-readwww.flickr.com/photos/brandoncwarren/4236278556
  20. 20. POCKETS STATISTIK FÖR iPAD Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-readwww.flickr.com/photos/brandoncwarren/4236278556
  21. 21. HÖGSTA TOPPARNA•När vi går upp•På väg eller just kommit till jobbet•På väg hem•Efter kvällsmatenSource: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
  22. 22. “ MOBILA ANVÄNDARE HAR BRÅTTOM & ÄR ALLTID PÅ VÄG ” INTE SANT. DETTA ÄR EN MYTwww.flickr.com/photos/yahnyahn/2996453841/in/photostream
  23. 23. EN STOR DEL AV ANVÄNDANDET SKER NÄR VI HAR TID ATT DÖDA VÄNTAR, RESER, SOFTARwww.flickr.com/photos/s8an/7303973840
  24. 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 ÖKAwww.flickr.com/photos/edduddiee/4307943164
  25. 25. 3 köp görs varje sekund genom eBays mobila lösningar Source: www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goodswww.flickr.com/photos/stuckincustoms/440157748
  26. 26. 2. DETTA HAR... BETYDELSE FÖR UX & DESIGNhttp://www.flickr.com/photos/eyesore9/3206408088/
  27. 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. 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 DELhttp://desktopwallpaper-s.com/19-Computers/-/Future/
  29. 29. MEN... FOLK KLICKAR ‘WEBBVERSION’ LÄNKAR & DET FINNS DET EN ANLEDNING TILLwww.flickr.com/photos/demandaj/7287174776
  30. 30. EN ENHETLIG & KONTINUERLIG UPPLEVELSE OAVSETT ENHET DENNA FÖRVÄNTNING & ÖNSKANwww.flickr.com/photos/joachim_s_mueller/7110473339 KOMMER ENDAST BLI STARKARE
  31. 31. 3. EN NÄRMARE TITT PÅ... SPECIFIKA MOBILA SITER vs. RESPONSIVE DESIGN vs. APPARhttp://www.flickr.com/photos/young_einstein/74097753/
  32. 32. PRIMÄRA GRUNDER FÖR EN SPECIFIK MOBIL SITE • BEHÖVS FÖR MÅLGRUPPEN • TEKNISKA BEGRÄNSNINGAR MED CMSwww.flickr.com/photos/st3f4n/3476036180
  33. 33. BÄST ATT UNDVIKA OM DET GÅR LÄTT ATT BRÄNNA FINGRARNAhttp://www.flickr.com/photos/edenandjosh/2892956576/
  34. 34. VAFFÖDÅDÅ? ” Todays popular devices are not tomorrows so building something which works on any device is better than building something which works on todays devices “ - KOMBINERAD VISDOM FRÅN @ONEXTRAPIXEL & @TRENTWALTONwww.flickr.com/photos/lastquest/1472794031
  35. 35. ALTERNATIVET ÄR RÖRIGT & KOSTSAMT UNDERHÅLLNING AV OLIKA VERSIONER SVÅRT FÖR ANVÄNDARE ATT HITTA DET DE SÖKERwww.flickr.com/photos/ericconstantineau/5618576278
  36. 36. BIBEHÅLL HUVUD-INNEHÅLLET MENOPTIMERA FÖR MOBILAENHETER & TOUCHGÄLLER PRESENTATION & ANVÄNDNINGAV ENHETENS INBYGGDA FUNKTIONALITETwww.flickr.com/photos/jmtimages/2883279193
  37. 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. 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 FINNSwww.flickr.com/photos/aidanmorgan/2327622517
  39. 39. OLIKA TYPERAV APPARDE TVÅ STÖRSTA ÄRNATIVE (t ex. Instagram)• DEN MEST OPTIMERADE ANVÄNDARUPPLEVELSEN• TILLGÅNG TILL ENHETSFUNKTIONALITET & APIs• MEN KRÄVER PLATFORMSSPECIFIK KODBASHYBRID (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. 40. ” Money spent developing a pretty but limitediPhone app only benefits...the few, but moneyspent on the website UI would have benefittedeveryone “- Gary Marshall on ‘The app trap’ in .net Magaizinewww.flickr.com/photos/cristiano_betta/2909483129
  41. 41. 4. DET FINNS NÅGOT SOM HETER... RESPONSIVE DESIGNhttp://www.flickr.com/photos/paperpariah/4301471586/
  42. 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 MAGAZINEwww.flickr.com/photos/adactio/5818096043
  43. 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 ENHETERhttp://foundation.zurb.com/docs/layout.php
  44. 44. DEFINERA DIN CONTENTSTACKING STRATEGIFÖR OLIKA ENHETER SAMT ORIENTERING Smartphone 1 2 Header“ Content needs to be Logo 3 Navchoreographed to Desktop & surfplattor 4 Bath section intro 5 Adensure the intended 1 Logo 2 Headermessage is preserved 4 Bath section intro 5 Ad 6on any device and at Types of baths 3 Navany 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. 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 ENHETERwww.flickr.com/photos/cedrouille/3312593086
  46. 46. WEBBEN ÄR FYLLD MED EXEMPEL MEN VAR INTE RÄDD FÖR ATT UTMANA ELLER KOMMA UPP MED NÅGOT... BÄTTREhttp://mediaqueri.es/popular/
  47. 47. TÄNK PÅ NAVIGERING OLIKA SÄTT ATT OPTIMERA SAMT FÖR- & NACKDELARwww.flickr.com/photos/tim_norris/2789759648
  48. 48. LÄSTIPS‘RESPONSIVE NAVIGATION PATTERNS’av Brad Frost.Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
  49. 49. GLÖM INTE BORT EMAIL 20% ÖPPNAS PÅ MOBILTELEFONERwww.flickr.com/photos/awiederhoeft/3348255014
  50. 50. www.flickr.com/photos/dopey/123646856
  51. 51. 5. MEN VAD GÄLLER NÄR MAN SKA GÖRA... EN APP?http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
  52. 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 2011www.flickr.com/photos/elwillo/5247084642
  53. 53. VARJE PLATTFORM ÄR ETT EGET LITET SAMHÄLLE SPECIFIKA UI GUIDELINES SOM ANVÄNDARNA ÄR VANA VIDwww.flickr.com/photos/gadl/3570118243
  54. 54. INTE SÅ ENKELT SOM BARA ANDROID ELLER iOS FRAGMENTERING MELLAN VERSIONER & BAKÅT-KOMPABILITET SKA HÅLLAS I ÅTANKEwww.flickr.com/photos/nrkbeta/3906687294/in/photostream
  55. 55. FÖRDELNING AV AKTIVA ANDROID ENHETER Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1www.flickr.com/photos/blakespot/4773693893
  56. 56. EXEMPEL PÅ ADOPTION AV iOS 5.1 Source: http://forums.macrumors.com/showthread.php?t=1347559&forceMobile=1www.flickr.com/photos/blakespot/4773693893
  57. 57. HUVUDSKILLNADERNA MELLANATT DESIGNA FÖR ANDROID & iOSANDROID iOSFRAGMENTERAD Design ENHETLIGOLIKA MELLAN OLIKA VERSIONER & UI element & ENHETLIGHET MELLAN VERSIONERENHETER riktlinjer & ENHETERLÅNGSAMMARE IMPLEMENTERING & Version adoption SNABB ADOPTION AV NYAADOPTION AV NYA VERSIONER VERSIONERHANTERAS ANTINGEN MED SYSTEM Bakåt navigering BACK KNAPPBACK (TIDIGARE VERSIONER) ELLERBACK & UP KNAPPEN (SENASTE)APP INSTÄLLNINGAR & INFORMATION Inställningar INSTÄLLNINGSMENY ELLER MOREFINNS I OPTIONS MENYN FÖR ATT FÅ TILLGÅNG TILL APP etc. INSTÄLLNINGAR & INFORMATIONwww.flickr.com/photos/nrkbeta/3906687294/in/photostream
  58. 58. iPHONERESURSERVÄLDOKUMENTERADERIKTLINJER & INSPIRATION
  59. 59. ANDROIDRESURSERMINDRE VÄLDOKUMENTERADERIKTLINJER & INSPIRATION FÖRTIDIGARE VERSIONER
  60. 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 barenSource: http://developer.android.com/design/patterns/new-4-0.html
  61. 61. ANDROIDNAVIGERINGOLIKA MELLAN OLIKAVERSIONER. MEDICE CREAM SANDWICH:NAVIGATION BARFör enheter som inte har hårdvara-knappear Håller Back, Homeoch RecentsACTION BARHåller de viktigaste ‘action buttons’ för din app(3 + overflow menu)UP VS. BACK‘Up’ tar användaren ett nivå upp i appstrukturhierarkin.‘Back’ används för att gå ett steg bakåt till varanvändaren kom ifrånSource: http://developer.android.com/design/patterns/new-4-0.html
  62. 62. HUR GRIPER MAN NU AN DET HÄR? JO, SOM ALLTID...www.flickr.com/photos/jojoneil/6359536591
  63. 63. 6.ÖVNING GER FÄRDIGHET NÅGOT ATT SÄTTA TÄNDERNA Ihttp://www.flickr.com/photos/kalexanderson/6302660289/
  64. 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 MINUTERwww.flickr.com/photos/jojoneil/6359536591
  65. 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. 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. 67. 7. FÖR ATT... SUMMERAhttp://www.flickr.com/photos/martinteschner/4569495912/
  68. 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. 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. 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 statistikwww.flickr.com/photos/thecaucas/2597813380
  71. 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 detwww.flickr.com/photos/thecaucas/2597813380 medför. Jobba tvärs över discipliner
  72. 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. 73. OCH KOM IHÅG ATT DESIGNA FÖR MÅNGFALD...www.flickr.com/photos/iscene/6713283751
  74. 74. ...INTE ENBART HANDLAR OM DE SMÅ SKÄRMARNAwww.flickr.com/photos/jolives/2889944573/ UTAN OCKSÅ DE STORA
  75. 75. DET HANDLAR OM ATT TÄNKA FRAMÅT PLANERA 5 ÅR FRAMÅT I TIDEN & MED “FUTURE PROOFING” I ÅTANKEwww.flickr.com/photos/jolives/2889944573/
  76. 76. UTMANA DET SOMFINNS IDAG & VAR KREATIVDET BEHÖVER INTE VARA DYRT & KOMPLICERATwww.flickr.com/photos/oter/5090592214
  77. 77. TÄTARE & MER GIVANDE SAMARBETE MELLAN DISCIPLINER SAMT KUNDERwww.flickr.com/photos/stevendepolo/3378152784
  78. 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 Minorhttp://www.flickr.com/photos/funch/4679422945/
  79. 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.htmlwww.flickr.com/photos/st3f4n/4387291247
  80. 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. 81. RESPONSIVEDESIGNhttp://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.dkhttp://goldengridsystem.com/http://foundation.zurb.com/docs/layout.php www.flickr.com/photos/st3f4n/4387291247
  82. 82. TACK! FRÅGOR? annadahlstrom annadahlstromwww.annadahlstrom.com

×