• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Front End Craftsmanship
 

Front End Craftsmanship

on

  • 209 views

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

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.

Statistics

Views

Total Views
209
Views on SlideShare
194
Embed Views
15

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 15

http://www.linkedin.com 15

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Front End Craftsmanship Front End Craftsmanship Presentation Transcript

    • 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 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
    • 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 Clarke Transcending css: The Fine Art of Web Design
    • 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 useful, information-rich site, and write pages that clearly and accurately describe your content. Google Webmaster Guidelines http://www.google.com/support/webmasters/
    • 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 Huffaker Woodworking, Inc.
    • 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 attributes that are semantic rather than presentational. The Microformats Organization http://microformats.org/wiki/posh
    • ‘‘ 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
    • 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
    • 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
    • 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
    • 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”>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
    • 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
    • 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 <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
    • 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 aria.
    • ‘‘ 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
    • 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
    • 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’t make it work by trying harder.
    • 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 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/
    • 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
    • 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
    • ‘‘ 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/
    • 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 #fourth p#foo #foo #foo #foo#bar #bar #bar #bar#baz #baz #baz #baz
    • #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
    • 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-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
    • 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
    • 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-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
    • 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?