7 Considerations for Responsive Web Design Projects

Corey Pensky - April 26, 2016

Before responsive web design existed the easiest way to have a mobile friendly site was to have two separate websites, a desktop site and a mobile site. Primarily the mobile site would live on an m.website.com domain or a /m or /mobile domain. One of the main issues with this having to redirect all of your desktop URLs to your mobile URL. No one likes trying to go to a specific page on your desktop site, only to be redirected to the mobile homepage, having to find your way back to the content you were looking for. Sadly, many search engines still don’t rank mobile sites high enough for mobile users, so people are often guided to full sites instead of the mobile ones, which offer a superior user experience.

Another issue is that Google will penalize you for having the same content twice. That means you would normally want to have different content on your desktop and mobile site since they are using two different URLs; they are read as two separate pages. So having the same content would penalize you in Google search results. To fix this you can add a canonical link to the page that shows the search engine which is the preferred version, but this is just another item you would have to address to each and every page that is duplicated.

Now, with responsive web design, the idea of having to maintain two separate pages (desktop and mobile) is gone. We can now make the desktop and mobile website one in the same. Using breaks in the CSS we can define how a site looks depending on the width or type of device. This allows us to use the same code, content and URL as the desktop site, just with some CSS and jQuery modifications. The results in Google are now mobile friendly and the need for any kind of redirect is gone. Following are 7 considerations before getting started with a responsive website design project.

1. Plan

A responsive site requires a lot of planning. It may make the most sense to hide some content on mobile that is available on desktop. These kinds of things need to be well thought out and planned, so everything will flow and look correct no matter the screen size. Before you head to the drawing board you may want to take mobile first into consideration. Mobile first is exactly what it sounds like. A lot of times if you design a website from desktop down, you end up having to take out some of the most important aspects of the site or quickly realize you need some reorganization of the desktop site. Mobile first is there to prevent this from happening. Mobile first means designing an online experience for mobile before designing it for the desktop. Build up instead of down!

2. Adjust the font size

One thing a lot of developers forget is to adjust the font size accordingly. If the developer doesn’t adjust the font you could be stuck with huge headlines and small text on mobile. The last thing you want is for your user to be squinting. You can manually adjust the font within your media queries, use a jQuery plugin like fittext, or use the scalable em unit which is relative to its parent. If we set a base font in the html selector we should be able to adjust all the other fonts accordingly using different size ems to adjust. On mobile all we need to do is adjust that one em number on the html selector and it will automatically adjust all the fonts of the children. Example:

3. Button sizes

On a mobile device real estate is at a premium. Make your buttons large and clickable with a finger. Make sure your buttons are at least 50x50px. You should also use padding as opposed to margin on your buttons as it decreases the chance of clicking on white space and increases the tappable area.

4. Screen orientation

Make sure to test your site on both landscape and portrait orientations of your phone. Often your site will look great on portrait only to have some issues on landscape. According to statistics, landscape orientation wins over portrait orientation 59% to 41%. Design your site to look good on both orientations, but pay more attention to landscape. Make sure that your images aren’t stretched by making them the size of the largest single column break point you have (usually 768px width).

5. Removing jQuery

Some things like homepage carousels may be better removed on mobile and replaced with one static image. This can significantly reduce page load, by not only removing the animation script, but also removing 3+ images and replacing it with one single image.

6. Font icons and SVGs

Try to use font icons like fontAwesome or svgs for icons where appropriate. This will cut down on load time and, since they are vector based, won’t become blurry and distorted regardless of size. You can also eliminate lengthy text areas with appropriate iconography which is helpful considering space is at a premium on smaller screens.

7. Test on physical devices

Using emulators and chrome devTools for your responsive design is great, it helps tremendously and is instrumental in responsive design. But nothing is like having the physical device in your hands. Interacting with your site on actual devices will give you a real-world feel on how your website works, either confirming your choices or showing where you need improvements.