0
Anna Dahlström
founder byflock
www.annadahlstrom.com
annadahlstrom
London 7th of August 2013 | Part 3 - Advanced
DESIGNING ...
I’m Anna
IA & UX DESIGNER | FREELANCE SINCE 2011
SWEDISH | IN LONDON SINCE 2006
I love ‘fika’
www.flickr.com/photos/nettsu/4...
THIS IS PART 3
INTHE PREVIOUSTWO CLASSES WE’VE COVERED...
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/nomadic_lass/5598218199www.flickr.com/photos/adactio/5818096043
YOUR MOBILE STRATEGY DEPENDS
ONYOUR PR...
www.flickr.com/photos/lastquest/1472794031
” Today's popular devices are
not tomorrow's so building
something which works o...
www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/donsolo/2136923757/
LESS STATICVIEWS & MORE
MODULARITY & PRO...
www.flickr.com/photos/nomadic_lass/5598218199www.flickr.com/photos/pinkpurse/5355919491/
SKETCH,WORK COLLABORATIVELY
TEST FR...
Source: www.flickr.com/photos/dpstyles/3448453466
USE ANALYTICS & RESEARCH FOR
YOUR PRODUCT/ PROJECT AS A
GUIDANCE FOR KEY ...
www.slideshare.net/yiibu/pragmatic-responsive-design
USING MAJOR & MINOR BREAK
POINTSTO ADAPTTO SCREEN
SIZES, LAYOUT & CON...
www.flickr.com/photos/adactio/6153481666
80% of traffic in your analytics will often
come from 20% of devices…seems a shame
...
www.flickr.com/photos/lastquest/1472794031
BUT DIDN’T WE SAY ...
” Today's popular devices are
not tomorrow's so building
s...
www.flickr.com/photos/david_a_lea/3247217194
YES WE DID
AND WE’RE ALREADY FACING
TWO PARTICULAR CHALLENGES
www.flickr.com/photos/lokan/8843464852
1.TOUCH IS NO LONGER LIMITED
TO SMARTPHONES &TABLETS
HELLO HYBRID DESKTOP/ LAPTOPS
www.flickr.com/photos/michale/210536054
2. BREAKPOINTS BASED ON
POPULAR DEVICES PUSHES
US INTO A CORNER
LESS FUTURE PROOF &...
www.flickr.com/photos/suttonhoo22/2070700035
AGENDA
1. DESIGNING FORTOUCH
2. UNDERSTANDINGTHE
MOBILE CONTEXT
3. ADAPTING CO...
1.A LOOK AT
DESIGNING FOR
TOUCH
http://www.flickr.com/photos/eyesore9/3206408088/
www.flickr.com/photos/66327170@N07/7296381856
‘New rule: Every desktop design has to go
finger-friendly’ *
* Source: http://...
www.flickr.com/photos/patdavid/9391602153
” Touch has landed on the desktop “
- JOSH CLARK
Touch screen laptop sales have jumped 52%
in the last quarter. 5 years from now you will
you not be able to buy a Windows ...
flickr.com/photos/soyproject/6066959891/www.flickr.com/photos/jorgeq82/4732700819
CONSIDERTOUCH
ACROSS DEVICES
& SCREEN SIZE...
THE WAY WE USE
TOUCH SCREENS DIFFERS
BASED ON DEVICE BUT ALSO
ACROSSTHE SAME DEVICES
www.flickr.com/photos/intelfreepress/6...
49% OF USERS HOLDTHEIR
PHONE IN ONE HAND
BUT HOWTHEY HOLD IT DIFFERS
Source & images from UX Matters - www.uxmatters.com/m...
HOW WE HOLD OUR
DEVICES CHANGES
IT’S NOT A STATIC STATE
Source & images from UX Matters - www.uxmatters.com/mt/archives/20...
www.flickr.com/photos/75001512@N00/162748768
” Designing for touch means
designing for fingers, yes, but to
be more specific,...
www.flickr.com/photos/4ever30something/451088722
IMPACTS CONTROLS,
PLACEMENT &
INTERACTION
CONSIDER IMPRECISE (e.g. fingers)...
CURRENT APPROACH
TO NAVIGATION
BASED ONTHE MOUSE AS INPUT
Source: Luke W - www.lukew.com/ff/entry.asp?1649
HOW WETENDTO
INTERACT WITH HYBRIDS
REST ARMS &
GRAB BOTTOM
CORNERS
www.flickr.com/photos/intelfreepress/6837427202
CONSIDER REACH &
OBSCURING CONTENT
AND ADJUST NAVIGATION ACCORDINGLY
Source: Luke W - www.lukew.com/ff/entry.asp?1649
From...
Screenshot from http://polarb.com/polls/tags/mobiledesign
”Looking at the Polar interface on a laptop
can be a bit disconc...
2. UNDERSTANDING
THE MOBILE
CONTEXT
http://www.flickr.com/photos/eyesore9/3206408088/
www.flickr.com/photos/icedsoul/2486885051/
MOBILE CONTEXT
≠ MOBILE USE CASE
THE LATTER IS ABOUTTHETASK,
THE FORMER ABOUTTHE...
www.flickr.com/photos/edduddiee/4307943164
REMEMBER...
THE SAMETASKS
ARE CARRIED OUT
ON SMARTPHONES
AS ON DESKTOPS
AS DEVIC...
MOBILE CONTEXT DIFFERS
BASED ON SITUATION, ATTITUDES & PREFERENCES.
www.flickr.com/photos/hoyvinmayvin/5873697252
MOBILE CONTEXT DIFFERS
THE SAME CONTEX DOESN’T EQUALTHE SAME SITUATION
http://www.flickr.com/photos/hoyvinmayvin/5873139941/
www.flickr.com/photos/icedsoul/2486885051/
OTHER ASPECTS
TO CONSIDER
FORTHE MOBILE CONTEXT ARE...
www.flickr.com/photos/nadiya95/7217734288/
ATTENTION SPAN
DATA SNACKINGVS. FOCUSED USAGE
www.flickr.com/photos/arjencito/6531640463/
SIGNAL COVERAGE
SPEED & RELIABILITY OFTHE CONNECTION
LOCATION
MOVING ABOUTVS. IN ONE LOCATION
www.flickr.com/photos/garry61/3191250682
www.flickr.com/photos/adactio/6153481666
THE SCREEN
SMALL, MEDIUM, LARGE &
OF COURSETOUCH OR NOT
POSTURE & GRIP
HOW WE SIT/ STAND AS WELL AS
INTERACT WITHTHE DEVICE
www.flickr.com/photos/helga/3545310740
4.ADAPTING CONTENT
TO DEVICES &
ORIENTATION
http://www.flickr.com/photos/eyesore9/3206408088/
www.flickr.com/photos/chicitoloco/8468592748/in/photostream/
POSTURE, GRIP &
ORIENTATIONVARIES
BASED ONTHE CONTEXT &THE USE...
SITUATIONAL CONTEXT
IMPACTS FIRMVS. LOOSE GRIP
PARTICULARLY IMPORTANT IFYOU HAVE
A SPECIFIC “ONTHE MOVE” USE CASE
www.flick...
CERTAIN ORIENTATIONS ARE
BETTER FOR CERTAINTASKS
E.G. LANDSCAPE WATCHINGVS. PORTRAIT READING
Reading Watching Typing
GOOD GUIDE FOR HOW
TO OPTIMISE DISPLAYTO
ORIENTATION
SUPPORT USERTASKS &
GOALS AS WELL AS
MAKETHE MOST
OFTHE SCREEN
REAL E...
THREE MAIN APPROACHES
FOR ADAPTINGTO ORIENTATION
RE-POSITION REVEAL/ HIDESCALE
5. USING
CONTENT AS
THE BASIS FOR
BREAKPOINTS
http://www.flickr.com/photos/eyesore9/3206408088/
THE WEB IS AFTER ALL
ABOUT CONTENT
NOT WHAT DEVICE WE ARE USING
XXXXXXXX
www.flickr.com/photos/mirafoto/494444094
” Get your content to go anywhere,
because it’s going to go everywhere. “
- BRAD F...
AIMTO MAKE IT
MORE FUTURE “PROOF”
MOVE AWAY FROM SPECIFIC DEVICES
www.flickr.com/photos/byte/8282578241
USE NATURAL BREAKPOINTS
BASED ON CONTENT LAYOUT
RATHERTHAN FOCUSING ON DEVICES
www.flickr.com/photos/sharynmorrow/127184319/
www.flickr.com/photos/visualpunch/7351572896/
LOOK ATTHE DETAILS & BEST
PRACTICE LAYOUT PRINCIPLES
WHAT’S SUITABLE FORTHE C...
NOT WITHOUT
CHALLENGES
BUT, CHALLENGES ARE
MEANTTO BE OVERCOME
www.flickr.com/photos/jdhancock/3521006248
www.flickr.com/photos/nikio/3899114449/
” By default the web has no optimal width,
optimal height, optimal font-sizes or op...
www.flickr.com/photos/soundslogical/4255801733/
” The web has always been fluid; we’ve just
wasted a good number of years fo...
www.flickr.com/photos/donsolo/2136923757/
BRINGS US BACK
TO MODULARITY
LESS FIXEDVIEWS & MORE FOCUS ON
THE BUILDING BLOCKST...
BREAKPOINTS &TWEAKPOINTS
FOCUS ON CONTENT LAYOUT & EMS INSTEAD OF PX
www.slideshare.net/yiibu/pragmatic-responsive-design
THE SAME WITH COLUMNS
OPT FOR FLUID AS MUCH POSSIBLE
http://foundation.zurb.com/docs/layout.php
www.flickr.com/photos/boltofblue/4418442567
KNOWYOUR BUILDING
BLOCKS & WHENTO USETHEM
HOWTO RE-USE & ADAPTTO
CONTENTVARIATI...
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/florianric/7263382550/
JUST ANOTHER WAY
OF APPROACHINGTHINGS
BASING BREAKPOINTS
ON SCREEN SIZES
ISN’T WRONG
BUT IT’S ATEMPORARY WORK AROUND
www.flickr.com/photos/gozalewis/3249104929
6.A LOOK AT
EXAMPLE
FRAMEWORK
http://www.flickr.com/photos/eyesore9/3206408088/
www.flickr.com/photos/byte/8282578241
ANY SCREEN SHOULD BE
YOUR STARTING POINT*
* OF COURSE IT DEPENDS ONYOUR PROJECT
THERE IS NO RIGHT WAY
THIS IS JUST AN EXAMPLE
www.flickr.com/photos/jtravism/2417205289
STEPS FOR APPROACHING
RESPONSIVE & MODULARITY
1. Define target audiences & key user journeys
2. Identify goals & content ne...
www.flickr.com/photos/jdhancock/4354438814
DON’T FORGETTO
TEST & ITERATE
SKETCH AS MUCH AS POSSIBLE FIRST
AND WORK COLLABOR...
www.flickr.com/photos/icedsoul/3041770422
7.TIMETO...
PRACTICE
www.flickr.com/photos/icedsoul/3041770422
DESIGNING FOR
TOUCH
THETASK:
A big news site have approached you to
advice on wha...
THE WAY WE USE
TOUCH SCREENS DIFFERS
BASED ON DEVICE BUT ALSO
ACROSSTHE SAME DEVICES
www.flickr.com/photos/intelfreepress/6...
CONSIDER REACH &
OBSCURING CONTENT
AND ADJUST NAVIGATION ACCORDINGLY
Source: Luke W - www.lukew.com/ff/entry.asp?1649
From...
www.flickr.com/photos/icedsoul/3041770422
DESIGNING FOR
TOUCH
THETASK:
A big news site have approached you to
advice on wha...
www.flickr.com/photos/icedsoul/3041770422
CONTENT BASED
BREAKPOINTS
THETASK:
The same news site have asked you to look
at d...
STEPS FOR APPROACHING
RESPONSIVE & MODULARITY
1. Define target audiences & key user journeys
2. Identify goals & content ne...
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
CONTENT BASED
BREAKPOINTS
THETASK:
The same news site have asked you to look
at d...
www.flickr.com/photos/icedsoul/3041770422
ADAPTINGTO
DEVICE
ORIENTATION
THETASK:
For the same news site, define how the
cont...
CERTAIN ORIENTATIONS ARE
BETTER FOR CERTAINTASKS
E.G. LANDSCAPE WATCHINGVS. PORTRAIT READING
Reading Watching Typing
THREE MAIN APPROACHES
FOR ADAPTINGTO ORIENTATION
RE-POSITION REVEAL/ HIDESCALE
www.flickr.com/photos/icedsoul/3041770422
ADAPTINGTO
DEVICE
ORIENTATION
THETASK:
For the same news site, define how the
cont...
http://www.flickr.com/photos/martinteschner/4569495912/
8.TO
SUMMARISE
www.flickr.com/photos/thecaucas/2597813380
SUMMARY
FACING NEW CHALLENGES WITH
TOUCH HAVING MOVED BEYOND
SMARTPHONES & TABLE...
www.flickr.com/photos/st3f4n/4387291247
9. FORTHE ROAD
SOMETAKE
AWAYS
www.flickr.com/photos/st3f4n/4387291247
DEVICE
INTERACTION
www.uxmatters.com/mt/archives/
2013/02/how-do-users-really-hold-...
www.flickr.com/photos/st3f4n/4387291247
MULTI DEVICES &
TOUCH INPUT
www.lukew.com/ff/entry.asp?1649
http://www.lukew.com/ff...
www.flickr.com/photos/st3f4n/4387291247
MORE RESPONSIVE
DESIGN READING
http://www.netmagazine.com/opinions/
designing-brows...
www.flickr.com/photos/st3f4n/4387291247
BREAKPOINTS
http://www.lukew.com/ff/entry.asp?1714
http://elliotjaystocks.com/blog/...
www.flickr.com/photos/st3f4n/4387291247
AND MORE ON
BREAKPOINTS
http://www.smashingmagazine.com/
2013/03/01/logical-breakpo...
www.flickr.com/photos/dahlstroms/4411448782/
Thank you!
QUESTIONS?
annadahlstrom
annadahlstrom
anna.dahlstrom@gmail.com
www...
Upcoming SlideShare
Loading in...5
×

Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013

