Gilmore Design Group :: Design InSight February 2006

	*February 2006*

Happy Valentine's Day!
This month, we'll be showing you everything you need to know about monitors, including: sizes, resolutions, and how different resolutions will affect how visitors see your website. We'll also take a look at the second part of our three part series on balance.

As always, if you have any questions or comments, please send them to info@gilmoredesigngroup.com. You can also view past issues of the Design InSight newsletter at www.gilmoredesigngroup.com/company_newsletters.html.


www.shihtzurescueohio.org

Client:	Ohio Fuzzy Pawz Shih Tzu Rescue

Project:	Website Design

Services

	Project Management
	Website Design
	Website Development

Objective: To create a website for this non-profit organization that will solicit donations in a fun, yet professional way, while giving breed information and adoption information for these adorable and needy dogs.

Solution: By keeping the colors light and fun we were able to play up the adorable Shih Tzu photos to let the dogs really stand out and steal the show. Since donations are so crucial to this non-profit rescue organization, we placed donation banners on many of the pages to cross-sell and hopefully solicit more donations.

Testimonial
"We are absolutely thrilled with our new website!

Christine Gilmore and her staff are professional, prompt and courteous. None of us had any previous experience with setting up a website, and Christine walked us through the process, step by step. She designed a beautiful website for us, and we could not be more pleased with the results.

Thank you very much"

- Joan, Ohio Fuzzy Pawz Shih Tzu Rescue.

Balance
(Borrowed from daphne.palomar.edu and typography-1st.com)

Part Two: Symmetrical Balance
Symmetrical (or formal) balance occurs when the weight of a composition is evenly distributed around a central, vertical or horizontal axis.

A symmetrical layout is likely to give a feeling of permanence and stability and produce a more static, restful design. However, because a centered layout is so static, it is very easy to make it pleasant yet boring.


Balanced but not interesting

Symmetrical balance can be used to your advantage if you are designing something that is emphasizing trust and quality, however it is extremely difficult to make a symmetrical layout visually interesting and exciting. Therefore, many designers choose Asymmetrical Balance which allows them to create designs with excitement, which can impact the audience in a more dynamic way.

Next month, Part Three: Asymmetrical Balance. Stay tuned!

Screen Resolution
When talking about screen resolution, we are talking about how the pixels are displayed on the screen. To define it, the pixel is the smallest element of a video display that has the shape of a square. The default number of pixels per inch on a computer monitor is around 72.

In your Windows Control Panel you can choose to display a different number of pixels horizontally and vertically on your screen. For instance you may set your screen to display 640 pixels across by 480 pixels down, called "640x480". You might also choose 800x600 or 1024x768.

Now if your default is 640x480 and you change it to 800x600 you will have more pixels, so you may wonder how they all fit on the same screen. In order to do this, the pixels get smaller (more of them fit into one inch). If you change your settings to 1024x768 you get even more pixels per inch and they get even smaller.

Changing to a high pixel count (i.e. from 640x480 to 800x600) is often called setting your monitor to a "higher resolution".

In the example above, the current screen resolution is set to 1280x1024.

Physical Monitor Size:
Monitor size and optimal screen resolution are closely linked. As you increase the resolution, the screen elements appear smaller. In fact, the information contained on a 15-inch screen set to 1024x768 may be so small as to be virtually unreadable. But the same information displayed at that resolution on a 17 or 21-inch monitor would look fine.

That's because a 15-inch monitor set to display at 800x600 pixels has a higher resolution than a 21-inch monitor set to the same display. That means a 200x300 pixel image will look smaller on the 15-inch monitor than on the 21-inch monitor.

Below is a chart that shows the optimal screen resolutions for a monitor dependent on its physical size:

	14"	15"	17"	19"	21"
640x480	BEST	GOOD	TOO BIG	HUGE	TERRIBLE
800x600	GOOD	BEST	GOOD	TOO BIG	HUGE
1024x768	TOO SMALL	GOOD	BEST	GOOD	STILL GOOD
1280x1024	TINY	TOO SMALL	GOOD	BEST	GOOD
1600x1200	TERRIBLE	TINY	TOO SMALL	GOOD	BEST

Question:
Screen Resolution- what's the difference, what are my options, and how do they affect how visitors see my website?

Answer:
Let's start first with defining screen resolution. The term "screen resolution" refers to the number of individual pixels that fit within a given space. When we're discussing an 800x600 resolution, the number 800 refers to the number of pixels that the monitor can display horizontally, while the number 600 refers to the vertical limit. For more information on monitors and screen resolution, take a peek at the Technical InSight in this newsletter.

Now, about monitor resolutions and websites: It is true ... how your visitors have their monitors set does affect how they see your website.

So what can you do to make sure that your website looks good for all your visitors?

The best way is to plan ahead. As many of you may know, before we begin any website design project, we will always ask our client which resolution they'd like to optimize their site for. The most common resolutions include:

640x480

800x600

1024x768

Printable Resolution

Every site needs to have what's called a "target resolution", or, the one resolution the site will look best at. When deciding which resolution your site should target, it's best to keep your customers in mind.

If the majority of your customers are technologically savvy, they will most likely have flat panel monitors which default at a resolution of 1024x768 pixels and higher. In this case, you can more likely than not go with the highest resolution. However, if your customers are still on traditional monitors, and perhaps are still running their favorite monitor that they purchased in good old 1999, you might be better off using a target resolution of 800x600. And if your customers are really "old school" and are still using their favorite monitor from 1996 or earlier, then you may want to consider 640x480.

The average resolution to design for these days is 800x600. So, if you don't know what else to choose, 800x600 is a good default. However, if you feel that your visitors will be printing out many of your web pages and you want to make sure they print out on one page without cutting anything off, then your site will need to be designed for 660x880, which is called Printable Resolution.

No matter what you decide, understand that the resolution you choose should represent the lowest common denominator in terms of your visitors. If you know that only 10% of your visitors are using 800x600 and the other 90% are using 1024x768 or higher, and you don't need your site to be printable. You then need to make a decision whether or not you will design for the 10% or the 90%.

The truth of the matter is your site will always look fine at the higher resolutions but people at the lower resolutions will, most likely, see vertical and horizontal scroll bars on your site and will need to scroll both horizontally and vertically to see your entire page. Horizontal scrolling and vertical scrolling on the same page is a very bad thing. It confuses and frustrates the visitor which is a fatal mistake. This is what we call a no-no in the web design world.

Keeping this in mind, it may be best to design your site for 800x600 so you'll be sure 100% of your visitors will see your site and it will look good overall. Remember, keeping your customers in mind is always the right way to go and will always lead you in the right direction.