photoshop web pages

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!