How to Find the Best Web Host for Your Website
The Types of Text Display on a Website
Develop Page Templates for a New Website

What Are the Constraints of Web Page Design?

You need to be able to identify the constraints involved in designing a website before diving into the few basic principles in page design that are common to most effective sites. The most fundamental of those constraints is that you can’t fix where objects will appear on a viewer’s screen.

What is the point of designing a web page if you can’t define where objects will appear on a viewer’s screen? The point is, you can define where things appear onscreen, but you can do so only relative to the viewer’s viewing environment.

Even though this is a web-centric world, people's conceptions of design tend to be framed by print design, where a billboard is always the same size, a newspaper ad is always the same size, and a magazine cover is the same size no matter who is viewing it, or where they are reading the magazine.

However, people see a website’s pages in different viewports — that is, different-sized screens. And so you have to design pages that will appear in mobile phones and maybe even projected onto wall-sized displays.

A page designed for, and viewed on, a full-sized monitor.
A page designed for, and viewed on, a full-sized monitor.
The same site, but with a design optimized for mobile viewing.
The same site, but with a design optimized for mobile viewing.

Another constraint of website design is that unlike print designs, where the viewing area of any design is fixed, web users can (and do) zoom in or out as they interact with a web page, changing the size of text and images. And, by the way, different browsing environments handle zoom differently — some enlarge images as text is enlarged, and other times enlarging text doesn’t affect other page elements.

Here are three basic techniques for carving out the maximum control over how pages look in different environments:

  • Start page design with a container that will hold all your page content.

  • Design flexibly. Account for the fact that viewers will stretch and distort your designs. If you design with flexibility — for example, taking into account that text will expand as a user zooms in on your page — you can create page designs that bend but don’t break when they’re viewed in different environments.

  • Create unique page design or content for full-sized and mobile sites.

blog comments powered by Disqus
Prepare To-Do Lists for User Testing on a New Website
Types of Visual and Interaction Design for Websites
How to Create iPad-Friendly Mobile Web Designs
How to Hand Off a Project to a Client
Effects that You Can Make with Cascading Style Sheets