A look into ten ways to better equip yourself for the challenges of designing content for mobile. Presentation for BrightonSEO 2015.

1. DESIGNING
CONTENT
FOR MOBILE
Vicke Cheung @VickeKaravan

2. MOBILE is
a big deal.

3. MOBILE is
a big deal.
set to get even bigger.

4. At SearchLove London 2014,
Will Critchlow presented…

5. …concluding that…
“CONTENT MARKETING
IS MOBILE MARKETING
”
slideshare.net/DistilledSEO/
searchlove-london-will-critchlow-the-threat-of-mobile

6. Things weren’t
always this way.

7. My first Distilled project from 2012

8. …and as seen on mobile…
(in other words: no mobile considerations!)

9. We’ve come a long
way since then.

10. podio.com/site
/creative-routines

11. photoworld.com
/photos-on-the-web

12. concerthotels.com
/worlds-greatest
-vocal-ranges

13. Put your learning
caps on!

14. EMBRACE THE
TRUE MEANING
OF MOBILE FIRST
Lesson No. 1

15. “MOBILE FIRST”
DOES NOT MEAN…
…to have a good
fallback for mobile.

16. “MOBILE FIRST”
DOES NOT MEAN…
…nail desktop version
first then implement
mobile from it.

17. It means design and
build the MOBILE
version FIRST.

18. In 2010, Ethan Marcotte coined
the term “Responsive Web Design”.
alistapart.com/article/responsive-web-design

19. This is generally associated with
building a flexible desktop site…

20. …that can therefore adapt well to
smaller display i.e. mobile.

21. Method 1 =So… ?Method 2
Step 1.
Step 2.

22. Method 1 =So… ?Method 2
I’m afraid not.

23. Method 1
Step 1.
Loads of awesome
features using cutting-
edge technology
Step 2.

24. Method 1
Step 1.
Loads of awesome
features using cutting-
edge technology
Not compatible with
the awesomeness…so
left with a watered-
down version.
Step 2.

25. Method 2
Step 1.
Step 2.
Aware of mobile
constraints and can
work with them
from the start
Add features later
on to desktop only
if it enriches the
experience

26. PROBLEM
Space is a premium.

27. SOLUTION
KISS principle
( Keep it simple, stupid. )

28. KEEP IT SIMPLE
STUPID
Lesson No. 2

29. John Maeda
“The simplest way to achieve
simplicity is through
thoughtful reduction.
”
Rule Number 1, The Laws of Simplicity

30. In other words…
Start designing with only
the most vital elements of
your content or story.

31. My content crush of 2014…

32. sins.nfb.ca

33. Doubting Thomas
(aka Vicke Cheung)
“There’s no way it’ll be as
good on mobile.
”

34. I was wrong!

35. Keep it simple
IT TICKED THIS BOX

36. Seven sins Supporting
video stills
There’s focus on the core
elements of the story

37. Notice anything wrong?

38. Orphan alert!

39. LEARN TO LET GO,
PLAN FOR CHANGE
Lesson No. 3

40. TRANSITIONING FROM A
PRINT DESIGNER
Hey, I think
the alignment
is 2mm out!
Ok, let’s
try another
test print.

41. TO DESIGNING
FOR WEB
Hey, this
looks different
in Safari!
…Sure
…and?

42. IT’S TOUGH.
But then you learn…

43. It’s about…
designing a fluid
framework for
content and not
meticulous control.

44. It’s about…
understanding that not
every device will render
exactly as your designs.

45. It’s about…
ALLOWING
FOR CHANGE.

46. It’s pointless designing
for a specific screen size.

47. There are far too many!
screensiz.es

48. Lesson No. 4
MAKE DECISIONS
WITH CONTEXT
IN MIND

49. Work in progress,
Distilled.

50. Developer feedback
“Looks good, but probably
change the fixed bar at the
bottom – it looks too much
like the native mobile UI.
”

51. Huh?…

52. Android iOS

53. This is
the problem.

54. Don’t fall into the trap
of only designing for
devices you know.

55. Be aware of your design
in the context of different
operating systems.

56. TEST ON
REAL DEVICES
Lesson No. 5

57. Do you know about
Chrome’s in-built
mobile emulator?

58. Right click > Inspect Element

59. Click the mobile icon to start emulator

60. Convenient testing at your fingertips

61. Saves your desk from looking like this.

62. This mobile emulator
is a great tool. But…

63. It’s no substitute
for the real deal.

64. BECAUSE
You’re at a greater distance
from your computer than
you would be if using a
mobile device.

65. BECAUSE
A cursor’s precision is
misleading if you’re
designing for thumb and
finger interactions.

