The biggest difficulty most Web developers face when building sites is that the mental processes involved in writing code, and designing graphics and layout are worlds apart. Developers who can not only write really tight, maintainable code but can also hold their own when it comes to designing company logos and laying out text are white tiger rare.
When I first started building Web sites, there were a few things I got wrong. Here's a list of what they were:
1. Not Everyone Works at 1024x768 Resolutions…
This was the first thing I got wrong.
Just because you've been using 1024x768 resolution on your desktop for the past six years, that doesn't mean other people don't use 640x480 screens.
Designing Web pages that look good at 1024x768 and 640x480 is an extremely difficult art. In short, you have to make the layout stretch and shrink in order to accommodate the user's browser size. Most public sites design for 640x480 resolution, which is why many sites seem to only take up a small region of the page In order to design for 640x480, don't make the elements that make up your page take more than 600 pixels total width. Intranets and private sites tend to have wider pages because they have a good idea of what their audience will be using.
Public sites, typically stick to the 640x480 layout. The magic number of 600 leaves space for the side of the browser and the scrollbars. Also, make sure that the important elements of the page fit into the first 400 pixels that make up the height. Allow 125 to 150 pixels for the left navigation bar (if you have one), leaving 450 pixels for the width content. Remember, you're building pages for iMacs and Linux boxes too.
2. Not Everyone Has 16 Million Colors…
You must design your graphics so they look good in 256 colors. In addition, graphics for logos and buttons, etc., should be in GIF format. In fact, the 256-color limit is not even true. When designing for the Web, you only have available to you 216 separate colors that you know will be there. This is known as the Webmaster Safety Palette and most graphic design programs, like Adobe Photoshop come with a palette that you can import into your graphics to ensure you're using the correct color spread.
3. Not Everyone Uses Internet Explorer
There are a lot of people who use Netscape. There's also a fair difference between Netscape and Internet Explorer, enough to make me have nightmares and spend hours re-engineering presentation code to make a site look cool in both.
4. Not everyone has a high speed internet connection
Luckily, I'm not alone on this one! Many Web developers forget that just because they have a high-bandwidth Internet connection, that doesn't mean everyone else does too. The issue is that if the site is not responsive, visitors to the site will grow frustrated and click out of the site and onto a competitor.
There are five tricks to enhancing the performance of your site:
1. Minimal use of graphics. Make sure you use just the right amount of graphics, and make sure that these graphics are as optimized as possible.
2. Make pages smaller. Convey just the right amount of information on a page. Don't keep the user waiting around to get all the information he or she needs. If necessary, spread information over a number of pages.
3. Keep URLs short. In dynamic sites, this is an interesting one. If you ever look at the URLs on Yahoo, you'll notice that instead of calling a folder "images", they'll call it just "i". The logic behind this is sound - there's no need to write "images" in full if the browser can understand "i". Wherever possible, keep the names of ASP pages and folders as short as possible.
4. Avoid the use of ActiveX controls or Java applets. Additional components that need to be downloaded and installed in order for your visitors to get the full benefit of site functionality can frustrate users both through the speed it takes to download the components, and possible problems they may encounter once they have been downloaded.