2,362

Published on

Slides from the third of my 3 part series classes at General Assembly in London on the 7th of August 2013.

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

ABSTRACT
This 90-minute session will focus on designing for touch across devices - including hybrids - as well as the challenges and opportunities of responsive content. We will cover how to find a balance between controlling layouts and making your products as responsive as possible. By the end of the session you'll have an understanding of:

- the different ways people physically hold and interact with their devices
- how hybrid devices impact design decisions
- why the mobile context matters and what you need to consider
- how to adapt content to device layout and orientations
- using content as the basis for breakpoints rather than devices
- and a framework to use as the starting point for approaching modular and responsive design from an information architect (IA) and user experience (UX) point of view

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

No Downloads
Views
Total Views
2,362
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
123
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Part 3: Advanced Designing for Multiple Devices - GA London, 07 Aug 2013"

  1. 1. Anna Dahlström founder byflock www.annadahlstrom.com annadahlstrom London 7th of August 2013 | Part 3 - Advanced DESIGNING FOR MULTIPLE DEVICES PART 3 of 3
  2. 2. I’m Anna IA & UX DESIGNER | FREELANCE SINCE 2011 SWEDISH | IN LONDON SINCE 2006 I love ‘fika’ www.flickr.com/photos/nettsu/4191824531
  3. 3. THIS IS PART 3 INTHE PREVIOUSTWO CLASSES WE’VE COVERED...
  4. 4. www.flickr.com/photos/exlibris/2552107635 www.flickr.com/photos/yahnyahn/2996454839 MOBILE DEVICES ARE USED ANYWHERE & EVERYWHERE 1 MOBILE
  5. 5. A LARGE PROPORTION OF USAGE HAPPENS WHEN WE HAVETIMETO KILL 2 www.flickr.com/photos/anniemole/2424372024 www.flickr.com/photos/edduddiee/4307943164
  6. 6. THE SAMETASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS 3 www.flickr.com/photos/frantaylor/4296536332 www.flickr.com/photos/stuckincustoms/440157748
  7. 7. USERS INCREASINGLY EXPECT AN EQUAL & CONTINUOS EXPERIENCE ACROSS DEVICES 4 www.flickr.com/photos/demandaj/7287174776 www.flickr.com/photos/joachim_s_mueller/7110473339
  8. 8. CORE CONTENT SHOULD REMAIN THE SAME BUTTHE EXPERIENCE SHOULD BE OPTIMISED 5 www.flickr.com/photos/ericconstantineau/5618576278 www.flickr.com/photos/jmtimages/2883279193
  9. 9. www.flickr.com/photos/nomadic_lass/5598218199www.flickr.com/photos/adactio/5818096043 YOUR MOBILE STRATEGY DEPENDS ONYOUR PROJECT, BUDGET & CURRENTTECHNICAL PLATFORM 6
  10. 10. www.flickr.com/photos/lastquest/1472794031 ” 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. www.flickr.com/photos/jorgeq82/4732700819 www.flickr.com/photos/donsolo/2136923757/ LESS STATICVIEWS & MORE MODULARITY & PROTOTYPING. NUMBER OF WIREFRAMES DEPENDS 7
  12. 12. www.flickr.com/photos/nomadic_lass/5598218199www.flickr.com/photos/pinkpurse/5355919491/ SKETCH,WORK COLLABORATIVELY TEST FREQUENTLY & REPEATEDLY 8
  13. 13. Source: www.flickr.com/photos/dpstyles/3448453466 USE ANALYTICS & RESEARCH FOR YOUR PRODUCT/ PROJECT AS A GUIDANCE FOR KEY SCREEN SIZES 9
  14. 14. www.slideshare.net/yiibu/pragmatic-responsive-design USING MAJOR & MINOR BREAK POINTSTO ADAPTTO SCREEN SIZES, LAYOUT & CONTENT NEEDS 10
  15. 15. 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
  16. 16. www.flickr.com/photos/lastquest/1472794031 BUT DIDN’T WE SAY ... ” 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
  17. 17. www.flickr.com/photos/david_a_lea/3247217194 YES WE DID AND WE’RE ALREADY FACING TWO PARTICULAR CHALLENGES
  18. 18. www.flickr.com/photos/lokan/8843464852 1.TOUCH IS NO LONGER LIMITED TO SMARTPHONES &TABLETS HELLO HYBRID DESKTOP/ LAPTOPS
  19. 19. www.flickr.com/photos/michale/210536054 2. BREAKPOINTS BASED ON POPULAR DEVICES PUSHES US INTO A CORNER LESS FUTURE PROOF & MORETO MAINTAIN
  20. 20. www.flickr.com/photos/suttonhoo22/2070700035 AGENDA 1. DESIGNING FORTOUCH 2. UNDERSTANDINGTHE MOBILE CONTEXT 3. ADAPTING CONTENTTO DEVICES & ORIENTATION 4. USING CONTENT ASTHE BASIS FOR BREAKPOINTS 5. EXAMPLE FRAMEWORK 6. EXERCISES 7. SUMMARY 8. Q & A
  21. 21. 1.A LOOK AT DESIGNING FOR TOUCH http://www.flickr.com/photos/eyesore9/3206408088/
  22. 22. www.flickr.com/photos/66327170@N07/7296381856 ‘New rule: Every desktop design has to go finger-friendly’ * * Source: http://globalmoxie.com/blog/desktop-touch-design.shtml
  23. 23. www.flickr.com/photos/patdavid/9391602153 ” Touch has landed on the desktop “ - JOSH CLARK
  24. 24. Touch screen laptop sales have jumped 52% in the last quarter. 5 years from now you will you not be able to buy a Windows computer without a touch screen* * Source: http://www.lukew.com/ff/entry.asp?1750 Screenshot from www.currys.co.uk
  25. 25. flickr.com/photos/soyproject/6066959891/www.flickr.com/photos/jorgeq82/4732700819 CONSIDERTOUCH ACROSS DEVICES & SCREEN SIZES NOT JUST MOBILE &TABLETS
  26. 26. THE WAY WE USE TOUCH SCREENS DIFFERS BASED ON DEVICE BUT ALSO ACROSSTHE SAME DEVICES www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
  27. 27. 49% OF USERS HOLDTHEIR PHONE IN ONE HAND BUT HOWTHEY HOLD IT DIFFERS Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php ONE HAND (R: 66% L: 33%) CRADLING (L: 79% R: 21%) TWO HANDS 72% 28% 90% 10%
  28. 28. HOW WE HOLD OUR DEVICES CHANGES IT’S NOT A STATIC STATE Source & images from UX Matters - www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  29. 29. www.flickr.com/photos/75001512@N00/162748768 ” Designing for touch means designing for fingers, yes, but to be more specific, you’re really designing for thumbs. “ - JOSH CLARK
  30. 30. www.flickr.com/photos/4ever30something/451088722 IMPACTS CONTROLS, PLACEMENT & INTERACTION CONSIDER IMPRECISE (e.g. fingers)VS. PRECISE (e.g. mouse) INPUT MEANS
  31. 31. CURRENT APPROACH TO NAVIGATION BASED ONTHE MOUSE AS INPUT Source: Luke W - www.lukew.com/ff/entry.asp?1649
  32. 32. HOW WETENDTO INTERACT WITH HYBRIDS REST ARMS & GRAB BOTTOM CORNERS www.flickr.com/photos/intelfreepress/6837427202
  33. 33. CONSIDER REACH & OBSCURING CONTENT AND ADJUST NAVIGATION ACCORDINGLY Source: Luke W - www.lukew.com/ff/entry.asp?1649 From... ...towards
  34. 34. Screenshot from http://polarb.com/polls/tags/mobiledesign ”Looking at the Polar interface on a laptop can be a bit disconcerting because we’ve essentially left the middle of the page “blank”.“ - LUKE W
  35. 35. 2. UNDERSTANDING THE MOBILE CONTEXT http://www.flickr.com/photos/eyesore9/3206408088/
  36. 36. www.flickr.com/photos/icedsoul/2486885051/ MOBILE CONTEXT ≠ MOBILE USE CASE THE LATTER IS ABOUTTHETASK, THE FORMER ABOUTTHETOTAL SUM OFTHE USER’S MOBILE EXPERIENCE
  37. 37. www.flickr.com/photos/edduddiee/4307943164 REMEMBER... THE SAMETASKS ARE CARRIED OUT ON SMARTPHONES AS ON DESKTOPS AS DEVICES & EXPERIENCE BECOME MORE OPTIMISED USAGE &TASK EXECUTION IS INCREASING
  38. 38. MOBILE CONTEXT DIFFERS BASED ON SITUATION, ATTITUDES & PREFERENCES. www.flickr.com/photos/hoyvinmayvin/5873697252
  39. 39. MOBILE CONTEXT DIFFERS THE SAME CONTEX DOESN’T EQUALTHE SAME SITUATION http://www.flickr.com/photos/hoyvinmayvin/5873139941/
  40. 40. www.flickr.com/photos/icedsoul/2486885051/ OTHER ASPECTS TO CONSIDER FORTHE MOBILE CONTEXT ARE...
  41. 41. www.flickr.com/photos/nadiya95/7217734288/ ATTENTION SPAN DATA SNACKINGVS. FOCUSED USAGE
  42. 42. www.flickr.com/photos/arjencito/6531640463/ SIGNAL COVERAGE SPEED & RELIABILITY OFTHE CONNECTION
  43. 43. LOCATION MOVING ABOUTVS. IN ONE LOCATION www.flickr.com/photos/garry61/3191250682
  44. 44. www.flickr.com/photos/adactio/6153481666 THE SCREEN SMALL, MEDIUM, LARGE & OF COURSETOUCH OR NOT
  45. 45. POSTURE & GRIP HOW WE SIT/ STAND AS WELL AS INTERACT WITHTHE DEVICE www.flickr.com/photos/helga/3545310740
  46. 46. 4.ADAPTING CONTENT TO DEVICES & ORIENTATION http://www.flickr.com/photos/eyesore9/3206408088/
  47. 47. www.flickr.com/photos/chicitoloco/8468592748/in/photostream/ POSTURE, GRIP & ORIENTATIONVARIES BASED ONTHE CONTEXT &THE USE CASE www.flickr.com/photos/edduddiee/4307943164
  48. 48. SITUATIONAL CONTEXT IMPACTS FIRMVS. LOOSE GRIP PARTICULARLY IMPORTANT IFYOU HAVE A SPECIFIC “ONTHE MOVE” USE CASE www.flickr.com/photos/kalexanderson/6716348037
  49. 49. CERTAIN ORIENTATIONS ARE BETTER FOR CERTAINTASKS E.G. LANDSCAPE WATCHINGVS. PORTRAIT READING Reading Watching Typing
  50. 50. GOOD GUIDE FOR HOW TO OPTIMISE DISPLAYTO ORIENTATION SUPPORT USERTASKS & GOALS AS WELL AS MAKETHE MOST OFTHE SCREEN REAL ESTATE www.flickr.com/photos/frank3/5865336902
  51. 51. THREE MAIN APPROACHES FOR ADAPTINGTO ORIENTATION RE-POSITION REVEAL/ HIDESCALE
  52. 52. 5. USING CONTENT AS THE BASIS FOR BREAKPOINTS http://www.flickr.com/photos/eyesore9/3206408088/
  53. 53. THE WEB IS AFTER ALL ABOUT CONTENT NOT WHAT DEVICE WE ARE USING XXXXXXXX
  54. 54. www.flickr.com/photos/mirafoto/494444094 ” Get your content to go anywhere, because it’s going to go everywhere. “ - BRAD FROST
  55. 55. AIMTO MAKE IT MORE FUTURE “PROOF” MOVE AWAY FROM SPECIFIC DEVICES www.flickr.com/photos/byte/8282578241
  56. 56. USE NATURAL BREAKPOINTS BASED ON CONTENT LAYOUT RATHERTHAN FOCUSING ON DEVICES www.flickr.com/photos/sharynmorrow/127184319/
  57. 57. www.flickr.com/photos/visualpunch/7351572896/ LOOK ATTHE DETAILS & BEST PRACTICE LAYOUT PRINCIPLES WHAT’S SUITABLE FORTHE CONTENT
  58. 58. NOT WITHOUT CHALLENGES BUT, CHALLENGES ARE MEANTTO BE OVERCOME www.flickr.com/photos/jdhancock/3521006248
  59. 59. www.flickr.com/photos/nikio/3899114449/ ” By default the web has no optimal width, optimal height, optimal font-sizes or optimal anything really. “ - EDWARD O'RIORDAN
  60. 60. www.flickr.com/photos/soundslogical/4255801733/ ” The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. “ - ELLIOT J STOCKS
  61. 61. www.flickr.com/photos/donsolo/2136923757/ BRINGS US BACK TO MODULARITY LESS FIXEDVIEWS & MORE FOCUS ON THE BUILDING BLOCKSTHAT MAKE UP THEVIEWS
  62. 62. BREAKPOINTS &TWEAKPOINTS FOCUS ON CONTENT LAYOUT & EMS INSTEAD OF PX www.slideshare.net/yiibu/pragmatic-responsive-design
  63. 63. THE SAME WITH COLUMNS OPT FOR FLUID AS MUCH POSSIBLE http://foundation.zurb.com/docs/layout.php
  64. 64. www.flickr.com/photos/boltofblue/4418442567 KNOWYOUR BUILDING BLOCKS & WHENTO USETHEM HOWTO RE-USE & ADAPTTO CONTENTVARIATION & SCREEN SIZE
  65. 65. 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 AND DEFINEVARIATIONS &THE ELEMENTSTHEY ARE MADE UP OF
  66. 66. www.flickr.com/photos/florianric/7263382550/ JUST ANOTHER WAY OF APPROACHINGTHINGS
  67. 67. BASING BREAKPOINTS ON SCREEN SIZES ISN’T WRONG BUT IT’S ATEMPORARY WORK AROUND www.flickr.com/photos/gozalewis/3249104929
  68. 68. 6.A LOOK AT EXAMPLE FRAMEWORK http://www.flickr.com/photos/eyesore9/3206408088/
  69. 69. www.flickr.com/photos/byte/8282578241 ANY SCREEN SHOULD BE YOUR STARTING POINT* * OF COURSE IT DEPENDS ONYOUR PROJECT
  70. 70. THERE IS NO RIGHT WAY THIS IS JUST AN EXAMPLE www.flickr.com/photos/jtravism/2417205289
  71. 71. STEPS FOR APPROACHING RESPONSIVE & MODULARITY 1. Define target audiences & key user journeys 2. Identify goals & content needs (user & business) 3. Identify key pages 4. Identify the content & functional requirements for each key page 5. Across all pages identify common content module types, e.g. featured product 6. Re-visit, list & prioritise the content for each page 7. From this Identify the variations that are needed for each content module type 8. Lay out the content modules across key pages (mobile or desktop first) 9. Work through layout and content stacking strategy across devices 10. Define templates for the content module types (variation & across devices) 11. Iteratively work through your pages & adjust modules & variations as needed www.flickr.com/photos/poetatum/3335900523
  72. 72. www.flickr.com/photos/jdhancock/4354438814 DON’T FORGETTO TEST & ITERATE SKETCH AS MUCH AS POSSIBLE FIRST AND WORK COLLABORATIVELY
  73. 73. www.flickr.com/photos/icedsoul/3041770422 7.TIMETO... PRACTICE
  74. 74. www.flickr.com/photos/icedsoul/3041770422 DESIGNING FOR TOUCH THETASK: A big news site have approached you to advice on what they need to consider for making their site more touch friendly across devices, including touch laptops/ desktops. What main changes or considerations do you recommend for the them to make their home page more touch friendly? 10 MINUTES EXERCISE ONE
  75. 75. THE WAY WE USE TOUCH SCREENS DIFFERS BASED ON DEVICE BUT ALSO ACROSSTHE SAME DEVICES www.flickr.com/photos/intelfreepress/6837427202 www.flickr.com/photos/johnkarakatsanis/6902407334 www.flickr.com/photos/jorgeq82/4732700819
  76. 76. CONSIDER REACH & OBSCURING CONTENT AND ADJUST NAVIGATION ACCORDINGLY Source: Luke W - www.lukew.com/ff/entry.asp?1649 From... ...towards
  77. 77. www.flickr.com/photos/icedsoul/3041770422 DESIGNING FOR TOUCH THETASK: A big news site have approached you to advice on what they need to consider for making their site more touch friendly across devices, including touch laptops/ desktops. What main changes or considerations do you recommend for the them to make their home page more touch friendly? 10 MINUTES EXERCISE ONE
  78. 78. www.flickr.com/photos/icedsoul/3041770422 CONTENT BASED BREAKPOINTS THETASK: The same news site have asked you to look at doing their new responsive site but base the breakpoints on content rather than devices.They’ve particularly asked you to look at the following pages: • Home page • News story without video • News story with video •Video with feed (social media & live updates) How do you suggest laying out the content and break it out so that it is modular? 10 MINUTES EXERCISE TWO
  79. 79. STEPS FOR APPROACHING RESPONSIVE & MODULARITY 1. Define target audiences & key user journeys 2. Identify goals & content needs (user & business) 3. Identify key pages 4. Identify the content & functional requirements for each key page 5. Across all pages identify common content module types, e.g. featured product 6. Re-visit, list & prioritise the content for each page 7. From this Identify the variations that are needed for each content module type 8. Lay out the content modules across key pages (mobile or desktop first) 9. Work through layout and content stacking strategy across devices 10. Define templates for the content module types (variation & across devices) 11. Iteratively work through your pages & adjust modules & variations as needed www.flickr.com/photos/poetatum/3335900523
  80. 80. 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
  81. 81. www.flickr.com/photos/icedsoul/3041770422 CONTENT BASED BREAKPOINTS THETASK: The same news site have asked you to look at doing their new responsive site but base the breakpoints on content rather than devices.They’ve particularly asked you to look at the following pages: • Home page • News story without video • News story with video •Video with feed (social media & live updates) How do you suggest laying out the content and break it out so that it is modular? 10 MINUTES EXERCISE TWO
  82. 82. www.flickr.com/photos/icedsoul/3041770422 ADAPTINGTO DEVICE ORIENTATION THETASK: For the same news site, define how the content could change for the following pages based on device orientation: • News story with video •Video with feed (social media & live updates) 10 MINUTES EXERCISE THREE
  83. 83. CERTAIN ORIENTATIONS ARE BETTER FOR CERTAINTASKS E.G. LANDSCAPE WATCHINGVS. PORTRAIT READING Reading Watching Typing
  84. 84. THREE MAIN APPROACHES FOR ADAPTINGTO ORIENTATION RE-POSITION REVEAL/ HIDESCALE
  85. 85. www.flickr.com/photos/icedsoul/3041770422 ADAPTINGTO DEVICE ORIENTATION THETASK: For the same news site, define how the content could change for the following pages based on device orientation: • News story with video •Video with feed (social media & live updates) 10 MINUTES EXERCISE THREE
  86. 86. http://www.flickr.com/photos/martinteschner/4569495912/ 8.TO SUMMARISE
  87. 87. www.flickr.com/photos/thecaucas/2597813380 SUMMARY FACING NEW CHALLENGES WITH TOUCH HAVING MOVED BEYOND SMARTPHONES & TABLETS HOW WE HOLD OUR DEVICES DIFFER AND IMPACTS DESIGN DECISIONS BUT WE NEED TO ACKNOWLEDGE THAT OUR GRIP CHANGES ORIENTATION & TASK CAN BE A GOOD GUIDE FOR CONTENT LAYOUT CONTENT IS WHAT WE SHOULD FOCUS ON, BOTH FOR BUILDING VIEWS & DEFINING BREAK POINTS RE-USABLE MODULES & DESIGNING FOR ANY SCREEN MAKES US MORE FUTURE “PROOF”
  88. 88. www.flickr.com/photos/st3f4n/4387291247 9. FORTHE ROAD SOMETAKE AWAYS
  89. 89. www.flickr.com/photos/st3f4n/4387291247 DEVICE INTERACTION www.uxmatters.com/mt/archives/ 2013/02/how-do-users-really-hold- mobile-devices.php http://globalmoxie.com/blog/desktop- touch-design.shtml www.uxbooth.com/articles/designing- for-mobile-part-2-interaction-design/? goback= %2Egde_79272_member_226720034
  90. 90. www.flickr.com/photos/st3f4n/4387291247 MULTI DEVICES & TOUCH INPUT www.lukew.com/ff/entry.asp?1649 http://www.lukew.com/ff/entry.asp? 1721 http://www.uxmatters.com/mt/ archives/2013/03/common- misconceptions-about-touch.php Examples: http://polarb.com/polls/tags/ mobiledesign
  91. 91. www.flickr.com/photos/st3f4n/4387291247 MORE RESPONSIVE DESIGN READING http://www.netmagazine.com/opinions/ designing-browser http://www.businessinsider.com/html5- vs-apps-why-the-debate-matters-and- who-will-win-2012-11 http://ia.net/blog/responsive- typography-the-basics/ http://daverupert.com/2013/04/ responsive-deliverables http://alistapart.com/article/ future-ready-content
  92. 92. www.flickr.com/photos/st3f4n/4387291247 BREAKPOINTS http://www.lukew.com/ff/entry.asp?1714 http://elliotjaystocks.com/blog/ responsive-web-design-the-war-has-not- yet-been-won http://stephanierieger.com/on- designing-content-out-a-response-to- zeldman-and-others http://www.markboulton.co.uk/ journal/theinbetween http://adactio.com/journal/6044/ http://seesparkbox.com/foundry/ there_is_no_breakpoint
  93. 93. www.flickr.com/photos/st3f4n/4387291247 AND MORE ON BREAKPOINTS http://www.smashingmagazine.com/ 2013/03/01/logical-breakpoints- responsive-design/ www.slideshare.net/yiibu/pragmatic- responsive-design http://alistapart.com/article/designing- for-breakpoints http://dmolsen.com/2013/03/05/ media-query-less-design-content- based-breakpoints-tweakpoints/
  94. 94. 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.

×