Web Design & Architecture -- LIS 9723 logo


Extra Information

When you're using the layouts provided by Dreamweaver, you will have all of these options -- just remember those layouts are just a starting point. You can edit them any way you want to.

 

CSS Layouts - Screen Resolution

Screen Resolution

As with all things, you should let your audience help you decide what is the best approach to your design, but your own aesthetic and working style should also guide you. Basically, you have several ways of dealing with the screen resolution problem.

Fixed

The page is designed by pixel measurement, and the columns will stay the same size, no matter your user's screen resolution (display).

Benefits:

  • good if you want a specific look
  • create identical pages, no matter screen resolution
  • want more control over text and images
  • don't want extra-wide reading columns.

Problems:

  • can yeild really tiny designs on larger screen resolutions
  • if you design for too large a resolution, there will be right scrolling (easily avoided by designing to 770 px widths)
  • if your audience increases their text size, this could mess up your layout, or lead to unreadable text wrapping.

Liquid

The page is designed by percentages, so the columns will resize, depending on the screen resolution (display) of your users.

Benefits:

  • more accessible pages
  • pages adapt to the screen resolution of your user
  • want the page to use more of the screen, especially at larger screen resolutions.

Problems:

  • much less control over exact column widths, spacing
  • columns that are too wide to read comfortably
  • fixed width elements (such as images) can cause the layout to get disrupted.

Elastic

The page is designed by relative font size. Essentially, the page is created to be a specific size, like a fixed design, but it can change depending on what your user has set their default font size to in their browser. This is all measured by ems -- or the measurement of a block based on the text size. (Usually, this is 16 pixels.)

Benefits:

  • allows comfortable text wrapping, based on user's choice of text size.

Problems:

  • can lead to right scrolling if ems are set too high.

Hybrid

The page is designed with a combination of these techniques.

Benefits:

  • allows you to use the best choice for each area -- liquid for screen resolution, fixed for reading width, ems for text sizing.

Problems:

  • if you don't get it right, the page can be a mess!

 

Back to Top
Last updated:

Course Outline | Assignments | Exercises | Schedule | Resources & Links | Lab Tutorials

About the Site | Site Map | About Mark | ©2013-2014 Mark A. Rayner