Posts Tagged ‘handheld’

4 ideas for Details in Responsive Design

Posted on: August 29th, 2012 by Fransgaard No Comments

The original version of this article can be seen at the award-winning Capgemini – Capping IT Off blog.

I have previously covered what this new trend in digital called “Responsive Design” is, but I have since been thinking about how granular a responsive design can be and it can be quite detailed.

Here are four ideas I have been toying around with:

1: Responsive imagery

Images is a big part of websites and brands so presenting these in the best manner is important. One way to make images responsive is changing the width and height of the images depending on how big the user’s screen is.

This requires imagery which are optimised for the largest expected size and then scaled down visually. However, while the image might fit on a mobile phone using this technique it will still drain the bandwidth as if the image was full-size.

A better option is a server-side system that feeds correct images depending on what device is being used.

This can also work in favour the other way by raising the quality of the images to meet the opportunities presented by a new generation of screens with much higher resolution led by Apple’s retina display.

2: Responsive typography

Just because a website doesn’t repurpose it’s design grid depending on the user’s screen resolution doesn’t mean we can’t make the experience better for large screen users. One way of doing so is by making the typography responsive.

As people with bigger screens tend to sit further back making the font-size larger even in a fixed width scenario seems like a perfectly helpful solution.

Bigger text is also helpful on mobile devices. iPhones have the “Reader” function in its browser allowing users to convert websites into a much more legible format using bigger text size.

This is good for usability but not so good for the website owners as it takes the users away. This leakage can be prevented by the websites themselves providing equally strong typography on mobile devices.

3: Responsive copy

People on mobiles generally don’t like to read as much (it seems news sites are the odd ones out in this) as such it might be worth developing two copy sets; One that’s more summary based, shorter and punchier for mobile devices and one that is more detailed for bigger screens.

In fact, the two could probably be written in clever fashion to work together on bigger screens… maybe every other paragraph is removed from the mobile version.

4: Responsive link labeling

While I have previously argued that “Click here” is not necessarily bad for usability there are still some elements to consider such as; how do you ‘click’ on a touch pad?

With responsive design the link labels could be updated depending on device adding an extra little detail to the overall user experience.

…And other responsive ideas

I’ve been thinking about other ideas; Responsive sitemaps, responsive navigation, responsive colouring (if I can measure amount of sunlight hitting the screen) etc.

At the end of the day the question is: When does it stop being commercially sensible to maintain a single super responsive website over multiple, channel-specific sites?

I don’t have the answer to this yet, but I am excited about where responsive design is taking us as I think for the first time digital is fully breaking away from it’s print-based heritage.

Responsive design – The next evolutionary step in website design

Posted on: March 20th, 2012 by Fransgaard 1 Comment

Image generated using browsersize.googlelabs.com.The original version of this article can be seen at the award-winning Capgemini – Capping IT Off blog.

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 offereing 1024×768 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:

Stadnard 1024x768px

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.

Wider screen resolutions

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.

Narrower screen resolutions

How to move forward with Responsive Design

  1. 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.
  1. 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?
  1. 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.

How do you feel about Responsive Design? What ideas does it trigger? Share your thoughts below.