Checklist

The following checklists will give you an idea of things to consider when evaluating and testing your website

Design

Requirements

Go back to the original specifications and check all the requirements have been met.

☐ Check that you have included all the required media elements. e.g., images, audio, video, slideshow, map.

Responsiveness

☐ Check responsiveness (make the width of your browser smaller).

☐ Images resize. You use % for image width and height (and they are the same) do not use px.

☐ "Panels" reflow. i.e. they go from next to each other to below each other (usng CSS float left for ALL panels is the best way to do this)

Linking

☐ Check your links work by copying your site to another folder/computer.

☐ Check you hyperlinks don't have “/” (e.g. src="/images/mypic.png") of "file:///" or "C:/" at the start.

☐ Avoid hyperlink text like “click here” as this does not help Search Engine Optimisation (SEO)

Menus

☐ Have user feedback when you float over the option.

☐ The option that relates to the page is highlighted

☐ It is not a good idea to remove menu items on a page as it makes navigating around your site confusing.

☐ It is not a good idea to move the menus around for different pages. From a User view it is important that the order remains consistent.

Text

☐ The text should not be overly large or bold (normal text should not be a heading style).

☐ Spelling and grammar checked.

☐ Is readable if there is a background image.

☐ Does not include underlining UNLESS it is a hyperlink.

Images

☐ Use of a full background image is usually discouraged.

☐ It is not very responsive (try reducing the size of the page with [Ctrl]+[roll wheel] – so especially for large screens you’ll end up with a photo rather than background, or a tiling effect.

☐ It tends to make text difficult to read if it does not line up (e.g., white text on a white part of the photo). I found also that people with English as a second language find it hard to distinguish the text from the background.

☐For images they need to maintain their aspect ratios (or you end up with short fat people, or long thin people).

To do this you may need to edit images using an image editor (like GIMP, paint.net). If images are to be resized be careful if they contain text.

In the code, you should use % resizing with both the height and width the same % (at a minimum change one – height or width) and the browser will adjust the other properly.

☐ Images do not dominate the page (page requires scrolling to see content)

☐Appropriate number of images.

☐ Images need to relate to the scenario.

☐ When you have multiple images on a page try to keep them balanced (e.g., if they are next to each other keep the height the same)

☐ Images need to resize according to the browser width (responsiveness)

Audio

☐ Plays in the browser (does not link to another site)

Video

☐Video is sized appropriately (does not dominate the page).

Interactive

☐If an interactive map is included, use embed code (see Embedding a Google Map)

Elements

☐ Each page should contain

☐ a Heading that indicates what page you are on

☐ a Menu that links to other pages in the site (especially the home page). This is as users could end up in your site if they land on a page using a search engine.

☐ a logo on each page.

☐ ©opyright on each page.

☐ a privacy notice.

☐ links to social media.