Your SlideShare is downloading. ×

Is everything we used to do wrong?


Published on

Many developers used to believe that class-free, lean markup and descendant selectors were the answer. Many developers still build websites for a single resolution, or a small range of devices. …

Many developers used to believe that class-free, lean markup and descendant selectors were the answer. Many developers still build websites for a single resolution, or a small range of devices. However, these practices are now being questioned. Where do we stand? What is best practice web development today? Russ Weakley will explore these topics and more... or possibly less...

Published in: Education, Technology
1 Comment
  • With my Nexus 10 I have a higher resolution screen than either of my dual 24' screens for my Power Mac workstation. It would be a shame to feed the Nexus lower resolution imagery.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. is everything we used to dowrong
  • 2. This presentation is going to look at some of our best practices from the past, and what are considered best practices today.
  • 3. First of all, an admission…
  • 4. I’m not a fan of the term“best practice” any more.
  • 5. Best practices:right vs w rong
  • 6. If we define one method as the “right way” it oftenimplies that other methods are wrong.
  • 7. While there are definitely“bad practices”, there are many situations where there are no clear right or wrong solutions.
  • 8. “Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embracethe inherent fluidity of the web, you’renot a web designer, you’re something else.” design/
  • 9. Best practices:things change
  • 10. If history has taught usanything it’s that everything changes over time.
  • 11. Tables vs CSS
  • 12. “My rule of thumb is Consistency, Consistency, Consistency... If CSSworks for a project, then I use it. If itdoesn’t look like it will, I use tables.”
  • 13. Microformats
  • 14. “The blog is neglected, thereve been no new formats promoted … none of uswork actively on it, … the mailing lists are deserted. It is an entirely legitimate impression that the effort has folded into irrelevance.”
  • 15. The <i> element
  • 16. The i element now represents a span of text in an alternate voice or mood, orotherwise offset from the normal prose ina manner indicating a different quality of text, such as a taxonomic designation, atechnical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.
  • 17. Um.. then there is myRemix07 presentation…
  • 18. “Why separate your CSS? It’s easier tofind rules. More than one developer ata time. Files can be turned on or off as needed.”
  • 19. Best practices: pend on skillsde
  • 20. Best practices may be quitedifferent depending on the skill area.
  • 21. For example, best practicesin front end development may be different from best practices in UX, SEO and Social media…
  • 22. Best practices: e pend on te amsd
  • 23. Best practices may be quitedifferent depending on the team you work with.
  • 24. As an individual, you mayhave specific best practices.However, these may have tochange when working in a team environment.
  • 25. outcomes not techniques
  • 26. Instead of talking about bestpractices as techniques, we should probably focus on outcomes.
  • 27. Let’s take front enddevelopment (HTML, CSS,JavaScript) as an example:
  • 28. What are some of ourdesired outcomes?
  • 29. Outcome 1:u sers come first
  • 30. We should not do anything that makes the user experience harder.
  • 31. We should make sure our sites are accessible to all users.
  • 32. We should make sure our sites are accessible to all devices.
  • 33. We should make sure our sites are accessibleregardless of bandwidth.
  • 34. Outcome 2: elop efficientlydev
  • 35. We should aim to develop using efficient methods, to reduce overall development time.
  • 36. We should aim to developusing methods that avoid repetition.
  • 37. Outcome 3:m ain taina ble, s cal able
  • 38. We should aim to developusing practices that allow easy maintenance.
  • 39. We should aim to developusing practices that allow our sites to scale well over time.
  • 40. Outcome 4:fast page load
  • 41. We should aim to developsites so that pages load asquickly and efficiently as possible.
  • 42. Outcome 5:backawar d and comp atibleforward
  • 43. Does anyone else hate the term “future proof”?
  • 44. XHTML 1.0 was supposed to be a future-proof language
  • 45. We have to be careful notto leave our users behind in the rush towards the future.
  • 46. For example, JavaScriptbased solutions should be built so that they fail gracefully.
  • 47. We should be careful about abandoning users witholder devices because wedon’t want to support them.
  • 48. Some techniquesthat aid our outcomes
  • 49. So, here are some strategies and techniquesthat are currently considered “best practices”.
  • 50. Be warned, these may not be considered“best practices” in the future!
  • 51. More importantly, these best practice techniques aredesigned to help us achieve some key outcomes.
  • 52. Reducingrepetition
  • 53. 1:CSS resets
  • 54. CSS resets aim to removebrowser-specific styles, andthen build up from scratch - so that each element will appear the same in all browsers
  • 55. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{ margin:0; padding:0; border:0; font-size:100%; font: inherit; vertical-align: baseline;}
  • 56. Strengths:Efficient developmentConsistency for teamsWeaknesses:lots of additional rewriting
  • 57. 2:CSS frameworks
  • 58. CSS frameworks are pre-prepared libraries thatallow for easier, standards- compliant styling of web page components.
  • 59. Many frameworks focus on layout grids, allowingdevelopers to pull in libraryclasses to build complex layouts.
  • 60. .column, .span-1, .span-2,.span-3, .span-4, .span-5,.span-6, .span-7, .span-8,.span-9, .span-10, .span-11,.span-12, .span-13, .span-14,.span-15, .span-16, .span-17,.span-18, .span-19, .span-20,.span-21, .span-22, .span-23,.span-24 {float:left;margin-right:10px;}
  • 61. Keep in mind you canalways roll your own framework.
  • 62. StrengthEfficient developmentLean, abstracted CSSWeaknessesDesigns that don’t fitBloated frameworksPresentational class names
  • 63. Maintainableand scalable
  • 64. 3:Object-oriented CSS
  • 65. How many timesdoes your CSS file mention H2 or “float: left”?
  • 66. Do you ever findyourself stylingusing Firebug?
  • 67. Object-oriented CSS styles HTML “objects” or “modules” with cleaner, more efficient CSS.
  • 68. For all the hardcoredevelopers… yes, it’s not really object-oriented. It’s just a name!
  • 69. There is a strong chance that you may be “doing itwrong”, or could at least be “doing it better”.
  • 70. How do we useObject Oriented CSS
  • 71. Before starting your CSS, look at your layouts and try to find patterns.
  • 72. Are there aspects of the layout that could beabstracted into library items?
  • 73. Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid specificity warsWeaknessesadditional HTML classesnew mindset
  • 74. Efficiency
  • 75. 4:Pre-processors
  • 76. Pre-processors allow us touse variables in CSS files and then parse them to regular stylesheets.
  • 77. There are many different frameworks available: • LESS • SASS • Turbine • Switch CSS • DtCSS • CSS Crush
  • 78. Variables
  • 79. @color1: red;@color2: green;@color3: blue;@color4: orange;@color5: brown;#a { background: @color1; }
  • 80. Minification
  • 81. div{width:200px;height:200px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}#one{background:red;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}#onea{color:green;}#two{background:green;-
  • 82. Mixins
  • 83. .border-radius(@radius: 5px){-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}div { .border-radius(); }
  • 84. PackingGzippingCompiling
  • 85. Strengthfaster developmentvariables!Weaknessesdeep nestinginefficient CSSentirely new syntax
  • 86. Deviceindependence
  • 87. 5:Responsive design
  • 88. Until recently, people builtsites for desktop and/or mobile only.
  • 89. Responsive design isabout creating sites that adapt to any device.
  • 90. Problem 1:solving screen size
  • 91. Ideally, we want to start with a single linear layout that can be viewed by any device.
  • 92. Then we gradually build a series of advanced fluidlayouts on top, controlled by media queries or JavaScript.
  • 93. @media only screen and(min-width: 800px) and(max-width: 999px){}@media only screen and(min-width: 1000px){}
  • 94. This means we can deliver entirely different layouts based on the viewport.
  • 95. Problem 2:Solving bandwidth issues
  • 96. But what aboutimages and other rich media?
  • 97. Ideally, we should deliverlow end images and media as the default.
  • 98. Then we deliver larger,richer media for thosedevices with suitable bandwidth.
  • 99. Problem 3:content and context
  • 100. Another problem we face is determining what types ofcontent should be delivered to devices, and in what context are people are using the site.
  • 101. It is not as simple as delivering stripped back content for mobile devices andrich content for desktops.
  • 102. The reality is that these lasttwo problems are not solved yet. But a change is coming.
  • 103. I think we are at a tipping point. Very soon, a major site is going to crack thesethree problems and change the way we build sites.
  • 104. Final words?
  • 105. A solution that seems ideal today may beoutdated tomorrow.
  • 106. Focus on outcomes rather than using the latest technique.
  • 107. But most of allwe should have fun!
  • 108. So, what are yourbest practices?