Website visitors are using an increasing variety of devices, from smart phones, net books, and tablets to desktop PCs and home theatre displays. This trend is not going away and it poses a question for web developers, “How can we make the user experience equally good on as many different devices as possible?”

When we ask, “Is a site mobile-friendly?” we don’t mean, “Is the site visible on mobile phones?” What we want to know is, “Does the site offer a good user experience on a small screen?” Many (if not most) websites still require the user to repeatedly zoom in and out in order to navigate on a mobile phone. This does not equate to a good user experience.

There are two ways to address this issue:

The First Option is to build two completely separate websites.

The first site would be built specifically for small screens, and this would be the mobile site. The second site would be for larger screens, such as desktop computers. The browser may automatically detect the type of device and deliver the appropriate site, or the user may be invited to visit different addresses depending on the type of device they’re using.

Sometimes the content the user is likely to want or need differs depending on the device being used. It can be advantageous for the mobile version of a site to have fewer options and less depth. Content may be more concise, and the number and size of images may be reduced to lessen bandwidth and download time.

The Second Option is to build a website with a flexible framework that automatically adjusts to fit the user’s screen.

This is called Responsive Web Design, and for many, it is the most practical option. By using a fluid layout, a single website can be easy to use regardless of the device.

Fixed Width Layout

This is an illustration of a fixed width layout on a smart phone (left) and desktop monitor (right).

Fluid or Flexible Width Layout

This is an illustration of a fluid or flexible width layout on a smart phone (left) and desktop monitor (right).

Many websites are still built using a fixed width layout. This means that the width of the content is always the same, regardless of the width of the browser window. One sign of a website built this way is when reducing the width of the browser window causes a horizontal scroll bar to appear. With today’s screen size diversity, fluid layouts make more sense. A fluid layout uses relative units to specify the size of each element on a page, and the relative positions are adjusted depending on the size of the display.

If you’d like to learn more about Responsive Web Design, email [email protected] or call 518.392.0846.

Pin It on Pinterest

Share This