web.erratica

a resource site for web designers and developers and clients

Archive for the ‘css + standards compliant markup’


It’s all in the Details

Published March 23rd, 2008 in web Design, css + standards compliant markup, client resources | No Comments »

I have been working on customizing a shopping cart for a client recently. As part of the process I found myself redoing the buttons that came with the cart. Initially two things prompted this task. The buttons were ugly and didn’t fit the design of the clients’ site.

Now web folk don’t just fire up Photoshop when its time to make new buttons. Well maybe some do but success is in the details. A good button needs to adhere to conventions, in other words be easily recognizable as a button. Nothing frustrates a potential customer more than difficulty during checkout.

So before I redesigned the odious buttons, a task that took me several tries before I was happy, I decided to do some research.

I took screen shots of a number of different online catalog pages I particularly liked  - studied the buttons and layout and color choices. I also found a wonderful article here: 107 Add to Cart Buttons of the Top Online Retailers  that not only shows a wide range of examples from a number of existing and well known sites, but include statistics on terminology used – for instance Add to cart vs. Add to basket. Add to basket is more frequently seen in the UK and who would think that Buy Now suggests the shopper is finished shopping? These points are important to know.

There is almost no area of web design and development where attention to detail isn’t critically important. This is why it’s important to test on different browsers and operating systems (and get feedback from those who have a slightly different set up if you can). Fonts display differently, Colors display differently. CSS behaves differently. Ok, I’ll reword the last one for accuracy. CSS is what it is. Browsers (can) wear it differently. If you’ve ever seen 5 different people wearing the same dress you’ll know what I mean. That said compliance with standards (geek speak for more browsers getting on board so all will render the same) is getting better.

This is why exhaustive testing by end users is important.

It’s why you’ll know a site designed by pixel perfect designers.

It’s in the details

Accessibility and Standards: Why web designers consider them important and why they should be important to you.

Published January 25th, 2008 in web Design, css + standards compliant markup, client resources | No Comments »

Honestly, web designers are a geeky lot. If you strip away the creative process we give our left brains a pretty good workout. More often than not we’ll meet with a prospective client and try to sell ourselves using our knowledge of web standards and accessibility. “Your site will be built to be fully accessible and standards compliant” we’ll say and wait for the client to look as excited as we are. “Hmm, Where is the benefit to my business” they are surely thinking and “What the heck are standards and accessibility?”

Standards compliant markup means the designer has spent time developing a site using markup that will be read consistently across browsers and has stayed away from using proprietary tags or styles. This is simultaneously a line in the sand and a measure that ensures each person visiting your site will see the same content and receive the same message.

To understand why I say it is a line in the sand you need to understand a little bit of the history and rationale behind the web. Admittedly this is the probably the shortest and most dumbed down history of the Internet on the web but it should suffice.

The Internet began as the answer to the problem of sharing information over vast distances with people who would be viewing it on different computer operating systems. From the very beginning it was about sending the same message to everyone regardless of the differences between their computers. This was not an easy task but HTML was meant to standardize the display.

Initially the intent was to share scientific and scholarly information but it didn’t take long for the advertising and marketing industry to catch on to the vast potential of the Internet.

In fact it took about a nanosecond.

Marketing is essentially visual as almost all relationships start with attraction. The limits of basic html were quickly exceeded and the battle of the browsers began. Proprietary markup was introduced with each new version in the hopes that designers would design primarily for certain browsers thus gently forcing the public to adopt the “browser with the most toys”.

There are still remnants of those days. Occasionally you will stumble upon a site that says “Best viewed in Internet Explorer” but in general designers have realized that new features are best left to the standards developing bodies such as the W3C. Browser developers are expected to adhere to these standards more and more as it is clear to us that clients, designers and the public benefits.

The point is to get the same message to everyone regardless of their browser choice or their computer choice or their operating system. That always was the point.

Accessibility is essentially the same thing but it gives standards a helping hand. Even if you have done a fabulous job making your site standards compliant and every browser is rendering it the same way the individual you are trying to reach may have a hard time reading the type due to vision problems. An accessible site will allow type to be easily magnified. Try control+ or command+ depending on your browser to see this in action. Control or command- will reduce it again. An accessible site will label images and will ease the process of using a form for those who are viewing your site in a screen reader.

Building sites in this way is no longer considered an extra. It shows you are trying to reach out to all, not just some of your sites potential visitors.

And that should help your bottom line as well.

getting pages with flash to validate

Published September 30th, 2007 in css + standards compliant markup, flash + actionscript | No Comments »

I spent a good portion of last week taking my own site, rrinterative.com, out of tables, creating nice tableless css and then making sure it validated. Of course you know the one about the cobblers children - I preach search friendly valid code but when it came time to put my own site up I pretty much just threw it up there nasty old tables and all.

I’m not done - a couple of pages still need work but the biggest hurdle in the process was that the validator [as you may have experienced yourself] does not like the embed tag - you know, the one Netscape based browsers, including my version of Firefox, require or Flash will not display properly.

I didn’t want to give up the Flash file, I wanted it to validate.

And so it does with a nifty conditional statement.

This is for ColdFusion but the same thing can be done in php, .NET whatever. . .

So here is my code - I’m including it all from the opening to closing object tag:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”531″ height=”179″ title=”Bubble Flash”><param name=”movie” value=”bubblesrrv1.swf” />
<param name=”quality” value=”high” />
<cfif #Find(”Netscape”,CGI.HTTP_USER_AGENT)#><embed src=”bubblesrrv1.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”531″ height=”179″ /></cfif>
<cfif #Find(”Firefox”,CGI.HTTP_USER_AGENT)#><embed src=”bubblesrrv1.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”531″ height=”179″ /></cfif></object>

I’m sure there are better methods out there. This worked for now.