Web Design for Speed

October 5, 2008 at 7:08 am · Filed under Web_Design

Have you ever noticed that some sites are much faster than others. Or that some specific websites take a notably larger amount of time to load than others? Have you ever seen a site that begins by displaying only the background, and then shows the text all at once several minutes later? This is the sign of a poorly designed website, and you should make every effort to omit this web design mistake from your own works.

Tables are frequently used among web designers for creating an attractive and effective site. However, rarely do web designers create new tables for the different segments of their content. Instead, they simply divide the cells into which they will be placing their content - the lazy road. While this may work very well if there are very few images - or no images at all - on your website, if this is not the case, then you will only be convincing your visitors to leave before they’ve even touched what your site has to offer them.

If your site has several images or is quite intense in its graphic usage, consider using separate tables for dividing your content. The reasons for this are many, but straightforward.

The first reason you should split your content among several tables can be explained by understanding the way that internet browsers read tables in a web site. Within a standard HTML site, the browser will display the text and the images as they load. However, when tables come into play, the browser will wait until the entire page has loaded before any of its contents are displayed within your visitor’s internet browser. All that is required is one large graphic to slow down the display of your entire site from within fifteen seconds to over a minute. Therefore, it is for precisely this reason that you should use separate tables to split your graphics from other elements of your site. Simply format the border, cell spacing, and cell padding at 0 so that the multiple tables are not visible to your viewers.

Using two or more tables is among the best ways to split up all of the data on your web site. The first table may consist of your logo and any header information that you wish to include in your web design. A second table can be the actual content of the site. If your page happens to be especially big, a third table can be added, for example for a particularly large graphic or other sizeable element.

This usually works quite well as the visitor will immediately be able to see your logo and some of the options offered by your web site as they wait for the rest of the page’s content to load.

You can also choose to split up your content by creating tables within your tables. This will allow the main table to load first, displaying its own contents while the tables within it continue to load. This makes the loading time of your page notably faster, and still provides the viewer with something to look at and read as the page’s sub-tables continue to load.

As an additional note, to continue to save on loading time, it is discouraged that you should use elements such as Java, Shockwave, and ActiveX programs within your tables. Instead, use JavaScript within your web page tables as it is much faster in its loading and its execution.

These techniques are highly valued by web designers who prioritize fast loading websites, and who understand how important it is to get your content in front of your visitors as quickly as possible in order to discourage them from going elsewhere to find a faster site.

Whenever possible, consider your visitors with slower connections - such as dial up - and test the speed of your site before finalizing its web design. Remember that most visitors find it much easer and much more appealing to simply click away from a slow site and find a fast one than to wait forever for a sluggish load. The rule of thumb is to have your first information up within 10 seconds for even the slowest connections, and then build rapidly from there, providing additional information and content before the viewer can become bored or frustrated.

Copyright 2006 Mark Nenadic

Mark is the director and face behind FifteenDegrees-North http://www.15dn.com
where you will find articles and resources to help with SEO, marketing and Web design.

Share This

Comments

10 Web Design Tips For A Professional Looking Niche Web Site

September 26, 2008 at 10:07 am · Filed under Web_Design

Web site design is a critical element in niche marketing.

If you want to build your reputation as a Professional in your niche, you need to project a professional image from the moment your visitors reach your web site.
Like it or not, first impressions count and no more so than on the Internet. Your web site is the only way that visitors can judge you and your product. Give them the wrong impression, make it hard for them to find the information they’re after and chances are they will click away into cyberspace and never come back.

To avoid this happening to you, here are ten web design tips to help ensure that your niche web site projects a professional image :

1 - Use the KISS approach - Keep your web design simple and straight forward with clean lines and a suitable colour scheme. Avoid distractions like Flash presentations, animated gifs and audio which loads as the page opens.

2 - Visibility - Design for a screen resolution of 800×600 pixels and a maximum page width of 760 pixels so that your web site visitors don’t have to scroll from side to side to read your content.

3 - Graphics - Keep your graphics down to one or two smallish ones and optimise them to load quickly (You can optimise your graphics at www.netmechanic.com who offer a free facility to do this). Always add “alt” tags to each image, with a concise description, so that people who surf with graphics turned off and the sight impaired, who use text readers, know exactly what the image is.

4 - Load time - Aim to have your pages load in 8-10 seconds on a 56K modem. You can do this by keeping your page size down to about 10k or less.

5 - Use CSS - CSS stands for Cascading Style Sheets. CSS enables you to define the look of your web site with various style elements like font type, size and colour, backgrounds, Hyperlinks and a lot more. By linking your HTML pages to a Cascading Style Sheet you can reduce the amount of code on your web pages and speed up load times.

6 - Navigation - Make sure your main navigation links appear in the same place on every page so that your visitors don’t have to hunt around for them. Your visitors should also be able to see at a glance exactly where they are on your web site, so include “You are here” links at the top and bottom of each page showing the path from your Home page, for example :

“You are here >> Home > Widgets > Redwidgets”

In this case Home and Widgets would be linked back to the relevant pages.

7 - Site Map - Include a Site Map on your web site listing the title of each page with a short description and a link back to the relevant page. Not only will this enable your site visitors to find their way around, it will also help to encourage search engines to spider your entire site.

8 - Readability - Avoid dark backgrounds and fancy font styles, if you have a lot of stuff to read on your web pages it is better to stick to a white background with black print as that is less fatiguing to read. Arial, Verdana and Times Roman are the most common fonts to use and the easiest to read. Oh and one other thing - not everyone has 20/20 vision, make your font sizes big enough for those people to read comfortably.

