Responsive Web Design

Designing for multiple resolutions

Responsive Web Design | Challenges | Getting Consensus

A series of devices with different screen sizes: Apple desktop computer, Apple laptop, Apple iPad, Apple iPhone.

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 meant that they are able to display wider content without scrolling than with traditional 4:3 ratio monitors (think of the difference between old tube TVs and modern wide-screen TVs).

More recent monitors and mobile devices now support much higher resolutions.

Mobile Demands Rethinking Assumptions

Shortly after smart phones and tablets began to appear on the market, sites could no longer make assumptions about the resolution or page width visitors would be using. Today the majority of the visits to websites are increasingly viewed on mobile devices.

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 worked fine for 17 inch monitors, but isn't optimal for today's 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 between smartphones, tablets and computer monitors but also within those categories. New devices at different resolutions are being designed all the time, some including higher pixel density than traditional screens.

Return to top

Responsive Web Design

Since device sizes are not a constant, “responsive web design” (RWD) modifies the page content to contain it within the device's viewport irrespective of the device's resolution. This is an imperfect option but is better than displaying content in a manner that makes it difficult or impossible to access.

This site uses RWD to fit content within whatever viewport (or screen size) is used by the device.

Dependencies

RWD depends upon two aspects of Cascading Style Sheets (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 (third-generation CSS) 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.

The idea is to make the site content readable no matter what device is viewing it. The viewer with a modern browser sees the content as it was intended, but on an older browser or device it degrades gracefully rather than breaking the site altogether.

You can see the effects on Alice without CSS, a page designed to show how content appears when CSS doesn't work in the device viewing the page.

Breakpoints

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 to render properly.

Long Single Page Sites

This has led to a increasing number of one-page single-column sites using massive graphics. The site navigation takes you down the page rather to a new page.

Resources

Web design is a rapidly developing field. I suggest you have a look at current information and recent developments.

I've had a number of discussions about what modern web design looks like and there are many opinions. Personally, I'm more concerned with making information available than figuring out what “modern” looks like.

If you would rather take the vertical approach, have a look at Mobirise, a web development tool better suited to that environment.

Testing Responsive Design

Manually resizing your desktop browser to view your site at various resolutions to see where your design breaks is a useful practice while developing the layout. However, if you want to see how your site looks in several common devices, you need to be more precise.

Viewing on Specific Devices

The most effective method is to view the site on multiple devices and in different operating systems:

Chrome, Firefox and Edge on Windows computers.
Safari and Chrome on Mac desktops and laptops.
Firefox and Chrome on Linux systems.
Safari and Chrome on iPhones and iPads.
Chrome and Firefox on Android phones and tablets.

This isn't an exhaustive list and it isn't practical for most designers outside of very large organizations with massive budgets.

Some people are still using Internet Explorer or other legacy browsers.
There are many, many current and legacy browsers.
This still doesn't account for those with visual or other challenges.

Browser trends vary. At one time most people used Internet Explorer on Windows computers, but now Chrome accounts for a huge majority of site visitors (even Microsoft Edge is using Chrome-based engines).

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 setting in the browser's options to enable developer mode. These tools 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.
Google Chrome's Developer Tools (Ctrl+Shift+I) includes performance data.
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).

There are extensions and tools available for various browsers. Check to see what is available for the browser that 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 quickly make site-wide corrections 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 responsive design 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 can 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 visible scroll bar is no longer necessary and detracts from the viewable content. Windows 11 has made similar changes.

Pixels and Monitor Resolutions

Pixels are a unit of measurement, each pixel representing one dot 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 designed with lower resolutions in mind.

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.

Javascript Can Fail

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 or if the device is just too old.

Responsive Design a Better Solution

Responsive Web Design offers a much better solution. The content should still be viewable if the site is viewed using an older computer unable to interpret @media calls or current CSS. The user experience may not be optimal, but is usable.

”Special Needs“ Visitors

Keep in mind that there will always be users that have special needs including colour perception problems and reliance on tools such as web readers that interpret the written content as audio.

Return to top

Getting Consensus

Designing a site for someone that isn't familiar with common web concepts can be challenging. Your job is to explain their business to potential clients and sometimes their staff and customers.

Avoid Jargon

You and your client need to avoid miscommunication, including the use of common jargon Explain things simply, using language everyone can understand.

Understanding Your Potential Client's Business

Be sure you understand what your client is telling you. Use examples from your client's expertise, but don't make incorrect assumptions about their jargon. Interpret what they tell you and covert it into simple concepts for display on their website.

No “Absolute” Layouts

Most assume that websites should have the same consistency as printed documents. All such documents look fine regardless of the methods used to create them. However, web design lacks the absolute control that people take for granted in print. Unless you explain this to your client in term they understand, the client will likely be unsatisfied with your work.

Different Browser, Different Experience

Each browser and each operating system may display content slightly differently. This can be difficult to grasp for those that have never viewed the same site in multiple browsers, operating systems or screen sizes. Most people use a single browser in either a smartphone or computer they're familiar with. By displaying their current site in a smart phone simultaneously alongside a computer displaying the same content they can see the differences themselves.

What if it Fails?

There is nothing more annoying than content that lays on top of other content or doesn't show at all. Features not supported by every browser can fail. It is better if the site degrades gracefully rather than failing altogether.

Developer Responsibilities

Developers need to view their sites using the browsers commonly in use on various operating systems and devices. While I tend to use Firefox for privacy and security, I also view sites in Google Chrome, Edge and Safari.

A CSS Example

Open both Alice with CSS and Alice without CSS in separate tabs or browser windows then compare them.

The content on both pages is virtually identical. The only difference is that Alice without CSS has the CSS intentionally diabled. The content is still displayed in a format similar to how early browsers displayed content.

I'd rather view the page with the CSS enabled. Wouldn't you?

Often screen readers can interpret pages much like you see in Alice without CSS. This can help you understand why extras invisible to most users like “skip navigation” can be helpful.

Related Resources

On this site:

Found this resource useful?