Below are some basic tips that may already be familiar to seasoned web developers/designers, but are what we consider best practices for designing and building a website.
1. Separate the design from the content.
Back in the pre-CSS days, website layout was accomplished with clever table manipulation. While CSS can cause some frustration due to the inability of certain browsers to properly implement the full specification, it can also be a great tool for controlling layouts and keeping the design of the site separated from the content.
Why does this separation really matter? If the website will never change, it doesn’t. But let’s get real – in that case, the site might as well be in print if it will never be updated. Separating the design and the content makes it possible not only for the original designer/developer to easily make design changes on a site-wide basis, but also allows content creators, developers and designers to easily work together on the same project.
2. Test the site on all of the popular browsers, operating systems and platforms.
Test early and test often. Also, don’t limit the testing only to different browsers on one operating system. See how the website looks at different resolutions, under Linux, Mac OS and Windows on each browser and on various mobile platforms. This is often the most frustrating part of building a website.
Another point of frustration is that there are still a lot of people using old versions of Internet Explorer. Give these tools a try to test the website on all the versions still in use:
As a side note, IE 6 and below do not have support for transparent PNGs. If transparency in images that have more than 256 colors (GIFs) is needed (or alpha transparency is required), the best transparent PNG hack we have found is Supersleight.
If every option has been exhausted and the website just won’t work correctly across all browsers, there is always the route that Google took: build a plugin for Internet Explorer to run the Chrome browser in a frame – that’s one way to make a website work in IE.
3. Validate the code. But, don’t rely only on that.
http://validator.w3.org/ can be used to check for any invalid code that may be in the website. Usually this reveals errors like tags that have not been closed or an alt description that has been left off an image. It is good to have W3C valid code – search engines like it and the green “valid” checkmark gives that warm feeling that the site has been coded correctly. However, do not rely on W3C validation alone. Make sure to test the site in all of the major web browsers (IE, Firefox, Chrome, Safari, Opera).
4. Learn the common browser bugs (and fixes).
All web browsers have bugs where the W3C specification for the version of HTML/CSS that is being used was not implemented perfectly. Most of the time these bugs reveal themselves in the positioning of content. Learn the fixes for these bugs so they can be avoided in the future. A good reference site for browser specific bugs can be found here: http://www.positioniseverything.net.
Flash is a proprietary technology from Adobe Systems. It is a very powerful platform for building interactive mini-sites, games, video players and more. However, flash is often used for graphic enhancements to a website like menu animations or basic website design.
The second problem with using flash is search engine indexing. While Google now indexes most of the text from flash sites, other major search engines (Bing and Yahoo!) do not.
6. Use a content management system.
Now, this may not seem like it is a necessity for a smaller site, but often those smaller sites grow much larger over time. Features like blogs, contact forms and other dynamic content are added and the website design requirements change over time. If a website is built in a CMS like Wordpress or Drupal, it is much easier to manage as it changes and morphs over time.
7. Design the site before building. Not the other way around.
I used to design websites as I built them in code. This works to an extent, but most of the time it ends up limiting the final design. Some useful tools for site design are:
8. Make use of the knowledge of others.
There are plenty of great websites relating to website design and development. Use the knowledge that others have already discovered. Here are a few sites to get started.
What do you consider to be best practices when designing a website?