Web Design Tips and Tricks

How To Supercharge Your Website

Get Web Design Tips and Tricks on mps-web-design.com. How To Supercharge Your Website topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

I am often asked “Jason, I get people to my website, but nothing happens. What am I doing wrong?” Is this you? Did you build a website only to have people come and leave? If so, you can still save your website. By following some tried and true rules, your website can become supercharged and be all that you envisioned.

First, we need to dispel one myth. The Internet amazes almost no one anymore. When I started in the early 1990’s it was a whole different story. Today, the Internet is a major force in our lives. Instead of saying things like “Wow! Look at that!” we are saying “Been there, done that.” However, some people know this and go to the wrong extreme by over complicating their website.

Rule One: You are not an artist.

Ok, maybe you are, but you still don’t need to use every available color and font in the known universe on your website. Take a look at any newspaper. How many colors and fonts do you see? Many are black and white print with a splash of color here and there. Their type is sure and steady. The USA Today is one of the more colorful papers out there and even they don’t go nuts with color.

If your website is a visual car wreck, your visitors will end up leaving. Your website could look like a piece of art, but if the message gets lost, it is a waste of space. Keep your colors simple and pleasing to the eye. If you look at some of the most successful websites, you will notice they usually have a simple color scheme.

Rule Two: Your website is not a puzzle.

Have you ever been to a website for the first time and seen information all over your screen? If so, you most likely felt overwhelmed and you probably left. Here is a fact. The more orderly your website is in regards to content layout, the more focused your visitor will become on the content. Content that is not in an orderly fashion is sometimes coined as “hip”, but the end result is a less focused visitor.

Does this mean you need a plain boring website? Of course not. However, due care is warranted when laying out content. I would like to direct your attention to the newspaper again. Most newspapers use grids to layout their content. Look at the newspaper. Even though it has a wealth of information, you feel right at home. This is the same effect your website should have.

Spend the extra time and figure out how you can best lay out your content. Always design with the first time user in mind. Keep navigation as a top concern. You don’t need fancy flash buttons and other doodads. If the visitor can not use your website with ease and minimal distractions, all is lost.

Rule Three: Keep your focus.

How many websites have you went to that spend valuable homepage space welcoming you to the website? Think about this for a moment. Why is this necessary? What could be put into its place? When a new user goes to your website, you have literally seconds to interest them enough so they stay. Do you want to waste that valuable time with a welcome message?

When you turn on TV to watch your favorite show, does the show start off by welcoming you to Channel X and Show X? Of course it doesn’t. The whole point of this section is to illustrate just how important space is. You do not have the luxury of time to have fluff on your website. Your ad copy (text/images) must be lean and mean.

Another common mistake I see on ecommerce oriented websites is the whole “who we are” speech on the homepage. When a new visitor comes to your website, they don’t care who you are. They care about what you can do for them. Keep your focus on the visitor’s needs and not your own. Before you spend time talking about yourself, you need to give the visitor a reason to care. Because of this, it is best to put all your text about your company on other pages. There is nothing wrong with putting a blurb about your company on the homepage, but it should be limited and to the point.

If you find yourself at wits end, it is time to call in the experts. My company, MarketJunction.com, can help you. Are there more than three rules you ask? Yes, but I selected three very important ones for you in this article. My website, JasonAMartin.com, has more informative articles. Follow these three rules and you will be well on your way to a supercharged website.

Copyright 2005 Jason Andrew Martin LLC

This post was originally published on May 13th, 2004. As others are writing about the topic, I thought bringing it out of the archives would be worthwhile.

A little recap

The idea of placing multiple states of buttons and other elements that are used in background images took its roots, I believe, from Pixy's Fast Rollovers. The CSS Zen Master extended this to another purpose in CSS Sprites: Image Slicing’s Kiss of Death. Didier Hilhorst came up with a nice application of this method, and I worked it backwards in Responsible CSS - Recycle your background images.

The idea behind the 'sprites' method can obviously be extended to any html element, and there are tangible benefits for doing this, just as long as the designer does his or her usual homework.

Benfits of using the 'sprites' method

What are the possible the benefits of using this method? Essentially it lies in faster download times for your web content.

Readers of Andy Kings book, Speed Up Your Site: Web Site Optimization will notice that this method reduces http requests and makes more efficient use of the data packets used to transfer files to the users computer, and that that is a good thing.

Packet size and http requests

From Web Page Design and Download Time, by Jing Zhi of Keynote Systems (seen here - pdf), cited in Andy's book:

The basic performance principle is therefore to make fewer requests and transmit fewer packets. From this principle, we can derive two basic design rules for wellperforming Web pages. First, reduce the overall size of the page, thereby reducing the number of bytes (and packets) to be transferred over the Internet. Second, limit the number of embedded objects on the page, such as images, each of which must be requested and transferred separately from server to browser.

They also found that it was the number of packets and not necessarily the overall size of the page that was important. If a packet could hold 1460 bytes (the figure given in the article) and your object was 1600 bytes, it would require two packets. They found that this object would transfer at the same speed as another object that was greater in size but still fit in two packets.

Potential payoff

The potential payoff for using this method versus individual images, then, is a faster download time due to reduced number of packets and fewer http requests.

Reducing http requests is easy. One file instead of two or three etc. is simple. But packet requests? That depends...

An example

The number of packets sent will depend on the size of the file and the users internet connection.

As an example, lets look at the fiftyfoureleven.com logo at the top of the page. When this design was first being coded, that link consisted of two 3.34kb images, one for the link state and one for the hover state. Now, by using one image that contains both states and simply bumping it back and forth depending on the hover state, that has been reduced to one 5.35 kb image. Right there is a savings of 1.33 kb. Good news.

Now, for arguments sake lets say that a packet can hold 1460 bytes (packet size for connections greater than 128kb/s = 1500 bytes -40bytes for tcp/ip headers). The two image method used 6 packets, 3 for each image (3.34/1.46, rounded up). The single image method uses 4 packets (5.34/1.46, rounded up).

Things are looking good.

How to optimize

In his alistapart article, Dave refers to the image that holds all of the sprites as his 'master image'. The key to benefitting from this method is to ensure that the file size of your master image isn't a bloated equivalent versus the sum of its pieces.

Conclusion

Great benefits can be realized when combining a master image from slices that fall well below the size of one packet, as that unused packet space goes wasted.

After doing a little more research, it seems that packet size can vary depending on the connection rate. That being said, it may be rather difficult to come up with a firm rule here. To play it smart and safe, try and:

• build master images that are smaller then the sum of their collective slices (by combining images of similar colors, for example) or
• rather than use a different distinct image for a certain element, reuse one that you already plan on using elsewhere.

This isn't exactly groundbreaking advice, however having seen the results acheived with the logo on this page, it can be seen that using the sprite method versus individual images at minimum does reduce http requests and even further it can reduce file size which in turn can reduce the number of packets sent.

More Articles: