Anna Dahlström founder byflock www.annadahlstrom.com [email protected]annadahlstrom Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom PART 2 DESIGNING FOR MULTIPLE DEVICES London 18th March 2013 http://desktopwallpaper-s.com/19-Computers/-/Future/
84
Embed
Part 2: Designing For Multiple Devices - GA London, 18 Mar 2013
Slides from my part 2 class of Designing for multiple devices run at General Assembly in London on the 18th of March 2013.
ABSTRACT In Fundamentals for Designing for Multiple Devices, we covered the basics of responsive design and mobile apps (for both Android & iOS). We also looked at how user expectations have shifted behaviour, how consumption patterns have changed and what that has meant for designing products that will be used on multiple devices. This follow-on session will take outset in the guiding principles covered in the previous class and take a closer look at:
- common challenges faced when designing for multiple devices and how to address them - content strategy and hierarchy across devices - navigation patterns for responsive design - app structures and navigation patterns - how to test both responsive sites and apps
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
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
“ 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/
“ 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
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.
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.
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.
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
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
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
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/
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/