Russ Harvey Consulting - Computer and Internet Services

Multiple Screen Resolutions

Web View | Responsive Design | Challenges | Getting Consensus

The Web View Has Changed

The Web has changed much in recent years. Only a short time ago the majority of viewers were viewing websites with the Microsoft Windows operating system in displays 1024x768 (1024 pixels wide and 768 pixels high), usually on 17" LCD monitors.

There has been a pivotal shift in the size of displays in the last few years. Most desktop users moved to flat panel (LCD) monitors as prices dropped. The new 16:9 ratio monitors means that they are able to see wider content without scrolling than with traditional 4:3 ration CRT monitors. The new monitors support higher resolutions at a more reasonable physical size and price.

Shortly after that movement began, smart phones and tablets began to appear on the market. As a result of this move, most sites can no longer make assumptions about how their pages are viewed.

The Problem with Resolutions

The old standard of 1024x768 works OK for older 17" monitors, but isn't optimal for those using much larger screens (even digital TVs) or for smaller mobile devices (which tend to shrink the page to fit the screen and therefore become unreadable).

To further confuse things, resolutions differ between devices quite markedly as seen on this database of device resolutions:

Portable Device Resolutions

At the moment these general guidelines will work with portable devices:

  • Mobile portrait (320x480)
  • Mobile landscape (480x320)
  • Small tablet portrait (600x800)
  • Small tablet landscape (800x600)
  • Tablet portrait (768x1024)
  • Tablet landscape (1024x768)

but new devices are being designed all the time.

Return to top

Responsive Web Design

That's where “responsive web design” (RWD) comes in.

RWD modifies the content to suit the viewport (screen size) as it decreases or increases. Since device sizes are not a constant, we should look at how we can modify the page content to fit correctly as resolutions shift.

RWD Dependencies

RWD depends upon two aspects of CSS:

  1. the inherited aspects of CSS; and
  2. using @media to determine the device's capabilities.

Because older devices and browsers may not correctly read CSS3 or recognize @media calls, we'll have to build the site so that the content displays in a readable format without these capabilities, THEN modify the content to display as we want in devices that DO recognize these.

RWD Breakpoints

Breakpoints is the term used for the sizes of the viewport where the design changes to accommodate the content. Depending upon your design, there can be quite a range of the number and location of breakpoints.

You can used the information about resolutions found in the upper part of this page or use other resources to determine them.

RWD Resources

Because RWD is a rapidly developing field, I suggest you have a look at the information on these pages:

Testing RWD

Manually resizing your browser to view your site at various resolutions to see where your design breaks is a useful practice while developing the layout.

However, when you want to see how your site looks in several common devices, you need to be more precise.

Browser Tools

Most modern browsers have some sort of developer tools available in them. You may need to change the configuration or look for the settings in the browser's options, but they are there.

  • Firefox's Web developer tools provides a Responsive Design View (Ctrl-Shift-M) that displays the site in various resolutions.
  • Internet Explore's Developer Tools (F12) provides for a desktop or Windows phone browser profile and a variable user agent string (how the browser describes itself to the website).
  • Google Chrome's Developer Tools (Ctrl-Shift-I) provides information on how the CSS and HTML is being interpreted by the browser.

Web Developer Extension

The Web Developer Extension for Firefox, includes a “resize” option that will automatically set the browser window to various sizes including responsive layouts or tell you what width your browser is currently set at. You can add various other widths to test your pages.

There are other extensions and tools available. Check to see what is available for your browser and works for you.

Return to top

Design Challenges

As you can imagine, there are some considerable design challenges involved. Thankfully, with the separation of content and layout, we can make corrections as needed as techniques are invented to deal with these challenges.

Display Considerations

There are a number of other considerations in determining how to display your site content. Hopefully, you'll be using RWD to take care of these potential issues:

  • Not everyone has their browser set at full screen — windowed browsers are more susceptible to problems with large resolutions. Users can change this easily, but it may be inconvenient.
  • There will be users with much older equipment running much lower resolutions.
  • Folks with vision problems may be using software like ZoomText® that effectively displays at lower resolutions on larger screens (typically 640x480).

Don’t Forget the Scroll Bar

Be sure to leave room for the vertical scroll bar.

  • For example, a page with a fixed size of 1024 pixels wide will require a vertical scroll bar even at full screen at a display resolution of 1024x768 once the height of the content exceeds 768 pixels.
  • At that point, a horizontal scroll bar will appear to compensate for the new vertical scroll bar.

Pixels and Monitor Resolutions

Pixels are a unit of measurement — each pixel representing one dot of colour on the monitor.

Obviously, the larger the area a set number of pixels is spread to, the blurrier it will appear to the viewer, so people tend to use higher resolutions (larger numbers of pixels) as the size of the monitor increases.

Very high resolutions are uncommon because Windows doesn't yet provide an easy way to alter the size of displayed text so people tend to choose resolutions in which they can see the largest screen real estate and still read the text in dialogue boxes and their programs.

Designing for Multiple Resolutions

It then follows that people are going to see your web pages on various different sizes of screens (and in varying colour depths).

It is not unusual to see a site designed for a larger screen become unnavigable when viewed at a lesser resolution.

Many sites use Javascript or other means to determine the size of the viewer's screen and adjust their content accordingly. This will fail if Javascript is not enabled.

Responsive Web Design offers a much better solution.

”Special Needs“ Visitors

Keep in mind that there will always be users that have special needs such as colour perception problems and reliance on web readers for the blind.

Different Browser, Different View

You need to check your websites out on several browsers — particularly Firefox and Internet Explorer. There is nothing more annoying than trying to read text that overlays other text or content that disappears altogether.

This is something that is sometimes very difficult to grasp for those that have never viewed a site in multiple browsers, operating systems and monitor sizes.

Alice's Adventures in Wonderland Without CSS (an example used elsewhere) shows a page where the information is not rendered as expected.

This is how pages can fail that depend upon proprietary features supported by only one browser when viewed in another browser.

Return to top

www.RussHarvey.bc.ca/resources/pixels.html
Updated: September 4, 2014

Websites and Internet services are viewed on many devices with many screen sizes

Getting Consensus

If you're designing a site for someone that isn't familiar with commond Web concepts, you might find it a challenge to do without the jargon.

”Where is the Internet?“

Many folks have never viewed the Web with anything but Internet Explorer opening at the Microsoft default start page.

If you show them computer with a different default browser opening on a different start page they'll ask, “Where is the Internet?”

Forget Absolute Layout Control

Most people are familiar with creating printed documents that look fine regardless of the methods used to create them.

They sometimes fail to grasp that most web designs lack the absolute control that people take for granted in the print world. Each browser and each operating system can display things slightly differently.

Begin with the Basics

You'll have to use terminology and concepts they understand.

You often have to explain things simply, using language they understand.

Using examples from their own area of expertise can work as long as you don't make incorrect assumptions about their jargon.

Return to top

Related Resources

Related resources on this site:

or check the resources index.

Return to top


If these pages helped you,
buy me a coffee!