Responsive Web Design for the Global Market
March 04, 2013
What is Responsive Web Design (RWD)?
Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from desktop computer monitors to mobile phones). source: Wikipedia
Even before Ethan Marcotte was credited for coining the term Responsive Web Design in a May 2010 article, web designers and marketers around the world were already wrestling with the idea of how to create web pages to display content that could be consumed on devices not yet conceived. The challenge has been to create attractive sites that have a flexible architecture while still containing the rich content and easy navigation, regardless of real estate. In basic terms, it is a website design that automatically adjusts the layout based on any screen size.
Why should I care?
2013 has already been predicted as the first year in the post-PC era. It is likely to be the first full year where we will witness a net decline in worldwide sales of PC/laptops. The wide proliferation of mobile device use have webmasters reeling as they are pressed to create best-of-breed visitor experiences across all screen sizes. The following graph illustrates the widespread use of non-PC devices by country.
Given that the US trails all of the countries listed above, companies operating outside the US will benefit even more from adoption of RWD.
How does my site become more 'responsive'?
RWD is an adaptive layout design that uses CSS3 media queries to dynamically adjust content to fit the destination screen size. This is performed by using fluid proportion based grids and flexible images (marcotte).
Kristina Kledzik at Distilled, an interactive agency, describes the process in simple terms in a recent article on SEOmoz. "Let's start with a simple example on a grid, using 9 rectangular elements labeled A-I. On a small screen, like a tablet or an older computer with fewer pixels, the elements would display themselves in a 3 x 3 grid:"
When the screen is wider, those elements can spread out:
When it's narrower, they can stack:
What complexity does a multilingual website add to design considerations?
Added complexity and design implications are introduced to RWD with multilingual content. Depending on the language, different space considerations must be added to any design element that includes text. If the source language is English, but the content is to also be translated to Chinese you will likely see additional white space appear when displaying the content in most form factors. Conversely, if the destination language is Arabic, the designer will need to make allowances for about 20% space consumption for the translated content. Additional consideration must be paid if right-to-left language orientation such as Farsi, Arabic, Hebrew and others might also be displayed.
Does responsive web design help SEO rankings?
Many websites have made an effort to build mobile websites only to find that it hurt their organic rankings. However, Google announced last year that it was now updating its algorithm to favor websites that take advantage of RWD practices. Many advertisers are still waiting for the needed flexibility to be built into Google AdSense, but it is clear from Google announcements that companies can realize some first-mover advantages by adopting RWD.
Alert GoogleBots through prescribed annotations. Google maintains a developer site to answer specific questions on many topics, including mobile-optimized websites. Specifically related to RWD websites, it recommends that if you use the different HTML approach but the same URL, Google wants you to use the HTTP Vary Header as a hint for GoogleBot-Smartphone to crawl the site.
For those marketers who actively participate in linkbuilding to enhance rankings, Google will recognize your various design considerations as a version of your main site. Thus, your rankings will benefit as a result of implementing RWD. Conversely, if sites are built for individual devices, your link paths will be weaker as mobile-dedicated (m-dot) site links will appear unrelated to your main site links to Googlebots. Simply put, Google will combine all of the likes from interactions on various devices to count toward your main site rather than recognize each as independent websites. And most importantly, an adaptive design is more appealing and easier to use on various devices. If visitors 'stick' to your site after clicking through from the search page, Google can assume that they were successful in directing you to the appropriate website.
Further Information on Localization Resources
Globalization Partners International (GPI) frequently assists customers with multilingual website design, development and deployment. A suite of globalization tools developed by GPI can empower you to achieve your multilingual project goals: you can explore them under the Translation Services Tools. GPI also offers translation services and internationalization, and can evaluate your application. Consider partnering with GPI prior to localizing or translating your application: this will help you avoid many mistakes and save considerable time and money on your localization projects.
To further understand the entire Globalization and Localization process, you should download our PDFs Language Globalization Guides. You may also benefit from our previous blogs:
- Creating Culturally Customized Content for Website Translation
- Website Internationalization and Accessibility
- 12 Steps to Website Globalization
- Personalized User Experience for your Target Markets
- How to Create a Content Strategy for Multilingual Content
To discuss your next website translation project, please do not hesitate to contact us via e-mail at email@example.com, or by phone at (866) 272-5874, or by requesting a free translation quote on your next website translation project.
Currently, there are no comments. Be the first to post one!
Natalie Veis Williams - Global Digital Marketing Manager
Natalie was born and raised in the state of Montana, USA where she graduated from The University of Montana with an undergraduate degree in Business Administration. Her international experience includes two summer programs, one at The European Business School in Germany and the other at The University of Brescia in Italy. She studied a variety of global business subjects including international business, trade, culture and language. Key projects for her undergrad studies included meeting with executives from large corporations such as Lufthansa, Opel, and The European Central Bank as well as working with the design team on the marketing plan for the 2015 World Fair in Milan, Italy. She has a range of global event management experience including organization of the Annual Mansfield Conference on the Middle East and the China Town Hall meeting series. Her hobbies include yoga, cooking, reading, being outdoors and traveling.