RWD Rocks. But Only If You Get It Right

We simply can't keep our hands off the Internet. Whether at home, work or outside; the Internet follows us wherever we go. With more than 60 percent of all mobile users in the U.S. now on smartphones, it is hard not to talk about the mobile Web. 

The mobile Web leads us to the most important factor that contributes to a great user experience - Responsive Web Design.

What is Responsive Web Design?

Responsive Web Design or RWD is the process of creating websites that work perfectly visually and in terms of usability across various screen sizes. In other words, RWD creates 'device-agnostic' websites which look and work equally well on all types of computing devices.

The pre-cursor to responsive web design was mobile websites, e.g. entire websites created just for mobile devices. These would look entirely different from their desktop counterparts, had different URLs, different navigation and completed unrelated existences. 

Responsive Web Design on the other hand builds websites that work on the same URL across all devices, are pretty similar in design and layout and share their entire site architecture. 

Why Responsive Web Design?

While we all acknowledge that mobile Internet access is overshadowing desktop Internet usage (especially for certain tasks), many among us still question the need for a responsive Web. 

For starters, it is cumbersome. It takes a lot more time and effort to create a responsive website than does a pure desktop or pure mobile site. Since it takes more effort, developing responsive websites can also be more expensive than vanilla websites. 

However, responsive Web design has a lot more going for it than the negatives against it. Let's take a look.

1. Better UX

User experience - that holy grail of Web design - is best on responsive websites. You wouldn't know the difference when you're on a desktop, but try accessing a non-responsive, non-mobile website on your mobile phone or tablet. The incessant scrolling vertically and horizontally, the need to magnify everything and the frustrating 'fat fingers' effect on small touchscreens is enough to put off anyone from accessing such a site on mobile.

Responsive design takes care of all these qualms and more. 

2. Better Conversions

When overall user experience and navigation on responsive sites is easy, activities like submitting forms, downloading data or making transactions becomes automatically easier.

Beauty brand NARS switched to responsive Web design in 2013, for example, and found that their conversions on smartphones showed an instant jump of 56 percent. 

3. Consistent Experience Across Devices

A user who regularly visits your desktop site can be totally thrown off guard on visiting a mobile site that looks nothing like its desktop sibling. This is a problem that is deftly handled by RWD. 

RWD allows you to create sites that look very similar in design and all other Web elements, with just the layouts shifting to accommodate bigger or smaller screen sizes. This maintains familiarity and strengthens your brand identity. 

4. Better SEO & SEM

Responsive sites have the same URL for mobile and desktop versions. Users are not redirected from the main site to the mobile version, allowing PPC campaigns to all lead to the same location.

The behind-the-scenes meta data, site architecture, navigation and URL structures remain consistent. This means all your SEO efforts drive traffic to the same site essentially, instead of splitting traffic between your desktop and mobile sites. Every time an update is made to the site, you don't have to do versions of the same change. Once is enough and takes care of all types of devices. 

To top off all of that, both Google and Bing recommend responsive design. 

5. Easier Analytics

As the backend infrastructure, links, call-to-action (CTA) buttons, forms and URLs are all the same for mobile and desktop sites in a responsive website, tracking its performance becomes simplified. The clicks, impressions, referral sites etc. do not get split and can be easily measured and tracked. 

6. Cheaper

While responsive design is admittedly more expensive to execute initially, in the long run the maintenance, upgrades and conversion efficiency of RWD makes it hands down cheaper than having to maintain a desktop site and a mobile site. 

In case you do not have a mobile app already, a responsive website is a great choice. It transitions beautifully from desktop to mobile and saves you the expense of building dedicated apps for each type of operating system in the market. 

Getting Responsive Web Design Right

Responsive Web design is not just a 'good-to-have' feature, it's more of a 'must-have' in today's times. According to Kentico Digital Experience Research:

• 76 percent of smartphone users and 78 percent of tablet users return often to websites that look good and work well on their mobile devices. 
• 44 percent will never go back and 52 percent won't return often to websites that aren't optimized for mobile.

The basic aim of responsive design is to rearrange Web content in a way that matches the capabilities of the device being used while still providing a consistent user experience across all devices. 

So how do you ensure you don't mess up your responsive design? By getting your basics absolutely spot on. 

The 3 Building Blocks of RWD

1. Flexible & Fluid Grids

As you know, grids are used in Web design to give structure to the content on a page. Fluid or flexible grids allow the content to expand or contract based on the available screen sizes. 

Fluid grids define a maximum width for the design and all inside grids are expressed as percentages of the maximum width instead of absolute values like pixels or points.

While calculating the percentages of the grids puts off many designers, it does not have to be so hard. Here are step by step instructions to build a fluid grid from scratch. 

However, you don't always have to build fluid grids from scratch. You can always take your pick from free fluid grid generators like:

‚Äö√Ѭ¢ Tiny Fluid Grid

‚Äö√Ѭ¢ Fluid Grids Calculator

‚Äö√Ѭ¢ Fluid Grid by Bootstrap

2. Flexible Media

The various media elements that go into a page - images, fonts, margins and padding - also need to be flexible to allow a smooth transition from large desktop screens to smaller mobile or tablet screens. 

Keep your image sizes manageable - they need to be high quality enough to look great on all screen sizes, but they also cannot be too heavy to load on slow mobile devices. Instead of scaling image sizes in CSS, crop your images to be as small as you can without compromising on image quality. In certain cases, you would be forced to use images of different sizes for different devices. Take charge of these using scripts like Picturefill or Adaptive Images. 

Boring system fonts are rapidly being replaced by novelty fonts. However, fancy fonts use more space to be clearly legible. With space at a premium on mobile devices, consider going with sans serif fonts that are more easily readable in smaller font sizes. Give enough space between your text and your letters to allow for easy readability on smaller screens.

In case of spacing, text size should be determined basis screen width. Go with 50-75 characters per line on desktop sites and 35-50 characters per line on mobile devices. Line spacing is usually kept at 140 percent of font size. You may choose to increase line spacing depending on the fonts used and the amount of text present on the page.

3. CSS3 Media Queries

CSS3 Media queries are used to pull information about the device being used and to serve different CSS styles based on this information. They apply relevant CSS styles based on the screen size and browser size. 

Put simply, CSS3 Media queries serve a CSS style that matches the screen size detected. The most dominant screen sizes are 480 pixels, 768 pixels and 1024 pixels. However, there are always outliers. 

5 Bonus Tips

1. Go mobile first. Most designers find it easier to design for a small screen first and then expand their design for larger screen sizes. This ensures that all vital elements that go into the site are mobile friendly and maintains the visual consistency between mobile and desktop versions. 

2. Stick to simple layouts. Avoid five- or six-column layouts, as converting them into a single column layout for mobile screens will be a real pain. 

3. Avoid complicated navigation, drop-down menus - they become difficult to use on smaller screen sizes. 

4. Use larger site elements. Keep site elements at a minimum of 44 x 44 pixels to allow easy clicks and navigation on smaller screens  

5. Drop the fluff from your site that does not add real value to your user. Stuff like ads, site counters, pop up banners, fancy widgets etc. are all avoidable.