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