The overall topic was the Open Web. Understanding its history, key technologies, and important concepts. Molly presented over two full days, with interludes and additions by special guest Kimberly Blessing (who also took photos).

Even considering myself an industry veteran—I’ve worked full-time on the web for over seven years, I learned new things and solidified several of my weak areas. I highly recommend this workshop to anyone who works on the web. And, Molly organized the weekend on her on time—and her own dime. Thanks Mols!

Here are my notes from the sessions.

Open Web

Preserving the infrastructure of the web so it remains open to everyone.

What is the Open Web?

1. Dedication to open standards
2. Use of technology should be unobtrusive
3. Recognition of the web as an application and document platform
4. Encourage open, organic groups such as WHAT-WG and microformats.org

Groups like these extend what is coming from W3C to begin implementing things faster, and start using technology now.

Making research and development part of your process—part of your team workflow—keeps a conversation open. We are serving a much larger future.

Core principles

Transparency and authenticity

From a browser vendor’s viewpoint this means allowing dev previews, blogging about changes. IE (Internet Explorer) is doing a great job with this.

Connectability via APIs

JavaScript (JS) is the most-used programming language on the planet. You get a JS compiler, interpreter on almost all devices.

Open specifications

These things need to go through the patent exclusion process.

Error forgiveness

Allow people to make mistakes.

Additional thoughts to go with core principles.

Freedom of Social Forms—an idea coined by Brad Neuberg from Google. Look at things beyond what they are or are not.

The [Open Web] is big enough to support many forms of social and economic organization, including ones we haven’t imagined yet.

The Many Things Rule—an approach to a problem with a broader perspective. Something you make can be used by other people and for other applications.

User experience (UX) and front-end development are key skills for working with the Open Web.

Core technologies

- HTML5
- CSS3
- JavaScript

Also discussing:

- video and audio
- Visual technologies: canvas and SVG

Under the JavaScript umbrella are things like XmlHttpRequest (XHR), what we now know as “Ajax” (note the spelling). Originally conceived by Microsoft to allow Outlook for the web.

HTML

History lesson first. WHATWG first came out as a grassroots movement, with Ian Hickson (was at Opera, now at Google). It was the first time that all major browser makers agreed on a single spec: HTML5. The working group had 800 invited experts!

Recently, Ian’s announced it’s no longer known as “5″, saying it’s a living standard. It’s more mature than any version of HTML, and no longer a draft.

He stirred the pot, recently, with the (now reversed) decision to remove the time element in favor of data. Molly mentioned all the jokes that sprung up around this. One web dev says to another, “Say, do you have have the “? One guy, scarily, making changes and everyone is letting him.

Molly defines HTML5 like this:

HTML5 is a vocabulary and set of application programming interfaces that make up a core declarative language for web sites and web applications.

Pop quiz! What is the only required element for a valid HTML document? title element. Because HTML is based on SGML, the rest was added later to be declarative and provide structure for layout.

HTML5 design principles

1. Support existing content
2. Ensure interoperability
3. Define user agent (UA) behavior instead of leaving it open for implementors to interpret for themselves. Best practices come from real world usage.
4. Better error handling
5. Evolve, not re-create

A fun mollyquote:

The Open Web is threatened by the three As: anarchists, Apple, and asshats.

application/xml MIME type was not supported by any version of IE, until the most recent version—after XHTML was already declared dead. Oh, the irony.

Avoid XHTML5 (which is just plain stupid). What it should be called is XML+HTML. It’s used mostly for internal projects by people who want facilities that come with HTML5 but need to serve XML.

HTML5 Media APIs: goal is to replace plugins with native solutions: video, audio.

Molly here discussed the H.264 codec war. It is not an open or web standard, it carries a $5 million/year cost. Alternatives include OGG (considered unencumbered, “probably, probably never going to get sued for rights”).

Another mollyquote:

At Opera we called it H.666

