In this presentation, Intergen's Mark Delaney (Interactive Designer, Portals and Content) talks about mobile content strategy, context, device experience and gives advice on how to start your journey on creating a responsive website.

1. _MOBILE UX
RESPONSIVE
DESIGN
WORKFLOW
(SO FAR)
Mark Delaney
Experience Designer

2. Responsive Design
Workflow (so far)
Device Diversity
Responsive Web Design
A Revised Workflow
Content Strategy

3. _MOBILE UX
DESIGN
FOR DEVICE
DIVERSITY

4. ZOMBIE
APOCALYPSE
OF MOBILE
DEVICES
Source: www.flickr.com/photos/digitalsextant/3624030270

5. 4.3”
Screen: 4.3” with 960 x 540 & 256 ppi
Browser: Chrome for Android (Chrome 18)
OS: Google Android 4.0
Motorola Droid
RAZR M
Responsive Design – A Workflow that Works
| 5

6. 4.3”
5.5”
Screen: 5.5” with 720 x 1280 & 276 ppi
Browser: Android Webkit
OS: Google Android 4.1
Motorola Droid
RAZR M
Samsung Galaxy
Note II
Responsive Design – A Workflow that Works
| 6

7. 4.3”
5.5”
7.9”
Screen: 7.9” with 768 x 1024 & 163 ppi
Browser: Apple Safari 6
OS: iOS 6
Motorola Droid
RAZR M
Samsung Galaxy
Note II
Responsive Design – A Workflow that Works
Apple iPad Mini
| 7

8. 4.3”
5.5”
7.9”
12.5”
Screen: 12.5” with 920 x 1080 & 163 ppi
Browser: IE 10
OS: Microsoft Windows 8 RT
Motorola Droid
RAZR M
Samsung Galaxy
Note II
Responsive Design – A Workflow that Works
Apple iPad Mini
Dell XPS 12
| 8

9. Close to 40 new devices
released from major
manufacturers in about a 7
week window

10. SPOT THE
TREND
Source: www.flickr.com/photos/whiteafrican/2938685296

11. Smart Phone
3.5”
iPhone 3GS
Responsive Design – A Workflow that Works
4.0”
HTC Windows
Phone 8S
4.3”
4.5”
Motorola Droid
RAZR M
Nokia Lumina 920
4.7”
LG Nexus 4
| 11

12. Notice a trend?

13. Smart Phone
3.5”
iPhone 3GS
Responsive Design – A Workflow that Works
4.0”
HTC Windows
Phone 8S
4.3”
4.5”
Motorola Droid
RAZR M
Nokia Lumina 920
4.7”
LG Nexus 4
| 13

14. 3.5”
Motorola Droid
RAZR M
4.5”
Nokia Lumina 920
Responsive Design – A Workflow that Works
4.7”
5.3”
5.5”
LG Nexus 4
Samsung Galaxy Note
Samsung Galaxy Note II
| 14

15. “Yeah, nah, I‟
m talking on
a book”
Responsive Design – A Workflow that Works
| 15

16. WHAT
ABOUT
TABLET
DEVICES?
Source: www.flickr.com/photos/johanl/4816110696

17. Tablet
9.7”
Apple iPad
Responsive Design – A Workflow that Works
10.1”
Acer Iconia Tab W510
Dell XPS 10
Asus Vivo Tab RT
| 17

18. Tablet
7.0”
Google Nexus 7
Responsive Design – A Workflow that Works
7.9”
Apple iPad Mini
8.9”
Kindle Fire HD
9.7”
Apple iPad
| 18

19. Notice a trend?

20. One Single Continuum
Desktop
Laptop
Tablet
Smart Phone
3”
5”
7”
9”
11”
13”
15”
17”
19”
21”
23”
25”
27”
Size Continuum
Source: LukeW.com
Responsive Design – A Workflow that Works
| 20

21. iPhone Wrist
Responsive Design – A Workflow that Works
| 21

22. Smart TV
Responsive Design – A Workflow that Works
| 22

23. You only need one web design:
A multi-device a.k.a
responsive design

24. _MOBILE UX
RESPONSIVE
WEB
DESIGN

25. RWD
BALANCING
ACT
Source: www.flickr.com/photos/jordanfischer/63832583

26. Responsive Web Design
The 3 core ingredients
■ A flexible, grid-based layout
The benefits of creating a liquid layout are becoming
too great to ignore
Responsive Design – A Workflow that Works
| 26

27. Responsive Web Design
The FED ingredients
■ A flexible, grid-based layout
The benefits of creating a liquid layout are becoming
too great to ignore
■ Media queries
Allow you to gather data about site visitors and use it
to apply the appropriate styles
Responsive Design – A Workflow that Works
| 27

28. Responsive Web Design
The FED ingredients
■ A flexible, grid-based layout
The benefits of creating a liquid layout are becoming
too great to ignore
■ Media queries
Allow you to gather data about site visitors and use it
to apply the appropriate styles
■ Flexible images and media
Being able to create flexible images is an important
consideration when trying to create a flexible layout
Responsive Design – A Workflow that Works
| 28

29. Responsive Design is not a panacea…
Rather a great step
in the right direction

30. Mobile is so
much more than
a small screen
Source: www.flickr.com/photos/jurvetson/5201796697

31. _MOBILE UX
A MORE
FLEXIBLE
WORKFLOW

32. TRADITIONAL
APPROACH
Source: www.flickr.com/photos/jurvetson/5201796697

