Responsive web design from the future
-
Upload
new-tech -
Category
Technology
-
view
556 -
download
4
description
Transcript of Responsive web design from the future
![Page 1: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/1.jpg)
WEB DESIGNFROM THE FUTURE
RESPONSIVE
pushState. replaceState. Hashbangs!# AJAX. PJAX. Beets. Bears. Battlestar Galactica.
![Page 2: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/2.jpg)
Kyle Neath is...
![Page 3: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/3.jpg)
~designer@
![Page 4: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/4.jpg)
@kneath
![Page 5: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/5.jpg)
warpspire.com
![Page 6: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/6.jpg)
URL DesignPartial Page Updates
Let’s talk about
![Page 7: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/7.jpg)
The future of the web is…
HTML5 History API+
Smart Partial Page Updates
![Page 8: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/8.jpg)
The future of the web is…
RESPONSIVE
![Page 9: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/9.jpg)
How do you define responsive?
![Page 10: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/10.jpg)
Resize the browser
With an iPad / Playbook
Responsive Web Design
(lol/jk)
“”
![Page 11: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/11.jpg)
Fast pageloads
Animates naturally
Responds instantly
Feels Faster™
click touch zoom scroll swipe type resize
![Page 12: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/12.jpg)
Keyboard Shortcuts
Back & Forward Buttons
URL Hacking
Browser Native
![Page 13: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/13.jpg)
Technologies
![Page 14: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/14.jpg)
@media queriesModernizr
jQuery.hotKeysCSS3 Animations
HTML5 History APIXMLHTTPRequestmustache.js
![Page 15: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/15.jpg)
@media queriesModernizr
jQuery.hotKeysCSS3 Animations
HTML5 History APIXMLHTTPRequestmustache.js
TOO MUCH FOR ONE DAY
![Page 16: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/16.jpg)
… and how GitHub is stumbling through them
![Page 17: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/17.jpg)
URL DesignMy recent love affair
![Page 18: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/18.jpg)
URLs are sexy
![Page 19: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/19.jpg)
Working with Terminal made me love URLs
![Page 20: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/20.jpg)
![Page 21: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/21.jpg)
Who needs directions if you can skip to the destination?
URLs are like transporters
![Page 22: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/22.jpg)
Everything should have a URL
![Page 23: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/23.jpg)
![Page 24: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/24.jpg)
A URL is an agreement
![Page 25: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/25.jpg)
Can you see a future with hashbangs?
#!/defunct
![Page 26: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/26.jpg)
// Redirect legacy anchor-based issue urls to real URLs.var location_with_hash = location.pathname + location.hashvar matches = location_with_hash.match(/#issue\/(\d+)(\/comment\/(\d+))?/)if (matches) { var issue_number = matches[1] var comment_id = matches[3] if (issue_number) { if (comment_id) { window.location = location_with_hash.replace(/\/?#issue\/\d+\/comment\/\d+/, "/"+issue_number+"#comment_"+comment_id) } else { window.location = location_with_hash.replace(/\/?#issue\/\d+/, "/" + issue_number) } }}
FOREVER
![Page 27: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/27.jpg)
An <a> should behave like an <a>
![Page 28: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/28.jpg)
⌘ + click⇧ + click
Middle click
![Page 29: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/29.jpg)
![Page 30: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/30.jpg)
Be responsive!Browsers have
windows & tabs
![Page 31: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/31.jpg)
e.which == 1&&
!e.metaKey&&
!e.shiftKey
![Page 32: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/32.jpg)
Feels Faster™Making people say
![Page 33: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/33.jpg)
Welcome to the AJAX Generation
![Page 34: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/34.jpg)
![Page 35: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/35.jpg)
Welcome to the AJAX GenerationiPhone Generation
![Page 36: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/36.jpg)
![Page 37: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/37.jpg)
Fast is about perception
![Page 38: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/38.jpg)
![Page 39: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/39.jpg)
= 1 billion SQL Queries
2 billion Memcache calls3 billion Git calls
![Page 40: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/40.jpg)
SLOW
![Page 41: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/41.jpg)
Why are we focusing up here?
This is the part that changes
![Page 42: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/42.jpg)
Caching!…is really difficult
![Page 43: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/43.jpg)
AJAX!
![Page 44: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/44.jpg)
AJAX!loaders are not responsive
![Page 45: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/45.jpg)
![Page 46: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/46.jpg)
![Page 47: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/47.jpg)
Only use loaders when requests are slow
~500ms
Cache content forzero-request updates
Think about the back button
![Page 48: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/48.jpg)
There will always be full page loads
![Page 49: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/49.jpg)
Serve all HTML (or JSON) in one request
If you want fast…
![Page 50: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/50.jpg)
![Page 51: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/51.jpg)
Remember, page load time is about perception
When can I: scroll, read text, click links?
![Page 52: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/52.jpg)
Twitter: HTML + CSS + JS
API Driven
![Page 53: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/53.jpg)
Apply Sciencehttps://twitter.com/#!/kneath
4.7sec total load time
4.3sec timeline load
Time to usable!
![Page 54: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/54.jpg)
Apply Sciencehttps://github.com/kneath
3.4sec total load time
1.1sec HTML/CSS/JS loaded
Time to usable!
![Page 55: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/55.jpg)
Why is Twitter’s so slow?
![Page 56: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/56.jpg)
SSL
![Page 57: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/57.jpg)
Each domain is a new SSL Handshaketwitter.com
api.twitter.com
![Page 58: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/58.jpg)
Handshakes and Waterfalls
SSLtwitter.com
SSLapi.twitter.com
HTML, CSS, JS
JSON Data
![Page 59: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/59.jpg)
SSL Negotiation is our bottleneck
40ms backend response time500ms blocking SSL Negotiation
![Page 60: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/60.jpg)
Always favor science over theory
![Page 61: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/61.jpg)
Be Responsive
Client-Side Cache
AJAX/JSON Request
Full Page
![Page 62: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/62.jpg)
![Page 63: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/63.jpg)
Server or client side template rendering?
So if we want partial page updates sometimes, full page updates other times…
![Page 64: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/64.jpg)
Use the same templates
Both!
mustache.rb mustache.js
Render HTML in AJAX/JSONpartials are your friend
![Page 65: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/65.jpg)
With SSL negotiation, server time is ~free
One is simpler than two
But…
![Page 66: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/66.jpg)
URL Design+
Feels Faster™
![Page 67: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/67.jpg)
![Page 68: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/68.jpg)
HTML5 History APImakes me all tingly
![Page 69: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/69.jpg)
pushState
replaceState
URL Change + back button stack
URL Change only
![Page 70: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/70.jpg)
Partial page updates with real URLs!
![Page 71: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/71.jpg)
We can design for the back button!
![Page 72: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/72.jpg)
Browser Support?
5.0 4.0Yes
![Page 74: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/74.jpg)
history.jsbalupton/history.js
![Page 75: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/75.jpg)
Javascript redirects
If you use hashbangs…
two requests instead of one
Confusing code paths some routing in server, some in js?
![Page 76: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/76.jpg)
Some users get a slower experience
Cost of History API
But isn’t Chrome already faster than IE7?
![Page 77: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/77.jpg)
Poison your URL structure
Committing to nasty JS redirects FOREVER
Manual anchor Javascript
Cost of Hashbangs
![Page 78: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/78.jpg)
Futuristic designThis stuff is opening up
![Page 79: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/79.jpg)
State? We can do that
![Page 80: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/80.jpg)
?milestone=3&sort=created&direction=desc&state=open
![Page 81: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/81.jpg)
Save URLs in database
replaceState on loadbut only if there aren’t any params already
![Page 82: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/82.jpg)
Maintain state across pageviews
Copy & paste URLs over IM / chat
![Page 83: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/83.jpg)
Infinite Scroll? We can do that
(correctly)
![Page 84: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/84.jpg)
Tumblr
Lots of websites are using infinite scroll
![Page 85: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/85.jpg)
And they’re all broken
![Page 86: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/86.jpg)
Infinite scroll is only better than pages if you can restore your position
![Page 87: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/87.jpg)
http://warpspire.com/experiments/history-api
![Page 88: Responsive web design from the future](https://reader033.fdocuments.net/reader033/viewer/2022052619/555e2831d8b42a384f8b5097/html5/thumbnails/88.jpg)
Happy Unix Enthusiasts
Happy Grandmas
Happy Developers
Good URL Design + History APImakes for…