Pin Me

How to Create Web Pages That Can Be Viewed in Any Resolution

written by: S. R. Obbayi•edited by: Amy Carson•updated: 1/7/2011

Here I show you just how easy it is to create web pages to be viewed in any resolution using a simple one line technique that will work in any web browser new or old. Keep reading to see how it is done

  • slide 1 of 5

    Introduction

    Even though it is easy to create web pages to be viewed in any resolution, it is good to know that there are a couple of ways to achieve this. These include using the HTML tag attributes as well as using external CSS layouts directly or indirectly through JavaScript. For the purposes of this guide, I am going to use CSS directly. This method is simple and promotes good design practice of web pages by separating implementation from design.

    Whichever way to choose to design your web pages there are three basic types of layout. These are Fixed layouts, Fluid layouts, and Semi-fluid layouts.

  • slide 2 of 5

    Choosing your Layouts

    web page in low screen resolution The layouts you can choose for your web pages can either be fixed, fluid or semi-fluid. Fixed means that the size of the web page elements remains the same regardless of the Window size. Fluid layouts can be stretched or compressed together with the Window size and screen resolution. Semi-fluid layouts are layouts that can can have portions stretched out to meet the demands of the screen resolution and window size.

    The key to be able to create web pages to be viewed in any resolution lies in the last two options.

  • slide 3 of 5

    Design Tips

    The first thing you need to do is launch your favorite HTML editor because this is going to be your main tool. You can find information on some of the various HTML authoring tools here.

    Next you need to be aware of the CSS commands that deal with width sizes. As the width is the most important in determining how well your web pages fit the screen resolution. CSS uses the "width" property within the style attribute to set the measurements. Properties include examples such as...

    #id1{width: 400px;} or #id2{width: 100%;}

    The first property with the 400px width is a fixed layout which does not change even if you change the screen resolution. To make the Width of any element in your web page scalable you need to set your width in percentages (%). This translates to mean the width of the element named id2 will scale up to 100% of the parent container.

    The behavior of dealing with measurements as a percentage can be exploited to keep your web page scaled to the size of your window. Remembering that the 100% represents how much space of its parent it takes, you can wrap all your content in a top level container and set the containers id to the one you define your width. It would work something like this.

    <body>

    <div id="id2">

    Content here...

    </div>

    </body>

    Here what we have simply done is create a wrapper with an id of id2 and set its properties to be 100% of its parent container <body>. Body by default is always 100% of the containing window.

    Now if you place all your content within the <div> wrapper it will be scaled along regardless of you screen size.

  • slide 4 of 5

    Images

    web page in high screen resolution You may also want to be careful when dealing with images in fluid layouts. The images will not scale with the surrounding content and therefore care must be taken to minimize the size of the image.

  • slide 5 of 5

    In closing

    That is all it takes to create web pages to be viewed in any resolution. Just remember to keep element sizes as percentages of the container they will reside in, and most important, wrap all your content into single <div> container placed immediately under the <body> tag.

    You may also want to try an implement CSS background images in your web page and also see the interesting thing you can do with your element borders.