Do not design with tables. Different devices render tables differently. To display a table, a device must perform floating-point calculations, which slows down the rendering of the table.

YES

Although used in the beginning of the design process, tables were removed further on, so that the interface could work better on mobile browsers.

Don't use large CSS files. These can result in excessive visual clutter, reducing readability. They also take a long time to download, resulting in the browser redrawing the screen after the user is partway through reading it.

YES

CSS files are external and applied to every page. This reduces the amount of downloading the user has to do.

Don't use large graphics. These take a long time to download and costs more to the user.

YES

There is only two graphics in the entire website: EnviroNet’s logo in the first page (login) and in the second page (home).

Keep text styles simple, otherwise it becomes difficult to read the information.

YES

EnviroNet uses a non-serif font (Verdana), which is easy to read in all devices, without any complicated styling.

Use few colors. The differing screens and user situations mean that colors may not be experienced as you intend them, and may not be distinguishable from each other.

YES

To differentiate between the body text, links and other information, two colors were used: gray for the first and blue for the later.

Keep content short. Keep the site's content short and to the point.

YES

The content was made as short as possible without lacking essential information to the user. Sentences were made shorter and in a more direct way. For example, instead of saying, “Rate this message as inappropriate” it was used “Rate inappropriate”.

Don't use drop-down menus for navigation. Users won't understand or use them.

YES

No drop down menus was used. The navigation is made by links, buttons and radio buttons, which proved to work fine in most devices.

Use a simple graphic at the top of the page with a navigational icon suggesting what site and what portion of the site the user is at, plus a brief title indicating what page the user is on.

YES

In all the pages there is a differentiated blue capital letter word, to indicate to the user in which page he is now (home, search, post, search results, about, help…)

The top of the page is prime real estate; you do not want the reader to get bored scrolling to the content.

YES

The most important information is displayed at the top of each page. This was reorganized after the second usability test.

Don’t use frames or pop-up windows.

YES

No frames or pop-ups were used.

Set the width and height attributes for the images so that the page can be laid out in its final form even before the images are loaded.

YES

For the both of the logo images, the exact width and height were specified within the XHTML code.

Use efficient, semantic markup and leave the presentation to CSS.

YES

The XHTML code is all very simple and clean, and all that regards the different styles used and within the external CSS.

The content of the service should fulfill the needs of the target user group and be optimized for the most common tasks.

YES

The content of the website was made as clear as possible for the target group, being displayed in a way that takes efficiency in the first place.

Keep user Task flow fluent

YES

The interface was made very simple and easy to understand and navigate, so that the user doesn’t get stuck at some point or waist time finding his/her way.

It is better to provide 30 links on a single page rather than five links on six pages.

YES

In sections like “Post” and “Search”, where there are a lot of information to scroll down through, everything is on the same page, instead of being divided into two pages.

Going back and forth between pages may take more time in XHTML, as the pages are downloaded separately.

YES

In all the pages the user can find all the menu options, so he doesn’t have to keep going backwards or forwards to find what he is looking for.

Provide proper feedback for user actions and for error and problem situations.

YES

Every time the user sends an information, he is notified about the action taking place or if any error occurred. (e.g. “wrong password”, “no results found”, please fill in the field ‘message’…)

Remove unnecessary white space and comments inside code.

YES

The XHTML code for each page is just a few lines long and no extra spaces between pieces of code exists.

Keep the pages light

YES

Apart from the first page (login) and the second page (home), all the pages are made of pure text, being very light and quick to download.

Use high-contrast colors for images and fonts

YES

Because the background of the website is white, dark colors were used for the fonts (grey and blue), being easy to read.

Avoid background images

YES

No background image was used, as it would take too long to download the page and also costing more to the user.

Don't use black or dark background images or colors

YES

No background color was used, as this would make it too difficult to read the information displayed.

Use the same, simple color palette for all the graphics in your site. This will help ensure a consistent look and feel and contribute to site identity

YES

As mentioned before, apart from the grey, used for the normal text, blue was used (with different font styles) for other information (links, page name)

Use alt text for images. Obvious, but important on a handheld device.

YES

Because it might take a while for the mobile browser to display the image or even in the case of devices that don’t display images, the alt text was used in both of EnviroNet’s image as “logo”

Text for buttons and links are better to read if they are not in capital letters.

YES

All of them are in low case (including the first letter)

Users start to lose control if the form is longer than two screenfuls or if the form is split onto several pages.

YES/NO

Although the form is all in one page, it is a bit long. But, in order to make the service efficient, all the fields for both “Search” and “Post” are necessary.