Archive for August, 2012

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.

The new Instagram map has killed my desire to geotag my Instagrams

Posted on: August 23rd, 2012 by Fransgaard 1 Comment

Recently Instagram added the “Photo Map” feature to Instagram. As I have been maintaining two hobby maps for years (London Restaurants and Japan Travels) I initially liked the idea and migrated all my Instagram photos to the new Photo Map.

But then I realised two things:

  1. I’m not looking at other people’s Photo Maps.
  2. I don’t use geotagging on Instagram THAT way.

What way?

To me a map is a tool displaying items with a long-term value; for example a museum or a restaurant. If it doesn’t have long-term value the map itself becomes useless as it sends people to items that have come and gone.

For example if I have put an Olympic event on a map a person finding that on the map in a few years will gain nothing from it other that it will clutter the map with noise obscuring the items that DO still exist and have a value.

Even if I did curate my Photo Map I would just be maintaining an extra map. I’d rather I could pinpoint selected Instagrams directly to my Google Maps so all geotagged information I produce was held in the same place.

I use geotagging in Instagram rather differently

With Instagram I will geotag events rather than places, so for example I walked past a big ‘A’ being painted yesterday. Normally I would geotag this in case somebody nearby is interested in big ‘A’s. I would not put it on a map though as I suspect this ‘A’ won’t be around for long. It is relevant now as it is happening right now.

But Instagram has removed my ability to geotag

That’s when it hit me: I can no longer geotag photos on the fly on Instagram unless I put it on the Photo Map! Which I don’t want to do for the reasons above.

Suddenly Instagram has lost some of its value to me by adding a feature!

I have been worried about where Instagram would be heading after Facebook bought it. While Facebook has stated they will let instagram run separately I am sure the Instagram team feel under pressure to “evolve” (and I am using that term very loosely) as fast as Facebook changes their interface.

What do you think about the Photo Map? Are you actually using yours or visiting other people’s Photo Maps at all?


Urban Legends in Digital: The myth of the 1024px wide design

Posted on: August 20th, 2012 by Fransgaard 3 Comments

As digital professionals we all know the most used screen resolution is 1024×768 and as such we should design within the 1024 wide framework, right?

Well, I don’t think so. Let me explain…

Where did 1024px width come from?

To recap an earlier article I’ve written:

In the early days of graphic web design first 640x480px, then 800x600px were considered the lowest common denominator, but around 2004-2005 screens offering 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.

The benefits of designing for 1024px

1024x768px is still seen as the most common denominator and the benefits of designing for 1024×768 are easy to spot:

  • It provides a static grid to design that illusive pixel-perfect design on.
  • It gives a good width that works well with optimal line-length for copy as guided by traditional typography.
  • It creates a natural downward flow for the users, but wide enough for secondary content on the side.
  • … and like it or not we, as User Experience Designers and as the UX industry as a whole, are familiar and comfortable with it.

But it is not right!

Ask these questions:

Q: Is the common screen-resolution denominator of your audience actually 1024x768px?

A: Check screen-resolution stats of your audience before starting. You might be surprised.

Q: Are you designing the interface in Photoshop, Fireworks or a similar tool that produces flat visuals?

A: Flat visuals cannot convey interactive options that modern web design offers.

Q: Why are you designing to a fixed width in the first place? Is it perhaps just because it is easier to control? 

A: Responsive design is the modern way of designing. Letting go of the notion of pixel-perfect design is the first, crucial step.

Q: How does the audience access your site? Are they using computers at all?

A: We are moving towards a world of mobile first. There is a huge increase in people accessing the web via mobile devices in favour of desktops and laptops.  Think “mobile” from the very start.

Ready to shed the 1024px wide chains and enter the world of responsive freedom?

It might be scary letting go of a fixed-width design mentality as nobody can perceive every single configuration of a responsive interface. Plus many veteran web designers remember having tried to create fully fluid designs and failed.

Do create graphic elements in appropriate tools such as Photoshop, but collect the design in prototyping tools such as Axure to help convey the idea of interactivity and responsive design.

If you happen to know a bit of HTML code, use it to your advantage and create HTML mock-ups to convey design ideas.

Above all, the most difficult step is to get rid of the mindset of 1024px. And for me, that has been harder than I thought.

  • How will you use the extra space without confusing the user?
  • Vice versa, how will you limit the content when the space shrinks?
  • Should the buttons change shape for touch-screen devices?
  • How does the text read on interactive TVs?
  • How do you convince the client and their brand/design departments?

Difficult questions but worth it. Welcome to the new world of digital design!