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

1. Pushing the boundaries
without
Breaking the Web
Rachel Andrew: Future of Mobile London
October 2012
Thursday, 2 May 13

2. a History Lesson
Thursday, 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 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

6. This is an amazing time
to be a web developer.
Thursday, 2 May 13

7. Thursday, 2 May 13

8. Thursday, 2 May 13

9. Frustration
Thursday, 2 May 13

10. The web is a
work in progress.
Your job?
To deal with it.
Thursday, 2 May 13

11. Making things better
Thursday, 2 May 13

12. Thursday, 2 May 13

13. You now have
two problems
Thursday, 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.uk
Thursday, 2 May 13

17. Understanding the technology your
audience is using gives you a point of
reference for your decisions.
Thursday, 2 May 13

18. Our approach: mobile first responsive
design
Thursday, 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 IE8
and below.
Thursday, 2 May 13

22. No media query support
Thursday, 2 May 13

23. Option 1: serve these users the mobile
version of the site only
Thursday, 2 May 13

24. Option 2: Use respond.js to polyfill media
query support
Thursday, 2 May 13

25. Option 3: Offer a fixed width version of the
site to IE8 and below
Thursday, 2 May 13

26. Thursday, 2 May 13

27. Problem: lack of support for styling HTML5
semantic elements in older browsers.
Thursday, 2 May 13

28. No support for HTML5 semantic elements
Thursday, 2 May 13

29. Option 1: use the JavaScript polyfill
html5.js to add support via JavaScript
Thursday, 2 May 13

30. Option 2: avoid using HTML5 semantic
elements in the templates until IE8 usage
declines
Thursday, 2 May 13

31. Replacing divs with semantic elements
later is trivial due to our template based
CMS.
Thursday, 2 May 13

32. We (edgeofmyseat.com) are retained to
maintain & develop the site. We can make
these changes when old browser usage
reduces.
Thursday, 2 May 13

33. Your mileage (and situation) may vary.
Thursday, 2 May 13

34. Avoiding using the tag in your selectors
means you can switch tags in your
templates without changing your CSS.
Thursday, 2 May 13

35. Problem: lack of support for certain CSS3
Selectors in older browsers.
Thursday, 2 May 13

36. No support for nth-child
Thursday, 2 May 13

37. Option1: do nothing
Thursday, 2 May 13

38. Option 2: polyfill with Selectivizr
Thursday, 2 May 13

39. Option 3: fix each selector in your own
JavaScript
Thursday, 2 May 13

40. My decision to fix the width for older
browsers also made polyfilling CSS3
selectors much easier.
Thursday, 2 May 13

41. Problem: no clear solution for Responsive
Images
Thursday, 2 May 13

42. Solution: put in place technology that will
enable us to adopt a solution later
Thursday, 2 May 13

43. Responsive Images Community Group
http://www.w3.org/community/respimg/
Thursday, 2 May 13

44. 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

45. May 2012: grabaperch.com
Thursday, 2 May 13

46. How many users of the Perch website do
not have support for the modern web
technologies we want to use?
Thursday, 2 May 13

47. May 2012: grabaperch.com
Thursday, 2 May 13

48. Thursday, 2 May 13

49. 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

50. Why not just use a
boilerplate?
Thursday, 2 May 13

51. Thursday, 2 May 13

52. Stop solving problems
you don’t yet have
Thursday, 2 May 13

53. If you don’t know
what it is doing.
Why is it there?
Thursday, 2 May 13

54. What happens if any
part does not load?
Thursday, 2 May 13

55. Do you know what
is safe to delete?
Thursday, 2 May 13

56. Starting with the bare minimum and
adding things forces you to consider the
implications of each thing you add.
Thursday, 2 May 13

57. 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

58. 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

59. Size Matters
Thursday, 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 all
teachers...
Thursday, 2 May 13

64. ... 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

65. Polyfills should
not be a black box
Thursday, 2 May 13

66. Teach problem solving
before polyfilling.
Thursday, 2 May 13

67. Thursday, 2 May 13

68. “Perch is removing my
paragraphs”
Thursday, 2 May 13

69. We need to teach:
HTML, CSS, JavaScript
Thursday, 2 May 13

70. We need to teach:
Problem Solving skills
Thursday, 2 May 13

71. Thursday, 2 May 13

72. If we train people to just copy and paste,
we stop them growing, learning and
contributing.
Thursday, 2 May 13

73. Make sure you know why you are using a
solution and what your other options are.
Thursday, 2 May 13

74. Know and test for what happens if
JavaScript doesn’t load.
Thursday, 2 May 13

75. Build solutions that are flexible for future
changes in best practice.
Thursday, 2 May 13

76. When teaching or writing tutorials for
others explain problems before handing
out the solution.
Explain why as well as how.
Thursday, 2 May 13

77. Thank you.
@rachelandrew
http://rachelandrew.co.uk
http://grabaperch.com
http://edgeofmyseat.com
Image credits - Flickr users: artbystevejohnson, atoach, dominicspics, imagesbywestfall, koalazymonkey, pinksherbert, whatcouldgowrong
Thursday, 2 May 13