0
Anna Dahlström
founder byflock
www.annadahlstrom.com
annadahlstrom
London 31st of July 2013 | Part 2 - Intermediate
DESIGNI...
I’m Anna
IA & UX DESIGNER | FREELANCE SINCE 2011
SWEDISH | IN LONDON SINCE 2006
This is me at my favourite place, Knäbäcks...
www.flickr.com/photos/suttonhoo22/2070700035
AGENDA
1. RECAP ON PART 1
2. COMMON CHALLENGES
3. CROSS DEVICE CONTENT
STRATEG...
www.flickr.com/photos/publicenergy/1846375599
1. RECAP ON...
GUIDING
PRINCIPLES
www.flickr.com/photos/exlibris/2552107635 www.flickr.com/photos/yahnyahn/2996454839
MOBILE DEVICES ARE USED
ANYWHERE & EVERY...
A LARGE PROPORTION OF
USAGE HAPPENS WHEN WE
HAVETIMETO KILL
2
www.flickr.com/photos/anniemole/2424372024 www.flickr.com/phot...
THE SAMETASKS ARE CARRIED
OUT ON SMARTPHONES AS ON
DESKTOPS
3
www.flickr.com/photos/frantaylor/4296536332 www.flickr.com/pho...
USERS INCREASINGLY EXPECT AN
EQUAL & CONTINUOS
EXPERIENCE ACROSS DEVICES
4
www.flickr.com/photos/demandaj/7287174776 www.fli...
CORE CONTENT SHOULD REMAIN
THE SAME BUTTHE EXPERIENCE
SHOULD BE OPTIMISED
5
www.flickr.com/photos/ericconstantineau/5618576...
www.flickr.com/photos/lastquest/1472794031
BUT WHY?
” Today's popular devices are
not tomorrow's so building
something whic...
“ 1,057 different mobile devices accessed
The Guardian beta site yesterday (including
one person on a zune!)” *
* Source: ...
2.THE MOST
COMMON
CHALLENGES
WITH
RESPONSIVE
DESIGN
http://www.flickr.com/photos/eyesore9/3206408088/
WHERETO START?
DEFINEYOUR MOBILE STRATEGY,
START SKETCHING &
WORKING ACROSS DISCIPLINESwww.flickr.com/photos/pinkpurse/5355...
HOW MANY
VERSIONS SHOULD
WE WIREFRAME?
DEPENDS ONYOUR
PROJECT, BUDGET
&TEAM AS WELL AS
WHO IS BUILDING IT
www.flickr.com/ph...
WHAT ABOUT
VISUAL DESIGN?
LESS STATIC DESIGNS, MORE
MODULARITY & PROTOTYPING
www.flickr.com/photos/donsolo/2136923757/
WHAT SCREEN SIZES &
RESOLUTIONS SHOULD I
DESIGN FOR?
USE ANALYTICS FOR GUIDANCE &
DESIGN FORTHE MOST
COMMON ONES
Source: w...
www.flickr.com/photos/adactio/6153481666
80% of traffic in your analytics will often
come from 20% of devices…seems a shame
...
HOW DO I DEFINE
MY BREAKPOINTS?
BASE IT ONTHE MOST IMPORTANT SCREEN SIZES &
ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS...
HOW DO I DEFINE
MY BREAKPOINTS?
BASE IT ONTHE MOST IMPORTANT SCREEN SIZES &
ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS...
HOW DO I DEFINE
MY BREAKPOINTS?
BASE IT ONTHE MOST IMPORTANT SCREEN SIZES &
ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS...
HOW MANY DEVICES
SHOULD ITEST ON?
AS MANY AS POSSIBLE BUT PRIORITISE
BASED ONYOUR AUDIENCE
www.flickr.com/photos/nomadic_la...
HOW DO
I HANDLE
IMAGES?
IMAGES & ICONS
SHOULD BE AS FLEXIBLE
AS POSSIBLE
www.flickr.com/photos/jorgeq82/4732700819
http://www.flickr.com/photos/young_einstein/74097753/
3. CROSS DEVICE
CONTENT
STRATEGY &
HIERARCHY
“ Content needs to be choreographed to
ensure the intended message is preserved
on any device and at any width ”
-TRENT WA...
www.flickr.com/photos/sepblog/3649959481
KNOWYOUR CONTENT
PRIORITISE WHAT & HOW
MUCH BUT KEEPTHE CORE
CONTENTTHE SAME
www.flickr.com/photos/boltofblue/4418442567
IDENTIFYYOUR
MAIN MODULETYPES
DEFINE HOWTHEY SHOULD BEHAVE
ACROSS DEVICES & ORI...
Screenshot: www.crayola.co.uk/
“ With thousands and thousands of pages
on the Crayola site, it wasn’t efficient to
wirefram...
CONTENT GUIDESTHE GRID
THE MAINTEMPLATES & MODULES
http://foundation.zurb.com/docs/layout.php
UNDERSTANDTHE CONTENT
ACROSS DEVICES & PAGES
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Too...
Desktop/Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
lo...
DON’T JUST WORK
WITH COLUMNS
THINK OFTHE NARRATIVE
OFTHE PAGE
www.flickr.com/photos/garrettc/6260768486/
WORKTHROUGH
YOUR CONTENT
STACKING STRATEGY
ACROSS DEVICES & ORIENTATION
www.thismanslife.co.uk/projects/lab/responsivewire...
MOBILEVS. DESKTOP FIRST
•START LARGE OR SMALL
WHAT EVER WORKS BEST FORYOU
•ABOUT CONTENT, PRIORITISING &
CONSIDERING HOW I...
KNOW WHAT
YOU DESIGN FOR
IT MAKES IT EASIERTO FIT
ALLTHE PIECESTOGETHER
www.flickr.com/photos/songzhen/4893025042
IDENTIFY WHAT
YOU CAN RE-USE
TO MEET OTHER REQUIREMENTS
ACROSS SCREEN SIZES AND PAGES/VIEWS
www.flickr.com/photos/songzhen/...
www.flickr.com/photos/katherinekenny
ADAPTTOTHE
MOBILE CONTEXT
THE ORDER AND PRIORITY OF
CONTENT AS WELL AS HO W MUCH
YOU S...
www.flickr.com/photos/taytom/5277657429
4.A LOOK AT
RESPONSIVE
NAVIGATION
www.flickr.com/photos/melodramababs/2766765248/
“ Mobile navigation should be like a good
friend: there when you need them ...
A CLOSER LOOK AT
‘RESPONSIVE NAVIGATION PATTERNS’
by Brad Frost.*
Source:
http://bradfrostweb.com/blog/web/responsive-nav-...
SIMPLE NAVIGATION
TOP NAV OR “DO NOTHING”
KEEPSTHE NAVIGATION ATTHETOP
THETOGGLE
HIDES NAVIGATION ITEMS IN A MENU
THE LEFT...
http://skinnyties.com/
TOP NAV OR “DO NOTHING”
KEEPSTHE NAVIGATION ATTHETOP
PROS
Simple to implement
Less design &
develop...
PROS
Optimises screen use
Recognised from apps
Scalable
CONS
Possible animation
performance
problems
Javascript dependent
...
Images from Barack Obama via Brad Frost
PROS
Space generous
Recognised nav
pattern from apps
CONS
More advanced and
doesn’...
COMPLEX NAVIGATION
THE MULTITOGGLE
NESTED NAVIGATION GROUPED UNDER A MENU
RIGHTTO LEFT
THE NEXT LEVEL NAVIGATION SLIDES IN...
COMPLEX NAVIGATION
PRIORITY+
DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’
THE CAROUSEL+
A CAROUSEL WITHTHE PARE...
THE MULTITOGGLE
NESTED NAVIGATION GROUPED UNDER A MENU
Barack Obama - image via Stephanie Riegerhttp://thenextweb.com/
PRO...
PROS
Nice looking
Follows mobile
conventions
Scalable
CONS
More complex to
implement
Animation
performance
RIGHTTO LEFT
TH...
http://worldwildlife.org/
PROS
Simple
Removes
complexities around
sub-navigation
CONS
Re-quires page
refresh & visit for
a...
http://www.bbc.co.uk/sport
PROS
Simple
Supports
(supposedly) most
used)
Scalable
CONS
Hides potentially
important items
PR...
Image from Intel, via Brad Frost
PROS
Easy to navigate
Suitable for touch
CONS
Doesn’t display all
parent categories at
on...
www.flickr.com/photos/inpivic/5205918163/
CONSIDERYOUR PROJECT
ASSESSTHE DEPTH NEEDED AS WELL AS & PROS
& CONS OF DIFFERENT...
DEFINETYPES OF NAVIGATION
PRIMARY, SECONDARY,TERTIARY AS WELL AS
FOOTER & CROSS LINKING
http://palantir.net/blog/scalable-...
Screenshot: http://cognition.happycog.com/
BE CONSISTENT
USETHE SAME APPROACHTHROUGHOUT
& HAVE CLEAR, SAYINGVISUAL CUES
Screenshot: http://cognition.happycog.com/
BE CONSISTENT
USETHE SAME APPROACHTHROUGHOUT
& HAVE CLEAR, SAYINGVISUAL CUES
CONSIDER NAVIGATION
ACROSS PRODUCTS
WHERE APPS & MOBILE OPTIMISED WEBSITES
ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www....
CONSIDER NAVIGATION
ACROSS PRODUCTS
WHERE APPS & MOBILE OPTIMISED WEBSITES
ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www....
CONSIDER NAVIGATION
ACROSS PRODUCTS
WHERE APPS & MOBILE OPTIMISED WEBSITES
ARE SIMILAR KEEP IT CONSISTENT
Screenshot: www....
5.A LOOK AT...
APP STRUCTURES
& NAVIGATION
www.flickr.com/photos/46355638@N00/4414640784
www.flickr.com/photos/gadl/3570118243
EVERY PLATFORM
IS ITS OWN
LITTLE
WORLD
WITHTHEIR OWN UI
GUIDELINESTHAT
USERS ARE USED...
Source: http://developer.android.com/design/patterns/new-4-0.html
BASIC iOS
NAVIGATION
CONSISTENT ACROSS
VERSIONS
NAVIGATI...
Source: http://developer.android.com/design/patterns/new-4-0.html
ANDROID
NAVIGATION
DIFFERENT BETWEEN
VERSIONS. IN ICE CR...
www.flickr.com/photos/inpivic/5205918163/
IDENTIFYYOUR
MAIN SECTIONS
EACH SHOULD HAVE A
CLEAR FOCUS & PURPOSE
SKETCH
YOUR SCREEN FLOWS,
NAVIGATION & CONTENT
www.flickr.com/photos/saucef/7184615025
www.flickr.com/photos/kruger_otto/5581886586
AVOID USINGTHE HOME
SCREEN AS A STEPPING POINT
CONSIDERTHE USE CASE & ENSUREYO...
RESEARCH COMMON
APPROACHES
FOR INSPIRATION &
BEST PRACTICE
www.uxarchive.com/
RESEARCH COMMON
APPROACHES
FOR INSPIRATION &
BEST PRACTICE
www.uxarchive.com/tasks/sign_up/
LOOK AT
WHAT
OTHERS DO
BE CREATIVE
http://pttrns.com/
http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/
6. HOWTO...
TEST APPS &
RESPONSIVE SITES
www.flickr.com/photos/cristiano_betta/2909483129
TESTING
APPS
STRUCTURE,
NAVIGATION,
INTERACTIONS
&TRANSITIONS
www.flickr.com/photos/adactio/5818096043
TESTING
RESPONSIVE SITES
DOTHIS AS EARLY AS POSSIBLE
INTHE BROWSER
BY RESIZINGTHE BROWSER WINDOW &
CHECKINGTHE DISPLAY OF CONTENT
http://thenextweb.com/
INTHE BROWSER
BY DESIGNING INTHE BROWSER & CREATING
A WORKING HTML PROTOTYPE
www.flickr.com/photos/jorgeq82/4732700819
USING HANDYTOOLS
HELPYOU STYLE &TESTYOURTYPOGRAPHY
http://responsive.is/typecast.com
USING EMULATORS
ALLOWYOUTOVIEWYOUR SITE
ACROSS DEVICES & ORIENTATIONS
www.responsinator.com/
http://quirktools.com/screenfl...
ON ACTUAL DEVICES
EXPENSIVE BUTTHERE ARE WAYS AROUND IT
www.flickr.com/photos/arne/5835855777/in/photostream/
BUYING
BUNDLES
& SHARING
HELPING EACH OTHER
www.flickr.com/photos/adactio/6800969243/in/photostream/
WITH USERS
DEFINEYOUR AUDIENCE,TEST CASES,
OBJECTIVES & CONSIDER
EXPECTATIONS & LIMITATIONS
www.flickr.com/photos/jorgeq82/...
www.flickr.com/photos/icedsoul/3041770422
7.TIMETO...
PRACTICE
www.flickr.com/photos/icedsoul/3041770422
MODULAR DESIGN
THETASK:
You've been asked to develop a responsive
site for a smal...
UNDERSTANDTHE CONTENT
ACROSS DEVICES & PAGES
3
Nav
7
Related products
2 Header
4
Bath
section
intro
6
Types of baths
9 Too...
Desktop/Tablet Mobile
3
Nav
7
Related
products
2
Header
4
Bath section intro
6
Types of baths
9 Tools
10
Footer
8 Store
lo...
www.flickr.com/photos/icedsoul/3041770422
MODULAR DESIGN
THETASK:
You've been asked to develop a responsive
site for a smal...
www.flickr.com/photos/icedsoul/3041770422
RESPONSIVE
NAVIGATION
THETASK:
You've been asked to develop a responsive
site for...
SIMPLE NAVIGATION
TOP NAV OR “DO NOTHING”
KEEPSTHE NAVIGATION ATTHETOP
THETOGGLE
HIDES NAVIGATION ITEMS IN A MENU
THE LEFT...
DEFINETYPES OF NAVIGATION
PRIMARY, SECONDARY,TERTIARY AS WELL AS
FOOTER & CROSS LINKING
http://palantir.net/blog/scalable-...
www.flickr.com/photos/icedsoul/3041770422
RESPONSIVE
NAVIGATION
THETASK:
You've been asked to develop a responsive
site for...
www.flickr.com/photos/icedsoul/3041770422
COMPLEX
RESPONSIVE
NAVIGATION
THETASK:
After the successful table store project
y...
COMPLEX NAVIGATION
THE MULTITOGGLE
NESTED NAVIGATION GROUPED UNDER A MENU
RIGHTTO LEFT
THE NEXT LEVEL NAVIGATION SLIDES IN...
COMPLEX NAVIGATION
PRIORITY+
DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’
THE CAROUSEL+
A CAROUSEL WITHTHE PARE...
www.flickr.com/photos/icedsoul/3041770422
COMPLEX
RESPONSIVE
NAVIGATION
THETASK:
After the successful table store project
y...
http://www.flickr.com/photos/martinteschner/4569495912/
8.TO
SUMMARISE
www.flickr.com/photos/thecaucas/2597813380
GUIDING
PRINCIPLES
MOBILE DEVICES ARE USED ANYWHERE
& EVERYWHERE
A LARGE PROPORT...
www.flickr.com/photos/thecaucas/2597813380
COMMON
PROBLEMS
NUMBER OF WIREFRAMES
DEPENDS ONYOUR PROJECT, BUDGET &
TEAM AS WE...
www.flickr.com/photos/thecaucas/2597813380
CONTENT
STRATEGY &
HIERARCHY
KNOWYOUR CONTENT
PRIORITISE WHAT & HOW MUCH BUT KEE...
www.flickr.com/photos/thecaucas/2597813380
RESPONSIVE
NAVIGATION
RESEARCH DIFFERENT
APPROACHES
KNOWYOUR OPTIONS &THE PROS &...
www.flickr.com/photos/thecaucas/2597813380
APP
STRUCTURES &
NAVIGATION
BASE ON PROJECT & PLATFORM
IDENTIFYYOUR MAIN SECTION...
www.flickr.com/photos/thecaucas/2597813380
TESTING APPS &
RESPONSIVE
SITES
TESTING APPS
BOTH STRUCTURE, NAVIGATION,
INTERAC...
www.flickr.com/photos/thecaucas/2597813380
TESTING APPS &
RESPONSIVE
SITES
ON ACTUAL DEVICES
TEST ON AS MANY AS POSSIBLE.TH...
www.flickr.com/photos/st3f4n/4387291247
9. FORTHE ROAD
SOMETAKE
AWAYS
www.flickr.com/photos/st3f4n/4387291247
DEMO, SKETCHING
& WORKFLOW
www.thismanslife.co.uk/projects/lab/
responsivewireframe...
www.flickr.com/photos/st3f4n/4387291247
NAVIGATION
FOR RESPONSIVE
DESIGN
http://bradfrostweb.com/blog/web/
responsive-nav-p...
www.flickr.com/photos/st3f4n/4387291247
TESTING
http://bradfrostweb.com/blog/mobile/
test-on-real-mobile-devices-without-
b...
www.flickr.com/photos/st3f4n/4387291247
TESTINGYOUR
RESPONSIVE SITE
http://responsive.is/typecast.com
http://screenqueri.es...
www.flickr.com/photos/st3f4n/4387291247
TESTING APPS &
MOCKUPS
http://popapp.in/
http://fieldtestapp.com/
https://www.fluidui...
www.flickr.com/photos/st3f4n/4387291247
DEVICES & SIZES
http://www.google.com/analytics/
features/mobile-site-traffic.html
h...
www.flickr.com/photos/st3f4n/4387291247
OTHER
USEFUL LINKS
www.slideshare.net/yiibu/pragmatic-
responsive-design
http://ste...
www.flickr.com/photos/st3f4n/4387291247
OTHER
USEFUL LINKS
http://bradfrostweb.com/blog/mobile/
anatomy-of-a-mobile-first-re...
www.flickr.com/photos/st3f4n/4387291247
DIFFERENT APPS
Figure http://pttrns.com/p/175
CirleMe http://pttrns.com/p/176
Gabi ...
www.flickr.com/photos/st3f4n/4387291247
DIFFERENT APPS
Thinglist http://inspired-ui.com/tagged/
app_thinglist
Storylane Rea...
The bridge between Sweden & Denmark, as seen in”The Bridge” - www.flickr.com/photos/dahlstroms/4411448782/
Thank you!
QUEST...
Upcoming SlideShare
Loading in...5
×

Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013

