Designing the Table Layout for Multiple Resolutions in Expression Web 4

With the advent of CSS layouts I prefer not to use tables for laying out my web sites. But there are many designers/developers who still go in for tables. Expression Web also gives you tools to build a layout using tables. Learn more about Table Layouts in Creating Layout Tables in Microsoft Expression Web

How will you make sure that your page is rendered properly in browsers using minimum screen resolution or using the highest resolution? Here are some tips of how you can achieve that.

a. Keep at least one column variable

If your layout is made up of 2 columns where in the left column has all navigation links. It is advisable to fix the width of this column and leave the right column to configure the rest available space. This can be applied to a 3 column layout too.

b. Use Stretch Layouts

If you are using the 1024 x 768 screen resolution while designing the page and you know there could be readers who may use a lower resolution, then set your main page content table to a width of anywhere between 90-95%. This will leave buffer space around the table helping it look clean in a lower resolution.

c. Make the lowest resolution as baseline to build websites

If you build your layout using the lowest resolution (800×600) so that the table fits well in it, when viewed in the higher resolution your page will still look nice. To give you a tip, you can set a contrast background color, or add border or a shadow effect to the table to make it stand out from the body. This can be used with the stretch layouts too.

Choose any one of these that suits your requirements.

Filed Under: Expression Web


About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (0)

Trackback URL

Leave a Reply