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
Over-promised & under-delivered
Search
Peter Gasston
April 24, 2014
Technology
1
220
Over-promised & under-delivered
A.K.A. You Ruined My Holiday. Given at Front End London, April 2014.
Peter Gasston
April 24, 2014
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
130
Your Reality Here
stopsatgreen
0
77
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
310
Growing Up, Getting Serious
stopsatgreen
0
68
Surveying the Landscape — November 2016
stopsatgreen
1
130
Surveying the Landscape - Fronteers
stopsatgreen
2
440
The Web vs. The Browser
stopsatgreen
0
150
Surveying the Landscape Sept. 2016
stopsatgreen
1
270
Surveying the Landscape
stopsatgreen
4
720
Other Decks in Technology
See All in Technology
メンタル面でもつよつよエンジニアになる/登壇資料(井田 献一朗)
hacobu
0
140
生成AIのガバナンスの全体像と現実解
fnifni
1
230
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
200
TypeScript開発にモジュラーモノリスを持ち込む
sansantech
PRO
3
740
Opcodeを読んでいたら何故かphp-srcを読んでいた話
murashotaro
0
340
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
340
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
130
怖くない!ゼロから始めるPHPソースコードコンパイル入門
colopl
0
190
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
290
[Oracle TechNight#85] Oracle Autonomous Databaseを使ったAI活用入門
oracle4engineer
PRO
1
150
組み込みアプリパフォーマンス格闘記 検索画面編
wataruhigasi
1
180
2024年にチャレンジしたことを振り返るぞ
mitchan
0
160
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
1
120
Designing for Performance
lara
604
68k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Adopting Sorbet at Scale
ufuk
74
9.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
180
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The World Runs on Bad Software
bkeepers
PRO
66
11k
Transcript
Peter Gasston @stopsatgreen broken-links.com
Technologist & Front-end Lead rehabstudio.com
Over-promised & Under-delivered
None
None
None
You Ruined My Holiday
None
None
None
http://brandperfect.org/index.php/knowledge/reports/597-fortune-global-100-mobile-web-review
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
None
None
MOBILE WEB
None
None
None
None
None
None
http://brokenmobile.tumblr.com http://wtfmobileweb.com
None
We Have A Problem
None
None
None
http://www.slideshare.net/yiibu/the-emerging-global-web
We Need To Pull Our Fingers Out
What We Can Do 1. Performance
“Over a mobile connection, it may take 2 seconds to
download the initial page of HTML, but it can be immediately rendered.
“Even as the rest of the JavaScript application is being
downloaded, the user can interact with the page. It feels 5x faster.” http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product
“By rendering our page content on the server and deferring
all JavaScript execution… we’ve dropped the time to first Tweet to one-fifth of what it was.” https://blog.twitter.com/2012/improving-performance-on-twittercom
var foo = window.matchMedia('(min-width: 800px)').matches; if (foo) { // Load
functions } yepnope({ test : foo, yep : 'bigscreen.js', nope : 'smallscreen.js' });
I don’t care about: 1. ‘Retina’ photos 2. Typefaces
What We Can Do 2. Experience
None
None
<meta name="viewport" content="width=device-width, minimal-ui"> <meta name="viewport" content="width=device-width, user-scalable=no"> ✓ ✗
<input type="number"> <input type="datetime"> <input type="number" id="foo"> <label for="foo">Number</label>
None
https://developer.android.com/design/ https://developer.apple.com/library/ios/design/ http://dev.windowsphone.com/design
None
None
Doing It Right
None
None
None
Help Is On Its Way
<picture> <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x"> <source media="(min-width: 18em)"
srcset="med-1.jpg, med-2.jpg 2x"> <source srcset="small-1.jpg, small-2.jpg 2x"> <img src="small-1.jpg" alt="Alt text”> </picture> http://picture.responsiveimages.org/
Preserve my battery life Don’t wreck my data plan https://plus.google.com/+NazmulIdris/posts/SYwhyUkHnfz
http://offlinefirst.org/
navigator.serviceWorker.register('/foo.js').then( function(serviceWorker) { serviceWorker.postMessage('Hello world!'); } }); this.addEventListener('install', function(e) {
// Do your thing }); https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md
I’m not telling you what to think. I’m just asking
you to think.
Peter Gasston @stopsatgreen broken-links.com