How to Create Great Web Pages

Here are some best practices to help you review and revise content on your CED website pages.

Audience

Who is stopping at your page and using it? Knowing whom you are communicating with will help you determine the voice and content delivery for the page. Speak directly to the user.

Start at the top

Most website users decide in the first 15 seconds whether the content they need is of interest/use to them on a particular page. If they cannot find it, they will leave! As a result, summary information about what is on the page always must be at the top. This is known as the “above the fold” rule. It’s the first information you see before you start to scroll down.

Create sub indexes when needed

If you have lots of information on a page, you need an index at the top to help people navigate to the content they are looking for. You should also plan to break up the information into chunks to make it easier to locate and use.

One click

Content should always be “one click away.” Having to click two or three times in a row to get to content generally will loose your user. If you have designed your content to be more than one click away, rethink your approach.

Keep your information in one place

The CED website has the ability to use menu redirects to point to your content from other parts of the website. You are not “stuck” listing it only once in the navigation. However, the content always needs to have a home area.

Options

Give your user options to find information. If there is related material available put a link to it in the right hand column. Make the link appealing and obvious.

Left Hand Navigation

If you have a series of pages for your content, they need to be organized and make sense just like a table of contents in a book. You always want to lead your user forward and backward. If they get lost, they will almost always abandon the page.

Links in the content

Use lots of links in your content. The more cross linking you do, the easier it is for users to find what they need. Make it planned, not accidental. Links can point to anchors on the same page, or move the user to another page where there is related content. If you have forms that you want the user to access, it can be helpful to put links to them in the right hand column instead of making them move onto another page.

Be succinct

Edit your content to make sense and be instructional. Most pages on the CED website are “how to” content and should be written to be quickly reviewed by eye scan. If you are telling your user how to do something, try it yourself and make sure you can do it first.

Use your headers properly

Titles of lead paragraphs should always be marked as “H2.” Sub-content titles should always be marked as “H3.” Don’t use the “H tags” as “decorative” elements.

Responsive Content Planning 

The CED website is responsive. This means that it changes sizes/formats depending on the device you are viewing it with. You should check your content on a phone, or tablet, and make sure it is useful. On both a phone and tablet the pages run in a single column format.

Testing

Once you have created your pages and content, it is a very useful exercise to have a typical user test the page for you. You do want feedback on how easy it is to find the page, use the information, and what else could you add, change or remove to improve it.

Using the Style Guide

http://ced.berkeley.edu/styleguide A style guide with HTML coding guidelines is available for grabbing code for images, tables, quotes and other website functions that are not written into the CMS editor. To access the html code, click on the object you want to do and the code will open up. Copy it and use it in “source” in the CMS editor.