Everything In Between

Last month, 37signals published a short but sweet post about why web designers should do the HTML/CSS implementations for their own designs. The bottom line is, as we’ve all been saying for a long time now, that the Web is not the same kind of medium as other mediums like print. It is a fundamentally different kind of canvas than most web designers are used to using. As a result, if you as a web designer are not intimately familiar with it, you’re not going to do great work.

designing for the web is a lot less about making something dazzle and a lot more about making it work. The design decisions that matter pertain directly to the constraints of the materials. What form elements to use. What font sizes. What composition. What flow. Those decisions are poorly made at an arm’s length.

I’ve worked with many web designers in the past who only did abstractions and then handed over pictures to be chopped and implemented by “HTML monkeys”. It never really gelled well. The things that got strong attention were all the things that Photoshop did well. Imagery, curvy lines, and the frame. All the around stuff, never the it stuff.

In other words, to do great web design you have to design in the Web, not in some other medium for the Web. I mean, serious magazine firm employs designers who don’t understand how to work with page layout programs like InDesign. Why, then, do so many web design agencies employ designers who don’t know how to work with web technologies, or even how to use programs like Dreamweaver? It doesn’t really make any sense, and it’s no wonder that the resulting implementation is rarely top-notch work.

But if you’re a graphic designer who doesn’t know much about Web technologies, what are you to do? Well, as a first step, I think you should pick up my new book, Foundation Website Creation. It’s available from all good booksellers (and probably some crappy ones) as of today. The book is targeted towards all manner of web professionals, including graphic designers and website producers, who want to learn more about what it takes to actually implement a site.

If I do say so myself, the chapters on XHTML and CSS are exceptionally thorough. The book doesn’t try to turn you into an exceptional programmer. Instead, it will explain the foundational concepts you need to know to understand how XHTML and CSS actually work, and in so doing will enable you to use the tools you already know to solve problems and get things done.

I think this book will be an excellent starting point for lots of designers and other web professionals. However, it is not going to take you from zero to hero—no book can. That’s why I recommend that, after you read Foundation Website Creation and have a solid grasp of what the technology can do for you and how it actually does it, you next take a look at these excellent books:

• DOM Scripting by Jeremy Keith — if you’re a designer that needs to add a behavioral layer with JavaScript and Ajax to your pages, you need to read this book next.
• Mastering CSS with Dreamweaver CS3 – if you’re familiar with Dreamweaver and want to keep using it to create standards-based web sites, then I recommend you follow Foundation Website Creation with this book by Stephanie Sullivan and Greg Rewis to take your Dreamweaver skills to the next level.

As always, most of all, have fun. Because if you’re not having fun, you’re not going to make good web sites no matter what you know.

Note: As of this writing, the book listing on Amazon still publishes the wrong author list, which is very frustrating but out of my hands. At least the image of our book’s front cover lists the correct authors.

For those who have been wondering what is keeping me so busy these days, the answer is that I’m working on the final stages of a book that is getting published as one of three co-authors. Not only am contributing three chapters (the technical chapters on (X)HTML and CSS, specifically), but I am also technically reviewing the entire book.

My co-authors on the book, called Foundation Web Standards Foundation Website Creation (you can pre-order now) and published by Friends of ED, an Apress company, are Jonathan Lane of Industry Interactive, Inc. and Joe Lewis, who blogs at Sanbeiji.com. I’m not going to say much more until after the book is released in late July.

For the eager, here’s the description of the book posted on the Friends of ED website:

Foundation Website Creation explores the process of constructing a web site from start to finish. There is more to the process than just knowing HTML! Designers and developers must follow a proper process to flush out goals and objectives and determine requirements both prior to, and during project development.

Large Web projects are rarely completed by a single person. Producers, project managers, designers, developers, writers, and editors all play critical parts in a project’s evolution. This book provides an overview of the entire process, and also shows project development from the perspective of these different roles. It introduces the key concepts and duties performed by every member of such a team, and gives you the skills necessary to tackle projects like a professional.

It’s quite exciting getting a book out, and it’s quite a bit more work than I’d have ever originally thought. That being said, it’s extremely rewarding. There’s a lot more work I need to do on it between now and the time it gets released to publishing, so, well…back to work I go.

Now you all know where I’ve been spending my time writing.

With a bit of free time over breakfast, I was fiddling with my personal site and looking over my bookshelf. I decided to make an Amazon guide to “becoming a front-end web design guru” based on many of the books in my ever-expanding collection. So without further ado, here it is, my guide to becoming a front-end web-design guru, featuring the most varied and useful set of 20 books I have ever read:

The Grim Truth

