Expandable Website Design

Earlier there were only limited types of screens so the websites were displayed without any hassles. Now with the time charting further and technology becoming highly advanced, more and more designer and high resolution screens are being used. Most of the web sites are created only for one type of resolution but different people use different resolutions. The need of the hour demands that a website that is under construction should be such that it should work in all resolutions. Visitors having higher resolutions have to scroll less and thus can see more content within one page. We provide you with steps to create a web page or site that will fit in all screens.

Steps to design a website that will operate in all kinds of resolution

 Step 1:   The Lowest Screen Resolution should be decided upon
The first thing you have to do is to select a lowest screen resolution and design the website keeping the same in mind. The important smallest resolution that is widely used is the 800 x 600 resolutions so all websites should be made to fit resolutions equal or higher than this.

 Step 2:  Web Site to be designed on this Resolution
After deciding upon the lowest resolution, graphics have to be designed for the decided resolution. Then after the designing of the website images are exported.

Step 3:  It should be assured that all the tables are measured in terms of percentages
This is a very important trick for developing a website for all resolutions. Do not work in terms of pixels, instead make use of percentages. Percentage provides you a relative measurement and hence a table gets easily fit in all screens whatever might be the height and width. The percentage can be chosen at your own fancy depending upon how much white space you require around it.

Step 4:  Measure cells in the table (in pixels) except for the Content Cell
All cells must be given a fixed measurement (in pixels) except the content cell, which can be kept blank.

Step 5:  Insertion of Content and Images
After your tables are designed, images and content have to be inserted. The commonly used layouts have on the top left corner a logo and the navigation buttons on the top right. A more complicated layout demands background fills while designing a website. For all resolution web sites images have to be positioned accordingly. The most convenient principle that can be followed is to put fixed images on the top left and right corners.

Step 6: Testing of the site in all the Resolutions
The final step will be the testing of the site in all resolutions. Steps to check the proper working are: -
  • Right click on your Desktop →click on Properties amidst the set of different options
  • Click on Settings tab
  • On the Desktop click shift the scale to 800 x 600, 1024×768 or higher if needed
  • After choosing the resolution, check the site by clicking on the Test button
  • If you are able to clearly see the bitmap then click on Apply

After the successful testing of your website in all resolutions, it is assured that you have developed an ideal website. This will make your site more accessible and thus in turn lead your business towards new heights.

Posted on January 18, 2010, in Web Design and tagged , , . Bookmark the permalink. 2 Comments.

  1. Sheryll Edeline

    Liked the blog.Very informative and to the point.You will surely see me around your blog quite often as I like improving my knowledge.

  2. Matthew C. Kriner

    I wish I had this level of knowledge and experience. I’ve been struggling in this area for sometime and not able to break through – this information could be exactly what I need, thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.