Upload
rachel-andrew
View
315
Download
1
Tags:
Embed Size (px)
DESCRIPTION
http://www.rachelandrew.co.uk/presentations/pushing-the-boundaries
Citation preview
Pushing the boundaries without
Breaking the Web
Rachel Andrew: Future of Mobile LondonOctober 2012
Thursday, 2 May 13
a History Lesson
Thursday, 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 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
This is an amazing time to be a web developer.
Thursday, 2 May 13
Thursday, 2 May 13
Thursday, 2 May 13
Frustration
Thursday, 2 May 13
The web is a work in progress.
Your job? To deal with it.
Thursday, 2 May 13
Making things better
Thursday, 2 May 13
Thursday, 2 May 13
You now have two problems
Thursday, 2 May 13
Thursday, 2 May 13
The state of play in December 2011.
Thursday, 2 May 13
December 2011: greenbelt.org.uk
Thursday, 2 May 13
Understanding the technology your audience is using gives you a point of reference for your decisions.
Thursday, 2 May 13
Our approach: mobile first responsive design
Thursday, 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 IE8 and below.
Thursday, 2 May 13
No media query support
Thursday, 2 May 13
Option 1: serve these users the mobile version of the site only
Thursday, 2 May 13
Option 2: Use respond.js to polyfill media query support
Thursday, 2 May 13
Option 3: Offer a fixed width version of the site to IE8 and below
Thursday, 2 May 13
Thursday, 2 May 13
Problem: lack of support for styling HTML5 semantic elements in older browsers.
Thursday, 2 May 13
No support for HTML5 semantic elements
Thursday, 2 May 13
Option 1: use the JavaScript polyfill html5.js to add support via JavaScript
Thursday, 2 May 13
Option 2: avoid using HTML5 semantic elements in the templates until IE8 usage declines
Thursday, 2 May 13
Replacing divs with semantic elements later is trivial due to our template based CMS.
Thursday, 2 May 13
We (edgeofmyseat.com) are retained to maintain & develop the site. We can make these changes when old browser usage reduces.
Thursday, 2 May 13
Your mileage (and situation) may vary.
Thursday, 2 May 13
Avoiding using the tag in your selectors means you can switch tags in your templates without changing your CSS.
Thursday, 2 May 13
Problem: lack of support for certain CSS3 Selectors in older browsers.
Thursday, 2 May 13
No support for nth-child
Thursday, 2 May 13
Option1: do nothing
Thursday, 2 May 13
Option 2: polyfill with Selectivizr
Thursday, 2 May 13
Option 3: fix each selector in your own JavaScript
Thursday, 2 May 13
My decision to fix the width for older browsers also made polyfilling CSS3 selectors much easier.
Thursday, 2 May 13
Problem: no clear solution for Responsive Images
Thursday, 2 May 13
Solution: put in place technology that will enable us to adopt a solution later
Thursday, 2 May 13
Responsive Images Community Grouphttp://www.w3.org/community/respimg/
Thursday, 2 May 13
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
May 2012: grabaperch.com
Thursday, 2 May 13
How many users of the Perch website do not have support for the modern web technologies we want to use?
Thursday, 2 May 13
May 2012: grabaperch.com
Thursday, 2 May 13
Thursday, 2 May 13
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
Why not just use a
boilerplate?
Thursday, 2 May 13
Thursday, 2 May 13
Stop solving problems you don’t yet have
Thursday, 2 May 13
If you don’t know what it is doing. Why is it there?
Thursday, 2 May 13
What happens if any part does not load?
Thursday, 2 May 13
Do you know what is safe to delete?
Thursday, 2 May 13
Starting with the bare minimum and adding things forces you to consider the implications of each thing you add.
Thursday, 2 May 13
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
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
Size Matters
Thursday, 2 May 13
Thursday, 2 May 13
Thursday, 2 May 13
Thursday, 2 May 13
We are all learners and we are all teachers...
Thursday, 2 May 13
... 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
Polyfills should not be a black box
Thursday, 2 May 13
Teach problem solving
before polyfilling.
Thursday, 2 May 13
Thursday, 2 May 13
“Perch is removing my paragraphs”
Thursday, 2 May 13
We need to teach:
HTML, CSS, JavaScript
Thursday, 2 May 13
We need to teach:
Problem Solving skills
Thursday, 2 May 13
Thursday, 2 May 13
If we train people to just copy and paste, we stop them growing, learning and contributing.
Thursday, 2 May 13
Make sure you know why you are using a solution and what your other options are.
Thursday, 2 May 13
Know and test for what happens if JavaScript doesn’t load.
Thursday, 2 May 13
Build solutions that are flexible for future changes in best practice.
Thursday, 2 May 13
When teaching or writing tutorials for others explain problems before handing out the solution.
Explain why as well as how.
Thursday, 2 May 13
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