Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mobile First: as difficult as doing things right
Search
Swwweet
November 08, 2013
Technology
219
8.8k
Mobile First: as difficult as doing things right
Presentation by @htmlboy at Barcelona Developers Conference 2013.
Swwweet
November 08, 2013
Tweet
Share
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
260
How to be the best web designer in the world.
swwweet
6
1.1k
Design for loading
swwweet
5
430
One Size Fits None
swwweet
12
780
One Size Fits None - From the Front 2013
swwweet
2
630
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
1k
The future of code
swwweet
4
480
RWD: Dealing with navigation
swwweet
5
410
Other Decks in Technology
See All in Technology
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
150
Azure AI ことはじめ
tsubakimoto_s
0
130
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Featured
See All Featured
Six Lessons from altMBA
skipperchong
24
3.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
For a Future-Friendly Web
brad_frost
173
9.2k
Transcript
MOBILE FIRST As difficult as doing things right Javier Usobiaga
#bdc13
@HTMLBOY Swwweet.com
None
None
None
Opera Mini
200 MILLION USERS WORLDWIDE
HATES MY WEBSITES
No @font-face No client-side JavaScript No gradients No border-radius
None
1. AN OVERWEIGHT PROBLEM
“We've remade the Internet in our image… Obese.” – Jason
Grigsby –
The average webpage is 1.617MB. Mostly images. httparchive.org
milwaukeepolicenews.com
milwaukeepolicenews.com 7MB
redrobin.com
redrobin.com 10.9MB
grolsch.com
grolsch.com 25MB
moto.oakley.com
moto.oakley.com 85MB
Just because we can, it doesn’t mean we should.
None
None
74% of mobile users won’t wait longer than 5 seconds
for a page to load bit.ly/5secondsmobile
20€/month for 1GB
20€/month for 1GB 85MB = 1.70€
US roaming: 10€/MB
US roaming: 10€/MB 85MB = 850€
None
None
2. THE IMPORTANCE OF BEING MOBILE FIRST
Content First?
User First?
Everything First!
Reduced Browser Window In Developer's Computer First
Worry about the less capable first
None
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; } }
<!--[if lt IE 9]> <link href=“ie8.css" rel="stylesheet" /> <![endif]-->
github.com/scottjehl/Respond
Enhance with JavaScript
if( 'querySelector' in document && 'localStorage' in window && 'addEventListener'
in window )
Cutting the mustard
None
Conditionally load: secondary assets third-party content transitions, effects AJAX stuff
Design agnostically
Design for every input
None
Design for every context
Design for every connection
3. OPTIMIZE ALL THE THINGS!
The average webpage is 1.617MB. Mostly images. httparchive.org
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: ImageOptim JpegMini SVGO
Optimize everything: reduce requests combine & minify gzip
JS files belong on the footer
Do we need a JS framework?
Avoid or conditionally load: iframes social plugins third-party assets
Consider plain links for social stuff
https://twitter.com/intent/tweet?url=http://bit.ly/ ancientMistery&text=What+is+your+sound?&via=htmlboy Twitter: 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/ ancientMistery Google+:
None
There’s so much we can optimize
None
4. PERFORMANCE BUDGET
“We’ll do it later” is a lie
Performance as a design principle
“Make the page usable in less than 10 seconds on
a GPRS connection.” – BBC News –
First load: somewhere between 65KB 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. PERCEIVED PERFORMANCE
Avoid JS redrawings
None
None
None
Show content as soon as possible
None
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
None
None
wow such design very icons so flats nice font wow
dribbble such parallax
Set a performance budget in the design workflow
“What a fast website, that on top of that, is
beautiful.”
LET PEOPLE COMMUNICATE
THANKS! @htmlboy ·
[email protected]