Your SlideShare is downloading. ×
0
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Pushing the Boundaries without Breaking the Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Pushing the Boundaries without Breaking the Web

411

Published on

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

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
411
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Pushing the boundarieswithoutBreaking the WebRachel Andrew: Future of Mobile LondonOctober 2012Thursday, 2 May 13
  2. a History LessonThursday, 2 May 13
  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. Thursday, 2 May 13
  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. This is an amazing timeto be a web developer.Thursday, 2 May 13
  7. Thursday, 2 May 13
  8. Thursday, 2 May 13
  9. FrustrationThursday, 2 May 13
  10. The web is awork in progress.Your job?To deal with it.Thursday, 2 May 13
  11. Making things betterThursday, 2 May 13
  12. Thursday, 2 May 13
  13. You now havetwo problemsThursday, 2 May 13
  14. Thursday, 2 May 13
  15. The state of play in December 2011.Thursday, 2 May 13
  16. December 2011: greenbelt.org.ukThursday, 2 May 13
  17. Understanding the technology youraudience is using gives you a point ofreference for your decisions.Thursday, 2 May 13
  18. Our approach: mobile first responsivedesignThursday, 2 May 13
  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. Thursday, 2 May 13
  21. Problem: no media query support in IE8and below.Thursday, 2 May 13
  22. No media query supportThursday, 2 May 13
  23. Option 1: serve these users the mobileversion of the site onlyThursday, 2 May 13
  24. Option 2: Use respond.js to polyfill mediaquery supportThursday, 2 May 13
  25. Option 3: Offer a fixed width version of thesite to IE8 and belowThursday, 2 May 13
  26. Thursday, 2 May 13
  27. Problem: lack of support for styling HTML5semantic elements in older browsers.Thursday, 2 May 13
  28. No support for HTML5 semantic elementsThursday, 2 May 13
  29. Option 1: use the JavaScript polyfillhtml5.js to add support via JavaScriptThursday, 2 May 13
  30. Option 2: avoid using HTML5 semanticelements in the templates until IE8 usagedeclinesThursday, 2 May 13
  31. Replacing divs with semantic elementslater is trivial due to our template basedCMS.Thursday, 2 May 13
  32. We (edgeofmyseat.com) are retained tomaintain & develop the site. We can makethese changes when old browser usagereduces.Thursday, 2 May 13
  33. Your mileage (and situation) may vary.Thursday, 2 May 13
  34. Avoiding using the tag in your selectorsmeans you can switch tags in yourtemplates without changing your CSS.Thursday, 2 May 13
  35. Problem: lack of support for certain CSS3Selectors in older browsers.Thursday, 2 May 13
  36. No support for nth-childThursday, 2 May 13
  37. Option1: do nothingThursday, 2 May 13
  38. Option 2: polyfill with SelectivizrThursday, 2 May 13
  39. Option 3: fix each selector in your ownJavaScriptThursday, 2 May 13
  40. My decision to fix the width for olderbrowsers also made polyfilling CSS3selectors much easier.Thursday, 2 May 13
  41. Problem: no clear solution for ResponsiveImagesThursday, 2 May 13
  42. Solution: put in place technology that willenable us to adopt a solution laterThursday, 2 May 13
  43. Responsive Images Community Grouphttp://www.w3.org/community/respimg/Thursday, 2 May 13
  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. May 2012: grabaperch.comThursday, 2 May 13
  46. How many users of the Perch website donot have support for the modern webtechnologies we want to use?Thursday, 2 May 13
  47. May 2012: grabaperch.comThursday, 2 May 13
  48. Thursday, 2 May 13
  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. Why not just use aboilerplate?Thursday, 2 May 13
  51. Thursday, 2 May 13
  52. Stop solving problemsyou don’t yet haveThursday, 2 May 13
  53. If you don’t knowwhat it is doing.Why is it there?Thursday, 2 May 13
  54. What happens if anypart does not load?Thursday, 2 May 13
  55. Do you know whatis safe to delete?Thursday, 2 May 13
  56. Starting with the bare minimum andadding things forces you to consider theimplications of each thing you add.Thursday, 2 May 13
  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. 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. Size MattersThursday, 2 May 13
  60. Thursday, 2 May 13
  61. Thursday, 2 May 13
  62. Thursday, 2 May 13
  63. We are all learners and we are allteachers...Thursday, 2 May 13
  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. Polyfills shouldnot be a black boxThursday, 2 May 13
  66. Teach problem solvingbefore polyfilling.Thursday, 2 May 13
  67. Thursday, 2 May 13
  68. “Perch is removing myparagraphs”Thursday, 2 May 13
  69. We need to teach:HTML, CSS, JavaScriptThursday, 2 May 13
  70. We need to teach:Problem Solving skillsThursday, 2 May 13
  71. Thursday, 2 May 13
  72. If we train people to just copy and paste,we stop them growing, learning andcontributing.Thursday, 2 May 13
  73. Make sure you know why you are using asolution and what your other options are.Thursday, 2 May 13
  74. Know and test for what happens ifJavaScript doesn’t load.Thursday, 2 May 13
  75. Build solutions that are flexible for futurechanges in best practice.Thursday, 2 May 13
  76. When teaching or writing tutorials forothers explain problems before handingout the solution.Explain why as well as how.Thursday, 2 May 13
  77. Thank you.@rachelandrewhttp://rachelandrew.co.ukhttp://grabaperch.comhttp://edgeofmyseat.comImage credits - Flickr users: artbystevejohnson, atoach, dominicspics, imagesbywestfall, koalazymonkey, pinksherbert, whatcouldgowrongThursday, 2 May 13

×