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
130
Your Reality Here
stopsatgreen
0
80
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
310
Growing Up, Getting Serious
stopsatgreen
0
70
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
150
Surveying the Landscape Sept. 2016
stopsatgreen
1
280
Surveying the Landscape
stopsatgreen
4
740
Other Decks in Technology
See All in Technology
ソフトウェア開発現代史:製造業とソフトウェアは本当に共存できていたのか?品質とスピードを問い直す
takabow
15
5.3k
消し忘れリソースゼロへ!私のResource Explorer活用法
cuorain
0
140
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
12
3.8k
レイクハウスとはなんだったのか?
akuwano
15
2k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
120k
パブリッククラウドのプロダクトマネジメントとアーキテクト
tagomoris
4
770
Women in Agile
kawaguti
PRO
2
170
Microsoft Ignite 2024 最新情報!Microsoft 365 Agents SDK 概要 / Microsoft Ignite 2024 latest news Microsoft 365 Agents SDK overview
karamem0
0
190
Power BI は、レポート テーマにこだわろう!テーマのティア表付き
ohata_ds
0
120
CloudWatch Container Insightsを使ったAmazon ECSのリソース監視
umekou
1
120
企業テックブログにおける執筆ネタの考え方・見つけ方・広げ方 / How to Think of, Find, and Expand Writing Topics for Corporate Tech Blogs
honyanya
0
820
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
210
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
RailsConf 2023
tenderlove
29
980
Agile that works and the tools we love
rasmusluckow
328
21k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
4 Signs Your Business is Dying
shpigford
182
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
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