• Be easy to navigate

• Be easy to read / use

• Be accessible for a range of users (for example, alt tags, support for visually impaired users, can be used for screen readers etc.)

• Use a customised stylesheet and current HTML conventions for markup

• Include commented HTML and CSS files

• Include appropriate media files (eg: images, sound, animation)

• Use javascript / php as appropriate

• Include good file management practices

Example (The examples above are indicative samples only):

• You have created a website using html/css with an external stylesheet. The material is structured and formatted using a range of tags and styles (i.e. it has clear headings, body text and lists/bullets if required).

• You have used an external library to further enhance the user’s experience.

• tested your website to ensure it functions across a range of browsers and devices (e.g. responsive to different screen sizes)

• ran a validation check and address any issues

• tested for standard procedures to improve optimisation. For example, the loading speed, file size and image optimisation

• confirm that your website has met relevant web design conventions.

Example (The examples above are indicative samples only):

• The site has been tested/previewed either in two unrelated browsers or with at least two different screen sizes. The site looks acceptable on screen on a range of screens.

• The text has been proof read and there are no obvious spelling/grammatical issues (minor spelling/grammar issues are OK for Achieved).

For example (partial evidence):

• You have used concepts such as contrast, repetition, alignment, proximity and white space to lay out their site.

Explain the relevant implications associated with your site. See at the bottom of this page for a resource for

Relevant Implications for Websites, also see this page.

In the assessment, your implications can be recycled from the practice task provided you make changes where necessary so that your explanations match the outcome you are making.

Implications should include functionality, usability, accessibility, aesthetics, intellectual property and social. For example (partial evidence):

• You have explained why copyright should be honoured/images should be credited.

• You have mentioned why the site should be accessible for colour blind/visually impaired users.

• You have stated why your site should be easy to navigate (the site may have minor navigation issues).

You have asked a volunteer to test the website and you have made improvements/changes based on this testing. Tests were made to ensure that:

• it is easy to use

• the display of the output is easy to read and understand

• the website is fully responsive

For example (partial evidence):

• You have previewed the outcome and made changes to the layout/formatting to improve it.

• You have asked a volunteer to use their site and made changes based on volunteer feedback.

• You have previewed the site using a slightly smaller (or larger) screen and adjusted the layout to ensure the site looks acceptable on a range of wide screen devices.

For example (partial evidence):

• The student has used fonts to ensure that the site looks consistent on all devices.

• The student has used css to go beyond the basics – for example they have used partial transparency, rounded corners, shadows or css grid to create an aesthetically pleasing outcome.

For example (partial evidence):

• You have acknowledged and credited the source of their images (or made it clear that the images are original).

• You have ensured that all their images have ‘alt’ tags/descriptions so that the material can be read out by screen-readers (and is thus accessible to visually impaired users).

• The site is easy to use/navigate.

For example (partial evidence):

You have carried out testing at key points during the creation of the website to ensure that it was fit for purpose and easy to use. They made changes based on testing and feedback at each cycle in an iterative loop. For instance, they checked that…

• navigation was intuitive

• the material was easy to read/understand

• the website loaded quickly

• usability heuristics were adhered to

• the application of css was effective for the purpose and end-users

• they have saved or screen shot their iterative development process.

For example (partial evidence):

• You have a sensible file structure with a separate images sub-folder (and possibly sub-folders for css/js as well).

• Html/css have been appropriately commented and/or class names are descriptive (e.g. <div class=”main”>).

• Images have been resized and optimised.