Web Design Wikiclass | Lecture / Website Launch

A Web Design Lecture by Steven Choy

Overview: Check Content and Style - Standards and Validation - Functionality Check - Performance Issues - Security and Risk - Search Engine Visibility - Set-up Web Analytics and Metrics - Some finishing touches

Check Content and Style

Proofread your writing for the web

Check for spelling and grammer

Check for incorrect punctuation marks

Check headings

Consistency and style of your writing

Check for capitalization of main headings

Check for tense and style of writing

Check for recurring/common phrases

Check for variation in words (e.g. Websites vs Web Sites)

Check for links

Don’t just assume all your links work. Click on them.

You may often forget to add http:// to links to external websites.

Make sure your logo links to the home page (which is a common convention).

Consider the appropriate use of absolution URL and relative URL

Examples of different formats of specifying hyperlinks

<a href="http://www.example.com/abc/def/">

<a href="/abc/def/">

<a href="abc.html">

<a href="../abc.html">

Print Style Sheet - Check how important pages print

If a user wants to print a page from your website, chances are she or he wants only the main content and not the navigation or extra design elements. That’s why it is a good idea to create a print-specific style sheet. Also, certain CSS elements, such as floats, don’t come out well when printed.

To point to a special CSS style sheet that computers automatically use when users print a page, simply include the following code between your <head> tags.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Example: CSS Print Media Example

Hidden Text

Check all 'Hidden Copy' such as alt text, text in JavaScript functions

Standards and Validation

HTML validation

You should aim for a 100% valid website, but it is not the end of the world if your website isn't.

However, it is useful to know the reasons why it doesn’t so that you can fix any nasty errors.

Common gotchas include no “alt” tags, no closing tags and using “&” instead of “&” for ampersands.

CSS validation
JavaScript validation
Check for accessibility

Functionality Check

Check search functionality
Check all custom-made functionality
Test all forms, including anti-spam features, response email/text, etc.

If you have a contact form make sure that you have changed your email address, which you used for testing, to the clients requested email address. Make sure the reply to address on the forms is the clients and not yours.

Cross-Browser Checks

Check on common variations of browser, version and platform.

Check on common variations of screen resolution

Graceful Degradation

Test your website without JavaScript, Flash, and other plug-ins

Your website should work with JavaScript turned off. Users often have JavaScript turned off for security, so you should be prepared for this.

Test your forms to make sure they still perform server-side validation checks.

Performance Issues

We will cover Website performance in details later.

Check total page size and download time
Load test

Aside from ensuring that your pages download quickly, you also need to test whether your web server is able to handle the amount of visitor traffic that you anticipate.

Load testing tools give you a preview of how your website will response under realistics user workloads before your website launch.

You can specify how many users to test with, the type of Internet connection they are using, the sequence of pages and actions that they will perform on your site.

Check image optimization
Check and implement caching where necessary
Minify or compress static (JavaScript/CSS) files
Optimise your CSS: use short image paths; make full-use cascading nature of CSS, etc.
Check correct database indexing
Check configuration at every level (Web server, Database, any other software e.g. Content Management System)
Configure server-based logging/measurement tools (e.g. database/web server logging)

Security and Risk

We will cover Website security in details later.

Website Backup
- Performing backup
- Testing recovery from backup
- Configure backup schedule
Website permissions
- Protecting any sensitive pages (e.g. administration area)
Use robots.txt - Instruction to Web robots

"Web site owners use the /robots.txt file to give instructions about their site to web robots; this is called The Robots Exclusion Protocol."

"It works likes this: a robot wants to vists a Web site URL. Before it does so, it firsts checks for /robots.txt.

Example

      User-agent: *
      Disallow: /

Turn-off verbose error reporting
Check disk capacity
Website Monitoring
- Set-up email/SMS monitoring/alerts
- Consider both internal and external monitoring services

Search Engine Visibility

We will cover SEO (Search Engines Optimization) in details later.

Page titles

Your page title is the most important element for SEO (Search Engine Optimization) and is also important so that users know what’s on the page. Make sure it changes on every page and relates to that page’s content.

Make sure your page titles make sense and have relevant keywords in them.

Metadata descriptions

Make sure to create metadata descriptions for important pages.

Change the description on each page to make it relate to that page’s content, because this is often what Google displays in its search result description.

Example

<meta name="DESCRIPTION" content="Write a sentence or two to describe your page content">

Create an XML Sitemap

Adding a sitemap.xml file to your root directory allows the major search engines to easily index your website. The file points crawlers to all the pages on your website.

After creating the file, upload it to your root directory so that its location is www.yourdomain.com/sitemap.xml.

URL canonicalization

Example: variations in links to http://yoursite.com, http://www.yoursite.com, http://www.yoursite.com/index.html should be reducedto a consistent style.

One thing that helps is to pick the url that you want and use that url consistently across your entire site. For example, don’t make half of your links go to http://example.com/ and the other half go to http://www.example.com/ . Instead, pick the url you prefer and always use that format for your internal links.

Suppose you want your default url to be http://www.example.com/. You can make your webserver so that if someone requests http://example.com/, it does a 301 (permanent) redirect to http://www.example.com/. That helps Google know which url you prefer to be canonical.

URL Format

Use user or search engine friendly format of URLs.

Semantically correct markup

Ensure content is marked-up semantically correctly (<h1>, etc.)

Use and configure Google Webmaster and Bing Webmaster tools

Set-up Web Analytics and Metrics

Web analytics is about reporting and analysis of data on web site visitor activity.
Web analytics is the measurement, collection, analysis and reporting of internet data for purposes of understanding and optimizing web usage. (Wikipedia)
Web analytics is the study of web site performance metrics to understand whether business objectives are being met. (www.capilanou.ca/help/active-cms/glossary.html)
Installing some sort of analytics tool is important for measuring statistics to see how your website performs and how successful your conversion rates are.
Track daily unique hits, monthly page views and browser statistics, all useful data to start tracking from day 1.
Google Analytics is a free favorite among website owners. Others to consider are Clicky, Mint and StatCounter.

Miscellaneous

Create a favicon

A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head.

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

Create custom 404 error pages

The most commonly overlooked defensive design element is the 404 page. If a user requests a page that doesn’t exist, your 404 page is displayed. This may happen for a variety of reasons, including another website linking to a page that doesn’t exist. Get your users back on track by providing a useful 404 page that directs them to the home page or suggests other pages they may be interested in.

Specify image and title for social network sites

Put the following code in every main pages of your website:

     <meta name="title" content="your page title" />
     <link rel="image_src" href="the_page_represent_your_page" />

Create icons for iPad/iPhone

Put the following images in the root folder of your website:

     apple-touch-icon-72x72.png
     apple-touch-icon-114x114.png
     apple-touch-icon.png

References and Resources

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.