Web designCommon Web Design Flaws

Web Design Mistakes You Should Avoid

When visiting web sites it becomes clear that authors and designers frequently make the same mistakes again and again. You might even call these beginners' problems, but these designers are not really always beginners. Most typical and common web design problems are listed below.

Much content is in PDF files or Flash instead of HTML.
PDF files are useful only if the intention is to print them in a fixed format. The web, however, is based on HTML, not PDF. Most browsers cannot display PDFs natively but need a plug-in for them. Many users won't install such plug-ins because of frequent security flaws in them. The same is true for Flash content, of course. Use HTML wherever possible.

Documents are scanned image files.
This is even worse than PDF or Flash. Text in images cannot be indexed by search engines (local or web), the data volume is unnecessarily high, and screen readers for blind persons do not work. The same is true for PDF files which are not really text but scanned images.

Title and Description header tags are missing or not descriptive.
As a consequence, search engine result pages often do not show what sort of content can be found on a specific site, or the page ranking in search engines is quite low for typical search words. (Note that the Keywords tag, however, is ignored by most search engines.)

Large images are shrunken using width/height in HTML.
Often the image itself is e.g. 1920 x 1024 pixels in size but displayed as 480 x 256 using the width and height attributes of the <img> tag. This wastes bandwidth because the file size is still huge. Pictures should be resized to the native display size before publishing them. This also avoids artefacts when re-rendering images in the browser.

Pages require horizontal scrolling.
You can assume that most PCs can display at least 1024 x 600 pixels - this is the typical screen resolution of netbooks and tablets. Pages with a fixed width of e.g. 1280 or even more pixels will require horizontal scrolling, and reading text on them is very difficult. A dynamic layout adapting itself to the actual screen width is much better. You should also keep in mind that not everybody is using the browser in full-screen mode.

Caching is not supported properly.
The HTTP server should use an HTTP header line like "Cache-Control: max-age=57600" to tell the browser how long it can keep the data in its cache without refreshing it when visiting the same page again after a short time. Furthermore, the server should send a "Last-modified: ..." header line and respond with "304 Not modified" later if the browser requests that page with "If-modified-since: ..." and the date and time from the first request. While this works more or less automatically on static pages, some work is required for dynamic pages like ones create by CGI scripts or PHP. Otherwise a page is completely reloaded every time it is visited again, which is especially bad for mobile usage.

The HTML code is not valid.
It is very useful to test the HTML code of a page with the  W3C validator. This makes sure that it is displayed correctly with most browsers. A remark on the page like "Optimized for IE 7.0" or "Optimized for 1280 x 800 pixels" is completely useless because nobody can expect that users buy a new monitor or install a different browser just for this very page.

Javascript or CSS is browser-optimized.
Many pages are using Javascript functions which only a specific browser family (e.g. Internet Explorer) understands so that they will not work with all common browsers. Others use browser-specific CSS extensions like "-webkit-border-radius" instead of the standard "border-radius".

Links don't work.
Especially when using external links you should test them at least every few months if they are still working. It is normal that page addresses change in the world-wide web. This is primarily true for "deep links" which do not link the root page of a domain but a specific page of it.

Links cannot be identified as links.
All links should have a specific colour or should be underlined so that everybody recognizes them as links even without searching for them on a page by hovering over parts of the text. Vice versa this also means that normal text should not be underlined and should not have the same colour as links.

The year is missing for events.
Often web pages exist for several years but at least temporarily nobody has the time to edit them. A text like "Office party on May 15" without the year will cause a problem in the following year. Always include the year in dates if it is not clear from the page title or a heading.

The bookmark symbol is missing.
Always place a file favicon.ico in the server root directory. Most browsers are using it when somebody bookmarks a page. The format should be 16 x 16 or 32 x 32 pixels. It is also recommended to include a link to it in the page header:
<LINK REL="shortcut icon" HREF="favicon.ico">

Too many typos.
If you are not quite sure about how to spell a word, use a spell checker, but be aware that such programs only tell you if a given word exists; mostly they do not check grammar or even if the word has the intended meaning.

4/2012 Herwig Feichtinger, Shamrock Software GmbH