9 - Test - Test your design in as many browsers as possible. Although Internet Explorer is still the dominant browser, don’t ignore alternatives like FireFox, Mozilla, Opera, K-Meleon, Netscape, Safari, etc. they may only constitute 15%-20% of browsers, but that’s still millions of potential customers you might otherwise miss out on.

10 - Relevance - Don’t cover more than one major topic per page, this will help you get your message over more easily. Make sure that everything you are going to include on your web site is relevant to the niche market you are targeting. For example if your site is about golf, don’t include links to a dog training site (unless it’s about training dogs to find lost golf balls:-).

Copyright © 2005, Andr

Share This

Comments

Web Design Using Dreamweavers Layers Feature

August 19, 2008 at 9:12 pm · Filed under Web_Design

I have been using Macromedia products for my web site production for years. I just recently found a new way to design that has made my life a lot easier. Prior to the “Layers” feature, I always found it difficult to make a page look the way I wanted it to due to the fact that I had to put everything into tables or just position my images around my text and hope for the best. Now, Dreamweaver offers this killer shortcut to making a website: Layers. Imagine being able to put anything (text, tables, graphics, whatever) WHERE EVER you want!! This is an absolute godsend in the design world as far as I am concerned.

Now, I just discovered this feature in Dreamweaver 8. There were previous versions of Dreamweaver (MX2004, etc.) that also allowed for this feature. Either way, I am glad that I was able to find it and utilize it because it has made a considerable difference in the design for web sites for me.

The concept is simple: create a new page. To do this you must have first established within Dreamweaver’s site manager a site from with which you will work in. By right clicking on the site name in the properties bar you get a drop down menu with multiple options, one of which is “New File”. Create a new .html file and then double click that file to open it in the main Dreamweaver working window. The next step is to insert your first layer. Under the “Insert” section of the top tool bar go to “Layout Objects” and then to “Layer”. A little blue box will appear on your page. If you click on the perimeter of the box you get these little squares around the perimeter of the box allowing for resizing. You will also notice a small square in the upper right hand side of the new layer which when you click your mouse button on this square it allows for you to reposition the layer to where ever you wish to place it on your site.

You can now place anything you want within this box (layer) including text, flash movies, graphics, tables, library items and so on. The most awesome feature of this is that you have total control over where it is placed on your page and Dreamweaver will automatically write in the html code the exact X & Y coordinates that your browser will translate to show the page properly. It doesn’t get much better than this.

I found this feature to be very similar to working in Adobe Photoshop because with layers you have total control over every aspect of the design, without the stress associated with web design.

Now say you want to add some text to a layer but the text runs far off the page or far off the size of the layer box size you chose. Well Dreamweaver has resolved that issue as well. In the properties inspector at the bottom of the screen you have a drop down box labeled “Overflow”. If you drop down this box you have a few choices, Visible, Hidden, Scroll, and Auto. For the example I am explaining here you would choose “Scroll”. This tells Dreamweaver to write in the code that if your text over flows the size you designated for the layer box to insert a scroll feature allowing your visitors to scroll down the text to read whatever you placed in that layer box. Pretty slick!!

Other features with using layers is that you have a choice to name your layers in the Layers Tab on the upper right tool menu as well as setting the succession of each layer. I do highly recommend that if you decide to use multiple layers that you save yourself a major headache and label each layer in accordance with what it is related to on your screen. This makes editing the layer later on much easier.
Layers allow you to have the freedom within web design that should have been there all along. I suggest you give this a try and play with it and see what creative things you can come up with. Go nuts with this feature and have fun with it. You never know what will come out now that the boundaries have been dropped!

Other features that are pretty slick are the ability to overlap two images on a page. If you were doing an artistic presentation or something similar, this is a kewl feature which can be turned off on the upper right hand side of the “Layers” Properties box. Just put in a check mark under “Prevent Overlaps” and then you don’t have to worry about it. Dreamweaver will automatically make sure that nothing overlaps in the layers. However if you did want to have an overlapping effect of say two images, then make sure that the Prevent Overlaps is unchecked and you will further unlock the magic of this wonderful feature.

In closing, this is a really awesome feature, but it takes some getting used to. It breaks all the rules of what we had previously learned that we could and couldn’t do with web design. This takes that to the next level without making you reach for the aspirin.

A few other options include a command called “convert layers to tables” and “convert tables to layers”. On the top tool bar in Dreamweaver, if you go to ‘Modify’ - Convert - you have the two options I just mentioned. Clicking on convert layers to tables will automate Dreamweaver to start calculating down to the pixel how to design a table out of the information you have given to it by placing layers on the page in certain areas. This feature is mainly used for those web surfers who have a browser that is not up to date (i.e. Version 5 or earlier of Internet Explorer or Netscape) The new versions of most major browsers now support and properly display layer content within the browser window. But if you think that your target audience might not have updated browsers, then you might consider this feature. Personally I don’t use it because it is rare that people nowadays have outdated browser technology with all of the Automated Windows Updates and all.

The exact opposite if you choose convert tables to layers. If you already have a site and you built it in tables, choosing the option to ‘convert tables to layers’ will do just that.

I hope that this helps someone out who is doing their own design and wants to make their page look the way they envision it in their head without the stress of worrying about how to construct the right table and arranging things in that table to make it happen. Web design is moving forward and Macromedia has put the fun back into web design again!

Scott has been a web site designer for over eight years now and his artistic vision and creative skills have earned him quite a few satisfied customers. His innovative and easy to navigate sites have been applauded by the many who have hired his services. He currently has built over 100 web sites and maintains them for his clients. Aside from Web Design, Scott is also an accomplished photographer shooting pictures for Willie Nelson, the Dalai Lama, and Goldie Hawn, as well as fine art photos.

http://www.houstonphoto.net

Share This

Comments