You are here

Integrating web design, SEO, usability and accessibility in design process

There are so many things you need to think of when creating a site, so it may really be a task to figure out what to do, when to do and what to do first. Let's see how we can speed up our site design process by integrating web design, SEO, usability and accessibility into a single process.

As said earlier, you need to take many things into account when creating a website. But how to make sure that your site does well in SEO and usability and also looks good? Let's see.

First, you list what you need to consider when designing your site:

  • web design (graphics)
  • web development (HTML/CSS code, scripts)
  • dynamic programming (if necessary)
  • search engine friendliness (crawlability)
  • search engine optimization (using the right keywords in the right places)
  • usability (easy site navigation, obvious visitor paths, conversion incentives, etc)
  • accessibility (readability and site navigation by handicapped visitors, screen readers, etc)
  • website content (what is written, how is written, etc)

The above points are listed in the order you take them into account, but it doesn't mean that site content is the least important. It simply means that if you don't have a working, search engine and user friendly site, your content won't do much.

Now why would I list the above points in the exact order? Let's check this out.

What to do first?

Graphical layout

First, you find the sites you like and generally pick the ones you want your site to resemble. Of course, you don't want a copy. You want a unique website, but certain elements might be worth using on your site, as well. You define how you want your site to look and list the sites and show them to the designer along with the site requirements.

Technologies

Next, you make sure you entrust the graphics to a professional web developer, who uses quality HTML/CSS code, semantically correct markup and all that.

Of course, since you want a search-engine friendly website, you want to reduce the amount of Javascript (AJAX, Flash, etc) to the minimum. This will ensure your site content is crawlable. Of course, you'd rather have all your site text in text, not images, as well, for the same reason (and the site will load faster).

Site structure

Then you develop the site structure for your website. You may want to see other sites in your industry, read some researches on information architecture (site structure, for instance) and define what navigational elements you want to use. Normally, this includes top navigation, links within text and a footer. Secondary navigation could be comprised of left-hand or right-hand navigation or both and drop-down menus on any of the menus.

Generally, it is best to have all the important sections in main/secondary navigation, but you shouldn't go overboard with excessive links as well. Just enough to guide your visitors to main or important sections of your site.

Text formatting

Generally, you'll want to have readable content on your website. This means that the text should be no less than 10px (equivalent of - a relative measurement unit, such as %, em, etc) and use a san-serif font, such as Verdana, Helvetica, Arial, etc.

Of course, you'll want to style your text properly, so include a description on how you'd like your main headings, subheadings, lists and such look or leave the choice to the designer.

Accessibility

Another issue you want to remember is accessibility. Put simply, it is making your site accessible to people who can't see well (or at all) or who can't navigate the site well. Blind people use screen readers, so they fit both categories. Becides simply making all of your content available in text, there are additional features you may want to consider (such as "Skip to content" links, buttons to increase font, etc).

Content

Also, you may want to consider how you will be adding your unique content to your site. Generally, it depends on web development skills you have (basic HTML knowledge is enough to edit physical files). If you are absolutely HTML-proof, you can get someone develop a content management system for you or use an existing one. With a CMS, you'll simply need to write content, press a button, and voila, you've got more content on your site.

Now that you have all those moments in your head, when do you think they'll all come into play?

When to have in mind?

Graphical layout

Generally, it'd be best if the graphical designer would consider future site development technologies from the start. Maybe he will even create good looking menus withour graphics, who knows. But the point is to avoid resorting to old technologies (table-based layout, HTML 3.0, etc) and using unnecessary technologies to convey what you want (Flash, images to convey text, etc) when developing a site

As one of the most important aspects of your site is speed, and graphics play the most noticeable role here, mostly, you'd rather make sure your graphical designer understands you want a fast loading website. The designer knows how to make it happen, but you need to make sure you have an understanding what kind of a site you want to have.

Technologies

One of the important parts in website design is web development. Here you or your web developer put the graphics in shape by creating HTML layout for your homepage and an internal page. Generally, this is the phase where you want to implement most search-engine friendly techniques, such as site navigation, text links, accessibility features, etc.

I'd suggest avoiding Javascript, AJAX, Flash, images for text, because they all aren't crawlable by all the search engines (Google does crawl URLs in Javascript and also reads Flash, but why use them if you can use text/CSS?).

Content

After the internal page template is developed, you can start putting the content in, either yourself, with some assistance from your web developer or using a CMS.

Testing

After your content is online, your site is ready for testing. During the testing period, you need to test the following:

  • find and correct broken links
  • the layout displays normally (not necessarily the same, but without breaking) in all browsers and resolutions
  • every site element works as intended
  • the site text is readable
  • you can find any page with three clicks from the homepage
  • your site loads in about 4-6 seconds (if not, speed it up)
  • you can manage the site yourself

If any of the above worries you, have your web developer improve your site.

Afterwards

Now, if you were doing all this by yourself, you should be good enough. However, if you were working with a web designer and developer (sometimes one person), make sure you pay fairly for such an enormous job.

If anything, make sure you remember a list of what needs to be done when developing a site, as well as note how you can improve it. Talk to the people, engaged in the project, most likely they'll add an option or two to your list. Maybe they'll even suggest a way to make the whole process more smooth.

P.S. You may wonder how this 'all at once' approach agrees with what I said in the latest 'Optimizing websites in small steps' blog post. The thing is that a website is designed only once. Thus, you need to take everything into account when creating a new website. This will make further improvements much, much easier.

On the other hand, when you have a complete website and don't have a web designer at hand, you'd rather improve your website in small iterations, which you can test. This includes switching your site to another platform (table-based layout to tableless, for instance) or something similar.

Topics: 

Add new comment