Closer To The Ideal

I’ve had the good fortune to work with some truly great designers. These are people who are understand the client’s needs, who understand the users, and who naturally develop web sites that feel intuitive to the people who use the site. Long ago I learned that, when working with such designers, it was important to empower them with the code they needed, but to otherwise stay out of the way. In particular, such designers need access to the HTML of the site. When I hide the HTML away inside of PHP functions, I’m limiting the ability of these maestros to perform.

This has implications when working with a framework like Symfony.

A lot of computer programmers would add an image to a Symfony template by using one of the image helpers:

<?php echo image_tag(’banner.jpg’) ?>

But what if the designer needs to add a CSS class to this? What if they are working late at night, and they are unable to reach me? Or they are working in the middle of the day, but it is a day I’m spending away from my computer?

The designers I work with can read PHP code fairly well. And they can look up the image_tag helper and figure out its syntax. But this is a big waste of their time. It takes them further into the world of programming than they should need to go.

When creating URLs in a Symfony project, it is important to use helpers. The helpers take care of figuring out what the right URL should be for things like images. The helpers allow us to develop on one machine and deploy to another server when we go live, and even if that other server has a completely different directory structure, we don’t need to change any links, because the helpers take care of all that for us. However, managing the URLs is the only thing that the helpers should do.

So we do not do this:

<?php echo image_tag(’banner.jpg’) ?>

Instead we either do this:

<img src=”<?php echo $sf_request->getRelativeUrlRoot() ?>/images/banner.jpg” />

or we do this:

<?php sfLoader::loadHelpers(array(’Url’)); ?>
<img src=”<?php echo public_path(’banner.jpg’) ?>” />

This way the URL is managed by Symfony’s helpers, but the rest of the IMG tag is still free for the designers to work with. If a designer needs to add a CSS class, they don’t need to call me on the phone and get me to do it, and they don’t have to start researching Symfony helper tags, instead they just add the CSS class like they always have:

<img class=”header” src=”<?php echo public_path(’banner.jpg’) ?>” />

This is an important bit of project management. It allows for a correct separation of concerns – the designers get to focus on design, and the programmers can focus on the programming.

This project is tracking all the new upcoming web technologies, like CSS 3, which will allow us to have rounded corners without having to use images. Also, elements such as Canvas. Also, other technologies, such as transparency in PNG images.

Right now, none of these technologies are usable because at least one major browser doesn’t support them. But clearly, over the next year, most of these technologies will become usable in all major, newer browsers. Then the question becomes, at what point do these features have enough market share that you’d want to use them on a commercial site?

The reality that a new version of HTML will soon come out makes me aware of how stagnant things have been for the last 6 or 7 years. Compared to the incredible speed with which things evolved during 1994 to 1999, the last few years have been one of consolidation:

I’ve younger friends who’ve become web designers in the last 4 years and who’ve never seen an evolution of the technology. They learned CSS 2 and HTML 4, and that is what they are still using now.

Universities now offer classes in something called “web design”.

There is now a profession called “web design”.

This profession is now in control of the standards around which the profession does its work.

The usual  balance-of-power conflicts between for-profit corporations and the professions, have become normal for the field.

Consolidation has been the rule. Perhaps it was necessary.

The web is in desperate need of new element options. My friend Chris Clarke likes to joke that HTML 5 will bring web forms up to the level of interaction offered by Visual Basic 1.0. I am hopeful that this next year will rekindle the forward momentum of innovation.

A very interesting post by I Am El Gringo:

For the time-constrained, I submit to you the results of my highly scientific research:

• Yahoo: Minimal Use of tables. I found a picture of Hugh Downs horizontally aligned with it’s caption in a table
• Google Home Page: Not only does Google use tables for it’s iconic home page, it embeds styling in the <td> tags. The horror.
• YouTube: Uses tables for of layout of videos
• Windows Live: Uses tables for footer layout
• MSN: There is one table, but it’s only for stockquotes which is tabular data
• MySpace Semantically pure. MySpace. Whoda thunk it
• Facebook: Does form layout with tables
• Blogger: No tables anywhere on the front page
• Orkut All tables all the time
• Rapidshare: A table with a single <td> for header placement. And again a single <td> table for the central “browse” section. Tsk tsk
• Microsoft: Navigation bar is a table. What did you expect? Unicorns and rainbows?
• Google India: It’s the same Google layout. I wonder if they used copy and paste for the template?
• Ebay: Tables, tables every where
• Hi5: Tables for every thing, pretty much. BTW, I didn’t even know this site existed until last week. Alexa rank 14!?
• Photobucket: Tables for photo gallery layout
• AOL: AOL’s layout is semantically pure! Friggin AOL?
• Google UK: Same GOOG layout. I’m now sure the copied an pasted their html
• Amazon: Now that’s just silly
• IMDB: They used tables for their 3 column layout. What! No CSS framework?
• Imageshack: Semantically pure as the driven snow.
• Finally, even though it’s not on Alexa’s top 20, log in to your Gmail account and look at
  the use of tables

My Hypothesis: Pure CSS design == overcompensation

So, the five companies that use CSS are the web powerhouses–MSN, MySpace, Blogger, AOL and Imageshack. MSN, MySpace and AOL have been maligned for years throughout the web savvy community. My hypothesis is that these companies are overcompensating for the crap that they’ve taken thoughtout the years by designing their site in pure CSS.

Other companies that have more web street-cred like Google and Facebook don’t really have to worry about how the web design community sees them. This leads to things like Google making extensive use of inline styling on their homepage instead of putting it in their stylesheet. I’ve never heard anyone claim that the Google folks are slouches at the web design/development thing. Why is that?

Via Sam Ruby, we are pointed to this in the comments at Intertwingly:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist.

This could be a viable strategy for using HTML5 and styling the results in IE, even if IE does not support certain tags.

Well, maybe “broken” is too strong a word. The CSS failed to load. Which happens sometimes. Which is part of why semantic markup is important. How much does the user experience survive the lack of style sheets? This from the front page of Old Navy:

Just curious, but does anyone know some common reasons why the CSS files might fail to load?

Also curious about the marketing. The front page of the site is aimed entirely at women. Do women buy clothes online more than men?

An email I just sent my co-workers:

I fixed the problem on account.php. The videos and audios were positioning themselves relative to “trackList” instead of relative to “your_audio_video”. I fixed it by adding:

position:relative;

to the div with the id of “your_audio_video”.

Please read the 2nd paragraph from page 114 of “The Zen Of CSS Design”. It’s a good point to remember.

For an interior element to position itself relative to the element that encloses it, that enclosing element must have one of these lines:

position:relative;

position:absolute;