Let’s face it. These days, any Joe-shmo with Microsoft FrontPage can call himself a web developer or designer. But web surfers can tell the difference between a professionally designed site and a site designed by your dentist’s brother’s roommate’s best friend’s boyfriend. To be professional, you have to design with web standards in mind, focusing on usability and accessibility. And it has to look good — really good.

The Tools You’ll Use

First, you’re going to need to stock your toolbox. Start with the basics. Learn how to manipulate page layouts with (X)HTML and CSS by reading Eric Meyer on CSS: Mastering the Language of Web Design. Occasionally, you’ll need a dash of JavaScript Design. Finally, learn what works best by Designing Web Usability : The Practice of Simplicity.

Building It Right

The Zen of CSS Design : Visual Enlightenment for the Web (Voices That Matter) is possible for you! Building professional web sites means Building Accessible Websites (With CD-ROM). No matter how good your design may be, it won’t mean anything if it doesn’t load quickly, so don’t forget to always Speed Up Your Site: Web Site Optimization. Then put it all together to create Bulletproof Web Design : Improving flexibility and protecting against worst-case scenarios with XHTML and CSS. But you’re not done yet! Help people find your site by giving it Search Engine Visibility.

Really Good References

While you’re doing all these things, don’t be afraid to let curiosity get the better of you. Expand upon the projects in the previous books by doing things differently, doing things your own way. As you tinker, you’ll come across situations in which you don’t know how to do something. For those situations, use the following must-have references to quickly look up information about a particular technology.

For (X)HTML: HTML & XHTML: The Definitive Guide, Fifth Edition
For CSS: Cascading Style Sheets: The Definitive Guide, 2nd Edition and CSS Cookbook
For JavaScript: JavaScript Definitive Guide

Helpful Bonus Books

Read The JavaScript Anthology : 101 Essential Tips, Tricks & Hacks to learn even more about what you can do with JavaScript and how to solve real-world problems with DHTML. Get more usability insight from Homepage Usability: 50 Websites Deconstructed and Don’t Make Me Think : A Common Sense Approach to Web Usability (2nd Edition). Arm yourself with an arsenal of Web Standards Solutions: The Markup and Style Handbook (Pioneering Series) to take on The Real Business of Web Design.

Learn all the Secrets of Successful Web Sites if you’re involved with larger-scale project management, or if you’re of the entrepeneurial bent, find out How to Start a Home-Based Web Design Business, 2nd (Home-Based Business Series) or How to Be a Successful Internet Consultant.

Today, even before my morning cup of coffee, I received this pleasant Google Alert in my inbox.

Visual Studio 2005 makes accessibility a real possibility — IT-Analysis – UK

