ten lessons in designing content for mobile
TRANSCRIPT
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.
