Design website's for all screen resolutionsNot everyone uses the same monitor and settings

Two different people could be viewing the same website, but did you know that each person can see the page differently?

When designing a website you need to remember that everyone will not have the same monitors, settings, and browsers as you. Just because your design looks sweet on your monitor and resolution, it does not mean it will look good on mine.

You and I could have the exact same monitor, but we may have chosen different settings specifically to what we like. If I prefer my resolution set to 1024 x 786, and you like your resolution set to 800 x 600, will a website designed in or for 1600 x 1200, work nicely on our monitor screen resolutions? The answer is yes and no. It all depends on how the designer made the website. If the website is fluid, and considering the images within the website are under 800px wide with 100% font sizes then yes a fluid website would fit. If it was set to have a table width of 1600 pixels wide then anyone under that resolution would have to scroll to the right to see the full page. Yes, this was confusing, but I will explain more about this below.

The same two makes of monitors are viewing the same website

Example image Fixed vs. Fluid page design:

With all the different types of computers, monitors, and styles out there today we need to design our web sites so that all resolutions can view the website properly.

Jane's computer monitor is 22" and she prefers her resolution settings set to a high resolution of 1600 x 1200.
John's computer monitor is 22" and he prefers his resolution settings set to a lower resolution 1024 x 768

Notice how John's fluid designed website fits his viewable settings perfectly on his 22" setting of 1028x768.
Jane's on the other side shows the fixed designed web page up in the left side of her 22" monitor setting of 1600x1200.

You can clearly see that Jane has wasted space on her monitor and John does not. Would this mean that Jane's monitor settings are just bigger and is causing this all of the time? No, not always and that all depends on how the website was designed.

A website designed with a fixed width of 800 pixels wide would mean everyone viewing the site will see it fixed at 800 pixels wide. Jane's monitor above is a perfect example of an 800 pixels fixed width website. Now look at John's monitor of the same website. This time the website was not made to be 800 pixel wide, but rather it was made to be 100% fluid. This means that if Jane was to load that very same fluid designed website she would see it fill her screen, and the same goes for John.

As a viewer of the website do you have a choice to view the website fluid? Unfortunately that option is left with the original website designer. The examples above show you what the website looks like in a fixed 800 width, and again in a 100% fluid design width.

Why would someone want to design with a fixed setting? The answer is that it is easier for the designer and they have more control over the final design. When would a designer like to use a fixed website style? A designer that likes to design their web sites as a layout in Paint Shop Pro or Photoshop then slice up the layout to produce a website would also want to use a "fixed" design. If you made a layout in a graphic design program that was 798 pixels wide, you could open up your HTML editor, and make a 800 pixel wide table, and the layout as a whole would easily fit into your table. We offer a video tutorial on how you can design a fixed website layout with Paint Shop Pro, and you can find that in our tutorials section.

Why would someone want to design a fluid site? A fluid website generally takes more time because you are going to use some basic math when designing your layout. You will design your website to fit inside a container that is set to 100%. Why would you want to go with a fluid site? Well video cards getting better every year, and that means computer owners will use higher resolution settings. We would want to design a fluid website so that any visitor to our website can make use of their full screen. Serious webmaster's know how valuable their page space is to their website's, and to waste room on a monitor screen can be costly to the website owner.

How do I design a fluid website? To design a fluid web page you start by placing all of the contents of the website within a container that is defined as "100%" instead of 800px (pixels.)

Examples of using fluid settings are shown below.

Software Website Design Top Pick Software

I am often asked what software do I use or recommend. I first explain that whether you're brand new to web design or you have a decent amount of experience that my advice is to begin with a professional program from the very beginning. I tell people do not waste your time learning how to use just any HTML editing software. It is logical because I hate to see people waste their time on mediocre software when they could have just saved time and money by using Adobe Dreamweaver CS4 - Full .

Dreamweaver is what professionals use all over the world to design website's. Dreamweaver is easy to use once you get the hang of it. I've had people write to me and thank me for recommending this software to them as they said it was easy to learn once they started to learn more about the program. Dreamweaver comes with a complete help section that you can read directly within the program and you do not have to waste money on costly tutorials, schooling, or books. In my opinion Dreamweaver has become priceless to me, and I am sure if you gave it half the chance you would feel the same way.

Dreamweaver comes with several templates that cater to fluid web design. I hate to see people waste money on those cheesy click and drag so called HTML web design programs. Dreamweaver is the only way to go if you're serious about your website designs.

See more Newbie 101 Web Design Tips and Choices