… now comes with a validation program that will check that the code generated is firstly valid XHTML and then adheres to the Web Accessibility Initiative (WAI …

The article discusses the importance of providing web developers and programmers who use Microsoft’s .NET framework (specifically, ASP.NET) with the ability to create accessible web pages through the use of their native development tools. Visual Studio 2005 seems to make a big leap forward in this regard, finally supporting XHTML pages, providing an interface to select the alt and longdesc attributes of images, and not requiring the use of tables for layout purposes. It can even incorporate a “skip navigation” link.

Several days ago I got my first look at a web site created with Adobe GoLive CS2 and was pleased to see an abundance of divs where there used to be tables, and a spattering of CSS throughout the page. While still leaving much to be desired, there’s no question that the newest versions of web development tools on the market today can make far better web sites than they used to. That’s good news for everybody since the overwhelming majority of web sites on the Internet today are created by using these programs. And since not all developers know how to write accessible web pages, having programs that do is a good first step.

I’m really not sure if this will help or hurt the state of accessibility on the web. Businesses don’t really understand what accessibility is, and the ease of misunderstanding that this WiderWeb service gives them an accessible page then things are sad indeed.

Definitely something interesting to follow, but there is still no substitute for a real expert consultant.

In a recent article from DMEurope.com, Trenton Moss challenges Webmasters to do better than providing text-only pages as their solution to accessibility.

It’s good, too, because text-only pages which are lauded as an accessibility solution are often nothing more than a cop-out, and they’re often not even all that accessible. This is where CSS really shines, and why it’s so important to embrace CSS-based design techniques. Of course, that’s only part of the matter, but it is striking to see the difference it can make to accessibility, particularly for various Web browsing devices.

Good article.

If you’re using a modern browser, then you’ve seen the text “Hot Key:” in links on my site, such as the navigation bar. For instance, the hot key to load this page is 6.

Hot keys are, very simply, keyboard keys you can push to navigate through a site without using a mouse.

• If you’re on a Macintosh computer, simply press command and a hot key to follow the link associated with the hot key.
• On a Windows-based computer, press alt plus a hot key to focus on the link, then press enter or return to follow it.

You can find out more about hot keys in my Accessibility Statement (when I write it up).

If there is still any doubt about why businesses should require that their web pages be accessible, this report from ElectricNewsNet explains how accessible pages can be viewed by more visitors than non-accessible pages.

It also brings up a good point about maintaining that accessibility standard after the site has been created. Accessibility is an ongoing process, and in order to keep your pages accessible any additions to the pages must also be coded accessibility.

“Accessibility is included in the tender and the developers deliver it on day one, but the people updating the site don’t know what to do,” said Michael Byrne, CEO of EIAS.

Write once, work anywhere: the dream utopia of interoperability. Often frought with implementation snaffus, this is the quest of Web standards. But these standards don’t yet take everything into account. In response to this interesting WATS article I’ve devised a quick and simple compromise to help solve the problem of inaccessible title attributes on various XHTML elements.

[title]:after { content: " (" attr(title) ")"; }

I also wrote a letter to Derek Featherstone, author of the article and co-founder of WATS. I’m hoping to get some feedback on the technique I’m planning on using. If you can offer some advice and feedback, then please let me know as well!

Dear Mr. Derek Featherstone,

I am a freelance web developer based in the New York City area. I have recently become aware of the depressingly dismal state of accessibility on the web at large today. I have thus started an intense self-education campaign in my free time to learn all that I can about accessibility and usability online in an effort to increase the quality of my work.

After reading your article on Hidden information (found at http://www.wats.ca/articles/hiddeninformation/63 on the WATS web site), I took a quick glance at some of my existing designs and found what I believe to be a relatively painless solution. Unfortunately, it relies upon CSS level 2 selectors and the CSS level 3 pseudo-class :after (or, :before).

I was hoping to get some feedback as to how effective you think this technique may be overall. Here’s the CSS code:

[title]:after { content: " (" attr(title) ")"; }

As you know, this takes any element with a title attribute and writes that title attribute in parenthesis after the element. It can be easily controlled via the stylesheets, restricted to certain elements, and styled based on the element containing it. For instance, blockquotes with title attributes can be styled differently from links with title attributes due to the nature of the information contained in the different elements. For that matter, acronyms with title attributes can be styled differently, too.

Furthermore, placing this in an alternative stylesheet that is linked to only when users specify their preference for "display all hidden content" as suggested in your article is not a difficult task either. Furthermore, browsers with built-in stylesheet switchers will then see this and if named appropriately, for instance, "Green with Hidden Content Visible," this provides yet another control for users.

Naturally, Internet Explorer will be left behind because it doesn’t support this CSS, but that is IE’s deficiency.

The reasoning behind this approach is this: I love technology. I think its main drawback is that not everyone knows how to use it most effectively. Low-tech solutions are only necessary because high-tech ones don’t exist. That said, I want to use all the available tools at my disposal to create the most accessible, usable, and richest site I can. Thus, I am unwilling not to use the technology that I can (title attributes in this case) and I am similarly unwilling to duplicate my efforts in an attempt to cater to what I perceive as vendors’ limitations. In short, I want my title attributes but I also want my page to be as rich as possible and I want to do it all without changing the markup one bit.

The aforementioned CSS provides such a method without needing to touch the underlying XHTML document structure. The title attributes are still accessible to some current devices without visual CSS support, such as screen readers, because they are technically still in the code…right?

Here is where I need your more extensive experience to help me judge the true effectiveness of this technique.

Thanks in advance for any reply, and thanks also for continuing your work and writings on the topic of accessibility.

As an aside, does WATS.ca offer an RSS or Atom news feed? I’d be eager to subscribe if it did.

Thanks again!
Sincerely,
—Meitar Moscovitz

So what do you think? Is this CSS example a workable solution?

Sandor Szenassy is an awe-inspiring artist who is most widley known for his series of paintings of boxer’s heads. Today I started and completed a project which takes his web site and transforms its old, bloated code requiring JavaScript rollovers and was entirely composed of images in a table and made it accessible.

The new version uses only the main pictures and optimized versions of the interface image elements, adds a range of accessibility features — most important of which are descriptive alt text for the images — and uses CSS for the visual design.

As Sandor says, "I wanted to produce a body of art of monumental ambition which, though extreme and uncompromising in its formal language, would be as accessible to ordinary people as to the cultural elite." Now, I am proud to inform him, his Web site truly echoes that sentiment. You can read more about it at SandorSzenassy.com’s Accessibility Statement.