66. 12Lorem Ipsum
Take this design for example.
Seems fine in theory…

67. 12Lorem Ipsu m
100%8:08 AM
But in practice,
with touchscreen devices…

68. Your finger obscures the number
if you try to tap on the arrows.
12Lorem Ipsu m
100%8:08 AM

69. LASTLY, DON’T FORGET
Hover states don’t exist on
touchscreen devices!

70. All these factors can
influence your design.
e.g. FONT SIZING /
SPACING / STYLING

71. So check in now and
again on a real device.

72. Lesson No. 6
DON’T ALWAYS
TRY TO REINVENT
THE WHEEL

73. Everyone wants to be
an INNOVATOR.

74. But creating unique
UI and UX elements
comes with a risk.

75. You risk confusing
your users*.
*who then leave and may never return!

76. SOLUTION
Use patterns.

77. Patterns are
designed solutions to
common problems.

78. FOR EXAMPLE
The hamburger
menu

79. You see this on any website,
and you know what it does.
google.com/drive

80. But if we were to alter the icon…
Suddenly, you’re left confused.
google.com/drive

81. This is just one
example of many.

82. Check out…
pttrns.com

83. IN SUMMARY
Make use of tried
and tested patterns

84. IN SUMMARY
Avoid implementing
new elements for the
sake of uniqueness!

85. BE OPEN TO
INSPIRATION
Lesson No. 7

86. BE CURIOUS
[ PART ONE ]

87. I’m always on the
lookout for great
mobile design.

88. By building a bank of inspiration now,
it’ll come in handy sooner or later.
pinterest.com/thlco/design-mobile-tablet

89. ASK QUESTIONS
[ PART TWO ]

90. QUESTION
I found an awesome
responsive website;
how can we make
ours like that?

91. Check in with
a developer…
ANSWER

92. They will have good
recommendations on
what is feasible or not.

93. Developers are also
great at knowing when
to sacrifice design
for performance…

94. …because…

95. Lesson No. 8
REMEMBER:
FORM FOLLOWS
FUNCTION

96. This golden rule
applies to every
facet of design…

97. …and design for
web & mobile
is no different.

98. bradfrost.com/blog/web/
responsive-web-design-missing-the-point/
This blog post has been quoted
from time and time again…

99. Brad Frost
“Your visitors don’t give a shit
if you’re site is responsive.
”
bradfrost.com/blog/web/
responsive-web-design-missing-the-point/

100. Confused?
Carry on reading…

101. Brad Frost
“They DO give a shit
if they can’t get done what
they need to get done.
”bradfrost.com/blog/web/
responsive-web-design-missing-the-point/

102. Brad Frost
“They DO give a shit
when your site takes
20 seconds to load.
”bradfrost.com/blog/web/
responsive-web-design-missing-the-point/

103. THE POINT IS
It’s not enough
to have content
responsive on a
purely visual level…

104. Performance
is KEY.
THE POINT IS

105. Longer load time
=
Higher rate of
abandonment

106. Remember
Chrome’s in-built
mobile emulator?

107. It can also emulate network speeds.

108. Don’t assume your
users will always be
connected to wifi.

109. So what can you do?…

110. Lesson No. 9
SERVE
SELECTIVELY

111. Let’s take this piece for example.
podio.com/site/budget-busters

112. It responds fluidly
from mobile to larger screens
podio.com/site/budget-busters

113. The image will look great at all sizes as
I’ve used the highest res possible.
podio.com/site/budget-busters

114. Job done, right?

115. Wrong!

116. Don’t serve to same
large image file
to mobile as you
do for desktop.

117. Save versions
of the image in
different sizes.
INSTEAD

118. podio.com/site/budget-busters
image-small.jpg image.jpg

119. Use media queries
or javascript to specify
when each image
size should load

120. Mobile devices will
not be burdened
with loading huge
desktop images.
THEREFORE

121. Planning all
these variations
isn’t simple…

122. But it’s made
easier by starting
MOBILE FIRST.

123. Wrapping
up now…

124. My future self
“Wow, those slides from
BrightonSEO 2015 are
so outdated now!
”

125. It sums up our
rapidly changing
industry.

126. But what you
can bank on not
changing is…

127. We’ll always have to
be USER-CENTRIC.

128. All these lessons
have boiled down
to this…

129. Lesson No. 10
PUT YOUR
USERS FIRST

130. All technological
changes aside…

131. Recognising your
users’ needs is
paramount to success.

132. THANK YOU!
@VickeKaravan
vicke.cheung@distilled.net
Vicke Cheung