Presentation by @htmlboy at Barcelona Developers Conference 2013.
MOBILE FIRSTAs difficult as doing things rightJavier Usobiaga #bdc13
View Slide
@HTMLBOYSwwweet.com
Opera Mini
200 MILLION USERSWORLDWIDE
HATES MY WEBSITES
No @font-faceNo client-side JavaScriptNo gradientsNo border-radius
1. AN OVERWEIGHTPROBLEM
“We've remade the Internet in ourimage… Obese.”– Jason Grigsby –
The average webpage is 1.617MB.Mostly images.httparchive.org
milwaukeepolicenews.com
milwaukeepolicenews.com7MB
redrobin.com
redrobin.com10.9MB
grolsch.com
grolsch.com25MB
moto.oakley.com
moto.oakley.com85MB
Just because we can, it doesn’tmean we should.
74% of mobile users won’t wait longerthan 5 seconds for a page to loadbit.ly/5secondsmobile
20€/month for 1GB
20€/month for 1GB85MB = 1.70€
US roaming: 10€/MB
US roaming: 10€/MB85MB = 850€
2. THE IMPORTANCE OFBEING MOBILE FIRST
Content First?
User First?
Everything First!
Reduced Browser Window InDeveloper's Computer First
Worry about the less capable first
Design around real content
1 column of content + basic styles
body{max-width: 30em;}
Consider layout an enhancement: inside @media queries
@media screen and (min-width:1px){ body{ max-width: inherit; } }
github.com/scottjehl/Respond
Enhance with JavaScript
if('querySelector' in document &&'localStorage' in window &&'addEventListener' in window)
Cutting the mustard
Conditionally load:secondary assetsthird-party contenttransitions, effectsAJAX stuff
Design agnostically
Design for every input
Design for every context
Design for every connection
3. OPTIMIZEALL THE THINGS!
Can we afford another image?
Try to serve the right image size
adaptive-images.com
github.com/scottjehl/picturefill
Do retina devices need retina images?
netvlies.nl/blog/design-interactie/retina-revolution
Optimize images:ImageOptimJpegMiniSVGO
Optimize everything:reduce requestscombine & minifygzip
JS files belong on the footer
Do we need a JS framework?
Avoid or conditionally load:iframessocial pluginsthird-party assets
Consider plain links for social stuff
https://twitter.com/intent/tweet?url=http://bit.ly/ancientMistery&text=What+is+your+sound?&via=htmlboyTwitter:http://www.facebook.com/sharer.php?u=http://bit.ly/ancientMistery&t=What+is+your+sound?Facebook:https://plus.google.com/share?url=http://bit.ly/ancientMisteryGoogle+:
There’s so much we can optimize
4. PERFORMANCEBUDGET
“We’ll do it later” is a lie
Performance as a design principle
“Make the page usable in less than10 seconds on a GPRS connection.”– BBC News –
First load: somewhere between65KB and 100KB
“Don't make more than 20 http requests”
“Make the page weigh less than 300KB”
“1. Optimize an existing feature or asset.2. Remove an existing feature or asset.3. Don’t add the new feature or asset.”– Steve Souders –
5. PERCEIVEDPERFORMANCE
Avoid JS redrawings
Show content as soon as possible
FOUT: Flash Of Unstyled Text
github.com/typekit/webfontloader
300ms delay on touch devices
github.com/ftlabs/fastclick
WRAPPING UP
Web design is not about pretty pictures
wow such designvery iconsso flatsnice fontwow dribbblesuch parallax
Set a performance budget in the design workflow
“What a fast website, that on topof that, is beautiful.”
LET PEOPLECOMMUNICATE
THANKS!@htmlboy · [email protected]
swwweet
devops_vtj
line_developers_tw
claudioed
imsaku
takumakume
mamohacy
mixi_engineers
kurochan
igsr5
ritou
bonotake
tk3fftk
addyosmani
csswizardry
62gerente
cherdarchuk
davidbonilla
chrislema
michaelherold
cromwellryan
aarron
notwaldorf
ammeep
reverentgeek