Pushing the Boundaries without Breaking the Web
-
Upload
rachel-andrew -
Category
Technology
-
view
315 -
download
1
description
Transcript of Pushing the Boundaries without Breaking the Web
![Page 1: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/1.jpg)
Pushing the boundaries without
Breaking the Web
Rachel Andrew: Future of Mobile LondonOctober 2012
Thursday, 2 May 13
![Page 2: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/2.jpg)
a History Lesson
Thursday, 2 May 13
![Page 3: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/3.jpg)
<script type="text/javascript"><!--function MM_reloadPage(init) { if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//--></script>
Thursday, 2 May 13
![Page 4: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/4.jpg)
Thursday, 2 May 13
![Page 5: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/5.jpg)
Things used by people who understand the problems they solve are also used by those who do not understand those problems, or even if there is a problem.
Thursday, 2 May 13
![Page 6: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/6.jpg)
This is an amazing time to be a web developer.
Thursday, 2 May 13
![Page 7: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/7.jpg)
Thursday, 2 May 13
![Page 8: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/8.jpg)
Thursday, 2 May 13
![Page 9: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/9.jpg)
Frustration
Thursday, 2 May 13
![Page 10: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/10.jpg)
The web is a work in progress.
Your job? To deal with it.
Thursday, 2 May 13
![Page 11: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/11.jpg)
Making things better
Thursday, 2 May 13
![Page 12: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/12.jpg)
Thursday, 2 May 13
![Page 13: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/13.jpg)
You now have two problems
Thursday, 2 May 13
![Page 14: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/14.jpg)
Thursday, 2 May 13
![Page 15: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/15.jpg)
The state of play in December 2011.
Thursday, 2 May 13
![Page 16: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/16.jpg)
December 2011: greenbelt.org.uk
Thursday, 2 May 13
![Page 17: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/17.jpg)
Understanding the technology your audience is using gives you a point of reference for your decisions.
Thursday, 2 May 13
![Page 18: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/18.jpg)
Our approach: mobile first responsive design
Thursday, 2 May 13
![Page 19: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/19.jpg)
<link rel="stylesheet" href="/assets/css/basic.css" /><link rel="stylesheet" media="only screen and (min-width: 460px)" href="/assets/css/460.css" /><link rel="stylesheet" media="only screen and (min-width: 700px)" href="/assets/css/700.css" /><link rel="stylesheet" media="only screen and (min-width: 940px)" href="/assets/css/940.css" /><link rel="stylesheet" media="only screen and (min-width: 1180px)" href="/assets/css/1180.css" />
Thursday, 2 May 13
![Page 20: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/20.jpg)
Thursday, 2 May 13
![Page 21: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/21.jpg)
Problem: no media query support in IE8 and below.
Thursday, 2 May 13
![Page 22: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/22.jpg)
No media query support
Thursday, 2 May 13
![Page 23: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/23.jpg)
Option 1: serve these users the mobile version of the site only
Thursday, 2 May 13
![Page 24: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/24.jpg)
Option 2: Use respond.js to polyfill media query support
Thursday, 2 May 13
![Page 25: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/25.jpg)
Option 3: Offer a fixed width version of the site to IE8 and below
Thursday, 2 May 13
![Page 26: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/26.jpg)
Thursday, 2 May 13
![Page 27: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/27.jpg)
Problem: lack of support for styling HTML5 semantic elements in older browsers.
Thursday, 2 May 13
![Page 28: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/28.jpg)
No support for HTML5 semantic elements
Thursday, 2 May 13
![Page 29: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/29.jpg)
Option 1: use the JavaScript polyfill html5.js to add support via JavaScript
Thursday, 2 May 13
![Page 30: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/30.jpg)
Option 2: avoid using HTML5 semantic elements in the templates until IE8 usage declines
Thursday, 2 May 13
![Page 31: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/31.jpg)
Replacing divs with semantic elements later is trivial due to our template based CMS.
Thursday, 2 May 13
![Page 32: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/32.jpg)
We (edgeofmyseat.com) are retained to maintain & develop the site. We can make these changes when old browser usage reduces.
Thursday, 2 May 13
![Page 33: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/33.jpg)
Your mileage (and situation) may vary.
Thursday, 2 May 13
![Page 34: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/34.jpg)
Avoiding using the tag in your selectors means you can switch tags in your templates without changing your CSS.
Thursday, 2 May 13
![Page 35: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/35.jpg)
Problem: lack of support for certain CSS3 Selectors in older browsers.
Thursday, 2 May 13
![Page 36: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/36.jpg)
No support for nth-child
Thursday, 2 May 13
![Page 37: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/37.jpg)
Option1: do nothing
Thursday, 2 May 13
![Page 38: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/38.jpg)
Option 2: polyfill with Selectivizr
Thursday, 2 May 13
![Page 39: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/39.jpg)
Option 3: fix each selector in your own JavaScript
Thursday, 2 May 13
![Page 40: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/40.jpg)
My decision to fix the width for older browsers also made polyfilling CSS3 selectors much easier.
Thursday, 2 May 13
![Page 41: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/41.jpg)
Problem: no clear solution for Responsive Images
Thursday, 2 May 13
![Page 42: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/42.jpg)
Solution: put in place technology that will enable us to adopt a solution later
Thursday, 2 May 13
![Page 43: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/43.jpg)
Responsive Images Community Grouphttp://www.w3.org/community/respimg/
Thursday, 2 May 13
![Page 44: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/44.jpg)
1. What is the problem?
My process
2. What are my constraints?
3. Is not supporting this feature an option?
4. What current solutions exist?
5. Use a polyfill or roll my own?
Thursday, 2 May 13
![Page 45: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/45.jpg)
May 2012: grabaperch.com
Thursday, 2 May 13
![Page 46: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/46.jpg)
How many users of the Perch website do not have support for the modern web technologies we want to use?
Thursday, 2 May 13
![Page 47: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/47.jpg)
May 2012: grabaperch.com
Thursday, 2 May 13
![Page 48: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/48.jpg)
Thursday, 2 May 13
![Page 49: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/49.jpg)
I use more polyfills when I have fewer older browser users. The downsides are going to be an issue to a much smaller %
Thursday, 2 May 13
![Page 50: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/50.jpg)
Why not just use a
boilerplate?
Thursday, 2 May 13
![Page 51: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/51.jpg)
Thursday, 2 May 13
![Page 52: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/52.jpg)
Stop solving problems you don’t yet have
Thursday, 2 May 13
![Page 53: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/53.jpg)
If you don’t know what it is doing. Why is it there?
Thursday, 2 May 13
![Page 54: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/54.jpg)
What happens if any part does not load?
Thursday, 2 May 13
![Page 55: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/55.jpg)
Do you know what is safe to delete?
Thursday, 2 May 13
![Page 56: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/56.jpg)
Starting with the bare minimum and adding things forces you to consider the implications of each thing you add.
Thursday, 2 May 13
![Page 57: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/57.jpg)
There’s no silver bullet to making a slow site fast. You must take a holistic approach. High performance runs the entire way through from the hardware it’s hosted on, through the app that builds the pages, to the server software that delivers the pages and the front end code that displays them in a browser.
Drew McLellan - http://allinthehead.com/retro/361/how-to-make-your-website-fast
Thursday, 2 May 13
![Page 58: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/58.jpg)
Web pages are getting larger and a lot of the size is down to JavaScript.
http://royal.pingdom.com/2011/11/21/web-pages-getting-bloated-here-is-why/
Thursday, 2 May 13
![Page 59: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/59.jpg)
Size Matters
Thursday, 2 May 13
![Page 60: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/60.jpg)
Thursday, 2 May 13
![Page 61: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/61.jpg)
Thursday, 2 May 13
![Page 62: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/62.jpg)
Thursday, 2 May 13
![Page 63: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/63.jpg)
We are all learners and we are all teachers...
Thursday, 2 May 13
![Page 64: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/64.jpg)
... no matter how old we are, how long we have been doing this, and whether we write tutorials or speak at conferences or not.
Thursday, 2 May 13
![Page 65: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/65.jpg)
Polyfills should not be a black box
Thursday, 2 May 13
![Page 66: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/66.jpg)
Teach problem solving
before polyfilling.
Thursday, 2 May 13
![Page 67: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/67.jpg)
Thursday, 2 May 13
![Page 68: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/68.jpg)
“Perch is removing my paragraphs”
Thursday, 2 May 13
![Page 69: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/69.jpg)
We need to teach:
HTML, CSS, JavaScript
Thursday, 2 May 13
![Page 70: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/70.jpg)
We need to teach:
Problem Solving skills
Thursday, 2 May 13
![Page 71: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/71.jpg)
Thursday, 2 May 13
![Page 72: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/72.jpg)
If we train people to just copy and paste, we stop them growing, learning and contributing.
Thursday, 2 May 13
![Page 73: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/73.jpg)
Make sure you know why you are using a solution and what your other options are.
Thursday, 2 May 13
![Page 74: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/74.jpg)
Know and test for what happens if JavaScript doesn’t load.
Thursday, 2 May 13
![Page 75: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/75.jpg)
Build solutions that are flexible for future changes in best practice.
Thursday, 2 May 13
![Page 76: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/76.jpg)
When teaching or writing tutorials for others explain problems before handing out the solution.
Explain why as well as how.
Thursday, 2 May 13
![Page 77: Pushing the Boundaries without Breaking the Web](https://reader033.fdocuments.in/reader033/viewer/2022051612/54bd8a5c4a7959d4438b4662/html5/thumbnails/77.jpg)
Thank you.
@rachelandrew
http://rachelandrew.co.ukhttp://grabaperch.comhttp://edgeofmyseat.com
Image credits - Flickr users: artbystevejohnson, atoach, dominicspics, imagesbywestfall, koalazymonkey, pinksherbert, whatcouldgowrong
Thursday, 2 May 13