Your SlideShare is downloading. ×
Front End CraftsmanshipWorking together toward a better web.       Billy Whited       User Experience Craftsman
‘‘ Even if there was no future benefit for professionally crafted markup—which there will be—there’s an inherent value in ...
What is expressive html?It’s not an abstraction. It’s a different way of seeing andauthoring markup.
‘‘ Before css became reliable…even the most conscientious web designers and developers were forced to abuse markup. Andy C...
Why is it important?Because your application is your interface. And anyone with abrowser can see your markup…
1. We have a responsibility to our users.
1. We have a responsibility to our users.
1. We have a responsibility to our users.2. We have a responsibility to our clients.
‘‘ Make a site with a clear hierarchy and text links. Every page should be reachable from one static text link.‘‘ Create a...
1. We have a responsibility to our users.2. We have a responsibility to our clients.
1. We have a responsibility to our users.2. We have a responsibility to our clients.3. We call ourselves craftsmen.
Sketch and concept by Ryan Singer of 37 Signals
Sketch and concept by Ryan Singer of 37 Signals
‘‘ What good is a cabinet maker who builds a table, only to leave it un-sanded, un-varnished or un-glued? Gordon Huffaker ...
So, how do we do it?Be articulate. Layer on semantics. Above all, think aboutwhat you’re doing and why.
1. Start with Plain ‘ol Semantic html. (p.o.s.h.)
‘‘ p.o.s.h. encapsulates the best practices of using semantic html to author web pages…the subset of elements and attribut...
‘‘ Put the thing in thing. You know, the one with the other thingies in it? Aemelia Tallen-Whited My wife, whenever she wa...
1 <thing>2      <thingy>3          <thingies>4              Water spinach courgette pignut.5          </thingies>6      </...
1 <div id=”wrapper”>2      <div class=”container”>3          <div class=”inner-container”>4              Water spinach cou...
1 <ul id=”chest”>2      <li class=”drawer”>3          Water spinach courgette pignut.4      </li>5           <li class=”dr...
1. Start with Plain ‘ol Semantic html. (p.o.s.h.)
1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.
1 <div id=”model”>2      <div class=”header”>3          <a href=”#”>Physician Info</a>4      </div>5      <div class=”name...
1    <h3>2        <a href=”#”>Physician Info</a>3    </h3>4    <ul>5        <li class=”full-name”>John Smith</li>6        ...
1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.
1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.3. Add additional semantics with Microdata.
1    <h3>2        <a href=”#”>Physician Info</a>3    </h3>4    <ul itemscope itemtype=”http://schema.org/Person”>5        ...
1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.3. Add additional semantics with Microdata.
1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.3. Add additional semantics with Microdata.4. Enrich with ar...
‘‘ wai-aria provides a framework for adding attributes to identify features for user interaction. It describes new navigat...
1    <header role=”banner”>2        This region contains the prime heading of the page.3    </header>4    <nav role=”navig...
Screencast by Léonie Watson of Nomensa
Screencast by Léonie Watson of Nomensa
Sustainable cssHow exactly do we fly this spaceship?css is not a programming language and doesn’t behave likeone. You can’...
1. s.m.a.c.s.s. a la Jonathan Snook.
‘‘ smacss is more style guide than rigid framework. There’s no library within here for you to download or install. smacss ...
1    div#main section h3 {2        font-size: 3rem;3    }45    div#main section ul {6        list-style: none;7    }89    ...
1    div#main section h3,2    div#secondary section h3 {3        font-size: 3rem;4    }56    div#main section ul,7    div#...
‘‘ We’re trying to strike a balance between maintenance, performance, and readability. Going too deep may mean less class-...
1. s.m.a.c.s.s. a la Jonathan Snook.
1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.
#baz     #baz      #baz     #baz#bar     #bar      #bar     #bar#foo     #foo      #foo     #foo#first   #second   #third ...
#baz     #baz      #baz     #baz#bar     #bar      #bar     #bar#foo     #foo      #foo     #foo#first   #second   #third ...
Screencast by the Mozilla Foundation
Screencast by the Mozilla Foundation
1    .scna-demo > h3 {2        font-size: 3rem;3    }45    .scna-demo > ul {6        list-style: none;7    }89    .scna-de...
1    .scna-demo-core {2        list-style: none;3    }45    /* Resulting HTML */67    <div>8        <section class=”scna-d...
1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.
1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.3. Categorize css rules.
1    /* Base Styles are defaults */23    body { font-size: 100%; }45    /* Modules are reusable */67    .m-info { list-sty...
1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.3. Categorize css rules.
1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.3. Categorize css rules.4. Format stylesheets humanely.
Questions?
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Front End Craftsmanship
Upcoming SlideShare
Loading in...5
×

Front End Craftsmanship

162

Published on

With the advent of html5, css3, Microformats and wai-aria we now have the ability to design our web applications with a semantic richness that can help bridge the gap between human and computer readability and make the web a more accessible place.

Unfortunately, despite the advancements of the web standards movement, many of us largely ignore or misunderstand front-end technologies.

Can we take pride in being called “craftsmen” if we continue to hastily construct the most public facing ends of our software, with code viewable by anyone!?

As craftsmen, we owe our namesakes to our willingness to go beyond the status quo. Our applications should be designed and built in such a way that they are usable, accessible, and responsive—front-end and back, for as many people/devices as possible.

As a User Experience craftsman, I view s.c.n.a. as an opportunity to help my developer colleagues better understand html5, css3 and basic client-side design principles in the spirit of working together toward a more meaningful web.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
162
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Front End Craftsmanship"

  1. 1. Front End CraftsmanshipWorking together toward a better web. Billy Whited User Experience Craftsman
  2. 2. ‘‘ Even if there was no future benefit for professionally crafted markup—which there will be—there’s an inherent value in taking pride in your work and producing a product that is more elegant than that of your hurried, slapdash competitor… Kyle Weems The Value of Meaning
  3. 3. What is expressive html?It’s not an abstraction. It’s a different way of seeing andauthoring markup.
  4. 4. ‘‘ Before css became reliable…even the most conscientious web designers and developers were forced to abuse markup. Andy Clarke Transcending css: The Fine Art of Web Design
  5. 5. Why is it important?Because your application is your interface. And anyone with abrowser can see your markup…
  6. 6. 1. We have a responsibility to our users.
  7. 7. 1. We have a responsibility to our users.
  8. 8. 1. We have a responsibility to our users.2. We have a responsibility to our clients.
  9. 9. ‘‘ Make a site with a clear hierarchy and text links. Every page should be reachable from one static text link.‘‘ Create a useful, information-rich site, and write pages that clearly and accurately describe your content. Google Webmaster Guidelines http://www.google.com/support/webmasters/
  10. 10. 1. We have a responsibility to our users.2. We have a responsibility to our clients.
  11. 11. 1. We have a responsibility to our users.2. We have a responsibility to our clients.3. We call ourselves craftsmen.
  12. 12. Sketch and concept by Ryan Singer of 37 Signals
  13. 13. Sketch and concept by Ryan Singer of 37 Signals
  14. 14. ‘‘ What good is a cabinet maker who builds a table, only to leave it un-sanded, un-varnished or un-glued? Gordon Huffaker Huffaker Woodworking, Inc.
  15. 15. So, how do we do it?Be articulate. Layer on semantics. Above all, think aboutwhat you’re doing and why.
  16. 16. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)
  17. 17. ‘‘ p.o.s.h. encapsulates the best practices of using semantic html to author web pages…the subset of elements and attributes that are semantic rather than presentational. The Microformats Organization http://microformats.org/wiki/posh
  18. 18. ‘‘ Put the thing in thing. You know, the one with the other thingies in it? Aemelia Tallen-Whited My wife, whenever she wants me to do something
  19. 19. 1 <thing>2 <thingy>3 <thingies>4 Water spinach courgette pignut.5 </thingies>6 </thingy>7 <thingy>8 <thingies>9 Kurrat greater plantain.10 </thingies>11 </thingy>12 <thingy>13 <thingies>14 Canna indian pea potato nopal lotus.15 </thingies>16 </thingy>17 </thing>181920
  20. 20. 1 <div id=”wrapper”>2 <div class=”container”>3 <div class=”inner-container”>4 Water spinach courgette pignut.5 </div>6 </div>7 <div class=”container”>8 <div class=”inner-container”>9 Kurrat greater plantain.10 </div>11 </div>12 <div class=”container”>13 <div class=”inner-container”>14 Canna indian pea potato nopal lotus.15 </div>16 </div>17 </div>181920
  21. 21. 1 <ul id=”chest”>2 <li class=”drawer”>3 Water spinach courgette pignut.4 </li>5 <li class=”drawer”>6 Kurrat greater plantain.7 </li>8 <li class=”drawer”>9 Canna indian pea potato nopal lotus.10 </li>11 </ul>121314151617181920
  22. 22. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)
  23. 23. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.
  24. 24. 1 <div id=”model”>2 <div class=”header”>3 <a href=”#”>Physician Info</a>4 </div>5 <div class=”name”>John Smith</div>6 <div class=”address”>7 441 Langston Way<br/>8 Suite 201<br/>9 Davis, Alabama 0614310 </div>11 <div class=”phone”>610-456-7890</div>12 </div>1314151617181920
  25. 25. 1 <h3>2 <a href=”#”>Physician Info</a>3 </h3>4 <ul>5 <li class=”full-name”>John Smith</li>6 <li class=”address-1”>441 Langston Way</li>7 <li class=”address-2”>Suite 201</li>8 <li class=”city-state-zip”>Davis, Alabama 06143</li>9 <li class=”phone”>610-456-7890</li>10 </ul>11121314151617181920
  26. 26. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.
  27. 27. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.3. Add additional semantics with Microdata.
  28. 28. 1 <h3>2 <a href=”#”>Physician Info</a>3 </h3>4 <ul itemscope itemtype=”http://schema.org/Person”>5 <li itemprop=”name”>John Smith</li>6 <li itemprop=”address”>7 <ul itemscope itemtype=”http://schema.org/Address”>8 <li itemprop=”streetAddress”>441 Langston Way</li>9 <li itemprop=”streetAddress”>Suite 201</li>10 <li>11 <span itemprop=”addressLocality”>Davis</span>12 <span itemprop=”addressRegion”>Alabama</span>13 <span itemprop=”postalCode”>06143</span>14 </li>15 </ul>16 </li>17 <li itemprop=”telephone”>610-456-7890</li>18 </ul>1920
  29. 29. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.3. Add additional semantics with Microdata.
  30. 30. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)2. Get naked.3. Add additional semantics with Microdata.4. Enrich with aria.
  31. 31. ‘‘ wai-aria provides a framework for adding attributes to identify features for user interaction. It describes new navigation techniques to mark regions and structures such as menus, primary content, secondary content, banner information, and more… W3C Web Accessibility Initiative http://www.w3.org/WAI/intro/aria
  32. 32. 1 <header role=”banner”>2 This region contains the prime heading of the page.3 </header>4 <nav role=”navigation”>5 This is collection of elements for navigation.6 </nav>7 <div role=”main”>8 This content is related to the document’s central topic.9 </div>10 <aside role=”complementary”>11 This is a supporting section of the document.12 </aside>13 <footer role=”contentinfo”>14 Metadata that applies to the parent document.15 </footer>1617181920
  33. 33. Screencast by Léonie Watson of Nomensa
  34. 34. Screencast by Léonie Watson of Nomensa
  35. 35. Sustainable cssHow exactly do we fly this spaceship?css is not a programming language and doesn’t behave likeone. You can’t make it work by trying harder.
  36. 36. 1. s.m.a.c.s.s. a la Jonathan Snook.
  37. 37. ‘‘ smacss is more style guide than rigid framework. There’s no library within here for you to download or install. smacss is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. Jonathan Snook http://smacss.com/book/
  38. 38. 1 div#main section h3 {2 font-size: 3rem;3 }45 div#main section ul {6 list-style: none;7 }89 div#main section ul li {10 border: 1px solid rgb(0,0,0);11 }1213 /* Depth of Applicability */1415 div#main > #outer > #inner > #content > p1617 div#main #content > p181920
  39. 39. 1 div#main section h3,2 div#secondary section h3 {3 font-size: 3rem;4 }56 div#main section ul,7 div#secondary section ul {8 list-style: none;9 }1011 div#main section ul li,12 div#secondary section ul li {13 border: 1px solid rgb(0,0,0);14 }151617181920
  40. 40. ‘‘ We’re trying to strike a balance between maintenance, performance, and readability. Going too deep may mean less class-itis within your html but it increases the maintenance and readability overhead. Likewise, you don’t want classes on everything. Jonathan Snook http://smacss.com/book/
  41. 41. 1. s.m.a.c.s.s. a la Jonathan Snook.
  42. 42. 1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.
  43. 43. #baz #baz #baz #baz#bar #bar #bar #bar#foo #foo #foo #foo#first #second #third #fourth p#foo #foo #foo #foo#bar #bar #bar #bar#baz #baz #baz #baz
  44. 44. #baz #baz #baz #baz#bar #bar #bar #bar#foo #foo #foo #foo#first #second #third #fourth p#foo #foo #foo #foo#bar #bar #bar #bar#baz #baz #baz #baz
  45. 45. Screencast by the Mozilla Foundation
  46. 46. Screencast by the Mozilla Foundation
  47. 47. 1 .scna-demo > h3 {2 font-size: 3rem;3 }45 .scna-demo > ul {6 list-style: none;7 }89 .scna-demo > ul li {10 border: 1px solid rgb(0,0,0);11 }1213 /* Potential Duplication */1415 .scna-demo > ul,16 .scna-demo > ol,17 .scna-demo > dl {18 list-style: none;19 }20
  48. 48. 1 .scna-demo-core {2 list-style: none;3 }45 /* Resulting HTML */67 <div>8 <section class=”scna-demo”>9 <h3>SCNA Demo</h3>10 <ul class=”scna-demo-core”>11 <li>Foo</li>12 <li>Bar</li>13 <li>Baz</li>14 </ul>15 </section>16 </div>17181920
  49. 49. 1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.
  50. 50. 1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.3. Categorize css rules.
  51. 51. 1 /* Base Styles are defaults */23 body { font-size: 100%; }45 /* Modules are reusable */67 .m-info { list-style: none; }89 /* Layouts are skeletons */1011 .l-col-3 { width: 50%; }1213 /* States are temporal */1415 .s-active { background-color: rgb(100,100,100); }1617181920
  52. 52. 1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.3. Categorize css rules.
  53. 53. 1. s.m.a.c.s.s. a la Jonathan Snook.2. Make selectors performant.3. Categorize css rules.4. Format stylesheets humanely.
  54. 54. Questions?

×