desktop screen resolutions

Trends in web design: Responsiveness and touch screens

Screen Resolution

desktop screen resolutions
How desktop and laptop screen resolutions increased over the years from 640×480 (red) to today’s larger screens with a wide variety of resolutions (blues).

For years, we were designing web pages for monitors that were 640 pixels wide. It was such a relief when we could widen our designs for 800 pixel monitors. A few years later, it was safe to shoot for 1024 pixels (about 995 pixels plus room for the scrollbar). Meanwhile, we had to make sure our sites didn’t look too different from one browser to another. Internet Explorer rendered things differently than other browsers such as Netscape (remember Netscape?) and Firefox.

Finally the browsers are behaving better, but screen sizes have gone crazy. Stats for one client’s site shows that 2,350 visits in the last month came via 149 different screen sizes, from 240 pixel phones to big monitors over 2500 pixels wide.

Enter Responsive Web Design

Responsive website
Responsive website showing desktop and mobile versions. Note menu button on mobile.

Responsive web design refers to the layout’s ability to adjust to the width of the browser window, usually to a particular maximum. At smaller widths, the sidebars move to the bottom or disappear. The menu collapses to one button which expands when you tap or click it.

Fortunately most tablets are at least 1024 pixels wide if you turn them sideways, so our old websites work, sort of. Although it’s easy to zoom in and swipe around a page, such maneuvers do not provide an optimum user experience.

Hover effects: an unresolved issue

Another unresolved issue is how to deal with hover effects, as you can’t hover on a touchscreen device. It may take a couple of years before a widely accepted and understood method emerges to replace the hover effects that you’ve come to know and love on your desktop computer with a point and click device (a.k.a. mouse).

How – and when – the increased use of tablets and smartphones starts to impact your website depends on your business or organization. A downtown café would need a mobile website sooner than someone who builds custom homes, for example.

WordPress as a solution

WordPress-based website for Boss Solar of Toronto
WordPress-based website for Boss Solar of Toronto

In the last couple of years, I’ve been building all my new and redesigned websites on WordPress, using a responsive theme structure with a menu that works on a touchscreen, and includes a customizable mobile version that displays if the window is smaller than a certain size.

There is a future-proof aspect to using WordPress. New trends and developments will get incorporated into either the core of WordPress, the many themes available, or the third-party plugins that extend functionality.

Here are a few WordPress sites I’ve built, with more information about the world’s most popular content management system (CMS).

As a solo freelance web designer working in a constantly-changing medium, I have to choose which of the available technologies to learn in depth so that I can offer value to clients. At this point in history, I choose WordPress.