Websites belong to the world of technology and software, but that does not mean that you can only use hi-tech methods to create them! Paper and pencil (and eraser) are the best tools you can use to start designing your new website.

If instead you race ahead and use graphical editors and/or coding straight away then you risk making one of these common problems:

• Distraction
• Wasting Time and Effort
• Poor Design
• Distraction

Photoshop and other graphical editors are powerful tools that let your imagination run wild and it is very common for people to want to “experiment” with design ideas at the start. However if you jump right into to software then you inevitably lose sight of the website’s purpose.

The first design task should always be information organisation. You need to know which information will be presented and how it will be organised so that the user can navigate around the site. This is best performed using old-fashioned methods such as pencil and paper. It lets you concentrate on the details of the information architecture rather than getting distracted by design elements like colours, textures and so on.

Wasting Time and Effort

If you design in a graphical editor and/or start coding at the start then the chances are you are just wasting your time. You may think that presenting flashy digital mock-ups or prototypes gives a better impression, but when the client asks for something completely different then you will inevitably have to start from scratch again. There is nothing wrong with using software to create a mock-up, but you must get the basics agreed first.

Poor Design

It is crucial to design the basic site layout as soon as possible in the design process, and this is most easily accomplished on paper. If you do this and organise the data in a clear and intuitive way then you will be well on your way to developing a site that users will enjoy using. However, if you skip this step and start using technology too soon, then the usability issues may not show up until much later when it will be too late or very expensive to fix.

Starting your web design process on paper not only saves you time and effort, but will result in a site that delivers a much better experience to your target users.

Imagine a Web with no Graphics…

Browsing the web with no graphics would be like eating food with no seasoning!

Graphics, photos and decorative images are like the herbs and spices in food, they enhance the experience immeasurably.

However, there are times when the overuse and/or misuse of images can actually damage your web site. Just like too much chilli pepper can ruin a meal, so image misuse can switch your customers off.

Graphics damage web pages when they are: too big, too heavy, inappropriate, illegal, not making use of the ALT tag, not using CSS or of poor quality.

When Graphics Are Too Big

When images are too big they can detract from the text content. Very often an image’s job is to help convey an idea in the content, but if the image takes a disproportionately large area of the screen then it can distract users from the real aim, which is to understand the content.

When Graphics Are Too Heavy

Large image files take longer to load in your customer’s browser. Web site visitors tend to be impatient creatures and do not like waiting for “slow” sites. If your competitor’s site has lighter images then your customer will probably be happier there instead.

There are also SEO factors to consider. Search engines like Google take into account your page load times and score accordingly, with heavy graphics files being one of the worst offenders. Heavy files could be hurting your small business SEO.

The Problems with Inappropriate Graphics

With business web site design, you must be focussed on the message in the content as well as the overall image. Do the images you use in your website template and articles reflect your business accurately? If your image is not presented in the way the target audience expects then your site may not be helping your business as much as it could be.

When Graphics Are Illegal

With so much creative imagery on the internet it can be tempting just to save a file or two to your hard drive. However incorporating such images in your business web site design is dangerous because it is illegal. Unless the image is completely free and royalty free then you do not have permission to use it.

Problems with Not Using The ALT Tag

It is amazing how many people ignore the ALT tags. They are like free pointers to your site and its content. Your web site is at a real disadvantage if you are not using this powerful feature. Not to mention non-compliant with web standards; IMG elements are suppose to have the SRC, HEIGHT, WIDTH and ALT tags set as a minimum.

The Trouble with Poor Quality Images

Shabby, amateur images will give a shabby, amateur image of your company! Unless your site is about showcasing very poor quality photos then it might be best to use no image at all if your only option is a poor quality one.

Problems When Not Using CSS

“Naked”, unstyled images plopped here and there into a sea of text can look pretty awful. The default settings will give you bags of whitespace to the side of the image and will have whatever margins, borders and padding that the browser has given images by default. The result is not very visually appealing and you are missing out on an opportunity to add subtle styling to your pages.

Careful use of graphics in your business web site can bring content to life and help guide the user’s eyes through a page. Ensure you are using graphics in the best way by being aware of the problems and knowing how to fix them otherwise your site’s findability, usability and bottom line may all be adversely affected.

What Are Web Standards?

Designing with web standards is a general term used to mean that you use the following technologies, and that you use them correctly:

• HTML or XHTML to contain the content,
• CSS to hold all the styling,
• JavaScript and the Document Object Model (DOM) to take care of any scripting.

These three are sometimes referred to as the “Holy Trinity“.

In the bad old days during the Browser Wars, HTML was used incorrectly.

Objects like tables are supposed to be used for  tabular data but instead they were (ab)used to contain background images and other components just to artificially create a layout. Style information was mashed up with the content making the code ugly, bloated and inefficient.

The web standards project seeks to:

• persuade browser makers to support the standards, as they were intended and
• persuade web professionals to use them that way.

Mm, that sounds nice, but why should I care?

Well take a look at this article for starts, it talks about saving money with this stuff:

3 Ways Designing with Web Standards Saves You Money

Real Geeks Love Standards

Yes I admit it, I am a fan of standards, but it wasn’t always that way. Back when I was happy, carefree developer something called Common Criteria came along and threatened to squeeze all the creative joy out of my “art” of programming. Of course, that was nonsense and once I had managed to read the reams of documentation and absorb its meaning, I got fully on board with structured development.

So although I’m a big fan of certain standards, it doesn’t mean that I think they should be used just for the sake of keeping things “nice”. Web standards are a case in point.

What Are Web Standards?

If you haven’t heard of web standards, the holy trinity or W3C then I recommend that you skip over to What Are Web Standards? and come right back.

What Was That Thing About Saving Money?

There are numerous, tangible benefits to designing with web standards, not least of all, financial savings.

Lower Development and Maintenance Costs

Separating the content from the styling makes your site easier to develop, update and maintain. This makes it less expensive for the developers as less time is needed to add new content, update existing content and test.

No Need To Re-Test and Tweak With Every Major Browser Release

All compliant browsers will always support your code, you do not need to have the developers retest every time a new browser releases a new version just to make sure that the pages still look the same. Your site will be future-proofed, automatically.

Bandwidth Savings

If your site is large then separating the content from the styling will mean a big reduction in the weight of your files, which means a substantial savings on the bandwidth, which in turn translates into lower hosting costs.

Free SEO Improvements

If your site uses meaningful (X)HTML then your site’s content is easier for search engines and therefore customers to find. Some search engines score pages on how well-structured the markup is, your Alexa ranking is affected and other SEO metrics are also improved. Automatically.

Faster Load Time

When you separate the site’s content from the styling, your site gets lighter because there is less code. This means that your site loads into browsers faster and provides a better user experience, this represents an SEO benefit as search engines like Google score pages on their load time.

Automatic Wider Audience, Find More Customers for Free

When your site complies web standards accessibility is improved. That means that not only people with disabilities will be able to access your content, but also your site will be available to the new generation of mobile browsing devices automatically. Which means lots more potential new customers for free.

If your web developer tells you about re-designing or designing with web standards then do not just brush it off as over-zealous geekery. This stuff deserves your attention, it offers real business benefits and real financial savings.