Download as PDF, PPTX
![www.flickr.com/photos/adactio/5818096043
“ 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](https://image.slidesharecdn.com/gadesigningformultipledevices07oct2013-131008094847-phpapp02/75/Fundamentals-of-Designing-for-Multiple-Devices-GA-New-York-07-Oct-2013-40-2048.jpg)
![www.flickr.com/photos/adactio/5818096043
“ 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](https://crownmelresort.com/image.slidesharecdn.com/gadesigningformultipledevices07oct2013-131008094847-phpapp02/75/Fundamentals-of-Designing-for-Multiple-Devices-GA-New-York-07-Oct-2013-40-2048.jpg)
Uploaded byAnna Dahlström
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
The document discusses the evolution of device usage patterns, focusing on the growing prominence of mobile devices in internet traffic and user behavior. It contrasts bespoke mobile sites, responsive design, and apps, emphasizing the need for a consistent user experience across platforms and devices. Additionally, it covers best practices for mobile strategy, including considerations for content optimization and user interaction.
More Related Content
Similar to Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
![Responsive Design & Beyond [Code & Creativity Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codecreativityworkshop1-140506164731-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Fundamentals of Designing for Multiple Devices - GA, New York, 07 Oct 2013
- 1. Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom NewYork,October 7 2013 DESIGNING FOR MULTIPLE DEVICES
- 2. www.flickr.com/photos/dahlstroms/4411448782/ I’m Anna IA &UX DESIGNER | FREELANCE SINCE 2011 SWEDISH | IN LONDON SINCE 2006 This is the bridge between Sweden & Denmark
- 3. AGENDA 1. DEVICE USAGE& PATTERNS 2. IMPLICATIONS FOR UX & DESIGNTHINKING 3. BESPOKE MOBILE SITE vs. RESPONSIVE vs.AN APP 4. RESPONSIVE 5. APPS 6. PRACTICE 7. SUMMARY 8. Q & A
- 4.
- 5. http://desktopwallpaper-s.com/19-Computers/-/Future/ DEVICE: a thingdefined for a specific purpose or task & which can connect to the internet
- 6. http://desktopwallpaper-s.com/19-Computers/-/Future/ THE FOCUS OFTODAY SMARTPHONES| DESKTOP (TABLETS) - iOS & ANDROID
- 7. www.flickr.com/photos/hlkljgk/5764422581 For every humanthat enters the world, five mobile devices are created* * Source: http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx
- 8. www.flickr.com/photos/nasamarshall/6289116940 In 2009 1%of global internet traffic came from mobiles. By the end of 2012 it had risen to13% and by 2015 it’s expected to be above 50%.* * Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile
- 9. www.flickr.com/photos/jayfresh/3388253576/ 41% of emailsare now opened on mobile devices * * Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices
- 10. www.flickr.com/photos/jorgeq82/4732700819 The average personlooks at their phone 150 times a day.* * Source: www.textually.org/textually/archives/2012/02/030229.htm
- 11. www.flickr.com/photos/exlibris/2552107635 40% of peopleuse their phone in the bathroom* * Source: http://www.lukew.com/ff/entry.asp?1500
- 12. www.flickr.com/photos/yahnyahn/2996454839 ” The bestcomputer is the one you have with you when you want something done. “ - JACOB NIELSEN MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE
- 13. USAGE PATTERNS ACROSS DEVICES www.flickr.com/photos/brandoncwarren/4236278556 “...asdevices become more mobile, it’s not only changing where we read, but when. ” - POCKET (formerly Read it Later)
- 14. www.flickr.com/photos/brandoncwarren/4236278556 POCKET’S STATS - DESKTOP Source:http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
- 15. www.flickr.com/photos/brandoncwarren/4236278556 POCKET’S STATS - iPHONE Source:http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
- 16. www.flickr.com/photos/brandoncwarren/4236278556 POCKET’S STATS - iPAD Source:http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read
- 17. PEAKTIMES Source: http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read •When weget up •On our way to/ just arrived at work •Commuting home •Post dinner
- 18. www.flickr.com/photos/chicitoloco/8468592748/in/photostream/ “MOBILE USERS ARE RUSHED& ONTHE GO” THIS IS A MYTH
- 19. http://www.flickr.com/photos/hanhutton/320464105/ A LARGE PROPORTIONOF USAGE HAPPENS WHEN WE HAVETIMETO KILL COMMUTING,WAITING BUT ALSO AT HOME
- 20. www.flickr.com/photos/edduddiee/4307943164 THE SAMETASKS ARE CARRIEDOUT ON SMARTPHONES AS ON DESKTOPS AS DEVICES & EXPERIENCE BECOME MORE OPTIMISED USAGE &TASK EXECUTION IS INCREASING
- 21. 2.THIS HAS... IMPLICATIONS FOR UX& DESIGN http://www.flickr.com/photos/eyesore9/3206408088/
- 22. www.flickr.com/photos/frantaylor/4296536332 LIMITED DEVICE CAPABILITIES USEDTOMEAN LIMITEDTASKS E.G. FOCUS ON SEARCH | OPENING HOURS | REVIEWS | MENU
- 23. http://desktopwallpaper-s.com/19-Computers/-/Future/ RESULTED IN MOBILE SPECIFICWEBSITES LESS CONTENT & LINKS BACKTOTHE FULL DESKTOPVERSION DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE
- 24. www.flickr.com/photos/demandaj/7287174776 PEOPLE ARE CLICKINGTHE ‘FULLDESKTOPVERSION’ LINK THERE IS A REASON FORTHAT
- 25. www.flickr.com/photos/joachim_s_mueller/7110473339 AN EQUAL & CONTINUOS EXPERIENCE ACROSSDEVICES THIS EXPECTATION WILL ONLY GROW STRONGER
- 26. http://www.flickr.com/photos/young_einstein/74097753/ 3.A CLOSER LOOKAT... BESPOKE MOBILE SITES vs. RESPONSIVE SITES vs.APPS
- 27. http://desktopwallpaper-s.com/19-Computers/-/Future/ BESPOKE MOBILE SITES HAVESEPARATE URLS USUALLY LESS CONTENT & A LINK BACKTO THE FULL DESKTOPVERSION DESKTOP FULL WEBSITE BESPOKE CUT DOWN WEBSITE BESPOKE CUT DOWN WEBSITE
- 28. http://desktopwallpaper-s.com/19-Computers/-/Future/ FULL WEBSITE FULL WEBSITE FULL WEBSITE RESPONSIVE SITES HAVETHESAME URLS IT’S BASICALLY “ONE SITE”
- 29. www.flickr.com/photos/st3f4n/3476036180 PRIMARY REASONS FOR ABESPOKE MOBILE SITE •TECHNICAL LIMITATIONSTO CMS • REQUIRED FORTHE AUDIENCE
- 30. www.flickr.com/photos/mkhmarketing/8468995025 Roughly 1 in10 people that access Facebook each month do so from a feature phone* * Source: www.thenextweb.com/facebook/2013/07/22/facebooks-every-phone-app-for-feature-phones-passes-100-million-monthly-active-users
- 31. http://www.flickr.com/photos/edenandjosh/2892956576/ BEST AVOIDED IF POSSIBLE ITCAN CAUSE ALL SORTS OF PROBLEMS
- 32. www.flickr.com/photos/lastquest/1472794031 BUT WHY? ” Today'spopular devices are not tomorrow's so building something which works on any device is better than building something which works on today's devices “ - COMBINED WISE WORDS FROM @ONEXTRAPIXEL & @TRENTWALTON
- 33. www.flickr.com/photos/ericconstantineau/5618576278 THE ALTERNATIVE IS MESSY& COSTLY MAINTAINING DIFFERENTVERSIONS USERS HAVING PROBLEMS FINDING WHATTHEY ARE AFTER (E.G. IN SEARCH)
- 34. www.flickr.com/photos/jmtimages/2883279193 CORE CONTENT SHOULD REMAINTHESAME BUTTHE EXPERIENCE SHOULD BE OPTIMISED BOTH IN DISPLAY OF CONTENT, REGARDING USING DEVICE CAPABILITIES & FORTOUCH INTERACTIONS
- 35. www.flickr.com/photos/andwhynot/2946734025 MOSTLY DIRECT TRAFFIC POSSIBLEARGUMENT FOR APP MOSTLYVIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER.... MOBILE OPTIMISED SITE, & APP? USE ANALYTICS FOR GUIDANCE
- 36. www.flickr.com/photos/31878512@N06/4704140020 WHETHERTO DO ANAPP OR NOT COMES DOWNTO... •THE OBJECTIVE (USER & BUSINESS) • IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE • IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGET
- 37. DIFFERENT TYPES OF APPS THEMAINTWOTYPES NATIVE APPS (e.g. Instagram) • MOST OPTIMISED USER EXPERIENCE • ACCESSTO DEVICE CAPABILITIES & APIs • BUT REQUIRES PLATFORM SPECIFIC CODE BASE HYBRID (e.g. old Facebook) • USE OF HTML5 & JAVASRIPT •WRAPPERTO PROVIDE NATIVE CAPABILITIES • FEWER “VERSIONS” TO MAINTAIN • BUT CAN BETIME CONSUMINGTO CREATE APP LIKE INTERACTIONS • CAN'T JUST BE WRAPPED. MUST HAVE APP LIKE FUNCTIONALITIES
- 38. www.flickr.com/photos/cristiano_betta/2909483129 ” Money spentdeveloping 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
- 39.
- 40. www.flickr.com/photos/adactio/5818096043 “ 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
- 41. http://foundation.zurb.com/docs/layout.php DEFINE YOUR GRID & BREAK POINTS •USE ASTHE BASIS OF YOUR PAGE LAYOUTS • CHECKPOINT FOR MODULE SIZES & VARIANTS • FIXED OR FLUID COLUMNS • DEFINES HOW CONTENT WILL BEHAVE ACROSS DEVICES
- 42. “ Content needsto be choreographed to ensure the intended message is preserved on any device and at any width ” -TRENT WALTON www.flickr.com/photos/theaftershock/2811382400/
- 43. DEFINE YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION 3 Nav 7 Relatedproducts 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad Desktop &Tablet Mobile
- 44. MOBILEVS. DESKTOP FIRST •STARTLARGE OR SMALL WHAT EVER WORKS BEST FORYOU •ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
- 45. www.flickr.com/photos/stephangeyer/ CONSIDERTHE MOBILE CONTEXT THE USECASE MAY BE THE SAME BUT USING A MOBILE DEVICE IS DIFFERENT
- 46. LIKE PLAYING REALLIFETETRIS PRE-DEFINED POCKETS FORTHE CONTENTTO SLOT INTO www.flickr.com/photos/fritzon/195008860
- 47. www.flickr.com/photos/adactio/6153481666 80% of trafficin your analytics will often come from 20% of devices…seems a shame not to ensure that the site looks and works especially well on these devices.* * Source: www.slideshare.net/yiibu/pragmatic-responsive-design
- 48. THE WEB IS FULLOF EXAMPLES LOOK FOR INSPIRATION & BEST PRACTICE BUT DON’T BE AFRAIDTO CHALLENGE OR COME UP WITH SOMETHING... BETTER. http://mediaqueri.es/popular/
- 49. www.flickr.com/photos/tim_norris/2789759648 CONSIDERYOUR NAVIGATION DIFFERENT WAYSOF OPTIMISING WITH DIFFERENT PROS & CONS
- 50. EXCELLENT READ ‘RESPONSIVE NAVIGATIONPATTERNS’ by Brad Frost.* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
- 51. www.flickr.com/photos/melodramababs/2766765248/ “ Mobile navigationshould be like a good friend: there when you need them but cool enough to give you your space.” * * Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
- 52.
- 53.
- 54. www.flickr.com/photos/elwillo/5247084642 ” Small, downloadablechunks of software, they give people access to information in a neatly packaged format “ - Apps on tap,The Economist Oct 8th 2011 APPS ARE FOCUSED & PERSONAL
- 55. www.flickr.com/photos/gadl/3570118243 EVERY PLATFORM IS ITSOWN LITTLE WORLD WITHTHEIR OWN UI GUIDELINESTHAT USERS ARE USEDTO
- 56. www.flickr.com/photos/nrkbeta/3906687294/in/photostream NOT AS EASY ASJUST ANDROID OR iOS FRAGMENTATION ACROSS DIFFERENTVERSIONS & BACKWARDS COMPATIBILITY SHOULD BE CONSIDERED
- 57. RELATIVE NUMBER OF ACTIVEANDROID DEVICES Source: http://developer.android.com/about/dashboards/index.html www.flickr.com/photos/blakespot/4773693893
- 58. EXAMPLE OF ADOPTION OFNEW iOSVERSION Source: www.fiksu.com/iOS-7-iPhone-5s-5c-Usage-Tracker www.flickr.com/photos/blakespot/4773693893
- 59. KEY DIFFERENCES BETWEEN DESIGNINGFOR ANDROID & iOS iOS CONSISTENCY CONSISTENCY BETWEEN VERSIONS & HANDSETS QUICK ADOPTION OF NEW VERSIONS BACK BUTTON SETTINGS BUTTON OR 'MORE'TO ACCESS APP WIDE SETTINGS & INFORMATION ANDROID FRAGMENTATION DIFFERENT FOR DIFFERENTVERSIONS & HANDSETS SLOWER IMPLEMENTATION & UPTAKE OF NEWERVERSIONS HANDLED WITH EITHER SYSTEM BACK BUTTON (EARLIERVERSIONS) OR BACK & UP BUTTONS (LATESTVERSION) OPTIONS MENU USEDTO HOUSE APP WIDE SETTINGS & INFORMATION Design UI elements & principles Version adoption Back navigation Settings etc. www.flickr.com/photos/nrkbeta/3906687294/in/photostream
- 60. iPHONE RESOURCES HELP & INSPIRATION WELLDOCUMENTED
- 61. ANDROID RESOURCES HELP & INSPIRATIONA LITTLE LESS WELL DOCUMENTED FOR EARLIERVERSIONS
- 62. BASIC iOS NAVIGATION CONSISTENT ACROSS VERSIONS NAVIGATIONBAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen. BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar. Source: http://developer.android.com/design/patterns/new-4-0.html
- 63. Source: http://developer.android.com/design/patterns/new-4-0.html ANDROID NAVIGATION DIFFERENT BETWEEN VERSIONS: NAVIGATIONBAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents' ACTION BAR Holds the most important action buttons for your app (3 + overflow menu) UPVS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site. Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
- 64.
- 65. START BY SKETCHING YOUR SCREENFLOWS, NAVIGATION & CONTENT www.flickr.com/photos/saucef/7184615025
- 66.
- 67. www.flickr.com/photos/jojoneil/6359536591 BESPOKE MOBILE SITE vsRESPONSIVE vs AN APP CONSIDERTHE FOLLOWING: The city of NewYork has asked you to come up with a site that collates everything about Christmas in NYC. The aim is to raise awareness of events that are taking place and to drive sales on the high street through promoting offers from participating stores the month leading up to Christmas. What do you recommend in terms of their mobile strategy and why? I.e. an app, responsive or bespoke mobile site, or a combination? 10 MINUTES EXERCISE ONE
- 68. www.flickr.com/photos/andwhynot/2946734025 MOSTLY DIRECT TRAFFIC POSSIBLEARGUMENT FOR APP MOSTLYVIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT A BIT OF BOTH THEN CONSIDER.... MOBILE OPTIMISED SITE, & APP? USE ANALYTICS FOR GUIDANCE
- 69. www.flickr.com/photos/31878512@N06/4704140020 WHETHERTO DO ANAPP OR NOT COMES DOWNTO •THE OBJECTIVE (USER & BUSINESS) • IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE • IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGET
- 70. www.flickr.com/photos/jojoneil/6359536591 EXERCISE ONE BESPOKE MOBILE SITEvs RESPONSIVE vs AN APP CONSIDERTHE FOLLOWING: The city of NewYork has asked you to come up with a site that collates everything about Christmas in NYC. The aim is to raise awareness of events that are taking place and to drive sales on the high street through promoting offers from participating stores the month leading up to Christmas. What do you recommend in terms of their mobile strategy and why? I.e. an app, responsive or bespoke mobile site, or a combination? 10 MINUTES HOW WOULD MOST PEOPLE ACCESS IT? •MOSTLY DIRECT TRAFFIC POSSIBLE ARGUMENT FOR APP •MOSTLYVIA SHARED LINKS MOBILE WEB PRESENCE NEEDED. AN APP ALONE WON’T CUT IT ALSO CONSIDER... •THE OBJECTIVE (USER & BUSINESS) •IFTHERE ARE SPECIFIC DEVICE CAPABILITIESYOU WANTTO UTILISE •IF OFFLINE READING/USAGE IS REQUIRED • & OF COURSE BUDGET
- 71. www.flickr.com/photos/jojoneil/6359536591 BUILDING A RESPONSIVE SITE FORTHE CHRISTMAS SITE THE CLIENT WANTS TO INCLUDE THE FOLLOWING: •About page • Event calendar • Christmas focused map • List of highstreet offers PART 1 Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. PART 2 Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES EXERCISETWO • Search • Most popular • Login & registration • Share functionality
- 72. DEFINEYOUR CONTENT STACKING STRATEGY ACROSSDEVICES & ORIENTATION 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad Desktop &Tablet Mobile “ Content needs to be choreographed to ensure the intended message is preserved on any device and at any width ” -TRENT WALTON
- 73. www.flickr.com/photos/jojoneil/6359536591 EXERCISETWO BUILDING A RESPONSIVE SITE FORTHE CHRISTMAS SITE THE CLIENT WANTS TO INCLUDE THE FOLLOWING: •About page • Event calendar • Christmas focused map • List of highstreet offers PART 1 Pick either mobile or desktop & do a rough sketch of what the home page should contain & how the content should be prioritised. PART 2 Using content stacking methodology define how the content should be prioritised on desktop & mobile. 15 MINUTES 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 3 Nav 7 Related products 2 Header 4 Bath section intro 6 Types of baths 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad Desktop &Tablet Mobile • Search • Most popular • Login & registration • Share functionality
- 74. www.flickr.com/photos/jojoneil/6359536591 BUILDING AN APP BASEDON THE CONTENT & FUNCTIONALITY REQUIREMENTS, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP: •About page • Event calendar • Christmas focused map • List of highstreet offers PART 1 Define the main sections your app would have. PART 2 Looking at the navigation how would you structure this if you were to do an iOS app & an Android app? Focus on the Tab bar items respectively Action bar items & what would go in the ‘More’ respectively ‘Overflow menu’. 10 MINUTES EXERCISETHREE • Search • Most popular • Login & registration • Share functionality
- 75. BASIC iOS NAVIGATION CONSISTENT ACROSS VERSIONS NAVIGATIONBAR Enables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen. BACK BUTTON Should always take the user one step back from where they came from & be descriptive. TAB BAR Can often be customised. Holds the main sections of the app. ‘MORE’ TAB BAR ITEM Used to hold & provide access to all other sections of the app that don’t fit in the tab bar. Source: http://developer.android.com/design/patterns/new-4-0.html
- 76. Source: http://developer.android.com/design/patterns/new-4-0.html ANDROID NAVIGATION DIFFERENT BETWEEN VERSIONS.IN ICE CREAM SANDWICH: NAVIGATION BAR For devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents' ACTION BAR Holds the most important action buttons for your app (3 + overflow menu) UPVS. BACK BUTTON The Up button is used to navigate up one level based on the hierarchical structure of the site. Back is used to navigate back one step from where you came from & as such works in reverse chronological order.
- 77. www.flickr.com/photos/jojoneil/6359536591 EXERCISETHREE BUILDING AN APP BASEDON THE CONTENT & FUNCTIONALITY REQUIREMENTS, CONSIDER WHAT WOULD BE SUITABLE FOR AN APP: •About page • Event calendar • Christmas focused map • List of highstreet offers PART 1 Define the main sections your app would have. PART 2 Looking at the navigation how would you structure this if you were to do an iOS app & an Android app? Focus on the Tab bar items respectively Action bar items & what would go in the ‘More’ respectively ‘Overflow menu’. 10 MINUTES • Search • Most popular • Login & registration • Share functionality
- 78.
- 79. www.flickr.com/photos/thecaucas/2597813380 DEVICE USAGE & PATTERNS FUTUREDEVICES The number of different devices will only grow & we don’t know what’s coming. USED EVERYWHERE & ANYWHERE And we’re not only using them on the go but increasingly when we have some downtime including the sofa. USE OF MOBILE DEVICES Our use of mobile devices is increasingly replicating that of desktop.
- 80. IMPLICATIONS FOR UX & DESIGN THINKING ANEQUAL & CONTINUOUS EXPERIENCE ACROSS DEVICES As they & the services we use become more sophisticated & optimised we expect more from them. KEEP THE CORE BUT OPTIMISE Consider the limitations but also the opportunities with mobile devices. www.flickr.com/photos/thecaucas/2597813380
- 81. WHEN DO WHAT BESPOKE MOBILEWEBSITE Try to avoid it but do it if necessary RESPONSIVE DESIGN The most device & future “proof” approach right now. Use if possible. But challenge content delivery. APP Base on user & business needs. Strong argument if you require offline reading/functionality & access to device capabilities. Base which type on objectives & stats.www.flickr.com/photos/thecaucas/2597813380
- 82. FOR RESPONSIVE DEFINEYOUR GRID & BREAKPOINTS Thisis the backbone of responsive design & content choreography. DON’T FORGET THE NAVIGATION Consider the pros & cons of different methods. TEST & COLLABORATE This is new grounds & we’re all learning so work together & test as you go.www.flickr.com/photos/thecaucas/2597813380
- 83. FOR APPS REMEMBER PLATFORMSPECIFIC GUIDELINES Adhering to them will make your app easier to use. CONSIDER BACKWARDS COMPATIBILITY Not everyone will be on the latest version. Ensure you cater for the majority. CONSULT THE INTERNET There are a number of great resources for knowledge & inspiration. Use them. www.flickr.com/photos/thecaucas/2597813380
- 84. 8. BEFORE IGO... REMEMBERTHAT www.flickr.com/photos/46355638@N00/4414640784
- 85. www.flickr.com/photos/jolives/2889944573/ ...IT’S NOT JUSTABOUT THE SMALLER SCREENS BUT ALSOTHE BIG ONES
- 86. www.flickr.com/photos/jolives/2889944573/ IT’S ABOUT THINKING AHEAD THINK3-5YEARS AHEAD WITH “FUTURE PROOFING” IN MIND
- 87. IT DOESN’T HAVETO BREAK THEBANK BESIDES CONSIDER LOST CUSTOMERS & MAINTAINING MULTIPLEVERSIONShttp://www.flickr.com/photos/gi/5537770007/
- 88. www.flickr.com/photos/oter/5090592214 BE CREATIVE &CHALLENGE WHAT EXISTSTODAY THAT’S WHAT MOVES US FORWARD
- 89. www.flickr.com/photos/stevendepolo/3378152784 CLOSER & MORE REWARDING COLLABORATION BETWEENDISCIPLINES & WITH CLIENTS
- 90. - Wilson Minor “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. http://www.flickr.com/photos/funch/4679422945/ ” BUT ABOVE ALL...
- 91.
- 92.
- 93.
- 94.
- 95.