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
230
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
140
Your Reality Here
stopsatgreen
0
81
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
72
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
290
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Technology
See All in Technology
Building Products in the LLM Era
ymatsuwitter
10
6.1k
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
デスクトップだけじゃないUbuntu
mtyshibata
0
560
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
320
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
270
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
670
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
360
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
390
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.6k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
150
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
150
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
140
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Agile that works and the tools we love
rasmusluckow
328
21k
A designer walks into a library…
pauljervisheath
205
24k
Side Projects
sachag
452
42k
What's in a price? How to price your products and services
michaelherold
244
12k
Making Projects Easy
brettharned
116
6k
It's Worth the Effort
3n
184
28k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Music & Morning Musume
bryan
46
6.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
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