Ten Lessons in Designing Content for Mobile

DESIGNING
CONTENT
FOR MOBILE
Vicke Cheung @VickeKaravan

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

At SearchLove London 2014,
Will Critchlow presented…

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

Things weren’t
always this way.

My first Distilled project from 2012

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

We’ve come a long
way since then.

podio.com/site
/creative-routines

photoworld.com
/photos-on-the-web

concerthotels.com
/worlds-greatest
-vocal-ranges

EMBRACE THE
TRUE MEANING
OF MOBILE FIRST
Lesson No. 1

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

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

It means design and
build the MOBILE
version FIRST.

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

This is generally associated with
building a flexible desktop site…

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

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

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

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

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.

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

SOLUTION
KISS principle
( Keep it simple, stupid. )

KEEP IT SIMPLE
STUPID
Lesson No. 2

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

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

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

Keep it simple
IT TICKED THIS BOX

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

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

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

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

IT’S TOUGH.
But then you learn…

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

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

It’s about…
ALLOWING
FOR CHANGE.

It’s pointless designing
for a specific screen size.

There are far too many!
screensiz.es

Lesson No. 4
MAKE DECISIONS
WITH CONTEXT
IN MIND

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

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

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

TEST ON
REAL DEVICES
Lesson No. 5

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

Click the mobile icon to start emulator

Convenient testing at your fingertips

Saves your desk from looking like this.

This mobile emulator
is a great tool. But…

It’s no substitute
for the real deal.

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

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

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

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

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

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

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

So check in now and
again on a real device.

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

Everyone wants to be
an INNOVATOR.

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

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

Patterns are
designed solutions to
common problems.

FOR EXAMPLE
The hamburger
menu

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

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

This is just one
example of many.

IN SUMMARY
Make use of tried
and tested patterns

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

BE OPEN TO
INSPIRATION
Lesson No. 7

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

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

ASK QUESTIONS
[ PART TWO ]

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

Check in with
a developer…
ANSWER

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

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

Lesson No. 8
REMEMBER:
FORM FOLLOWS
FUNCTION

This golden rule
applies to every
facet of design…

…and design for
web & mobile
is no different.

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

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

Brad Frost
“They DO give a shit
if they can’t get done what
they need to get done.
”bradfrost.com/blog/web/

Brad Frost
“They DO give a shit
when your site takes
20 seconds to load.
”bradfrost.com/blog/web/

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

Performance
is KEY.
THE POINT IS

Longer load time
=
Higher rate of
abandonment

Remember
Chrome’s in-built
mobile emulator?

It can also emulate network speeds.

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

Lesson No. 9
SERVE
SELECTIVELY

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

It responds fluidly
from mobile to larger screens

The image will look great at all sizes as
I’ve used the highest res possible.

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

Save versions
of the image in
different sizes.
INSTEAD

image-small.jpg image.jpg

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

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

Planning all
these variations
isn’t simple…

But it’s made
easier by starting
MOBILE FIRST.

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

It sums up our
rapidly changing
industry.

But what you
can bank on not
changing is…

We’ll always have to
be USER-CENTRIC.

All these lessons
have boiled down
to this…

Lesson No. 10
PUT YOUR
USERS FIRST

All technological
changes aside…

Recognising your
users’ needs is
paramount to success.

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

Ten Lessons in Designing Content for Mobile

More Related Content

Ten Lessons in Designing Content for Mobile