Recent Updates

 
Speed & Optimisation25 Nov 2012
Usability11 Apr 2012
Planning11 Apr 2012
About Me / Contact Me11 Apr 2012
Home11 Apr 2012
 
Last updated: February 13th, 2012  
Viewed times 

Technicalities: website considerations

Before heading into the design aspect of a website, you should first consider the technical issues that you face as a developer - issues that influence many factors relating to successful web design. If you fail to build a website with such technicalities in mind, the chances are you will produce a website that many users will find unprofessional and difficult to use. 

Internet connection speed

Many internet users do not have high-speed internet access and this should be taken into account by a web developer to ensure maximum exposure and browsing pleasure for the majority of website visitors.

Inexperienced web developers are often unaware of the impact that images, scripts, animations and video have on the load-speed of their web pages, or on their website visitors. Information and media overload is a sure fire way to collectively slow a website to a crawl, and to bombard visitors with so much information that they cannot possibly take it all in, resulting in a quick back-step to Google and a click on to the next promising website. 

Web users have very short attention spans and if your website doesn't deliver the information they're looking for in a few seconds, they will get bored and leave. Slow download speeds may also impact negatively on your search engine ranking. Try and keep file and image sizes to a minimum and limit the number of resources displayed on the screen.

Web technologies

Some web technologies, when used poorly, can hinder users from navigating a website or reading content. These include;

  • AJAX
  • Flash
  • HTML frames
  • Javascript

If a website design relies heavily upon them for navigation, AJAX, Flash and frames can also unfortunately impact negatively on
page-rank in search engines. Since sub-pages cannot be easily linked to, the home page becomes the only linkable base, which plays havoc with user bookmarks. In short, visitors can't save them, so previously discovered content reverts back to being hidden once more in the depths of a difficult site. Confusion and frustration follows and off they trott to a more user-friendly website.

Javascript only works if a visitor's browser allows it to be used and a lot of people disable it to avoid popups, to stop loops in poorly coded routines, and to help speed up websites that depend on slow external sources to populate banner-ads, click-trackers and social networking plugins.

For a website that uses javascript sparingly, these users will just forego a bit of formatting, but they'll still be able to access the actual content (it won't look as nice, but the point is that they can still get at the important stuff). On the other hand, for a website that uses lots of javascript to display content and render menus, these users won't even be able to access the basic, unformatted information that forms the meat and two-veg of a website.

Consider the potential risks and use such technologies sparingly - overuse and poorly written code may make your website useless!

Screen resolutions

Computer screens and monitors come in many resolutions, so how do you know what a good size is to design a website around?

Reported screen resolutions at w3schools.com, indicate that most visitors now use a screen resolution higher than 1024 x 768 pixels, so when designing a "best-fit" fixed web layout, a maximum width of 1024 pixels will suit the majority of visitors.

Lots of developers will opt to use a maximum width of 960 pixels as this number is easily divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16... (the list goes on) so it makes for very flexible proportions when coming up with a grid-system for your site. By the same argument, templates built for popular open source Content Management Systems (CMS) such as Joomla and Drupal also use a fixed,
960 grid-system layout, so you're in good company if you choose to follow the 960 rule.

However, with the ever expanding widths and popularity of widescreen monitors comes the question, "is the 960 grid-system getting old?". Maybe to some, so if you would like your website design to flow out into wider screen widths, consider using a fluid design layout. This is where you can set column widths as percentages (rather than fixed pixels) and the screen will expand sideways to fill wider screens automatically. Typically, a developer would just use a fluid percentage width for the main content panel to avoid undesirable expansion and contraction of areas that do look best with fixed widths (such as menu bars and login boxes, etc).

If in doubt, it's probably best to stick to a 960 grid-system on a fixed design layout.

Cross-browser compatability

There are a number of web browsers on the market today - mainly Internet Explorer 6, 7, 8, 9, Firefox, Safari, Chrome and Opera.
You can check out current browser statistics at wc3schools.com.

Because of widespread browser differences, it is important to check how your website looks and functions in all the common ones mentioned above. A professional website will work equally as well, and look almost the same in all browsers so it's common sense that if you want to provide a professional service, you must make an effort to ensure consistency on all platforms.

Test your website in the most common browsers;

It can be quite time-consuming, but tactical use of browser specific stylesheets will help you overcome design problems. It will also help you improve website usability - afterall, a visitor who cannot use your website won't be a visitor for very long.

Where to next?...

Usability is covered in more depth in a later chapter but for now, let's consider the visual aspects of designing a great website.