is everything  we used to dowrong
This presentation is going to  look at some of our best   practices from the past, and what are considered   best practice...
First of all, an admission…
I’m not a fan of the term“best practice” any more.
Best practices:right vs w rong
If we define one method  as the “right way” it oftenimplies that other methods         are wrong.
While there are definitely“bad practices”, there are  many situations where there are no clear right   or wrong solutions.
“Today, anything that’s fixed and  unresponsive isn’t web design, it’s something else. If you don’t embracethe inherent fl...
Best practices:things change
If history has taught usanything it’s that everything    changes over time.
Tables vs CSS
“My rule of thumb is Consistency, Consistency, Consistency... If CSSworks for a project, then I use it. If itdoesn’t look ...
Microformats
“The blog is neglected, thereve been no new formats promoted … none of uswork actively on it, … the mailing lists     are ...
The <i> element
The i element now represents a span of   text in an alternate voice or mood, orotherwise offset from the normal prose ina ...
Um.. then there is myRemix07 presentation…
“Why separate your CSS? It’s easier tofind rules. More than one developer ata time. Files can be turned on or off as      ...
Best practices:   pend on skillsde
Best practices may be quitedifferent depending on the          skill area.
For example, best practicesin front end development may be different from best practices in UX, SEO and      Social media…
Best practices:    e pend on te amsd
Best practices may be quitedifferent depending on the    team you work with.
As an individual, you mayhave specific best practices.However, these may have tochange when working in a   team environment.
outcomes not techniques
Instead of talking about bestpractices as techniques, we should probably focus on        outcomes.
Let’s take front enddevelopment (HTML, CSS,JavaScript) as an example:
What are some of ourdesired outcomes?
Outcome 1:u sers come first
We should not do anything  that makes the user   experience harder.
We should make sure our sites are accessible to        all users.
We should make sure our sites are accessible to       all devices.
We should make sure our   sites are accessibleregardless of bandwidth.
Outcome 2:   elop efficientlydev
We should aim to develop using efficient methods,    to reduce overall   development time.
We should aim to developusing methods that avoid       repetition.
Outcome 3:m ain taina  ble,          s cal able
We should aim to developusing practices that allow   easy maintenance.
We should aim to developusing practices that allow our sites to scale well       over time.
Outcome 4:fast page load
We should aim to developsites so that pages load asquickly and efficiently as          possible.
Outcome 5:backawar d and        comp atibleforward
Does anyone else hate the  term “future proof”?
XHTML 1.0 was supposed  to be a future-proof       language
We have to be careful notto leave our users behind     in the rush towards          the future.
For example, JavaScriptbased solutions should be  built so that they fail        gracefully.
We should be careful about abandoning users witholder devices because wedon’t want to support them.
Some techniquesthat aid our   outcomes
So, here are some strategies and techniquesthat are currently considered       “best practices”.
Be warned, these  may not be considered“best practices” in the future!
More importantly, these best  practice techniques aredesigned to help us achieve   some key outcomes.
Reducingrepetition
1:CSS resets
CSS resets aim to removebrowser-specific styles, andthen build up from scratch -  so that each element will   appear the s...
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...
Strengths:Efficient developmentConsistency for teamsWeaknesses:lots of additional rewriting
2:CSS frameworks
CSS frameworks are pre-prepared libraries thatallow for easier, standards- compliant styling of web     page components.
Many frameworks focus on   layout grids, allowingdevelopers to pull in libraryclasses to build complex         layouts.
.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-...
Keep in mind you canalways roll your own    framework.
StrengthEfficient developmentLean, abstracted CSSWeaknessesDesigns that don’t fitBloated frameworksPresentational class na...
Maintainableand scalable
3:Object-oriented CSS
How many timesdoes your CSS file  mention H2 or   “float: left”?
Do you ever findyourself stylingusing Firebug?
Object-oriented CSS styles    HTML “objects” or “modules” with cleaner,  more efficient CSS.
For all the hardcoredevelopers… yes, it’s not really object-oriented.   It’s just a name!
There is a strong chance that you may be “doing itwrong”, or could at least be    “doing it better”.
How do we useObject Oriented CSS
Before starting your CSS, look at your layouts and   try to find patterns.
Are there aspects of the  layout that could beabstracted into library        items?
Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid specificity warsWeaknessesadditional HTML classe...
Efficiency
4:Pre-processors
Pre-processors allow us touse variables in CSS files and then parse them to  regular stylesheets.
There are many different frameworks available:          • LESS           • SASS         • Turbine       • Switch CSS      ...
Variables
@color1:   red;@color2:   green;@color3:   blue;@color4:   orange;@color5:   brown;#a { background: @color1; }
Minification
div{width:200px;height:200px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}#one{background:red;-w...
Mixins
.border-radius(@radius: 5px){-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}div { .bor...
PackingGzippingCompiling
Strengthfaster developmentvariables!Weaknessesdeep nestinginefficient CSSentirely new syntax
Deviceindependence
5:Responsive design
Until recently, people builtsites for desktop and/or       mobile only.
Responsive design isabout creating sites that adapt to any device.
Problem 1:solving screen size
Ideally, we want to start with  a single linear layout that   can be viewed by any            device.
Then we gradually build a   series of advanced fluidlayouts on top, controlled by      media queries or         JavaScript.
@media only screen and(min-width: 800px) and(max-width: 999px){}@media only screen and(min-width: 1000px){}
This means we can deliver entirely different layouts based on the viewport.
Problem 2:Solving bandwidth      issues
But what aboutimages and other rich      media?
Ideally, we should deliverlow end images and media        as the default.
Then we deliver larger,richer media for thosedevices with suitable      bandwidth.
Problem 3:content and context
Another problem we face is determining what types ofcontent should be delivered  to devices, and in what  context are peop...
It is not as simple as  delivering stripped back           content for     mobile devices andrich content for desktops.
The reality is that these lasttwo problems are not solved    yet. But a change is           coming.
I think we are at a tipping  point. Very soon, a major site is going to crack thesethree problems and change   the way we ...
Final words?
A solution that seems ideal today may beoutdated tomorrow.
Focus on outcomes rather   than using the latest        technique.
But most of allwe should have fun!
So, what are yourbest practices?
Upcoming SlideShare
Loading in …5
×

Is everything we used to do wrong?

3,804 views

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. 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
3 Likes
Statistics
Notes
No Downloads
Views
Total views
3,804
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
118
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Is everything we used to do wrong?

  1. 1. is everything we used to dowrong
  2. 2. This presentation is going to look at some of our best practices from the past, and what are considered best practices today.
  3. 3. First of all, an admission…
  4. 4. I’m not a fan of the term“best practice” any more.
  5. 5. Best practices:right vs w rong
  6. 6. If we define one method as the “right way” it oftenimplies that other methods are wrong.
  7. 7. While there are definitely“bad practices”, there are many situations where there are no clear right or wrong solutions.
  8. 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.”http://stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_ design/
  9. 9. Best practices:things change
  10. 10. If history has taught usanything it’s that everything changes over time.
  11. 11. Tables vs CSS
  12. 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.” http://www.raizlabs.com/blog/148/ten-reasons-why-css-sucks
  13. 13. Microformats
  14. 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.” http://microformats.org/wiki/events/2011-03-sxsw
  15. 15. The <i> element
  16. 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. http://www.w3.org/TR/html5-diff/
  17. 17. Um.. then there is myRemix07 presentation…
  18. 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.” http://www.slideshare.net/maxdesign/modular-css
  19. 19. Best practices: pend on skillsde
  20. 20. Best practices may be quitedifferent depending on the skill area.
  21. 21. For example, best practicesin front end development may be different from best practices in UX, SEO and Social media…
  22. 22. Best practices: e pend on te amsd
  23. 23. Best practices may be quitedifferent depending on the team you work with.
  24. 24. As an individual, you mayhave specific best practices.However, these may have tochange when working in a team environment.
  25. 25. outcomes not techniques
  26. 26. Instead of talking about bestpractices as techniques, we should probably focus on outcomes.
  27. 27. Let’s take front enddevelopment (HTML, CSS,JavaScript) as an example:
  28. 28. What are some of ourdesired outcomes?
  29. 29. Outcome 1:u sers come first
  30. 30. We should not do anything that makes the user experience harder.
  31. 31. We should make sure our sites are accessible to all users.
  32. 32. We should make sure our sites are accessible to all devices.
  33. 33. We should make sure our sites are accessibleregardless of bandwidth.
  34. 34. Outcome 2: elop efficientlydev
  35. 35. We should aim to develop using efficient methods, to reduce overall development time.
  36. 36. We should aim to developusing methods that avoid repetition.
  37. 37. Outcome 3:m ain taina ble, s cal able
  38. 38. We should aim to developusing practices that allow easy maintenance.
  39. 39. We should aim to developusing practices that allow our sites to scale well over time.
  40. 40. Outcome 4:fast page load
  41. 41. We should aim to developsites so that pages load asquickly and efficiently as possible.
  42. 42. Outcome 5:backawar d and comp atibleforward
  43. 43. Does anyone else hate the term “future proof”?
  44. 44. XHTML 1.0 was supposed to be a future-proof language
  45. 45. We have to be careful notto leave our users behind in the rush towards the future.
  46. 46. For example, JavaScriptbased solutions should be built so that they fail gracefully.
  47. 47. We should be careful about abandoning users witholder devices because wedon’t want to support them.
  48. 48. Some techniquesthat aid our outcomes
  49. 49. So, here are some strategies and techniquesthat are currently considered “best practices”.
  50. 50. Be warned, these may not be considered“best practices” in the future!
  51. 51. More importantly, these best practice techniques aredesigned to help us achieve some key outcomes.
  52. 52. Reducingrepetition
  53. 53. 1:CSS resets
  54. 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. 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. 56. Strengths:Efficient developmentConsistency for teamsWeaknesses:lots of additional rewriting
  57. 57. 2:CSS frameworks
  58. 58. CSS frameworks are pre-prepared libraries thatallow for easier, standards- compliant styling of web page components.
  59. 59. Many frameworks focus on layout grids, allowingdevelopers to pull in libraryclasses to build complex layouts.
  60. 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. 61. Keep in mind you canalways roll your own framework.
  62. 62. StrengthEfficient developmentLean, abstracted CSSWeaknessesDesigns that don’t fitBloated frameworksPresentational class names
  63. 63. Maintainableand scalable
  64. 64. 3:Object-oriented CSS
  65. 65. How many timesdoes your CSS file mention H2 or “float: left”?
  66. 66. Do you ever findyourself stylingusing Firebug?
  67. 67. Object-oriented CSS styles HTML “objects” or “modules” with cleaner, more efficient CSS.
  68. 68. For all the hardcoredevelopers… yes, it’s not really object-oriented. It’s just a name!
  69. 69. There is a strong chance that you may be “doing itwrong”, or could at least be “doing it better”.
  70. 70. How do we useObject Oriented CSS
  71. 71. Before starting your CSS, look at your layouts and try to find patterns.
  72. 72. Are there aspects of the layout that could beabstracted into library items?
  73. 73. Strengthslean, robust CSSeasier site maintenanceavoid repetitive CSSavoid specificity warsWeaknessesadditional HTML classesnew mindset
  74. 74. Efficiency
  75. 75. 4:Pre-processors
  76. 76. Pre-processors allow us touse variables in CSS files and then parse them to regular stylesheets.
  77. 77. There are many different frameworks available: • LESS • SASS • Turbine • Switch CSS • DtCSS • CSS Crush
  78. 78. Variables
  79. 79. @color1: red;@color2: green;@color3: blue;@color4: orange;@color5: brown;#a { background: @color1; }
  80. 80. Minification
  81. 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. 82. Mixins
  83. 83. .border-radius(@radius: 5px){-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;}div { .border-radius(); }
  84. 84. PackingGzippingCompiling
  85. 85. Strengthfaster developmentvariables!Weaknessesdeep nestinginefficient CSSentirely new syntax
  86. 86. Deviceindependence
  87. 87. 5:Responsive design
  88. 88. Until recently, people builtsites for desktop and/or mobile only.
  89. 89. Responsive design isabout creating sites that adapt to any device.
  90. 90. Problem 1:solving screen size
  91. 91. Ideally, we want to start with a single linear layout that can be viewed by any device.
  92. 92. Then we gradually build a series of advanced fluidlayouts on top, controlled by media queries or JavaScript.
  93. 93. @media only screen and(min-width: 800px) and(max-width: 999px){}@media only screen and(min-width: 1000px){}
  94. 94. This means we can deliver entirely different layouts based on the viewport.
  95. 95. Problem 2:Solving bandwidth issues
  96. 96. But what aboutimages and other rich media?
  97. 97. Ideally, we should deliverlow end images and media as the default.
  98. 98. Then we deliver larger,richer media for thosedevices with suitable bandwidth.
  99. 99. Problem 3:content and context
  100. 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. 101. It is not as simple as delivering stripped back content for mobile devices andrich content for desktops.
  102. 102. The reality is that these lasttwo problems are not solved yet. But a change is coming.
  103. 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. 104. Final words?
  105. 105. A solution that seems ideal today may beoutdated tomorrow.
  106. 106. Focus on outcomes rather than using the latest technique.
  107. 107. But most of allwe should have fun!
  108. 108. So, what are yourbest practices?

×