Responsible Web Development by Patrick Simpson

A summary of how we (developers, ux designers, designers) need to be thinking responsive, now and forever. Forget the old days of static design, stop cluttering up the web and start making things that work for your audience. Don't punish them, reward them.

Transcript

1. Patrick Simpson RESPONSIBLE WEB DEVELOPMENT

2. RESPONSIBLE WEB DEVELOPMENT THE PAST
3. The WWW is born.
4. 1993: HTML (1.2)
5. 1995: JavaScript
6. 1996: CSS 1
7. 1993: ~500 Websites
8. Today: ~650,000,000 Websites
9. Your Browsing Choices ‣ Text Based Browsers -Lynx... ‣ Graphical Browsers -Mosaic -Internet Explorer 2+ -NetScape
10. 90’s Style
12. ! ! 2000: The WWW is catching on. ! !
14. 2004: Web 2.0
15. Ajax!
16. This is ajax... var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } self.xmlHttpReq.open('POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatepage(self.xmlHttpReq.responseText); } } self.xmlHttpReq.send(getquerystring()); } ! function getquerystring() { var form = document.forms['f1']; var word = form.word.value; qstr = 'w=' + escape(word); // NOTE: no '?' before querystring return qstr; }
17. This is ajax... $.ajax({! url: "data.json"! }).done(function() {! alert(“All done...”);! });!
18. What was “Web 2.0”?
19. Single Page Application... or The Web Application
21. The 2000’s gave us the foundation
24. RESPONSIBLE WEB DEVELOPER PRESENT
27. ! ! ! 
 FUTURE FRIENDLY ! http://futurefriend.ly
28. ~2009 Responsive Web Design
29. Responsive Fluid Grid Layout Flexible Content Media Queries
30. Mobile First
32. ! ! Be Simple. !
33. “If you can't explain it to a six year old, you don't understand it yourself.” ! ― Albert Einstein
34. Don’t Waste
35. Text The WWW is full of NOISE
36. Crazy Ads
37. ????
40. ! Overlays Galore
42. CAPTCHAs
45. People will find a way
46. RESPONSIBLE WEB DEVELOPER PRESENT TECH
47. HTML5
48. HTML Preprocessors HAML Jade MarkDown
49. ! CSS3
50. ! CSS Preprocessors SASS/SCSS Stylus LESS
51. JavaScript

52. Nodecopter! ! ! ! ! ! 

53. CoffeeScript

54. # Conditions: number = -42 if opposite ! # Functions: square = (x) -> x * x ! # Arrays: list = [1, 2, 3, 4, 5] ! # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x ! # Splats: race = (winner, runners...) -> print winner, runners
55. var cubes, list, math, num, number, opposite, race, square, __slice = [].slice; ! number = 42; ! opposite = true; ! if (opposite) { number = -42; } ! square = function(x) { return x * x; }; ! list = [1, 2, 3, 4, 5]; ! math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); }
56. Preprocess everything
57. GruntJS ! !
58. ! ! GruntJS Saves you time !
59. Media Queries
60. .sidebar { display: block; } ! @media (min-width: 12em) { .sidebar { display: none; } }
61. SB Media ! https://github.com/sparkbox/SB-Media
62. <!--[if (lt IE 9) & (!IEMobile)]>! <link href="c/no-mq.css" rel="stylesheet">! <![endif]-->! ! <!--[if (gte IE 9) | (IEMobile)]><!-->! <link href="c/mq.css" rel="stylesheet">! <!--<![endif]-->!
63. body{! background-color:red;! ! @include sb-media(40em){! background-color: blue;! }! }
 !
64. no-mq.css! body {! background-color: red;! background-color: blue;! }! ! ! mq.css! body {! background-color: red;! }! @media (min-width: 40em) {! body {! background-color: blue;! }! }!
65. RESPONSIBLE WEB DEVELOPER THE FUTURE
66. We are responsible...
67. Think
68. THANKS! @SimpsonPatrick patrick@heysparkbox.com
69. Resources! ! ! IE 2 Simulator! http://www.dejavu.org/1996win.htm! ! Brad Frost:! http://bradfrostweb.com/! ! GruntJS! http://gruntjs.com/! ! Sass! http://sass-lang.com/! ! CoffeeScript! http://coffeescript.org/! ! SB-Media Queries! https://github.com/sparkbox/SB-Media

70. Resources! ! ! HTML5 - Boilerplate! http://html5boilerplate.com/! ! SparkBox! http://seesparkbox.com/! ! NodeJS! http://nodejs.org/! ! Nodecopter! http://nodecopter.com/! ! Responsive Grid System! http://responsive.gs/! ! Github! http://github.com