Responsive design is the hot new thing in web design at the moment and rightly so. It creates solutions, which truly puts the users in the center, no matter what device they choose to access the Internet on.
As described in my previous article responsive design caters for different screen resolutions by, at the most basic level, resizing and repositioning content.
More sophisticated responsive design solutions can deliver differently optimized content for different screen sizes.
A simple example of a multilingual responsive solutionBut what does responsive design bring to an international website? Let’s say we are designing a UK-based website about traffic regulations. The main navigation has traffic related buttons such “Speed limits” all designed to fit neatly at the top of the screen.
However, we decide we want to extend the site to cover the rest of Europe in major native languages such as German where “speed limits” is “Geschwindigkeitsbegrenzung”. As you have probably guessed it doesn’t fit the navigation bar design. Re-designing the buttons to be wider is the answer although it is at the expense of a few of the main navigation items... but moving "Contact" to the footer is ok, right?
Following on from the success of the Europe launch, we decide to go global. “Speed Limits” in Japanese is “速度制限” and we now have a main navigation bar with buttons wide enough to fit 36+ letter long words, but with only 4 letters in them!
It doesn’t look great, but it is the best we can do if we want the navigation bar to fit different languages… or rather it was. With responsive design we can deliver different buttons (and different number of buttons) to different regions using different languages.
Region-specific responsive contentDifferent nationalities react differently to content. Red, a warning sign in the western world is a colour of luck in Asia.
Likewise online, people in some countries prefer minimalistic web interfaces with simple task-oriented user experiences, while other nationalities feel more at home in busy interface with lots of options and content. Of course regional broadband speeds play a role in this as well.
Thanks to Twitter friend Jenny Liu for screenshots.
Again, responsive design can help deliver a complex mixture of device specific, language specific and region specific content creating a unique and tailored user experience to the individual.
Looking to the futureWhile responsive design is a new concept it has already taken a firm hold on the Internet, so what do the future hold?
- Weather-responsive interfaces. If the webcam of the device identifies bright sunlight it makes the screen brighter to deliver a legible interface.
- Velocity responsive design: On the move or is your device being shaken? Bigger letters makes for better reading.
- Network connectivity. Is the 4G not what they promised it would be? Deliver a simpler less image heavy interface.
- Touch sensitive design. Interface detecting clumsy fingers results in bigger buttons.
- Altitude responsive design… not quite sure what this would do, but connected with a 3D printer maybe it could present an emergency parachute?