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.

1. Front End Craftsmanship
Working together toward a better web.
Billy Whited
User Experience Craftsman

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. What is expressive html?
It’s not an abstraction. It’s a different way of seeing and
authoring markup.

5. ‘‘
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

7. Why is it important?
Because your application is your interface. And anyone with a
browser can see your markup…

8. 1. We have a responsibility to our users.

11. 1. We have a responsibility to our users.

12. 1. We have a responsibility to our users.
2. We have a responsibility to our clients.

14. ‘‘
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/

15. 1. We have a responsibility to our users.
2. We have a responsibility to our clients.

16. 1. We have a responsibility to our users.
2. We have a responsibility to our clients.
3. We call ourselves craftsmen.

17. Sketch and concept by Ryan Singer of 37 Signals

18. Sketch and concept by Ryan Singer of 37 Signals

19. ‘‘
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.

20. So, how do we do it?
Be articulate. Layer on semantics. Above all, think about
what you’re doing and why.

22. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)

23. ‘‘
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

25. ‘‘
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

26. 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>
18
19
20

28. 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>
18
19
20

30. 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>
12
13
14
15
16
17
18
19
20

32. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)

33. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)
2. Get naked.

35. 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 06143
10 </div>
11 <div class=”phone”>610-456-7890</div>
12 </div>
13
14
15
16
17
18
19
20

37. 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>
11
12
13
14
15
16
17
18
19
20

39. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)
2. Get naked.

40. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)
2. Get naked.
3. Add additional semantics with Microdata.

42. 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>
19
20

45. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)
2. Get naked.
3. Add additional semantics with Microdata.

46. 1. Start with Plain ‘ol Semantic html. (p.o.s.h.)
2. Get naked.
3. Add additional semantics with Microdata.
4. Enrich with aria.

47. ‘‘
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

48. 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>
16
17
18
19
20

49. Screencast by Léonie Watson of Nomensa

50. Screencast by Léonie Watson of Nomensa

51. Sustainable css
How exactly do we fly this spaceship?
css is not a programming language and doesn’t behave like
one. You can’t make it work by trying harder.

53. 1. s.m.a.c.s.s. a la Jonathan Snook.

55. ‘‘
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/

56. 1 div#main section h3 {
2 font-size: 3rem;
3 }
4
5 div#main section ul {
6 list-style: none;
7 }
8
9 div#main section ul li {
10 border: 1px solid rgb(0,0,0);
11 }
12
13 /* Depth of Applicability */
14
15 div#main > #outer > #inner > #content > p
16
17 div#main #content > p
18
19
20

57. 1 div#main section h3,
2 div#secondary section h3 {
3 font-size: 3rem;
4 }
5
6 div#main section ul,
7 div#secondary section ul {
8 list-style: none;
9 }
10
11 div#main section ul li,
12 div#secondary section ul li {
13 border: 1px solid rgb(0,0,0);
14 }
15
16
17
18
19
20

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

59. 1. s.m.a.c.s.s. a la Jonathan Snook.

60. 1. s.m.a.c.s.s. a la Jonathan Snook.
2. Make selectors performant.

61. #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

62. #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

63. Screencast by the Mozilla Foundation

64. Screencast by the Mozilla Foundation

65. 1 .scna-demo > h3 {
2 font-size: 3rem;
3 }
4
5 .scna-demo > ul {
6 list-style: none;
7 }
8
9 .scna-demo > ul li {
10 border: 1px solid rgb(0,0,0);
11 }
12
13 /* Potential Duplication */
14
15 .scna-demo > ul,
16 .scna-demo > ol,
17 .scna-demo > dl {
18 list-style: none;
19 }
20

66. 1 .scna-demo-core {
2 list-style: none;
3 }
4
5 /* Resulting HTML */
6
7 <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>
17
18
19
20

67. 1. s.m.a.c.s.s. a la Jonathan Snook.
2. Make selectors performant.

68. 1. s.m.a.c.s.s. a la Jonathan Snook.
2. Make selectors performant.
3. Categorize css rules.

69. 1 /* Base Styles are defaults */
2
3 body { font-size: 100%; }
4
5 /* Modules are reusable */
6
7 .m-info { list-style: none; }
8
9 /* Layouts are skeletons */
10
11 .l-col-3 { width: 50%; }
12
13 /* States are temporal */
14
15 .s-active { background-color: rgb(100,100,100); }
16
17
18
19
20

70. 1. s.m.a.c.s.s. a la Jonathan Snook.
2. Make selectors performant.
3. Categorize css rules.

71. 1. s.m.a.c.s.s. a la Jonathan Snook.
2. Make selectors performant.
3. Categorize css rules.
4. Format stylesheets humanely.

77. Questions?