Web Design and Development

I was reading an article the other day about CSS Sprites and whether or not Google could penalize you for using these methods. If you haven’t heard of CSS Sprites, it is a technique used to combine images you want to use as backgrounds and combine them all in one jpg, gif or any other format you would like. It lowers the amount of times your website will have to make HTTP requests. Typically I use a lot of CSS Sprites for navigation elements but it is not unheard of to actually combine several layout elements in one image.

The article which I can’t find at the moment (I wasn’t expecting to write about it) went on to say that Google has never come out and told us their view of CSS Sprites. Basically with CSS Sprites you have the actual text for elements still in the source code for search engines and accessibility reasons but display the image as a CSS background. Of course not all CSS Sprites is used for text alternatives, but I would say a great deal of the time they are. We would think Google wouldn’t care about this but we all know how Google feels about hidden text and the shady Black Hat SEO’s stuffing key words. We hope that Google is smart enough to know if we are stuffing keywords or we are actually using CSS Sprites properly

Google Speaks and sets us free

I got home tonight and came across an article entitled “Design patterns for accessible, crawlable and indexable content” on the Google Webmaster Central blog. Where low and behold Google tells us:

Having meaningful text to go with navigational links is equally important for Googlebot as well as users who cannot perceive the meaning of an image. While designing the look and feel of navigational links on your site, you may have chosen to go with images that function as links, e.g., by placing <img> tags within <a> elements. That design enables you to place the descriptive text as an alt attribute on the <img> tag.

But what if you’ve switched to using CSS sprites to optimize page loading? It’s still possible to include that all-important descriptive text when applying CSS sprites;

What about that Javascript?

Clearly Google is pushing us for better techniques not only for load time, but accessibility while ensuring our content gets indexed and crawled. It was really refreshing to hear Google saying how it is important to have unobtrusive Javascript. Google goes on to compare the Googlebot in the same context of a visually impaired user. We shouldn’t have our Javascript in our HTML, we need to make sure that if user doesn’t have Javascript enabled that the link brings them to a page representative of the link they clicked.

In Conclusion

Sometimes it is hard to get other developers and executives onboard and understand how important all these newer techniques for complying with web standards, accessibility, and optimization. One thing is always true and that is everyone listens to Google. How many times has an executive come to you just drooling all over Google and their accomplishments? Most of the time I can’t stand how everyone is bowing down to Google, for one Google doesn’t practice enough web standards themselves and this is representative in a number of their services.

If Google continues to write more articles such as this, it will make our battles internally with our executives and other people that brush standards to the side a lot easier. They might actually listen to us and appreciate what we do and our passion for perfectionism with web Standards. Maybe these people will just stop saying “let’s just get it done” and actually put time in the budget to research and plan correctly to create our applications the way they should be developed.

What happened to the design?

To know more about why styles are disabled on this website visit the

Annual CSS Naked Day website for more information.

I decided to go a little early since I have to work tommorrow and none of those plugins would work for my whole site. Plus its April 5th some places

This year I will be participating in CSS Naked Day, where I will disable my stylesheet for you to view my content in its purist form.

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .

I figured it would be fun for a day

Looking over my Google Reader the other day, all I saw from the new A List a Part issue was Daniel Malls new Swifr technique using flash to give you the ability to apply an assortment of visual effects to any or all images on your website. I totally missed the article written by Ethan Marcotte titled, “Where Our Standards Went Wrong”.

What it represents to me
This article represents everything that I talk about when producing Web Standards valid templates and then handing them over to a backend system that demolishes the time and consideration I put into creating the templates with great valid code. One great point of how validation can benefit are lower maintenance costs.

My experience today
I experienced this very thing today while at work. The sites we work on were not created through our company, but was contracted out to a large ecommerce development company before we had a development team. It is a div based layout, although the code and CSS are poorly written. There are about 18 websites all sharing the same template platform. Anyways we have site managers that work inside of a not so great CMS, who update content and other sections. There was an issue with one of the sites layout breaking and it turned out to be a non closed div tag in one of the administrable content areas. Finding this problem took forever and trying to go into the validator and pinpoint what might of been wrong, there were some 300+ errors. It was an unneeded speed bump brought on by non web standards code.

Ethans point on time spent in non valid code:

I found that approximately fifteen percent of my time was spent mired in invalid code. As an independent designer/developer/something, I’m grateful for all the work my clients send me. Still, what if I was a salaried employee? If IT departments conducted a similar audit, I’m confident they’d find similar numbers. And this kind of auditing needs to happen. Invalid sites may look the same as those built on a foundation of valid, well-formed code, but in my experience, they invariably cost more to maintain. This is the silent weight of invalid code, a hidden cost we don’t discuss nearly enough

The Selling Point
The main selling point, which Ethan points out are the very things I have been preaching to clients, co-workers, bosses and friends.

• Shorten development cycles, as we no longer have to slog through through six layers of nested tables to build site templates.
• lower maintenance costs
• decrease page weight, which in turn reduces page load times and dramatically lowers bandwidth costs
• The promise of device independence
• The presence of a metric against which an individual or a team’s production can be measured
• The knowledge that your site is future-proof, displaying in any standards-compliant browser yet to be invented

My favorite quote
The following quote is so true and I really find it to be dead on with the design and functionality of ecommerce applications:

To be honest, the pragmatists are right: that for the most part, validation and commercial web design are polar opposites

After working on an ecommerce platform I find this to be so true. If you look at the top 15-50 internet retailers you wont find a single site that completely validates or even has a nice clean well laid out design. I think its because there are so many different layouts packed full of different options, products and functionality that it make it so hard to keep our CSS streamlined and our markup beautifully semantic. Over the next year or so I am making it my challenge to turn the front-end code of our sites to just this and show the other so called top sites, that it can be done!! Its just about how passionate you are about what you do and if your passionate in web standards there is no, it can’t be done!

Another interesting Blog entry I found today was on Wired’s blog and no not the big IE 7 will break the web one, which I thought about writing about but just am getting sick of this. It was about all the sites that still give you that pesky page that “This site requires Internet Explorer“. It wasn’t really the article that was interest but the comments that people left sharing what sites don’t work for them. It’s truly amazing to me that there are so many services that require this still out there. I run into this problem when paying for my car. What’s worse about that is that they don’t even tell you that the forms don’t work in other browsers you just find out because it just doesn’t work in Firefox.

It turns out that it’s a lot more sites then I thought more well known sites and services that is. The main reason being that all other browsers don’t support ActiveX, because its Microsoft’s technology. With most of the sites listed its all form functionality and why would all these sites need ActiveX to create the functionality of their forms when there’s other technologies out there, which are better cross browser. I know plenty of other sites that do the same exact type of forms and functionality but don’t use ActiveX. One commenter named Jerry states it perfectly,

Of course, one would hope that it would only be used where necessary (virus scanning sites, ms update, games) and not where it doesn’t (financial institutions, government websites). There are alternatives out there for sites that need/should cater to everyone such as government sites. Java works fine in most places as does Flash now that there is the Flash Player beta for Linux. Not everyone likes flash or java, but many people dislike ActiveX as well. There is not one platform that everyone likes, but if you write to one that is cross-platform, then at least people can access it and still hate it rather than not access it, hate it, and hate you for not even giving them the opportunity to use their site.