Web Design | Dangerous Common Sense

Postcards from the Edge

I am currently working on two web sites which were originally created by graphic designers. They are very pretty. Pretty enough to be postcards. But, they also are inflexible and difficult to work with. To me, they are postcards from the edge of web design purgatory.

If you’re about to hire a web designer, make sure that they are not proposing to take a postcard-perfect graphic and make it the template for your new site design without agreeing that the site will be flexible and will comply with industry standards.

The postcard web page designs I am working with were originally created in Photoshop or GoLive. Unfortunately, taking the great look from a design package like Photoshop and making it into an HTML/XHMTL web page is not something that these programs do well. Even though the software brags about its ability to output an HTML page from the graphics, it does it poorly.

These programs make their pages with tables and slices of images to construct the backgrounds and borders for the web page. Although the pages they produce claim to be standards compliant, they are not. For example, one design I am editing specifies that it is compliant with the XTML 1 Transitional standard, but it uses a non-compliant “height” attribute on table cells to achieve the spacing between its various page components.

Yeah, that’s pretty technical and the value of valid XHTML code is a subject for another post. But, here’s something that I can show visually.

These postcard web pages were designed to be a specific height. The graphic designers each dislike scrolling down web pages so they oriented them horizontally and limited the space on each page for text. If there is more text or graphics on the page than initially conceived by the designer, the page falls apart.

Here’s how one of the pages looks when only a small amount of text is typed on the page. It looks great:

But here is how that same page looks when “too much” text is added to the page, “too much” being more than fits in the fixed-size gray block:

Rather than making a template ready for expanding text, this box design disintegrates apart when additional lines of information is added to the page.

Web pages must be able to expand downward. You cannot guarantee that all the information on a topic will fit into a set number of words. In fact, top-ranking pages in Google generally have over 400 words on it, and that much information won’t fit on most postcards.

In addition, you can see that the photograph of the adorable boy is created in three slices. This means if the site owner wants to create new pages using a different photograph or change this photograph, a web designer would have to slice the new photograph into three slices of the exact same size. That’s at least three times as much work and it’s also a mess to track.

The situation was very limiting for the site owner who contacted me. He couldn’t add more pages or information to his website, and he wanted to tell web visitors about his expanding business.

He liked the colors and looks of the site created by the graphic designer, but he wanted his web site to attract and inform potential clients.

I was able to re-create the look of the page while using standards-compliant XTHML code. The column with the picture no longer breaks apart if the text on the right side shrinks or grows. New pages with new photos can be added easily.

As I write this, the new design is just live and the site owner and I am considering what information we want to add first. He has sample cost and cost-recovery spreadsheets to share, photos of his installation and equipment options, more information on options for residents and businesses. Look at this San Francisco solar power installation site, and see how the one-static postcard design now will support growth.

Graphic designers can create excellent looking web designs. If you engage a graphics person, I recommend one of two options. First, ask your graphics designer to agree to creating an expandable, XHTML, css standard-compliant site. If they don’t understand your request or say that they don’t be bothered with standards, ask that they create just the design. Then take the layout to a web designer for a XHTML, Cascading Style Sheet (css) web template.

The prettiest postcard sites will disappoint you if they don’t attract new clients and tell people about your business. Don’t be afraid to be as opinionated about the web site’s functionality as you are about its visual appearance!

Do You Want to Exclude iPhone Users from Your Site?

The Full Navigation Menu

I was talking with a San Francisco limousine service owner last week who wants his website to drive more potential clients to his business. As we chatted, I pulled out my iPhone and took a look at his site.

On my iPhone it looked like he had only one page on the site.

As we talked, our conversation sounded more and more like we were from alternate universes. He kept talking about the page about his airport services, about his tour services, with his contact information, etc. And, I kept looking in vain for links on the one static page I saw.

When I got home and went to his site. From my desktop PC I saw the navigation links to all of the pages he’d been talking about.

I investigated and discovered that the navigation menu and its links had been built using Microsoft’s FrontPage (or Expression Web) and that program’s custom Java applets. The menus look great on browsers that run applications from websites. But, iPhones block these applications (and they also disallow Flash).

My first step in helping Regency Limousines capture more business was to re-write the navigation menus using standards-complaint JavaScript which is supported by iPhones. Limousine services — and your business! — want to be seen by iPhone owners. I haven’t seen official statistics, but I’m willing to bet that iPhone users as a class are more likely than average to call for limousine services.

There was no visual or design reason to use the Microsoft applet for the navigation menu. Microsoft had simply created an easy way for novice users to install navigation buttons that change when you put your cursor over them. But, the way Microsoft created the navigation buttons made them take a relative lot of computer resources to display. And, Microsoft’s way of creating moving images was not standard, didn’t catch on, and very few sites use it.

Apple had an easy decision when it designed the iPhone. It decided to not support a seldom-used, non-standard, resource-intensive way of displaying buttons. Those few sites, like the limousine service, that used Microsoft’s applet would not show navigation menus on iPhones. But, few businesses would be impacted, and iPhone users would probably assume a broken web site and find a competitor’s site to use.

So, I’ve uncovered another step for site owners who want more business from their websites: check out the site on an iPhone, Blackberry, and other smart phone. Make sure that the up-scale people carrying these devices can see your up-scale website.