• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Pushing the Boundaries without Breaking the Web
 

Pushing the Boundaries without Breaking the Web

on

  • 430 views

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

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

Statistics

Views

Total Views
430
Views on SlideShare
430
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Pushing the Boundaries without Breaking the Web Pushing the Boundaries without Breaking the Web Presentation Transcript

    • 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")&&(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
    • Thursday, 2 May 13
    • 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
    • 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)" 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
    • 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.Thursday, 2 May 13
    • 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 May 13
    • 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 solutions exist?5. Use a polyfill or roll my own?Thursday, 2 May 13
    • 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 %Thursday, 2 May 13
    • 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 May 13
    • 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
    • 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
    • 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.Thursday, 2 May 13
    • 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.Thursday, 2 May 13
    • Thank you.@rachelandrewhttp://rachelandrew.co.ukhttp://grabaperch.comhttp://edgeofmyseat.comImage credits - Flickr users: artbystevejohnson, atoach, dominicspics, imagesbywestfall, koalazymonkey, pinksherbert, whatcouldgowrongThursday, 2 May 13