[Lance side note: Molly mentioned OGG being developed by Thomas Dolby. I didn't see any mention of his name at http://en.wikipedia.org/wiki/Ogg.]

Video progressive enhancement means using the video element with H.264, OGG, WebM, and Flash as the last fallback.

canvas

It’s bitmap (not vector), great for 2d animations and games. You design with JavaScript. Immediate mode versus retained mode, meaning instant gratification. Used and abused for text-shadow and special details that are totally irrational. Not built as a web element (came out of Apple)

SVG

Far more accessible, vector-based. Good for interaction, shapes. Allows access to the DOM. Google indexes it.

Other technologies related to HTML5

Device-related APIs, Wholesale Applications Community (WAC). It’s like the open web for mobile.

HTML outlines

[An interlude by Kimberly.]

In HTML5 each of the sectioning elements starts a new tree. section, article, aside, nav. You can start again with an h1 as the top-level heading inside of each sectioning element.

Understanding divisions versus sections. section is *not* a replacement for div. div still has meaning (which is “null”). It’s a division. section is different because it changes the document outline, div does not.

(More info)

CSS

Molly says this is a “polyfill class”—filling in the gaps in our understanding, making sure we know the correct terms and definitions. Using the terminology is super important, a team should use a shared terminology.

History lesson: 1994 saw the beginnings of CSS, based on print technology. Hakom Lie and Burt Vos came to the W3C, they were document specialists and from the print world.

CSS rule structure

selector {
	propery: value;
}

The code within the braces is the declaration block, property value pairs are declarations. In CSS, rules are the basic building block

Important note: inheritance != cascade. [Lance note: I am often confused on this point.]

Inheritance is the document tree: ancestors/parents/children. Any property that is inheritable will be applied down the tree until another rule overrides it farther down the tree.

Cascade answers the question, “What is the origin of the style?”

1. Browser (user agent)
2. User
3. Author
   1. Inline
   2. Embedded
      1. Imported
   3. Linked (external)

Quick !important story. It used to be the other way around in CSS1, user styles came last in the cascade.

Reset method puts the author in control, makes the user agent styles a level playing ground. Linked stylesheets: leaving the media attribute out, it defaults to “all.”

Sort order within the cascade: inline, embedded, author. User styles override browser (but not author!). Rule: closest to the content overdrives other rules (after specificity is calculated). But !important in user trumps !important in author.

[Lance joke interlude: is the best way to classify a raunchingly humorous site.]

pseudo classes are things like a:hover and a:focus.

The “combinator” is the selector symbol used to denote the relationship between the selectors.

- [space] descendant
- [>] child (only down one level)
- [+] adjacent sibling
- [~] general sibling

Complex examples can be solved by the “nth child” selector, like table striping. Adjacent sibling combinators are great for “when these two occur together” and make them appear differently.

[Interlude: clearing floats with overflow]

Kimberly says you don’t need a width on the parent element. If you have overflow: hidden; you can sometimes get a scrollbar when you see an outline on the element; to get around it add padding-bottom: 1px;.

Overflow to clear floats is not a hack, it’s right from the spec.

[Back to CSS.]

Pseudo-elements like :first-line, see also generated content with :before and :after. Nice use would be an href display for print CSS, to show the full URL on the printed page.

We should all learn about how browsers work: re-render, re-paint, re-flow.

Positioning

- relative is “offset”—it’s calculated relative to itself, in the normal flow, the content does not move up to take its place in the flow.
- absolute is taken out of the flow, now placed according to the nearest positioned ancestor (the ancestor does not need any offset, just a position propery), or the root element in the tree (HTML element).
- fixed is out of the normal flow, placed according to the viewport. This was not supported in IE6.

Coming soon to CSS:

- The flexible box model
- Multiple columns
- Template-based layout
- Grid positioning, “snap to” idea of placing elements

See Jina Bolton’s work with template-based layouts.

Random notes from the workshop

“Web project manager” needs to be a named and defined role; it’s the missing piece in web production teams … aka Tech Lead.

We’re in the era of dev ops, everyone needs to know the full stack.

Important note: jQuery != JavaScript

The best interface for web APIs is HTTP + HTML. Send a web page, let the receiving service parse it.

What is ontology? A vocabulary. Molly mentioned OWL; XML languages for each industry, “Web Ontology Language”. (Wikipedia)

Photos

Kimberly took a few photos at the workshop: Web with Molly on Flickr. Including the featured photo shown for this post—thanks Kimberly, for being a part of the workshop.

Local web ninja Jared McFarland summed it up nicely in Capitalizing on the Tucson Tech Community.

We, as a community, can work together to educate and inspire one another. We can enjoy the same benefits as the people in major tech centers simply by knowing each other and inventing ways to work together. It isn’t about vast numbers of people, but small passionate groups. The web brings like minds together globally, but we can now use the web to find each other and act locally. We can turn Tucson into something intentional, and beautiful, for ourselves and the city.

The larger Tucson community is also bubbling with social events like Ignite Tucson and the myriad of Twitter meetups (“Tweetups”). Just search Twitter for #tweetup #tucson to be amazed. These events cover a much broader range of topics than web design and development but they all share a common goal: to mingle, network, and share with others.

This is how I think it breaks down: socially, the larger community wants to meet itself and technologically, web designers and developers are joining together to improve the tech community. All of this energy and enthusiasm is contagious!

In contrast, I want to share the story of the Tucson Geek Meet¹, a group I was personally involved with for four years. Started as the Tucson Web Standards Group in 2003 by Molly Holzschlag, the Geek Meet slowly lost momentum over time. Instead of growing and expanding, it stayed a small core of five or six people.

Don’t get me wrong, because of those meetups the five or six of us are now steadfast friends, and several of us have had the opportunity to work together. Now that we are friends we can socialize anytime—we don’t need to call it anything. The idea of the Geek Meet isn’t going away, it’s just being replaced by ad hoc Tweetups and other social happenings around town.

What I want to encourage, and I think Jared hit on this, is not just the social aspects of meeting together but the educational and inspirational benefits of sharing code, experiences, and real-life examples of our work. TDAC is spearheading the effort by organizing workshops and collaborative coding days to get people together to educate, inspire, network, and improve. I’ve been a part of TDAC for six months now, and the tech community in Tucson isn’t just soaking it up, it’s clamoring for more.

We’re hoping soon to have a Refresh Tucson—our neighbors in The Valley have had a strong Refresh presence for three years—we can do the same here in the Old Pueblo. So please participate: join up, tweet up, meet up, share, and pass the word to your colleagues and friends.

Let’s do it, Tucson.

How to get involved

Tucson networks to join and participate in

• Tucson Digital Arts Community
• Further Tucson
• Refresh Tucson

  (Coming soon… For now join the TDAC Refresh Tucson group to give your input.)

• Search Twitter for #tweetup #tucson and come join the fun.

Are you on Meetup.com? Tell your Meetup.com cronies to join the fine sites listed above, especially if you are on the Meetup.com Web Standards “waiting list”. Wait no more!

Notes

¹ The Tucson Geek Meet is no more, it’s pushing up the daisies, it’s kicked the bucket. This meetup is not pining for the fjords, it’s gone to meet it’s maker. It’s… OK, enough of the Monty Python!

For posterity, here is a brief history of the Tucson Geek Meet:

2003(?): Started by Molly Holzschlag.

2005: Tucson Web Standards Meetup moved to Upcoming by Lance (from Meetup.com). We met at B-Line and Famous Sam’s. See Molly’s 2005 post and my 2005 post as well as the Upcoming group page.

2006: Met monthly at the Old Chicago patio. A few Flickr photos from 2006 events: Great Discussion at Tucson Web Standards Meeting, Geoff in Action.

2007: Changed the name to Geek Meet.

2008: The infamous Hooter’s incident. D’oh! (Yes, Molly gave us a good lashing for that, and it was deserved.)

2009: Called it quits in favor of other local groups and Twitter meetups.

This post was originally titled “Rest in Peace, Tucson Geek Meet” but I decided that it was just a small part of the burgeoning Tucson web design and development scene.

If you keep your head down and stay out of the shouting matches, often ignoring them simply because you don’t have the time or energy, you are labeled as complacent.

The middle ground, if there is one, is to be pragmatic. Embrace standards and strive to meet them as much as possible, but know when to give in and just get the job done. Or better yet, build something the right way, and lead by example.

I’m ashamed it’s taken me all these years to come to this realization, but hey—better late than never.

From the Recent Client Projects and I Should Have Blogged This Months Ago departments, I present a brief report on a website realign for Summit Hut.

I was fortunate to work with my great friend and mentor Aaron and several former coworkers from my days at the Hut (I worked there 2001–2005). The subject matter was close to my heart, and having worked on the website for a short period of time before leaving the company, I was thrilled to help with the task of realigning and recoding Summit Hut’s flagship website.

View screenshots, visit the live site, or for more details on the part I played in the realign, continue reading.

Disclaimer: Please note, I am not involved in the upkeep and production of code or graphics for Summit Hut; my role was to build a solid foundation for future development and visual merchandising. I did produce the first home page graphic (view screenshot), but the home page graphics and various and sundry sidebar callouts throughout the site have changed since the site launch in February 2008.

Notes and technical details

I was in charge of visual look-and-feel, basic interaction design, and coding the HTML and CSS for the page templates.

Visual

My goal was to create a mood that was simple, clean, and sophisticated with a subtle regional feel for Summit Hut’s location in the Southwest.

The visual tone took cues from Summit Hut’s in-store merchandising and signage. The chosen color palette, typography, and imagery were all tailored to match the wonderful feeling one gets when stepping into the company’s high-end retail shops. I intended visual chrome such as icons and buttons to produce a clean and professional look to match the company identity as a premier outdoor retailer.

Considerations included better readability, clearer navigation, enhancements to the display of vendor brands and product images, and improved product merchandising.

Merchandising an online store can be quite challenging, especially if you want to reflect how the real-life store works. There are really two parts to it: decorative and organizational. The first is extremely important since it conveys value and desirability to the products; the second provides a clear arrangement for easy searching, browsing, and choosing. My goal here was to remove obstacles and let customers figure things out easily while providing a pleasant, easy, and fun shopping experience.

Code

The recoded page templates were probably the most urgent need; the former summithut.com sported a table-based layout, spacer GIFs, and other typical markup-cluttering artifacts. Valid XHTML and CSS to the rescue! Building on Aaron’s solid programming and site framework, we worked together on producing lightweight and reusable HTML chunks (by reusable chunks I mean in the spirit of microformats). For the style sheets (CSS) I used principles of grid-based layouts and the excellent Blueprint CSS framework as a starting point for resetting and standardizing the layout, text treatment, and interaction messages.

All the benefits of standards-based development apply to the updated pages: faster loading times, code that is easier to read and update, improved usability and accessibility for traditional and non-traditional devices, as well as flexibility for future website features and visual changes.

Interaction

Interactive design tasks for the realigned site centered on product browsing, selection, and the checkout process.

For purposes of keeping this report as brief as I can, let’s take the example of the product browsing and navigation. The previous product navigation involved a clunky accordion-style navigation on the left of every page. The new site splits the top-level navigation into a horizontal dropdown menu on every page, improves the search tool, and provides multiple ways to visually scroll through products. Product browsing can be in a list view or thumb view, and the sidebar menus allow you to drill down and refine the offerings easily.

The dropdown navigation for products was an important piece of this realign (view screenshot). The amount of products and product categories in Summit Hut’s online store makes the product navigation interaction a complex and difficult one. The information architecture is based on the store’s internal organization, which doesn’t always mimic how customers shop. The dropdowns provided a great way to simplify the complexity, and with Aaron’s excellent choice of jQuery (with the Superfish plugin), this interaction works wonderfully.

There were many, many, more improvements to Summit Hut website; I can’t list them all here, but you can view the old site on archive.org and then browse the current site to see for yourself.

I agree whole-heartedly that URLs can and should be beautiful, and I firmly believe they should not only look good, but should also be useful, meaningful, and “discoverable.” In the case of OmniTI, the first subcategory in the URL is based on an action verb, like “is”, “helps”, or “thinks.” This gives the URL a powerful mnemonic quality, since it reads like a sentence. It also describes the content of the page it represents, which is awesome.

The only downside I can see is the “discoverability” for common URLs like “about” and “contact”. A lot of people are used to finding those URLs the same on most sites, especially typical brochure-type business websites. But, you can always have a redirect rule for those if it’s important. The creativity and unique design of OmniTI’s URL scheme might just make up for the loss of predictability.

I’m glad to see a great example of a beautiful and semantic URL scheme to use as inspiration for my own projects.

UPDATE: As a nice follow-up, Nate Abele explains how to set up nice URLs in the CakePHP framework by defining custom routes: Advanced URL Routing and SEO Techniques with CakePHP.

Can you refer me to a tutorial for making CSS-based dropdown menus similar to what’s found on this site?

First of all, I must admit I am not a big fan of dropdown menus. They can be a usability nightmare when not done right, and all too often they mask a poorly developed site architecture.

That said, if you feel the need to incorporate them for your site (or a client insists you do it on their site), there is a right and a wrong way to it.

Make sure the solution you choose uses well-structure HTML markup and lightweight CSS/JavaScript. Secondly, judge the size of your navigation to make sure a dropdown makes sense. If you have 5—7 links, you probably don’t need it. If you have 5—7 site sections that all have 5 or more subsections then it might make sense to incorporate a dropdown menu. Lastly, plan for what will happen if your visitors don’t have JavaScript enabled. Does the menu work with CSS only? Does it work without styles at all?

Probably the best implementation out there is Son of Suckerfish Dropdowns. It’s accessible, lightweight, and works well across modern browsers. It does use a small bit of JavaScript, but that is a necessary evil in order to support older versions of IE/Windows. I’ve used a version of Suckerfish called Superfish as a jQuery plugin with great success (check it out live on the new Summit Hut site).

The cthsu.com site uses a product called “CSS Express Drop-Down Menus” from ProjectSeven. It’s another good implementation aimed specially at single-level CSS dropdown menus.

I hope that helps you. For more on dropdowns and how they affect website user interfaces, read these articles:

• Bad Practice In User Interface Design – Misuse Of The Drop-Down Menu
• Drop-Down Menus – Good or Bad?
• A flying menu attack can wound your navigation
• Dropdown low down
• Drop-Down Menus: Use Sparingly
• Dropdown menus. Use them or lose them?
• Users decide first, move second

Wufoo makes form design and coding easy as pie. I’ve been using their form building application since it launched—mostly for prototyping and brainstorming. This newly-launched gallery is great for trying out your ideas and viewing prototypes that are already built out for you.

If you aren’t the HTML/CSS type you can still find this gallery useful — browse the forms and then download the code for use in your projects.

Go: Wufoo Form Gallery: Free HTML Form and CSS Templates.

Here is a short list of WordPress themes that I like. Technical note: I haven’t checked the HTML/CSS source on all the themes, so while they may be visually appealing I can’t promise that they are well-built under the hood.

• Cutline: From Chris Pearson, Cutline is an elegant design that works well for blogs and business sites. It’s available in two- and three-column versions. Pearson has three other great WordPress themes as well.
• DePo: Designed by Derek Powazek, the DePo theme is minimal and graceful. The footer is a nice touch.
• Hemingway: A long-time favorite on WordPress.com, this clean design is available in a light or dark flavor.
• K2: Kubrick’s big brother — this is one theme that combines both clean design and a workhorse of a theme: sidebar modules, admin improvements, custom headers, live search, and more.
• Simplicity: Very similar to Hemingway — simple, two-column design. (Site is in German, but English theme is available there for download).
• And finally, for the very best in minimalist WordPress themes, check out Plaintxt.org’s The Best Minimalist WordPress Themes. I especially like Hemingway Reloaded.