ten lessons in designing content for mobile
TRANSCRIPT
![Page 1: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/1.jpg)
DESIGNING CONTENT
FOR MOBILE
Vicke Cheung @VickeKaravan
![Page 2: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/2.jpg)
MOBILE isa big deal.
![Page 3: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/3.jpg)
MOBILE isa big deal.
set to get even bigger.
![Page 4: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/4.jpg)
At SearchLove London 2014, Will Critchlow presented…
![Page 5: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/5.jpg)
…concluding that…
“CONTENT MARKETINGIS MOBILE MARKETING
”slideshare.net/DistilledSEO/
searchlove-london-will-critchlow-the-threat-of-mobile
![Page 6: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/6.jpg)
Things weren’t always this way.
![Page 7: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/7.jpg)
My first Distilled project from 2012
![Page 8: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/8.jpg)
…and as seen on mobile…(in other words: no mobile considerations!)
![Page 9: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/9.jpg)
We’ve come a long way since then.
![Page 10: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/10.jpg)
podio.com/site/creative-routines
![Page 11: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/11.jpg)
photoworld.com/photos-on-the-web
![Page 12: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/12.jpg)
concerthotels.com /worlds-greatest -vocal-ranges
![Page 13: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/13.jpg)
Put your learning caps on!
![Page 14: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/14.jpg)
EMBRACE THE TRUE MEANING
OF MOBILE FIRST
Lesson No. 1
![Page 15: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/15.jpg)
“MOBILE FIRST”DOES NOT MEAN…
…to have a good fallback for mobile.
![Page 16: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/16.jpg)
“MOBILE FIRST”DOES NOT MEAN…
…nail desktop version first then implement
mobile from it.
![Page 17: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/17.jpg)
It means design and build the MOBILE
version FIRST.
![Page 18: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/18.jpg)
In 2010, Ethan Marcotte coined the term “Responsive Web Design”.
alistapart.com/article/responsive-web-design
![Page 19: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/19.jpg)
This is generally associated with building a flexible desktop site…
![Page 20: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/20.jpg)
…that can therefore adapt well to smaller display i.e. mobile.
![Page 21: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/21.jpg)
Method 1 =So… ?Method 2
Step 1.
Step 2.
![Page 22: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/22.jpg)
Method 1 =So… ?Method 2
I’m afraid not.
![Page 23: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/23.jpg)
Method 1
Step 1.Loads of awesome features using cutting-edge technology
Step 2.
![Page 24: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/24.jpg)
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.
![Page 25: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/25.jpg)
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
![Page 26: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/26.jpg)
PROBLEM
Space is a premium.
![Page 27: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/27.jpg)
SOLUTION
KISS principle
( Keep it simple, stupid. )
![Page 28: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/28.jpg)
KEEP IT SIMPLESTUPID
Lesson No. 2
![Page 29: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/29.jpg)
John Maeda
“The simplest way to achieve simplicity is through thoughtful reduction.
”Rule Number 1, The Laws of Simplicity
![Page 30: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/30.jpg)
In other words…
Start designing with only the most vital elements of
your content or story.
![Page 31: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/31.jpg)
My content crush of 2014…
![Page 32: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/32.jpg)
sins.nfb.ca
![Page 33: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/33.jpg)
Doubting Thomas(aka Vicke Cheung)
“There’s no way it’ll be as good on mobile.
”
![Page 34: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/34.jpg)
I was wrong!
![Page 35: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/35.jpg)
Keep it simple
IT TICKED THIS BOX
![Page 36: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/36.jpg)
Seven sins Supporting video stills
There’s focus on the core elements of the story
![Page 37: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/37.jpg)
Notice anything wrong?
![Page 38: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/38.jpg)
Orphan alert!
![Page 39: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/39.jpg)
LEARN TO LET GO,PLAN FOR CHANGE
Lesson No. 3
![Page 40: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/40.jpg)
TRANSITIONING FROM APRINT DESIGNER
Hey, I think the alignment is 2mm out!
Ok, let’s try another test print.
![Page 41: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/41.jpg)
TO DESIGNING FOR WEB
Hey, this looks different in Safari!
…Sure …and?
![Page 42: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/42.jpg)
IT’S TOUGH.But then you learn…
![Page 43: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/43.jpg)
It’s about…designing a fluidframework for
content and notmeticulous control.
![Page 44: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/44.jpg)
It’s about…understanding that not every device will render exactly as your designs.
![Page 45: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/45.jpg)
It’s about…
ALLOWINGFOR CHANGE.
![Page 46: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/46.jpg)
It’s pointless designingfor a specific screen size.
![Page 47: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/47.jpg)
There are far too many!
screensiz.es
![Page 48: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/48.jpg)
Lesson No. 4
MAKE DECISIONS WITH CONTEXT
IN MIND
![Page 49: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/49.jpg)
Work in progress, Distilled.
![Page 50: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/50.jpg)
Developer feedback
“Looks good, but probably change the fixed bar at the bottom – it looks too much like the native mobile UI.
”
![Page 51: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/51.jpg)
Huh?…
![Page 52: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/52.jpg)
Android iOS
![Page 53: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/53.jpg)
This is the problem.
![Page 54: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/54.jpg)
Don’t fall into the trapof only designing for
devices you know.
![Page 55: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/55.jpg)
Be aware of your design in the context of different
operating systems.
![Page 56: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/56.jpg)
TEST ONREAL DEVICES
Lesson No. 5
![Page 57: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/57.jpg)
Do you know about Chrome’s in-builtmobile emulator?
![Page 58: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/58.jpg)
Right click > Inspect Element
![Page 59: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/59.jpg)
Click the mobile icon to start emulator
![Page 60: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/60.jpg)
Convenient testing at your fingertips
![Page 61: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/61.jpg)
Saves your desk from looking like this.
![Page 62: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/62.jpg)
This mobile emulator is a great tool. But…
![Page 63: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/63.jpg)
It’s no substitute for the real deal.
![Page 64: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/64.jpg)
BECAUSE
You’re at a greater distance from your computer than
you would be if using a mobile device.
![Page 65: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/65.jpg)
BECAUSE
A cursor’s precision ismisleading if you’re
designing for thumb and finger interactions.
![Page 66: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/66.jpg)
12Lorem Ipsum
Take this design for example.Seems fine in theory…
![Page 67: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/67.jpg)
12Lorem Ipsu m
100%8:08 AM
But in practice,with touchscreen devices…
![Page 68: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/68.jpg)
Your finger obscures the number if you try to tap on the arrows.
12Lorem Ipsu m
100%8:08 AM
![Page 69: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/69.jpg)
LASTLY, DON’T FORGET
Hover states don’t exist on touchscreen devices!
![Page 70: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/70.jpg)
All these factors can influence your design.
e.g. FONT SIZING / SPACING / STYLING
![Page 71: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/71.jpg)
So check in now and again on a real device.
![Page 72: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/72.jpg)
Lesson No. 6
DON’T ALWAYSTRY TO REINVENT
THE WHEEL
![Page 73: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/73.jpg)
Everyone wants to be an INNOVATOR.
![Page 74: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/74.jpg)
But creating unique UI and UX elements
comes with a risk.
![Page 75: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/75.jpg)
You risk confusing your users*.
*who then leave and may never return!
![Page 76: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/76.jpg)
SOLUTION
Use patterns.
![Page 77: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/77.jpg)
Patterns are designed solutions to common problems.
![Page 78: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/78.jpg)
FOR EXAMPLE
The hamburger menu
![Page 79: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/79.jpg)
You see this on any website,and you know what it does.
google.com/drive
![Page 80: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/80.jpg)
But if we were to alter the icon…Suddenly, you’re left confused.
google.com/drive
![Page 81: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/81.jpg)
This is just one example of many.
![Page 82: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/82.jpg)
Check out…
pttrns.com
![Page 83: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/83.jpg)
IN SUMMARY
Make use of tried and tested patterns
![Page 84: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/84.jpg)
IN SUMMARY
Avoid implementing new elements for the sake of uniqueness!
![Page 85: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/85.jpg)
BE OPEN TO INSPIRATION
Lesson No. 7
![Page 86: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/86.jpg)
BE CURIOUS
[ PART ONE ]
![Page 87: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/87.jpg)
I’m always on the lookout for great mobile design.
![Page 88: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/88.jpg)
By building a bank of inspiration now,it’ll come in handy sooner or later.
pinterest.com/thlco/design-mobile-tablet
![Page 89: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/89.jpg)
ASK QUESTIONS
[ PART TWO ]
![Page 90: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/90.jpg)
QUESTION
I found an awesome responsive website; how can we make
ours like that?
![Page 91: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/91.jpg)
Check in with a developer…
ANSWER
![Page 92: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/92.jpg)
They will have good recommendations on
what is feasible or not.
![Page 93: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/93.jpg)
Developers are also great at knowing when
to sacrifice design for performance…
![Page 94: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/94.jpg)
…because…
![Page 95: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/95.jpg)
Lesson No. 8
REMEMBER:FORM FOLLOWS
FUNCTION
![Page 96: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/96.jpg)
This golden rule applies to everyfacet of design…
![Page 97: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/97.jpg)
…and design for web & mobile is no different.
![Page 98: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/98.jpg)
bradfrost.com/blog/web/ responsive-web-design-missing-the-point/
This blog post has been quotedfrom time and time again…
![Page 99: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/99.jpg)
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/
![Page 100: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/100.jpg)
Confused?Carry on reading…
![Page 101: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/101.jpg)
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/
![Page 102: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/102.jpg)
Brad Frost
“They DO give a shitwhen your site takes 20 seconds to load.
”bradfrost.com/blog/web/
responsive-web-design-missing-the-point/
![Page 103: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/103.jpg)
THE POINT IS
It’s not enoughto have content responsive on a
purely visual level…
![Page 104: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/104.jpg)
Performanceis KEY.
THE POINT IS
![Page 105: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/105.jpg)
Longer load time=
Higher rate of abandonment
![Page 106: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/106.jpg)
Remember Chrome’s in-builtmobile emulator?
![Page 107: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/107.jpg)
It can also emulate network speeds.
![Page 108: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/108.jpg)
Don’t assume your users will always be connected to wifi.
![Page 109: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/109.jpg)
So what can you do?…
![Page 110: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/110.jpg)
Lesson No. 9
SERVESELECTIVELY
![Page 111: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/111.jpg)
Let’s take this piece for example.
podio.com/site/budget-busters
![Page 112: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/112.jpg)
It responds fluidlyfrom mobile to larger screens
podio.com/site/budget-busters
![Page 113: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/113.jpg)
The image will look great at all sizes as I’ve used the highest res possible.
podio.com/site/budget-busters
![Page 114: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/114.jpg)
Job done, right?
![Page 115: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/115.jpg)
Wrong!
![Page 116: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/116.jpg)
Don’t serve to same large image file to mobile as you do for desktop.
![Page 117: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/117.jpg)
Save versions of the image in different sizes.
INSTEAD
![Page 118: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/118.jpg)
podio.com/site/budget-busters
image-small.jpg image.jpg
![Page 119: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/119.jpg)
Use media queries or javascript to specify
when each image size should load
![Page 120: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/120.jpg)
Mobile devices will not be burdened
with loading huge desktop images.
THEREFORE
![Page 121: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/121.jpg)
Planning all these variations
isn’t simple…
![Page 122: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/122.jpg)
But it’s made easier by startingMOBILE FIRST.
![Page 123: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/123.jpg)
Wrapping up now…
![Page 124: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/124.jpg)
My future self
“Wow, those slides from BrightonSEO 2015 are
so outdated now!”
![Page 125: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/125.jpg)
It sums up our rapidly changing
industry.
![Page 126: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/126.jpg)
But what you can bank on not
changing is…
![Page 127: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/127.jpg)
We’ll always have to be USER-CENTRIC.
![Page 128: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/128.jpg)
All these lessons have boiled down
to this…
![Page 129: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/129.jpg)
Lesson No. 10
PUT YOURUSERS FIRST
![Page 130: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/130.jpg)
All technological changes aside…
![Page 131: Ten Lessons in Designing Content for Mobile](https://reader034.vdocument.in/reader034/viewer/2022042818/55aec3ca1a28ab7b158b46a0/html5/thumbnails/131.jpg)
Recognising your users’ needs is
paramount to success.