Responsive Web Design (RWD) became an important trend as web professionals sought to provide a consistent user experience to the rising use of mobile devices and tablets.
Last year, we saw the tipping point for digital media where more time was spent on mobile devices (51 percent) than the desktop (42 percent).
This staggering change was anything but a surprise.
And the trends in mobile web use continue upward as evidenced by other statistics:
- 80 percent of Internet users own a smartphone
- 67 percent of consumers are willing to buy a product or use a service on a mobile-friendly site
- 89 percent of people admitted to searching for a local business on their smartphone once a week or more with 58 percent searching at least daily
- U.S. adults spend an average of two hours and 51 minutes a day using mobile devices
- 40 percent of searchers will click another mobile result if a site’s not mobile friendly
So if that’s not enough reason, consider the fact that Google really likes responsive web design. According to Joe Ardeeser of Jordan Crown Web Design, “Google is penalizing website owners because their page isn't responsive. Some of the latest algorithm updates for the search engine are factoring in whether a website is mobile friendly and responsive. This has made a big impact, in our case actually helping us climb in rankings because some of our competitors’ websites aren't mobile friendly and have gone down on Google.”
Related Article: One Size Fits All: How Responsive Web Design Helps Get You More Conversions
It is evident that making your site mobile friendly is a must. Professional firms are working hard to ensure that their clients pick the best technology available and understand the importance of making your website responsive. Here are some of the ways you can implement responsive design:
Planning for RWD
Before you get to the actual design phase, it helps if you think of this process as making your website fluid to meet the different screen sizes that your visitors will use. So first, you need to decide on the breakpoints you will be designing for. Commonly, you are going to want to include a min-width and a max-width for:
- Smartphones, both portrait and landscape (at least less than 480px)
- Tablets, both portrait and landscape (at least less than 768px)
- Common desktop screen resolutions (greater than 768px)
Once you determine the breakpoints you are designing for, it’s time to sketch out some wireframes. These visuals can help you determine where the different elements will fit in as the screen shrinks or expands. You want to see how it will look as three columns on a desktop flows into two on a tablet and then one on a smartphone.
Get Flexible
Media queries, defined by the breakpoints you established, detect the size of the browser a visitor is using. To make the website flexible, you need to rely on a layout for your site. Early on in responsive design the grid systems were fixed and divided into a set number of columns like 12 or 16 with the columns growing more narrow as more were added.
Related Article: Informative and Visually Appealing: 5 Important Website Design Considerations
Since screen sizes now range from a hand held device to a large screen television, more flexibility is needed so fluid grid systems are the way to go. Instead of a layout based solely on pixel size, the fluid grid has a set number of columns, but then each element of the site is designed with proportional widths and heights instead of pixel based dimensions.
While making your site flexible, it is important to make sure you don’t neglect any images. When creating your stylesheets, make sure to assign a max-width to any images in your design using: img {max-width:100 percent}. This snippet of CSS will resize the images to 100 percent of the width available in their parent elements so they will scale according to the size of the visitor’s screen.
In addition to the images, you want to include code to make sure that your visitors’ mobile devices don’t offer a zoomed out version of your site. If you don’t set the viewport to instruct the browser to display the site based on the screen size, not make an assumption as to what it should be.
This can be done by adding <meta name="viewport" content="width=device-width> to the <head> tag. This sets the viewport width to the layout width of the device. Since IE10 decided to ignore this meta data, you will also need to add the following viewport rule to your CSS:
@viewport{ zoom: 1.0; width: device-width;}
Make It Mobile Friendly
Going responsive doesn’t automatically mean your website is mobile friendly. It may scale to smaller screens, but there is more to good user experience than just moving the elements around.
One key element to remember when it comes to RWD is that at your smallest breakpoint your site should be no more than one column wide. Remember, the average space needed to tap a mobile screen is 44px. It's easier to fit all of your elements into a long, linear page that the user scrolls through than trying to force them to navigate using small links and buttons.
While you are thinking about mobile users, remember that responsive design allows you to eliminate elements as you reduce the number of columns using conditional loading in the CSS. Hide any non-essential content as your screen real estate begins to scale down.
Test, and Test Again
If you have designed your site, you should notice how easily it scales as you resize your browser window. That, however, is not a sufficient test. Make use of different testing tools available to you from your editing tool as well as the different automated testing tools out there. Of course, you should also test your site on as many devices as you have access to.
Related Article: How to Identify and Correct Problems in Your Web Design
The goal of every website is to create the best experience possible for its visitors so that they can find exactly what they are looking for. When people can’t access the pages on your site, they get frustrated and leave. Instead of trying to mold your mobile experience into a specific box that might render well on all devices, why not adopt an approach to mobile web design that ensures that your site will scale perfectly to your visitors screen no matter the size of the display or the platform the device runs on. Only with responsive design will you not have to worry if your visitors are going to leave because things just don’t look right and don’t work on your website.