33. Design Process
A typical waterfall approach
to task planning
Project Kick-off
Meeting and User
Research
IA, Interaction
Design and
Wireframes
High Fidelity
Visual UI Designs
(PSDs)
Front-End
Development
and Testing
Conduct internal and
external stakeholder
research, establish project
goals and design direction.
Planning IA and creating
wireframes to determine
content and layout for
key page templates
Detailed PSD mock-ups of
key page templates to
illustrate visual UI design
(„look and feel)
HTML & CSS is created
for key templates to be
handed over to the
development team.
Discover
Define
Responsive Design – A Workflow that Works
Design
Deliver
| 33

34. Designing only pixel
perfect mock-ups makes
it difficult near impossible
to then think responsively
—Mark Delaney, Designer

35. AN
EMERGING
PROCESS
Source: www.flickr.com/photos/rhinoneal/6200358032

36. Set better expectations
Source: www.flickr.com/photos/carbonnyc/2154870998

37. Lead more
productive design
conversations
Source: www.flickr.com/photos/zenilorac/698514624

38. Increase collaboration
Source: www.flickr.com/photos/aon/7184559114

39. Test designs before
committing to them
Source: www.flickr.com/photos/jcfrog/4692750598

40. Staying lean & collecting feedback often
Minimises the time heading
down the wrong path

41. Responsive Workflow
User Research &
Collaborative Sketches
Low-fi HTML
Prototype
Sketches can involve the whole team &
can help everyone communicate.
HTML & CSS templates can begin as soon as
initial wireframes are complete
Content
Analysis, Modelling &
IA
Planning content, IA, &
templates should occur
prior to design details.
Discover & Define
Define & Design
Visual Design & Style
Prototype
Front-End Development
and Testing
Style prototyping can begin as
soon as consensus forms around
content & components allowing
for the concurrent, but
independent exploration of style.
As low fidelity & style
prototypes evolve, they can
converge into a single higher
fidelity prototype ready for
testing & final sign-off.
Define & Design
Define, Design & Deliver
Static or Interactive Wireframes
Design & Deliver
Model key pages, map content &
define components & variations.
Design & Deliver
Responsive Design – A Workflow that Works
| 41

42. _MOBILE UX
MOBILE
CONTENT
STRATEGY

43. CONTENT
& CONTEXT
Source: www.flickr.com/photos/joeshlabotnik/2359224681

44. Adaptive Content
■ Structured content
Small chunks of content that adapt to other devices.
Responsive Design – A Workflow that Works
| 44

45. Adaptive Content
■ Structured content
Small chunks of content that adapt to other devices.
■ Presentation-independent content
Raw content without formatting.
Responsive Design – A Workflow that Works
| 45

46. Adaptive Content
■ Structured content
Small chunks of content that adapt to other devices.
■ Presentation-independent content
Raw content without formatting.
■ Reusable content
Content that is used on multiple platforms and
in many formats.
Responsive Design – A Workflow that Works
| 46

47. Adaptive Content
■ Structured content
Small chunks of content that adapt to other devices.
■ Presentation-independent content
Raw content without formatting.
■ Reusable content
Content that is used on multiple platforms and
in many formats.
■ Meaningful metadata
Data that describes the content for easy interpretation.
Responsive Design – A Workflow that Works
| 47

48. “Content is like water.
You put water into a cup
it becomes the cup.
You put water into a
bottle it becomes the
bottle”.
Josh Clarke – Seven Deadly Mobile Myths

49. OLD
CONTEXT
Source: www.flickr.com/photos/joeshlabotnik/2359224681

50. Mobile
Stereotypes
www.flickr.com/photos/oimax/3800475934

51. New Context
www.flickr.com/photos/othree/5224045406

52. New Context
www.flickr.com/photos/othree/5224045406

53. Mobile is not the
“light” version

54. MOBILE
FIRST
RESPONSIVE
DESIGN
www.flickr.com/photos/pete-karl/4637024524

55. Mobile Last
Degraded and retro-fitted?
Responsive Design – A Workflow that Works
| 55

56. Mobile First
Progressively enhanced & future-friendly
Responsive Design – A Workflow that Works
| 56

57. A FEW
FINAL
THOUGHTS
_MOBILE UX

58. THE MOBILE
WEB IS
DIFFICULT
… BUT IT‟S
WORTH IT
Source: Kathy Slamen Photography

59. Responsive Design
Some of the things that we‟ve
learnt along the way
■ Challenge traditional processes
Responsive Design – A Workflow that Works
| 59

60. Responsive Design
Some of the things that we‟ve
learnt along the way
■ Challenge traditional processes
■ You can’t wing content
Responsive Design – A Workflow that Works
| 60

61. Responsive Design
Some of the things that we‟ve
learnt along the way
■ Challenge traditional processes
■ You can’t wing content
■ Optimize for touch
Responsive Design – A Workflow that Works
| 61

62. Responsive Design
Some of the things that we‟ve
learnt along the way
■ Challenge traditional processes
■ You can’t wing content
■ Optimize for touch
■ Design for mobile first
Responsive Design – A Workflow that Works
| 62

63. Where do I start?

64. mobilewebbestpractices.com
www.flickr.com/photos/perfectoinsecto/4871175954

65. Develop your mobile strategy…
but in the meantime there are
some useful things you can do
today

66. Step 1
Review your traffic logs and
determine what mobile devices are
accessing your site today

67. Step 2
Test your site on those devices to
determine where the experience
breaks down

68. Step 3
Develop an action plan to address
common issues – e.g. small touch
targets, large images…

69. Let‟s create
future friendly
experiences
www.flickr.com/photos/lorena-s/6285307719

70. It‟s going to be fun.
www.flickr.com/photos/othree/5224045406

71. Thank you
Email:
mark.delaney@intergen.co.nz
Mobile:
021 466 027
Twitter:
@TeamIntergen