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.
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.
4.
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
6.
7. Why is it important?
Because your application is your interface. And anyone with a
browser can see your markup…
12. 1. We have a responsibility to our users.
2. We have a responsibility to our clients.
13.
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.
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.
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
24.
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
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
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.
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/
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/