Multiple Screen Resolutions
The Web View Has Changed
The Web has changed much in recent years. Not that many years ago the majority of viewers were viewing websites on desktop systems running the Microsoft Windows operating system in CRT displays 1024 pixels wide and 768 pixels high.
Flat Screens Display Differently
A pivotal shift in the size of displays began when flat screens became more affordable and most desktop users moved to flat panel (LCD) monitors. The new 16:9 ratio monitors means that they are able to see wider content without scrolling than with traditional 4:3 ratio monitors. These newer monitors support higher resolutions at a more reasonable physical size and price.
Mobile Demands Rethinking Assumptions
Shortly after that, smart phones and tablets began to appear on the market. As a result, most sites can no longer make assumptions about how their pages are viewed.
Today about half the visits to websites are on mobile devices and that is increasing.
It's not just mobile or desktop any longer — it's a world of specific device capabilities, screen sizes, and connection speeds, as well as considerations for how the page size affects the user experience in these many scenarios. — DZone
The Problem with Resolutions
The old standard of 1024x768 works OK for older 17 inch monitors, but isn't optimal for those using much larger screens (even digital TVs) or for smaller mobile devices (which tend to shrink traditional webpages 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)
New devices at different resolutions are being designed all the time, some including higher pixel density than traditional screens.
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 depends upon two aspects of CSS:
- the inherited aspects of CSS; and
- 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.
Breakpoints are the sizes of the viewport where the design has to change to accommodate the content. Depending upon your design, there can be quite a range of the number and location of breakpoints.
More complex pages tend to require more breakpoints which has led to a trend of single-column sites that scroll deep to provide the content.
RWD is a rapidly developing field. I suggest you have a look at the information on these pages and search out or follow links to more recent developments.
- The State Of Responsive Web Design.
- The direction of responsive CSS break points.
- Responsive Grid System.
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.
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.
Most will provide information on how the CSS and HTML is being interpreted by the browser and often much more.
- Firefox's Web developer tools (Ctrl+Shift+I) include a Responsive Design View (Ctrl+Shift+M) that displays the site in various resolutions. The Toolbox provides a single home for most of the developer tools that are built into Firefox.
- Microsoft Edge's Developer Tools (F12) include DOM explorer, debugger tool, emulation tool and more. See Microsoft Edge documentation on GitHub.
- 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) includes performance data.
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.
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.
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 and they may not understand the issue they're experiencing.
- 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.
But that may not be an issue for long. Safari was the first to remove the visible scroll bar since scrolling has become so common, particularly on mobile devices, that the reminder is no longer necessary and detracts from the viewable content.
Pixels and Monitor Resolutions
Pixels are a unit of measurement, each pixel representing one dot of content 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 may create issues with reading the text within dialogue boxes and 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.
Responsive Web Design offers a much better solution.
Even if the site is viewed using an older computer that is unable to interpret @media calls or current CSS, the content should still be viewable but the user experience may not be optimal.
”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.
Updated: February 6, 2016