2,184

Published on

Slides from the second of my 3 part series classes at General Assembly in London on the 31st of July 2013.

https://generalassemb.ly/education/designing-for-multiple-devices-3-part-series/london/2172

ABSTRACT
This follow-on session will build onto the guiding principles covered in the previous class, taking a closer look at:

- the common challenges faced when designing for multiple devices and how to address them
- content strategy and hierarchy across devices
- app structures and navigation patterns for responsive design
- how to test both responsive sites and apps

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

No Downloads
Views
Total Views
2,184
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
114
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013"

  1. 1. Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom London 31st of July 2013 | Part 2 - Intermediate DESIGNING FOR MULTIPLE DEVICES PART 2 of 3
  2. 2. I’m Anna IA & UX DESIGNER | FREELANCE SINCE 2011 SWEDISH | IN LONDON SINCE 2006 This is me at my favourite place, Knäbäckshusen in Skåne, Sweden Photo curtesy of my sister
  3. 3. www.flickr.com/photos/suttonhoo22/2070700035 AGENDA 1. RECAP ON PART 1 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
  4. 4. www.flickr.com/photos/publicenergy/1846375599 1. RECAP ON... GUIDING PRINCIPLES
  5. 5. www.flickr.com/photos/exlibris/2552107635 www.flickr.com/photos/yahnyahn/2996454839 MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE 1
  6. 6. A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVETIMETO KILL 2 www.flickr.com/photos/anniemole/2424372024 www.flickr.com/photos/edduddiee/4307943164
  7. 7. THE SAMETASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS 3 www.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748
  8. 8. USERS INCREASINGLY EXPECT AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES 4 www.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339
  9. 9. CORE CONTENT SHOULD REMAIN THE SAME BUTTHE EXPERIENCE SHOULD BE OPTIMISED 5 www.flickr.com/photos/ericconstantineau/5618576278 www.flickr.com/photos/jmtimages/2883279193
  10. 10. 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
  11. 11. “ 1,057 different mobile devices accessed The Guardian beta site yesterday (including one person on a zune!)” * * Source: The Guardian
  12. 12. 2.THE MOST COMMON CHALLENGES WITH RESPONSIVE DESIGN http://www.flickr.com/photos/eyesore9/3206408088/
  13. 13. WHERETO START? DEFINEYOUR MOBILE STRATEGY, START SKETCHING & WORKING ACROSS DISCIPLINESwww.flickr.com/photos/pinkpurse/5355919491/
  14. 14. HOW MANY VERSIONS SHOULD WE WIREFRAME? DEPENDS ONYOUR PROJECT, BUDGET &TEAM AS WELL AS WHO IS BUILDING IT www.flickr.com/photos/jorgeq82/4732700819
  15. 15. WHAT ABOUT VISUAL DESIGN? LESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPING www.flickr.com/photos/donsolo/2136923757/
  16. 16. WHAT SCREEN SIZES & RESOLUTIONS SHOULD I DESIGN FOR? USE ANALYTICS FOR GUIDANCE & DESIGN FORTHE MOST COMMON ONES Source: www.flickr.com/photos/dpstyles/3448453466
  17. 17. 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
  18. 18. HOW DO I DEFINE MY BREAKPOINTS? BASE IT ONTHE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  19. 19. HOW DO I DEFINE MY BREAKPOINTS? BASE IT ONTHE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  20. 20. HOW DO I DEFINE MY BREAKPOINTS? BASE IT ONTHE MOST IMPORTANT SCREEN SIZES & ORIENTATIONS AS WELL AS CONTENT & LAYOUT NEEDS www.slideshare.net/yiibu/pragmatic-responsive-design
  21. 21. HOW MANY DEVICES SHOULD ITEST ON? AS MANY AS POSSIBLE BUT PRIORITISE BASED ONYOUR AUDIENCE www.flickr.com/photos/nomadic_lass/5598218199
  22. 22. HOW DO I HANDLE IMAGES? IMAGES & ICONS SHOULD BE AS FLEXIBLE AS POSSIBLE www.flickr.com/photos/jorgeq82/4732700819
  23. 23. http://www.flickr.com/photos/young_einstein/74097753/ 3. CROSS DEVICE CONTENT STRATEGY & HIERARCHY
  24. 24. “ 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/
  25. 25. www.flickr.com/photos/sepblog/3649959481 KNOWYOUR CONTENT PRIORITISE WHAT & HOW MUCH BUT KEEPTHE CORE CONTENTTHE SAME
  26. 26. www.flickr.com/photos/boltofblue/4418442567 IDENTIFYYOUR MAIN MODULETYPES DEFINE HOWTHEY SHOULD BEHAVE ACROSS DEVICES & ORIENTATIONS
  27. 27. 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/
  28. 28. CONTENT GUIDESTHE GRID THE MAINTEMPLATES & MODULES http://foundation.zurb.com/docs/layout.php
  29. 29. UNDERSTANDTHE CONTENT ACROSS DEVICES & PAGES 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 Ad3 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
  30. 30. Desktop/Tablet Mobile 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 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths IDENTIFY COMMON ELEMENTS DEFINEVARIATIONS BUT RE-USE AS MUCH AS POSSIBLE
  31. 31. DON’T JUST WORK WITH COLUMNS THINK OFTHE NARRATIVE OFTHE PAGE www.flickr.com/photos/garrettc/6260768486/
  32. 32. WORKTHROUGH YOUR CONTENT STACKING STRATEGY ACROSS DEVICES & ORIENTATION www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop/
  33. 33. MOBILEVS. DESKTOP FIRST •START LARGE OR SMALL WHAT EVER WORKS BEST FORYOU •ABOUT CONTENT, PRIORITISING & CONSIDERING HOW IT WILL WORK ACROSS DEVICES
  34. 34. KNOW WHAT YOU DESIGN FOR IT MAKES IT EASIERTO FIT ALLTHE PIECESTOGETHER www.flickr.com/photos/songzhen/4893025042
  35. 35. IDENTIFY WHAT YOU CAN RE-USE TO MEET OTHER REQUIREMENTS ACROSS SCREEN SIZES AND PAGES/VIEWS www.flickr.com/photos/songzhen/4893025042
  36. 36. www.flickr.com/photos/katherinekenny ADAPTTOTHE MOBILE CONTEXT THE ORDER AND PRIORITY OF CONTENT AS WELL AS HO W MUCH YOU SHOW AND HOW
  37. 37. www.flickr.com/photos/taytom/5277657429 4.A LOOK AT RESPONSIVE NAVIGATION
  38. 38. www.flickr.com/photos/melodramababs/2766765248/ “ 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
  39. 39. A CLOSER LOOK AT ‘RESPONSIVE NAVIGATION PATTERNS’ by Brad Frost.* Source: http://bradfrostweb.com/blog/web/responsive-nav-patterns http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
  40. 40. SIMPLE NAVIGATION TOP NAV OR “DO NOTHING” KEEPSTHE NAVIGATION ATTHETOP THETOGGLE HIDES NAVIGATION ITEMS IN A MENU THE LEFT NAV FLYOUT MENU ITEMS ARE ACCESSED FROM ATRAY SLIDING IN A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  41. 41. http://skinnyties.com/ TOP NAV OR “DO NOTHING” KEEPSTHE NAVIGATION ATTHETOP PROS Simple to implement Less design & development implications CONS Not scalable Potential height issues Via Brad Frost (thank you!)
  42. 42. PROS Optimises screen use Recognised from apps Scalable CONS Possible animation performance problems Javascript dependent THETOGGLE HIDES NAVIGATION ITEMS IN A MENU http://www.smashingmagazine.com/ Via Brad Frost (thank you!)
  43. 43. Images from Barack Obama via Brad Frost PROS Space generous Recognised nav pattern from apps CONS More advanced and doesn’t work on all devices THE LEFT NAV FLYOUT MENU ITEMS ARE ACCESSED FROM ATRAY SLIDING IN Via Brad Frost (thank you!)
  44. 44. COMPLEX NAVIGATION THE MULTITOGGLE NESTED NAVIGATION GROUPED UNDER A MENU RIGHTTO LEFT THE NEXT LEVEL NAVIGATION SLIDES IN RIGHTTO LEFT SKIPTHE SUB-NAV NEXT LEVEL NAVIGATION IS DISPLAYED ONTHAT LEVEL A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  45. 45. COMPLEX NAVIGATION PRIORITY+ DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’ THE CAROUSEL+ A CAROUSEL WITHTHE PARENT CATEGORIES & SUB-NAV BELOW A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  46. 46. THE MULTITOGGLE NESTED NAVIGATION GROUPED UNDER A MENU Barack Obama - image via Stephanie Riegerhttp://thenextweb.com/ PROS Scannable Scalable CONS Animation performance Javascript dependent Via Brad Frost (thank you!)
  47. 47. PROS Nice looking Follows mobile conventions Scalable CONS More complex to implement Animation performance RIGHTTO LEFT THE NEXT LEVEL NAVIGATION SLIDES IN RIGHTTO LEFT http://www.sony.com/ Via Brad Frost (thank you!)
  48. 48. http://worldwildlife.org/ PROS Simple Removes complexities around sub-navigation CONS Re-quires page refresh & visit for access SKIPTHE SUB-NAV NEXT LEVEL NAVIGATION IS DISPLAYED ONTHAT LEVEL Via Brad Frost (thank you!)
  49. 49. http://www.bbc.co.uk/sport PROS Simple Supports (supposedly) most used) Scalable CONS Hides potentially important items PRIORITY+ DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’ Via Brad Frost (thank you!)
  50. 50. Image from Intel, via Brad Frost PROS Easy to navigate Suitable for touch CONS Doesn’t display all parent categories at once Less good for non- touch devices Not suitable for multi- level sub-navs THE CAROUSEL+ A CAROUSEL WITHTHE PARENT CATEGORIES & SUB-NAV BELOW Via Brad Frost (thank you!)
  51. 51. www.flickr.com/photos/inpivic/5205918163/ CONSIDERYOUR PROJECT ASSESSTHE DEPTH NEEDED AS WELL AS & PROS & CONS OF DIFFERENT NAVIGATION APPROACHES
  52. 52. DEFINETYPES OF NAVIGATION PRIMARY, SECONDARY,TERTIARY AS WELL AS FOOTER & CROSS LINKING http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  53. 53. Screenshot: http://cognition.happycog.com/ BE CONSISTENT USETHE SAME APPROACHTHROUGHOUT & HAVE CLEAR, SAYINGVISUAL CUES
  54. 54. Screenshot: http://cognition.happycog.com/ BE CONSISTENT USETHE SAME APPROACHTHROUGHOUT & HAVE CLEAR, SAYINGVISUAL CUES
  55. 55. CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT Screenshot: www.bbc.co.uk/sport
  56. 56. CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT Screenshot: www.bbc.co.uk/sport
  57. 57. CONSIDER NAVIGATION ACROSS PRODUCTS WHERE APPS & MOBILE OPTIMISED WEBSITES ARE SIMILAR KEEP IT CONSISTENT Screenshot: www.bbc.co.uk/sport
  58. 58. 5.A LOOK AT... APP STRUCTURES & NAVIGATION www.flickr.com/photos/46355638@N00/4414640784
  59. 59. www.flickr.com/photos/gadl/3570118243 EVERY PLATFORM IS ITS OWN LITTLE WORLD WITHTHEIR OWN UI GUIDELINESTHAT USERS ARE USEDTO
  60. 60. Source: http://developer.android.com/design/patterns/new-4-0.html BASIC iOS NAVIGATION CONSISTENT ACROSS VERSIONS NAVIGATION BAR 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. Content area MoreItemItemHome Item iPhone 12:15 PM APP NAME More Customise IMG IMG IMG IMG IMG IMG IMG IMG IMG Item Item Item Item Item Item Item Item MoreItemItemHome Item
  61. 61. 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.
  62. 62. www.flickr.com/photos/inpivic/5205918163/ IDENTIFYYOUR MAIN SECTIONS EACH SHOULD HAVE A CLEAR FOCUS & PURPOSE
  63. 63. SKETCH YOUR SCREEN FLOWS, NAVIGATION & CONTENT www.flickr.com/photos/saucef/7184615025
  64. 64. www.flickr.com/photos/kruger_otto/5581886586 AVOID USINGTHE HOME SCREEN AS A STEPPING POINT CONSIDERTHE USE CASE & ENSUREYOU DELIVERVALUE FROMTHE FIRSTVIEW
  65. 65. RESEARCH COMMON APPROACHES FOR INSPIRATION & BEST PRACTICE www.uxarchive.com/
  66. 66. RESEARCH COMMON APPROACHES FOR INSPIRATION & BEST PRACTICE www.uxarchive.com/tasks/sign_up/
  67. 67. LOOK AT WHAT OTHERS DO BE CREATIVE http://pttrns.com/
  68. 68. http://www.flickr.com/photos/tomitapio/4053123799/in/photostream/ 6. HOWTO... TEST APPS & RESPONSIVE SITES
  69. 69. www.flickr.com/photos/cristiano_betta/2909483129 TESTING APPS STRUCTURE, NAVIGATION, INTERACTIONS &TRANSITIONS
  70. 70. www.flickr.com/photos/adactio/5818096043 TESTING RESPONSIVE SITES DOTHIS AS EARLY AS POSSIBLE
  71. 71. INTHE BROWSER BY RESIZINGTHE BROWSER WINDOW & CHECKINGTHE DISPLAY OF CONTENT http://thenextweb.com/
  72. 72. INTHE BROWSER BY DESIGNING INTHE BROWSER & CREATING A WORKING HTML PROTOTYPE www.flickr.com/photos/jorgeq82/4732700819
  73. 73. USING HANDYTOOLS HELPYOU STYLE &TESTYOURTYPOGRAPHY http://responsive.is/typecast.com
  74. 74. USING EMULATORS ALLOWYOUTOVIEWYOUR SITE ACROSS DEVICES & ORIENTATIONS www.responsinator.com/ http://quirktools.com/screenfly/ http://screenqueri.es/ http://mattkersley.com/responsive/
  75. 75. ON ACTUAL DEVICES EXPENSIVE BUTTHERE ARE WAYS AROUND IT www.flickr.com/photos/arne/5835855777/in/photostream/
  76. 76. BUYING BUNDLES & SHARING HELPING EACH OTHER www.flickr.com/photos/adactio/6800969243/in/photostream/
  77. 77. WITH USERS DEFINEYOUR AUDIENCE,TEST CASES, OBJECTIVES & CONSIDER EXPECTATIONS & LIMITATIONS www.flickr.com/photos/jorgeq82/4732700819
  78. 78. www.flickr.com/photos/icedsoul/3041770422 7.TIMETO... PRACTICE
  79. 79. www.flickr.com/photos/icedsoul/3041770422 MODULAR DESIGN THETASK: 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. Identify a number (not all) main content modules you’d imagine that the site would need and define them for smartphone and desktop. 15 MINUTES EXERCISE ONE
  80. 80. UNDERSTANDTHE CONTENT ACROSS DEVICES & PAGES 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 Ad3 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
  81. 81. Desktop/Tablet Mobile 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 9 Tools 10 Footer 8 Store locator 1 Logo 5 Ad 4 Bath section intro 6 Types of baths IDENTIFY COMMON ELEMENTS DEFINEVARIATIONS BUT RE-USE AS MUCH AS POSSIBLE
  82. 82. www.flickr.com/photos/icedsoul/3041770422 MODULAR DESIGN THETASK: 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. Identify a number (not all) main content modules you’d imagine that the site would need and define them for smartphone and desktop. 15 MINUTES EXERCISE ONE
  83. 83. www.flickr.com/photos/icedsoul/3041770422 RESPONSIVE NAVIGATION THETASK: 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 TWO
  84. 84. SIMPLE NAVIGATION TOP NAV OR “DO NOTHING” KEEPSTHE NAVIGATION ATTHETOP THETOGGLE HIDES NAVIGATION ITEMS IN A MENU THE LEFT NAV FLYOUT MENU ITEMS ARE ACCESSED FROM ATRAY SLIDING IN A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  85. 85. DEFINETYPES OF NAVIGATION PRIMARY, SECONDARY,TERTIARY AS WELL AS FOOTER & CROSS LINKING http://palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  86. 86. www.flickr.com/photos/icedsoul/3041770422 RESPONSIVE NAVIGATION THETASK: 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 TWO
  87. 87. www.flickr.com/photos/icedsoul/3041770422 COMPLEX RESPONSIVE NAVIGATION THETASK: 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 THREE
  88. 88. COMPLEX NAVIGATION THE MULTITOGGLE NESTED NAVIGATION GROUPED UNDER A MENU RIGHTTO LEFT THE NEXT LEVEL NAVIGATION SLIDES IN RIGHTTO LEFT SKIPTHE SUB-NAV NEXT LEVEL NAVIGATION IS DISPLAYED ONTHAT LEVEL A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  89. 89. COMPLEX NAVIGATION PRIORITY+ DISPLAYSTHE MOST IMPORTANT & HIDESTHE REST UNDER ‘MORE’ THE CAROUSEL+ A CAROUSEL WITHTHE PARENT CATEGORIES & SUB-NAV BELOW A selection of Responsive Navigation Patterns by Brad Frost (thank you!)
  90. 90. www.flickr.com/photos/icedsoul/3041770422 COMPLEX RESPONSIVE NAVIGATION THETASK: 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 THREE
  91. 91. http://www.flickr.com/photos/martinteschner/4569495912/ 8.TO SUMMARISE
  92. 92. www.flickr.com/photos/thecaucas/2597813380 GUIDING PRINCIPLES MOBILE 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
  93. 93. www.flickr.com/photos/thecaucas/2597813380 COMMON PROBLEMS NUMBER OF WIREFRAMES DEPENDS ONYOUR PROJECT, BUDGET & TEAM AS WELL AS WHO IS BUILDING IT VISUAL DESIGN LESS STATIC DESIGNS, MORE MODULARITY & PROTOTYPING SCREENSIZES & BREAKPOINTS USE ANALYTICS FOR GUIDANCE & DESIGN FORTHE MOST COMMON ONES WHAT TO TEST ON AS MANY AS POSSIBLE BUT PRIORITISE BASED ONYOUR AUDIENCE IMAGES & ICONS AS FLEXIBLE AS POSSIBLE
  94. 94. www.flickr.com/photos/thecaucas/2597813380 CONTENT STRATEGY & HIERARCHY KNOWYOUR CONTENT PRIORITISE WHAT & HOW MUCH BUT KEEP THE CORE CONTENTTHE SAME CONSIDER THE MOBILE CONTEXT ADAPTTO LAYOUT, INTERACTION AND CONTENT PRIORITY & PRESENTATION DEFINE CONTENT STACKING THE GRID & BREAKPOINTS ISYOUR GUIDE BUT DON'T JUST WORK WITHTHE COLUMNS. CONSIDER EACH MODULE & THE STORY OFTHE PAGE
  95. 95. www.flickr.com/photos/thecaucas/2597813380 RESPONSIVE NAVIGATION RESEARCH DIFFERENT APPROACHES KNOWYOUR OPTIONS &THE PROS & CONS FOR EACH BASE IT ONYOUR PROJECT ASSESS HOW MANY LEVELSTHAT ARE NEEDED & REVIEW APPROACH ACROSS DEVICES BUT ALSO WHAT GOES IN WORK WITH DIFFERENT TYPES IT'S NOT JUST ABOUTTHE MAIN NAVIGATION BUT ALSO SUB-NAVIGATION, SEARCH, IN PAGE LINKS &THE FOOTER BE CONSISTENT USE SAYINGVISUAL CUES & CONSIDER NAVIGATION ACROSS ALL PRODUCTS
  96. 96. www.flickr.com/photos/thecaucas/2597813380 APP STRUCTURES & NAVIGATION BASE ON PROJECT & PLATFORM IDENTIFYYOUR MAIN SECTIONS & KEEP DIFFERENCES IN STRUCTURE & UI GUIDELINES BETWEEN PLATFORMS IN MIND SKETCH BEFORE WIREFRAMING WORKTHROUGHYOUR SCREENFLOW, NAVIGATION & CONTENT ACROSS SCREENS VALUE FROM FIRSTVIEW AVOID USINGTHE HOME SCREEN AS A STEPPING POINT BEST PRACTICE & INSPIRATION FORTYPICALTASK FLOWS & SCREENS
  97. 97. www.flickr.com/photos/thecaucas/2597813380 TESTING APPS & RESPONSIVE SITES TESTING APPS BOTH STRUCTURE, NAVIGATION, INTERACTIONS &TRANSITIONS TESTING RESPONSIVE SITES DOTHIS AS EARLY AS POSSIBLETO ENSURE IT ACTUALLY WORKS INTHE BROWSER TESTING IN THE BROWSER BY RESIZINGTHE BROWSER WINDOW OR DESIGNING & CREATING PROTOTYPES USING EMULATORS ALLOWSYOUTOVIEW HOWYOUR SITE IS DISPLAYED ACROSS DEVICES & ORIENTATIONS
  98. 98. www.flickr.com/photos/thecaucas/2597813380 TESTING APPS & RESPONSIVE SITES ON ACTUAL DEVICES TEST ON AS MANY AS POSSIBLE.THE BEST REPRESENTATION BUT CAN BE EXPENSIVE. INVEST IN KEY DEVICES & POOLTOGETHER TO SHARE DEVICES TESTING WITH USERS TEST EARLY & FREQUENTLY. DEFINEYOUR AUDIENCE,TEST CASES, OBJECTIVES & IDENTIFY SPECIFIC CROSS DEVICE SPECIFIC EXPECTATIONS & LIMITATIONS
  99. 99. www.flickr.com/photos/st3f4n/4387291247 9. FORTHE ROAD SOMETAKE AWAYS
  100. 100. www.flickr.com/photos/st3f4n/4387291247 DEMO, SKETCHING & WORKFLOW www.thismanslife.co.uk/projects/lab/ responsivewireframes/ www.thismanslife.co.uk/projects/lab/ responsiveillustration/ http://nocturnalmonkey.com/archive/ responsive-sketching http://jeremypalford.com/arch-journal/ responsive-web-design-sketch-sheets http://danielmall.com/work/crayola/
  101. 101. www.flickr.com/photos/st3f4n/4387291247 NAVIGATION FOR RESPONSIVE DESIGN http://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
  102. 102. www.flickr.com/photos/st3f4n/4387291247 TESTING http://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
  103. 103. www.flickr.com/photos/st3f4n/4387291247 TESTINGYOUR RESPONSIVE SITE http://responsive.is/typecast.com http://screenqueri.es/ http://www.responsinator.com/ http://quirktools.com/screenfly/ http://mattkersley.com/responsive/ http://responsivepx.com/ http://protofluid.com/ http://responsiveviewport.com/
  104. 104. www.flickr.com/photos/st3f4n/4387291247 TESTING APPS & MOCKUPS http://popapp.in/ http://fieldtestapp.com/ https://www.fluidui.com/ http://www.plunkapp.com/ http://bjango.com/mac/skalapreview/
  105. 105. www.flickr.com/photos/st3f4n/4387291247 DEVICES & SIZES http://www.google.com/analytics/ features/mobile-site-traffic.html http://en.wikipedia.org/wiki/ List_of_displays_by_pixel_density http://opensignal.com/reports/ fragmentation-2013/ https://deviceatlas.com/device-data/ devices Slide 37: http://www.slideshare.net/yiibu/ pragmatic-responsive-design
  106. 106. www.flickr.com/photos/st3f4n/4387291247 OTHER USEFUL LINKS www.slideshare.net/yiibu/pragmatic- responsive-design http://stephanierieger.com/on-designing- content-out-a-response-to-zeldman-and- others/ http://bradfrostweb.com/blog/mobile/ support-vs-optimization/ http://stuffandnonsense.co.uk/blog/about/ we_need_a_standard_show_navigation_i con_for_responsive_web_design http://danielmall.com/work/crayola/
  107. 107. www.flickr.com/photos/st3f4n/4387291247 OTHER USEFUL LINKS http://bradfrostweb.com/blog/mobile/ anatomy-of-a-mobile-first-responsive- web-design/ http://www.thinkwithgoogle.com/ mobileplanet/en/
  108. 108. www.flickr.com/photos/st3f4n/4387291247 DIFFERENT APPS Figure http://pttrns.com/p/175 CirleMe http://pttrns.com/p/176 Gabi http://pttrns.com/p/189 WeatherCube http://pttrns.com/p/252 Tumblr http://pttrns.com/p/226 iTrackMyTime http://inspired-ui.com/ tagged/itrackmytime City Guide http://pttrns.com/p/265 Photolettering http://inspired-ui.com/ tagged/app_photolettering WaterIn http://inspired-ui.com/tagged/ app_waterin
  109. 109. www.flickr.com/photos/st3f4n/4387291247 DIFFERENT APPS Thinglist http://inspired-ui.com/tagged/ app_thinglist Storylane Reader http://pttrns.com/p/251 Brit + Co http://pttrns.com/p/205 Circle http://pttrns.com/p/179 Currency http://pttrns.com/p/259 OmFinder http://inspired-ui.com/tagged/ app_om_finder Tracks http://inspired-ui.com/tagged/ app_tracks
  110. 110. The bridge between Sweden & Denmark, as seen in”The Bridge” - www.flickr.com/photos/dahlstroms/4411448782/ Thank you! QUESTIONS? annadahlstrom annadahlstrom anna.dahlstrom@gmail.com www.annadahlstrom.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×