Ten Lessons in Designing Content for Mobile

DESIGNING CONTENT

FOR MOBILE

Vicke Cheung @VickeKaravan

MOBILE isa big deal.

MOBILE isa big deal.

set to get even bigger.

At SearchLove London 2014, Will Critchlow presented…

…concluding that…

“CONTENT MARKETINGIS 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

Put your learning caps on!

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

PROBLEM

Space is a premium.

SOLUTION

KISS principle

( Keep it simple, stupid. )

KEEP IT SIMPLESTUPID

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.

My content crush of 2014…

sins.nfb.ca

Doubting Thomas(aka Vicke Cheung)

“There’s no way it’ll be as good on mobile.

”

I was wrong!

Keep it simple

IT TICKED THIS BOX

Seven sins Supporting video stills

There’s focus on the core elements of the story

Notice anything wrong?

Orphan alert!

LEARN TO LET GO,PLAN FOR CHANGE

Lesson No. 3

TRANSITIONING FROM APRINT 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 fluidframework for

content and notmeticulous control.

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

It’s about…

ALLOWINGFOR CHANGE.

It’s pointless designingfor a specific screen size.

There are far too many!

screensiz.es

Lesson No. 4

MAKE DECISIONS WITH CONTEXT

IN MIND

Work in progress, Distilled.

Developer feedback

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

”

Huh?…

Android iOS

This is the problem.

Don’t fall into the trapof only designing for

devices you know.

Be aware of your design in the context of different

operating systems.

TEST ONREAL DEVICES

Lesson No. 5

Do you know about Chrome’s in-builtmobile emulator?

Right click > Inspect Element

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 ismisleading 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 ALWAYSTRY 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!

SOLUTION

Use patterns.

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.

Check out…

pttrns.com

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

BE CURIOUS

[ PART ONE ]

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…

…because…

Lesson No. 8

REMEMBER:FORM FOLLOWS

FUNCTION

This golden rule applies to everyfacet 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 quotedfrom time and time again…

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/

Confused?Carry on reading…

Brad Frost

“They DO give a shitif they can’t get done what

they need to get done.”

bradfrost.com/blog/web/ responsive-web-design-missing-the-point/

Brad Frost

“They DO give a shitwhen your site takes 20 seconds to load.

”bradfrost.com/blog/web/

responsive-web-design-missing-the-point/

THE POINT IS

It’s not enoughto have content responsive on a

purely visual level…

Performanceis KEY.

THE POINT IS

Longer load time=

Higher rate of abandonment

Remember Chrome’s in-builtmobile emulator?

It can also emulate network speeds.

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

So what can you do?…

Lesson No. 9

SERVESELECTIVELY

Let’s take this piece for example.

podio.com/site/budget-busters

It responds fluidlyfrom mobile to larger screens

podio.com/site/budget-busters

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

podio.com/site/budget-busters

Job done, right?

Wrong!

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

Save versions of the image in different sizes.

INSTEAD

podio.com/site/budget-busters

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 startingMOBILE FIRST.

Wrapping up now…

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 YOURUSERS FIRST

All technological changes aside…

Recognising your users’ needs is

paramount to success.

THANK YOU!@VickeKaravan

vicke.cheung@distilled.net

Vicke Cheung