Pushing the boundarieswithoutBreaking the WebRachel Andrew: Future of Mobile LondonOctober 2012Thursday, 2 May 13
a History LessonThursday, 2 May 13
<script type="text/javascript"><!--function MM_reloadPage(init) {if (init==true) with (navigator) {if((appName=="Netscape"...
Thursday, 2 May 13
Things used by people who understand theproblems they solve are also used by thosewho do not understand those problems, or...
This is an amazing timeto be a web developer.Thursday, 2 May 13
Thursday, 2 May 13
Thursday, 2 May 13
FrustrationThursday, 2 May 13
The web is awork in progress.Your job?To deal with it.Thursday, 2 May 13
Making things betterThursday, 2 May 13
Thursday, 2 May 13
You now havetwo problemsThursday, 2 May 13
Thursday, 2 May 13
The state of play in December 2011.Thursday, 2 May 13
December 2011: greenbelt.org.ukThursday, 2 May 13
Understanding the technology youraudience is using gives you a point ofreference for your decisions.Thursday, 2 May 13
Our approach: mobile first responsivedesignThursday, 2 May 13
<link rel="stylesheet" href="/assets/css/basic.css" /><link rel="stylesheet" media="only screen and (min-width: 460px)" hr...
Thursday, 2 May 13
Problem: no media query support in IE8and below.Thursday, 2 May 13
No media query supportThursday, 2 May 13
Option 1: serve these users the mobileversion of the site onlyThursday, 2 May 13
Option 2: Use respond.js to polyfill mediaquery supportThursday, 2 May 13
Option 3: Offer a fixed width version of thesite to IE8 and belowThursday, 2 May 13
Thursday, 2 May 13
Problem: lack of support for styling HTML5semantic elements in older browsers.Thursday, 2 May 13
No support for HTML5 semantic elementsThursday, 2 May 13
Option 1: use the JavaScript polyfillhtml5.js to add support via JavaScriptThursday, 2 May 13
Option 2: avoid using HTML5 semanticelements in the templates until IE8 usagedeclinesThursday, 2 May 13
Replacing divs with semantic elementslater is trivial due to our template basedCMS.Thursday, 2 May 13
We (edgeofmyseat.com) are retained tomaintain & develop the site. We can makethese changes when old browser usagereduces.T...
Your mileage (and situation) may vary.Thursday, 2 May 13
Avoiding using the tag in your selectorsmeans you can switch tags in yourtemplates without changing your CSS.Thursday, 2 M...
Problem: lack of support for certain CSS3Selectors in older browsers.Thursday, 2 May 13
No support for nth-childThursday, 2 May 13
Option1: do nothingThursday, 2 May 13
Option 2: polyfill with SelectivizrThursday, 2 May 13
Option 3: fix each selector in your ownJavaScriptThursday, 2 May 13
My decision to fix the width for olderbrowsers also made polyfilling CSS3selectors much easier.Thursday, 2 May 13
Problem: no clear solution for ResponsiveImagesThursday, 2 May 13
Solution: put in place technology that willenable us to adopt a solution laterThursday, 2 May 13
Responsive Images Community Grouphttp://www.w3.org/community/respimg/Thursday, 2 May 13
1. What is the problem?My process2. What are my constraints?3. Is not supporting this feature an option?4. What current so...
May 2012: grabaperch.comThursday, 2 May 13
How many users of the Perch website donot have support for the modern webtechnologies we want to use?Thursday, 2 May 13
May 2012: grabaperch.comThursday, 2 May 13
Thursday, 2 May 13
I use more polyfills when I have fewerolder browser users. The downsides aregoing to be an issue to a much smaller %Thursda...
Why not just use aboilerplate?Thursday, 2 May 13
Thursday, 2 May 13
Stop solving problemsyou don’t yet haveThursday, 2 May 13
If you don’t knowwhat it is doing.Why is it there?Thursday, 2 May 13
What happens if anypart does not load?Thursday, 2 May 13
Do you know whatis safe to delete?Thursday, 2 May 13
Starting with the bare minimum andadding things forces you to consider theimplications of each thing you add.Thursday, 2 M...
There’s no silver bullet to making a slowsite fast. You must take a holisticapproach. High performance runs theentire way ...
Web pages are getting larger and a lot ofthe size is down to JavaScript.http://royal.pingdom.com/2011/11/21/web-pages-gett...
Size MattersThursday, 2 May 13
Thursday, 2 May 13
Thursday, 2 May 13
Thursday, 2 May 13
We are all learners and we are allteachers...Thursday, 2 May 13
... no matter how old we are, how long wehave been doing this, and whether wewrite tutorials or speak at conferences ornot...
Polyfills shouldnot be a black boxThursday, 2 May 13
Teach problem solvingbefore polyfilling.Thursday, 2 May 13
Thursday, 2 May 13
“Perch is removing myparagraphs”Thursday, 2 May 13
We need to teach:HTML, CSS, JavaScriptThursday, 2 May 13
We need to teach:Problem Solving skillsThursday, 2 May 13
Thursday, 2 May 13
If we train people to just copy and paste,we stop them growing, learning andcontributing.Thursday, 2 May 13
Make sure you know why you are using asolution and what your other options are.Thursday, 2 May 13
Know and test for what happens ifJavaScript doesn’t load.Thursday, 2 May 13
Build solutions that are flexible for futurechanges in best practice.Thursday, 2 May 13
When teaching or writing tutorials forothers explain problems before handingout the solution.Explain why as well as how.Th...
Thank you.@rachelandrewhttp://rachelandrew.co.ukhttp://grabaperch.comhttp://edgeofmyseat.comImage credits - Flickr users: ...
Upcoming SlideShare
Loading in...5
×

Pushing the Boundaries without Breaking the Web

422

Published on

http://www.rachelandrew.co.uk/presentations/pushing-the-boundaries

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
422
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Pushing the Boundaries without Breaking the Web

  1. 1. Pushing the boundarieswithoutBreaking the WebRachel Andrew: Future of Mobile LondonOctober 2012Thursday, 2 May 13
  2. 2. a History LessonThursday, 2 May 13
  3. 3. <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
  4. 4. Thursday, 2 May 13
  5. 5. Things used by people who understand theproblems they solve are also used by thosewho do not understand those problems, oreven if there is a problem.Thursday, 2 May 13
  6. 6. This is an amazing timeto be a web developer.Thursday, 2 May 13
  7. 7. Thursday, 2 May 13
  8. 8. Thursday, 2 May 13
  9. 9. FrustrationThursday, 2 May 13
  10. 10. The web is awork in progress.Your job?To deal with it.Thursday, 2 May 13
  11. 11. Making things betterThursday, 2 May 13
  12. 12. Thursday, 2 May 13
  13. 13. You now havetwo problemsThursday, 2 May 13
  14. 14. Thursday, 2 May 13
  15. 15. The state of play in December 2011.Thursday, 2 May 13
  16. 16. December 2011: greenbelt.org.ukThursday, 2 May 13
  17. 17. Understanding the technology youraudience is using gives you a point ofreference for your decisions.Thursday, 2 May 13
  18. 18. Our approach: mobile first responsivedesignThursday, 2 May 13
  19. 19. <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
  20. 20. Thursday, 2 May 13
  21. 21. Problem: no media query support in IE8and below.Thursday, 2 May 13
  22. 22. No media query supportThursday, 2 May 13
  23. 23. Option 1: serve these users the mobileversion of the site onlyThursday, 2 May 13
  24. 24. Option 2: Use respond.js to polyfill mediaquery supportThursday, 2 May 13
  25. 25. Option 3: Offer a fixed width version of thesite to IE8 and belowThursday, 2 May 13
  26. 26. Thursday, 2 May 13
  27. 27. Problem: lack of support for styling HTML5semantic elements in older browsers.Thursday, 2 May 13
  28. 28. No support for HTML5 semantic elementsThursday, 2 May 13
  29. 29. Option 1: use the JavaScript polyfillhtml5.js to add support via JavaScriptThursday, 2 May 13
  30. 30. Option 2: avoid using HTML5 semanticelements in the templates until IE8 usagedeclinesThursday, 2 May 13
  31. 31. Replacing divs with semantic elementslater is trivial due to our template basedCMS.Thursday, 2 May 13
  32. 32. We (edgeofmyseat.com) are retained tomaintain & develop the site. We can makethese changes when old browser usagereduces.Thursday, 2 May 13
  33. 33. Your mileage (and situation) may vary.Thursday, 2 May 13
  34. 34. Avoiding using the tag in your selectorsmeans you can switch tags in yourtemplates without changing your CSS.Thursday, 2 May 13
  35. 35. Problem: lack of support for certain CSS3Selectors in older browsers.Thursday, 2 May 13
  36. 36. No support for nth-childThursday, 2 May 13
  37. 37. Option1: do nothingThursday, 2 May 13
  38. 38. Option 2: polyfill with SelectivizrThursday, 2 May 13
  39. 39. Option 3: fix each selector in your ownJavaScriptThursday, 2 May 13
  40. 40. My decision to fix the width for olderbrowsers also made polyfilling CSS3selectors much easier.Thursday, 2 May 13
  41. 41. Problem: no clear solution for ResponsiveImagesThursday, 2 May 13
  42. 42. Solution: put in place technology that willenable us to adopt a solution laterThursday, 2 May 13
  43. 43. Responsive Images Community Grouphttp://www.w3.org/community/respimg/Thursday, 2 May 13
  44. 44. 1. What is the problem?My process2. 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
  45. 45. May 2012: grabaperch.comThursday, 2 May 13
  46. 46. How many users of the Perch website donot have support for the modern webtechnologies we want to use?Thursday, 2 May 13
  47. 47. May 2012: grabaperch.comThursday, 2 May 13
  48. 48. Thursday, 2 May 13
  49. 49. I use more polyfills when I have fewerolder browser users. The downsides aregoing to be an issue to a much smaller %Thursday, 2 May 13
  50. 50. Why not just use aboilerplate?Thursday, 2 May 13
  51. 51. Thursday, 2 May 13
  52. 52. Stop solving problemsyou don’t yet haveThursday, 2 May 13
  53. 53. If you don’t knowwhat it is doing.Why is it there?Thursday, 2 May 13
  54. 54. What happens if anypart does not load?Thursday, 2 May 13
  55. 55. Do you know whatis safe to delete?Thursday, 2 May 13
  56. 56. Starting with the bare minimum andadding things forces you to consider theimplications of each thing you add.Thursday, 2 May 13
  57. 57. There’s no silver bullet to making a slowsite fast. You must take a holisticapproach. High performance runs theentire way through from the hardware it’shosted on, through the app that builds thepages, to the server software that deliversthe pages and the front end code thatdisplays them in a browser.Drew McLellan - http://allinthehead.com/retro/361/how-to-make-your-website-fastThursday, 2 May 13
  58. 58. Web pages are getting larger and a lot ofthe size is down to JavaScript.http://royal.pingdom.com/2011/11/21/web-pages-getting-bloated-here-is-why/Thursday, 2 May 13
  59. 59. Size MattersThursday, 2 May 13
  60. 60. Thursday, 2 May 13
  61. 61. Thursday, 2 May 13
  62. 62. Thursday, 2 May 13
  63. 63. We are all learners and we are allteachers...Thursday, 2 May 13
  64. 64. ... no matter how old we are, how long wehave been doing this, and whether wewrite tutorials or speak at conferences ornot.Thursday, 2 May 13
  65. 65. Polyfills shouldnot be a black boxThursday, 2 May 13
  66. 66. Teach problem solvingbefore polyfilling.Thursday, 2 May 13
  67. 67. Thursday, 2 May 13
  68. 68. “Perch is removing myparagraphs”Thursday, 2 May 13
  69. 69. We need to teach:HTML, CSS, JavaScriptThursday, 2 May 13
  70. 70. We need to teach:Problem Solving skillsThursday, 2 May 13
  71. 71. Thursday, 2 May 13
  72. 72. If we train people to just copy and paste,we stop them growing, learning andcontributing.Thursday, 2 May 13
  73. 73. Make sure you know why you are using asolution and what your other options are.Thursday, 2 May 13
  74. 74. Know and test for what happens ifJavaScript doesn’t load.Thursday, 2 May 13
  75. 75. Build solutions that are flexible for futurechanges in best practice.Thursday, 2 May 13
  76. 76. When teaching or writing tutorials forothers explain problems before handingout the solution.Explain why as well as how.Thursday, 2 May 13
  77. 77. Thank you.@rachelandrewhttp://rachelandrew.co.ukhttp://grabaperch.comhttp://edgeofmyseat.comImage credits - Flickr users: artbystevejohnson, atoach, dominicspics, imagesbywestfall, koalazymonkey, pinksherbert, whatcouldgowrongThursday, 2 May 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×