![Page 1: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/1.jpg)
Anna Dahlströmfounder byflock
annadahlstrom
Anna Dahlströmfounder byflock
www.annadahlstrom.com annadahlstrom
PART 2DESIGNING FOR MULTIPLE DEVICESLondon 18th March 2013
http://desktopwallpaper-s.com/19-Computers/-/Future/
![Page 2: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/2.jpg)
www.flickr.com/photos/dahlstroms/4411448782/
I’m AnnaIA & UX DESIGNER | SWEDISH BUT LONDON BASED
FREELANCING + WORKING ON A STARTUPLOVES QUOTES & CHALLENGES
This is Öresundsbron, the bridge between Sweden & Denmark
![Page 3: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/3.jpg)
www.flickr.com/photos/27147/3648039063
AGENDA 1. RECAP ON GUIDING PRINCIPLES
2. COMMON CHALLENGES
3. CROSS DEVICE CONTENT STRATEGY & HIERARCHY
4. RESPONSIVE NAVIGATION
5. APPS STRUCTURE & NAVIGATION
6. TESTING APPS & RESPONSIVE SITES
7. EXERCISES
8. SUMMARY
9. Q & A
![Page 4: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/4.jpg)
www.flickr.com/photos/publicenergy/1846375599
1. RECAP ON...GUIDING PRINCIPLES
![Page 5: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/5.jpg)
www.flickr.com/photos/exlibris/2552107635 www.flickr.com/photos/yahnyahn/2996454839
MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE1
![Page 6: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/6.jpg)
A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL
2
http://www.flickr.com/photos/hanhutton/320464105/ www.flickr.com/photos/edduddiee/4307943164
![Page 7: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/7.jpg)
THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS
3
www.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748
![Page 8: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/8.jpg)
USERS INCREASINGLY EXPECT AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES
4
www.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339
![Page 9: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/9.jpg)
CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISED
5
www.flickr.com/photos/ericconstantineau/5618576278 www.flickr.com/photos/jmtimages/2883279193
![Page 10: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/10.jpg)
www.flickr.com/photos/lastquest/1472794031
BUT WHY?” 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 “- COMBINED WISE WORDS FROM @ONEXTRAPIXEL &
@TRENTWALTON
![Page 11: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/11.jpg)
“ 1,057 different mobile devices accessed The Guardian beta site yesterday (including one person on a zune!)” ** Source: The Guardian
![Page 12: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/12.jpg)
www.flickr.com/photos/nasamarshall/6289116940
In 2009 1% of global internet traffic came from mobiles. In 2010 the number was 4%. By the end of 2012 it had risen to13%.** Source: www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile
![Page 13: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/13.jpg)
www.flickr.com/photos/jayfresh/3388253576/
41% of emails are now opened on mobile devices ** Source: http://econsultancy.com/uk/blog/62268-41-of-email-is-now-opened-on-mobile-devices
![Page 14: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/14.jpg)
2. THE MOSTCOMMON CHALLENGES WITH RESPONSIVE DESIGN
http://www.flickr.com/photos/eyesore9/3206408088/
![Page 15: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/15.jpg)
WHERE TO START?DEFINE YOUR MOBILE STRATEGY,
START SKETCHING & WORKING ACROSS DISCIPLINESwww.flickr.com/photos/pinkpurse/5355919491/
![Page 16: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/16.jpg)
HOW MANY VERSIONS SHOULD
WE WIREFRAME FOR?DEPENDS ON YOUR
PROJECT, BUDGET & TEAM AS WELL AS
WHO IS BUILDING ITwww.flickr.com/photos/jorgeq82/4732700819
![Page 17: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/17.jpg)
WHAT ABOUT VISUAL DESIGN?
LESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPING
www.flickr.com/photos/donsolo/2136923757/
![Page 18: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/18.jpg)
WHAT SCREEN SIZES & RESOLUTIONS SHOULD I DESIGN FOR? USE ANALYTICS FOR GUIDANCE & DESIGN FOR THE MOST COMMON ONES
Source: www.flickr.com/photos/dpstyles/3448453466
![Page 19: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/19.jpg)
www.flickr.com/photos/adactio/6153481666
80% of traffic in 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
![Page 20: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/20.jpg)
HOW DO I DEFINE MY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS
www.slideshare.net/yiibu/pragmatic-responsive-design
![Page 21: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/21.jpg)
HOW DO I DEFINE MY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS
www.slideshare.net/yiibu/pragmatic-responsive-design
![Page 22: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/22.jpg)
HOW DO I DEFINE MY BREAKPOINTS?BASE IT ON THE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS
www.slideshare.net/yiibu/pragmatic-responsive-design
![Page 23: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/23.jpg)
HOW MANY DEVICES SHOULD I TEST ON?AS MANY AS POSSIBLE BUT PRIORITISE BASED ON YOUR AUDIENCE
www.flickr.com/photos/nomadic_lass/5598218199
![Page 24: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/24.jpg)
HOW DO I HANDLE IMAGES?IMAGES & ICONS SHOULD BE AS FLEXIBLE AS POSSIBLE
www.flickr.com/photos/jorgeq82/4732700819
![Page 25: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/25.jpg)
http://www.flickr.com/photos/young_einstein/74097753/
3. CROSS DEVICECONTENT STRATEGY & HIERARCHY
![Page 26: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/26.jpg)
“ Content needs to be choreographed to ensure the intended message is preserved
on any device and at any width ”- TRENT WALTONwww.flickr.com/photos/theaftershock/2811382400/
![Page 27: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/27.jpg)
www.flickr.com/photos/sepblog/3649959481
KNOW YOUR CONTENTPRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENT THE SAME
![Page 28: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/28.jpg)
www.flickr.com/photos/stephangeyer/
CONSIDER THE MOBILE CONTEXT
THE USE CASE MAY BE THE SAME BUT
USING A MOBILE DEVICE IS DIFFERENT
![Page 29: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/29.jpg)
http://foundation.zurb.com/docs/layout.php
DEFINE YOUR GRID & BREAK POINTS• USE AS THE BASIS OF
YOUR PAGE LAYOUTS
• CHECKPOINT FOR MODULE SIZES & VARIANTS
• FIXED OR FLUID COLUMNS
• DEFINES HOW CONTENT WILL BEHAVE ACROSS DEVICES
![Page 30: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/30.jpg)
WORK THROUGH YOUR CONTENT STACKING STRATEGYACROSS DEVICES & ORIENTATION
www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
![Page 31: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/31.jpg)
MOBILE VS. DESKTOP FIRST•START LARGE OR SMALL
WHAT EVER WORKS BEST FOR YOU
•ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
![Page 32: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/32.jpg)
DON’T JUST WORK WITH COLUMNSTHINK OF THE NARRATIVE OF THE PAGE
www.flickr.com/photos/garrettc/6260768486/
![Page 33: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/33.jpg)
www.flickr.com/photos/boltofblue/4418442567
IDENTIFY YOUR MAIN MODULE TYPESDEFINE HOW THEY SHOULD BEHAVE ACROSS DEVICES & ORIENTATIONS
![Page 34: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/34.jpg)
Screenshot: www.crayola.co.uk/
“ With thousands and thousands of pages on the Crayola site, it wasn’t efficient to wireframe every single page and state. We created a system of components that could be assembled in different configurations to accommodate the unique content needed for each type of page.” ** Source: http://danielmall.com/work/crayola/
![Page 35: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/35.jpg)
LIKE PLAYING REAL LIFE TETRISPRE-DEFINED POCKETS FOR THE CONTENT TO SLOT INTOwww.flickr.com/photos/fritzon/195008860
![Page 36: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/36.jpg)
www.flickr.com/photos/taytom/5277657429
4. A LOOK ATRESPONSIVE NAVIGATION
![Page 37: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/37.jpg)
EXCELLENT READ
‘RESPONSIVE NAVIGATION PATTERNS’by Brad Frost.*Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns
![Page 38: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/38.jpg)
www.flickr.com/photos/tim_norris/2789759648
“ Mobile navigation should 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
![Page 39: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/39.jpg)
www.flickr.com/photos/inpivic/5205918163/
CONSIDER YOUR PROJECTASSESSING THE DEPTH NEEDED AS WELL AS & PROS & CONS OF DIFFERENT NAVIGATION APPROACHES
![Page 40: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/40.jpg)
DEFINE YOUR DIFFERENT TYPES OF NAVIGATIONPRIMARY, SECONDARY, TERTIARY AS WELL AS FOOTER & CROSS LINKING
http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
![Page 41: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/41.jpg)
Screenshot: http://cognition.happycog.com/
BE CONSISTENTUSE THE SAME APPROACH THROUGHOUT & HAVE CLEAR, SAYING VISUAL CUES
![Page 42: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/42.jpg)
Screenshot: http://cognition.happycog.com/
BE CONSISTENTUSE THE SAME APPROACH THROUGHOUT & HAVE CLEAR, SAYING VISUAL CUES
![Page 43: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/43.jpg)
CONSIDER NAVIGATIONACROSS PRODUCTSWHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www.bbc.co.uk/sport
![Page 44: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/44.jpg)
CONSIDER NAVIGATIONACROSS PRODUCTSWHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www.bbc.co.uk/sport
![Page 45: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/45.jpg)
CONSIDER NAVIGATIONACROSS PRODUCTSWHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www.bbc.co.uk/sport
![Page 46: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/46.jpg)
5. A LOOK AT... APP STRUCTURES & NAVIGATION
www.flickr.com/photos/46355638@N00/4414640784
![Page 47: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/47.jpg)
www.flickr.com/photos/gadl/3570118243
EVERY PLATFORM IS ITS OWN LITTLE WORLDWITH THEIR OWN UI GUIDELINES THAT USERS ARE USED TO
![Page 48: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/48.jpg)
Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS NAVIGATIONCONSISTENT ACROSS VERSIONS
NAVIGATION BAREnables navigation through the app hierarchy. Holds the back button, controls for managing screen content & the title of the screen.
BACK BUTTONShould always take the user one step back from where they came from & be descriptive.
TAB BARCan often be customised. Holds the main sections of the app.
‘MORE’ TAB BAR ITEMUsed to hold & provide access to all other sections of the app that don’t fit in the tab bar.
Content area
MoreItemItemHome Item
iPhone 12:15 PM
APP NAMEMore Customise
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
IMG
Item
Item
Item
Item
Item
Item
Item
Item
MoreItemItemHome Item
![Page 49: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/49.jpg)
Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID NAVIGATIONDIFFERENT BETWEEN VERSIONS. IN ICE CREAM SANDWICH:
NAVIGATION BARFor devices that don't have the hardware keys. Holds 'Back', 'Home' and 'Recents'
ACTION BARHolds the most important action buttons for your app (3 + overflow menu)
UP VS. BACK BUTTONThe 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.
![Page 50: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/50.jpg)
www.flickr.com/photos/inpivic/5205918163/
IDENTIFY YOUR MAIN SECTIONSEACH SHOULD HAVE A CLEAR FOCUS & PURPOSE
![Page 51: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/51.jpg)
SKETCHYOUR SCREEN FLOWS, NAVIGATION & CONTENT
www.flickr.com/photos/saucef/7184615025
![Page 52: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/52.jpg)
www.flickr.com/photos/kruger_otto/5581886586
AVOID USING THE HOME SCREEN AS A STEPPING POINTCONSIDER THE USE CASE & ENSURE YOU DELIVER VALUE FROM THE FIRST VIEW
![Page 53: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/53.jpg)
RESEARCH COMMON APPROACHESFOR INSPIRATION & BEST PRACTICE
www.uxarchive.com/
![Page 54: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/54.jpg)
RESEARCH COMMON APPROACHESFOR INSPIRATION & BEST PRACTICE
www.uxarchive.com/tasks/sign_up/
![Page 55: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/55.jpg)
LOOK AT WHAT OTHERS DOBE CREATIVE
http://pttrns.com/
![Page 56: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/56.jpg)
http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
6. HOW TO...TEST APPS & RESPONSIVE SITES
![Page 57: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/57.jpg)
www.flickr.com/photos/cristiano_betta/2909483129
TESTING APPS
STRUCTURE, NAVIGATION,
INTERACTIONS & TRANSITIONS
![Page 58: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/58.jpg)
www.flickr.com/photos/adactio/5818096043
TESTING RESPONSIVE SITESDO THIS AS EARLY AS POSSIBLE
![Page 59: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/59.jpg)
IN THE BROWSERBY RESIZING THE BROWSER WINDOW & CHECKING THE DISPLAY OF CONTENT
http://thenextweb.com/
![Page 60: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/60.jpg)
IN THE BROWSERBY DESIGNING IN THE BROWSER & CREATING A WORKING HTML PROTOTYPE
www.flickr.com/photos/jorgeq82/4732700819
![Page 61: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/61.jpg)
USING HANDY TOOLSHELP YOU STYLE & TEST YOUR TYPOGRAPHY
http://responsive.is/typecast.com
![Page 62: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/62.jpg)
USING EMULATORSALLOW YOU TO VIEW YOUR SITE ACROSS DEVICES & ORIENTATIONS
www.responsinator.com/
http://quirktools.com/screenfly/
http://screenqueri.es/
http://mattkersley.com/responsive/
![Page 63: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/63.jpg)
ON ACTUAL DEVICESEXPENSIVE BUT THERE ARE WAYS AROUND IT
www.flickr.com/photos/arne/5835855777/in/photostream/
![Page 64: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/64.jpg)
BUYING BUNDLES
& SHARINGHELPING EACH OTHER
www.flickr.com/photos/adactio/6800969243/in/photostream/
![Page 65: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/65.jpg)
WITH USERSDEFINE YOUR AUDIENCE, TEST CASES, OBJECTIVES & CONSIDER EXPECTATIONS & LIMITATIONS
www.flickr.com/photos/jorgeq82/4732700819
![Page 66: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/66.jpg)
www.flickr.com/photos/icedsoul/3041770422
7. TIME TO...PRACTICE
![Page 67: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/67.jpg)
www.flickr.com/photos/icedsoul/3041770422
RESPONSIVE NAVIGATIONTHE TASK:You've been asked to develop a responsive site for a small furniture store for summer. They sell indoor tables (dinner, kitchen, sofa tables) as well as outdoor tables. They are an independent store and want to inform users about their store.
Define how the navigation will work for desktop and mobile.
10 MINUTES
EXERCISE ONE
![Page 68: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/68.jpg)
www.flickr.com/photos/icedsoul/3041770422
COMPLEX RESPONSIVE NAVIGATIONTHE TASK:After the successful table store project you've been asked to develop a responsive site for a large furniture store in time for summer. They sell indoor as well as outdoor furniture and frequently have offers and products they want to push. They group products by room (e.g. kitchen but also by category (e.g. storage) and sub-category (e.g. food storage).
Define how the navigation & including sub-navigation will work for desktop and mobile.
15 MINUTES
EXERCISE TWO
![Page 69: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/69.jpg)
www.flickr.com/photos/icedsoul/3041770422
APP STRUCTURE & NAVIGATIONTHE TASK:The same furniture store wants you to develop an app.
Based on the navigation you've defined for the responsive site, work through the screenflow for your app and how the user would navigate to and back from different sections.
15 MINUTES
EXERCISE THREE
![Page 70: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/70.jpg)
http://www.flickr.com/photos/martinteschner/4569495912/
8. TOSUMMARISE
![Page 71: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/71.jpg)
www.flickr.com/photos/thecaucas/2597813380
GUIDING PRINCIPLESMOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE
A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVE TIME TO KILL
THE SAME TASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS
USERS INCREASINGLY EXPECT AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES
CORE CONTENT SHOULD REMAIN THE SAME BUT THE EXPERIENCE SHOULD BE OPTIMISED
![Page 72: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/72.jpg)
www.flickr.com/photos/thecaucas/2597813380
COMMON PROBLEMSNUMBER OF WIREFRAMESDEPENDS ON YOUR PROJECT, BUDGET & TEAM AS WELL AS WHO IS BUILDING IT
VISUAL DESIGNLESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPING
SCREENSIZES & BREAKPOINTSUSE ANALYTICS FOR GUIDANCE & DESIGN FOR THE MOST COMMON ONES
WHAT TO TEST ONAS MANY AS POSSIBLE BUT PRIORITISE BASED ON YOUR AUDIENCE
IMAGES & ICONSAS FLEXIBLE AS POSSIBLE
![Page 73: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/73.jpg)
www.flickr.com/photos/thecaucas/2597813380
CONTENT STRATEGY & HIERARCHY KNOW YOUR CONTENTPRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENT THE SAME
CONSIDER THE MOBILE CONTEXTTHE USE CASE MAY BE THE SAME BUT USING A MOBILE DEVICE IS DIFFERENT
DEFINE CONTENT STACKINGTHE GRID & BREAKPOINTS IS YOUR GUIDE BUT DON'T JUST WORK WITH THE COLUMNS. CONSIDER EACH MODULE & THE STORY OF THE PAGE
![Page 74: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/74.jpg)
www.flickr.com/photos/thecaucas/2597813380
RESPONSIVE NAVIGATIONRESEARCH DIFFERENT APPROACHESKNOW YOUR OPTIONS & THE PROS & CONS FOR EACH
BASE IT ON YOUR PROJECTASSESS HOW MANY LEVELS THAT ARE NEEDED & REVIEW APPROACH ACROSS DEVICES BUT ALSO WHAT GOES IN
WORK WITH DIFFERENT TYPESIT'S NOT JUST ABOUT THE MAIN NAVIGATION BUT ALSO SUB-NAVIGATION, SEARCH, IN PAGE LINKS & THE FOOTER
BE CONSISTENTUSE SAYING VISUAL CUES & CONSIDER NAVIGATION ACROSS ALL PRODUCTS
![Page 75: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/75.jpg)
www.flickr.com/photos/thecaucas/2597813380
APP STRUCTURES & NAVIGATIONBASE ON PROJECT & PLATFORMIDENTIFY YOUR MAIN SECTIONS & KEEP DIFFERENCES IN STRUCTURE & UI GUIDELINES BETWEEN PLATFORMS IN MIND
SKETCH BEFORE WIREFRAMINGWORK THROUGH YOUR SCREENFLOW, NAVIGATION & CONTENT ACROSS SCREENS
VALUE FROM FIRST VIEWAVOID USING THE HOME SCREEN AS A STEPPING POINT
BEST PRACTICE & INSPIRATIONFOR TYPICAL TASK FLOWS & SCREENS
![Page 76: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/76.jpg)
www.flickr.com/photos/thecaucas/2597813380
TESTING APPS & RESPONSIVE SITESTESTING APPSBOTH STRUCTURE, NAVIGATION, INTERACTIONS & TRANSITIONS
TESTING RESPONSIVE SITESDO THIS AS EARLY AS POSSIBLE TO ENSURE IT ACTUALLY WORKS IN THE BROWSER
TESTING IN THE BROWSERBY RESIZING THE BROWSER WINDOW OR DESIGNING & CREATING PROTOTYPES
USING EMULATORSALLOWS YOU TO VIEW HOW YOUR SITE IS DISPLAYED ACROSS DEVICES & ORIENTATIONS
![Page 77: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/77.jpg)
www.flickr.com/photos/thecaucas/2597813380
TESTING APPS & RESPONSIVE SITESON ACTUAL DEVICESTEST ON AS MANY AS POSSIBLE. THE BEST REPRESENTATION BUT CAN BE EXPENSIVE. INVEST IN KEY DEVICES & POOL TOGETHER TO SHARE DEVICES
TESTING WITH USERSTEST EARLY & FREQUENTLY. DEFINE YOUR AUDIENCE, TEST CASES, OBJECTIVES & IDENTIFY SPECIFIC CROSS DEVICE SPECIFIC EXPECTATIONS & LIMITATIONS
![Page 78: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/78.jpg)
www.flickr.com/photos/st3f4n/4387291247
9. FOR THE ROADSOME TAKE AWAYS
![Page 79: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/79.jpg)
www.flickr.com/photos/st3f4n/4387291247
DEMO, SKETCHING & WORKFLOWwww.thismanslife.co.uk/projects/lab/responsivewireframes/www.thismanslife.co.uk/projects/lab/responsiveillustration/http://nocturnalmonkey.com/archive/responsive-sketchinghttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetshttp://danielmall.com/work/crayola/
![Page 80: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/80.jpg)
www.flickr.com/photos/st3f4n/4387291247
NAVIGATION FOR RESPONSIVE DESIGNhttp://bradfrostweb.com/blog/web/responsive-nav-patterns/http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
![Page 81: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/81.jpg)
www.flickr.com/photos/st3f4n/4387291247
TESTINGhttp://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/http://www.welcomebrand.co.uk/thoughts/website-testing-phone-bundles/https://bagcheck.com/blog/22-mobile-device-testing-the-gear
![Page 82: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/82.jpg)
www.flickr.com/photos/st3f4n/4387291247
TESTING YOUR RESPONSIVE SITEhttp://responsive.is/typecast.comhttp://screenqueri.es/http://www.responsinator.com/http://quirktools.com/screenfly/http://mattkersley.com/responsive/http://responsivepx.com/http://protofluid.com/http://responsiveviewport.com/
![Page 83: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/83.jpg)
www.flickr.com/photos/st3f4n/4387291247
OTHER USEFUL LINKSwww.slideshare.net/yiibu/pragmatic-responsive-designhttp://stephanierieger.com/on-designing-content-out-a-response-to-zeldman-and-others/http://bradfrostweb.com/blog/mobile/support-vs-optimization/http://en.wikipedia.org/wiki/List_of_displays_by_pixel_densityhttp://stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_designhttp://danielmall.com/work/crayola/
![Page 84: Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013](https://reader033.vdocuments.mx/reader033/viewer/2022061300/54c713924a7959ae708b45b0/html5/thumbnails/84.jpg)
www.flickr.com/photos/dahlstroms/4411448782/
Thank you!QUESTIONS?
annadahlstromannadahlstrom