Image generated using browsersize.googlelabs.com
If you have been involved in procuring a website chances are you would have heard pitching web designers say something like:
“A screen resolution of 1024X768px ensures that your new website is displayed correctly to the vast majority of users”.And they are correct… or they were?
How did 1024x768px screen resolution become the standard?
In the early days of graphic web design first 640x480px, then 800x600px were considered the lowest common denominator, but around 2004-2005 screens offering 1024x768 resolutions became widely available and affordable.Around the same time the public in general started browsing the web, which made companies aware of the value of being online. This in turn resulted in a surge in the industry of graphic-driven interfaces and a process of creating static templates in ‘designer’ tools such as Photoshop was established.
These factors all played a role in establishing 1024x768px as the most common screen size.
Why a new era in digital design is required
However, the 1024x768px methodology is rapidly becoming outdated as on one hand people are getting bigger and bigger screens and on the other hand people are also increasingly accessing the web via the smaller screens of mobile devices.The result is the group of people who get maximum benefit of a fixed 1024x768px design is getting smaller every day. The question then becomes: How do we maximize the user experience for all users?
Modern web design is Responsive Design
Simply put Responsive Design repurposes content for different screen sizes. Let’s look at an example of how this could affect a website following a traditional three-column layout:
With wider screen widths traditional three-column design remains fixed. However, by applying Responsive Design the layout modifies itself in steps adjusting it to different brackets of width.
Shown are two potential steps. The first step expands the width of the main content area. As the screen gets even wider the second step is deployed and both expands the width of the right-hand column as well as adds additional content to make best use of the increased screen real estate.
Vice versa, as the screen becomes smaller Responsive Design can modify the layout and repurpose content to avoid horizontal scrolling.
The opportunity is also there to remove content as well as deliver content that is specifically tailored for a specific screen size. Even changing the flow of the design from a traditional navigation-driven web design to a task-oriented process ideal for mobile browsing is an option.
How to move forward with Responsive Design
- Look screen resolutions stats for your users. Group related screen resolutions together to determine key layout configurations. Look at usage vs benefit of low-use screen resolutions.
- Plan for responsive delivery from the start. How much bandwidth is there to produce tailored content for different layout configurations? What are the benefits does tailored content bring to the user journeys?
- Let go of the utopian ideal of the pixel-perfect fixed design and embrace the new world of Responsive Design to the benefit of your users.
