Skip to main content
Blog Banner

Responsive Web Design 101

The data traffic on mobile devices is expected to grow 12 times between the years 2012 and 2018! According to a Nielsen study, 46% people use the mobile phone and 16% use the tablet to access the internet. According to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web than via an app.

This iconic rise of the mobile device in the world of internet connectivity has necessitated the adoption of ‘Responsive Web Design’.

Responsive Web Design is a way of writing codes for websites that adapts content to the size of the screen it’s viewed on. Responsive Web Design makes use of fluidic grid design view and lays out pages after requesting the media or device type information. It uses a combination of HTML, CSS and JavaScript to auto-optimize the page content to fit different screen sizes. In responsive design, the HTML doesn’t change, CSS and JavaScript adapt its layout.

Earlier, web design teams had to keep only a few screen sizes in mind when designing websites. But with the many screen sizes hitting the market today, this is no longer the case. Teams now need to design for a multitude of screen sizes. For example, a link that is easy for an iPad user to click on may be difficult for a Samsung Galaxy Note II user. It can also be that the textual content appears very small on the Samsung Galaxy Note II and makes it difficult for the user to read it.

You now know what Responsive Design is. Let’s see what goes into it:
Responsive Design Sizes

Challenges

A code that complies with the standards and applies consistent treatments across your site will make a responsive design a good deal less expensive to maintain eventually. But, like other browser-based experiences, responsive design will involve some challenges that increase the cost and the complexity of the process. However, with the right tools and right approach towards it, you can minimize the risk factor and make the process worthwhile.

You also need to remember that every mobile device will have different internet connection speeds. Home-based connections will have more bandwidth than wireless connections. The former will thus allow for faster browsing and performance of complex interactions. Web experiences need to be designed in a simple and uncomplicated manner with as less of code as possible. This will help ensure an easy experience on various networks.

Content resizing
Planning and modifying content for responsive sites is one more major challenge for designers. Your website content is formatted for desktop browsers that are around 960 pixels wide. The content is not suited for browsers that measure less then desktop browsers. In such a scenario, you will find that images in your content get lost when shrunk, page layouts that have more than two columns of text do not compress well on smaller screens, wide text ranges do not fit well etc.

Mobile device layouts need content that is formatted for their distinctive screen sizes. Resize and format your content without making it a watered down version of your desktop site content. All the text and images on your mobile site should be usable. If you have lot of content to offer, plan your content blocks and pages well and in a systematic manner. Do not make it too hard for users to access the content/pages. When finalizing content for your mobile site, look at its importance in terms of its timeliness (is the content time sensitive?), proximity (does your content’s geographical location matter?), scope of the information (who does it affect?) and scale (how big is the information?).

Fragmentation
This is another challenge for web designers working on responsive design. Gone are the times when there were only a few mobile platforms and browsers. Now it’s a bustling marketplace teeming with numerous, different options. For example, there are different versions of Android and iOS available today along with other mobile software platforms, all of whom make frequent changes to their builds.

The presence of different platforms and browsers is a major potential threat to your peace of mind when working on responsive design. The best way to go about it is to avoid a heavy concentration of motion and interaction in one place. Doing this ensures that coders do not have to add in too many compatibility codes for things to work smoothly. Another positive of keeping the design simple is that it is easier for the end users to learn the working on your design, which leads to better adoption.

Working in collaboration
If you’re open to adapt your design approach when working on responsive design, it doesn’t amount to more documentation than traditional design. A collaborative approach towards responsive design can be great for your product quality and speed up design completion time. A brainstorming session with your developers, web designers, quality team and business strategists will help you build a well planned framework. If you do not work as one team, building and designing a responsive site will become a herculean task with one requirement conflicting with another.

Here are a few links to being you up to speed in responsive web design:

Have you adopted Responsive Design yet? What do you think are the challenges associated with it? Feel free to share your comments!

Team Position²

Position2 is an innovative digital marketing agency that accelerates demand through integrated Content Marketing, Paid Acquisition, and Marketing Technology solutions. Our demand acceleration solutions map the buyer's journey across multiple touch points such as search, social, mobile, media, and email. These integrated campaigns are powered by cutting-edge content creation, digital advertising, web design/development, marketing automation, and analytics. We serve hundreds of clients ranging from VC funded startups to Fortune 500 multinational firms. Our 200-member team is based in Silicon Valley and Bangalore and consists of marketing gurus, engineers, data scientists, writers, and designers.