Tips for creating a mobile-responsive website

Learn how to build a mobile-responsive website that will result in a better user experience no matter what type of device your visitors are using.

Increasingly, people everywhere are using mobile devices to access the internet. The desktop computer, while still relevant, is no longer the primary device used to browse the web. This means that you need to make sure you have a responsive website for both desktop and mobile users.

Mobile-Friendly vs. Mobile-Responsive

Don’t go for simply "mobile-friendly". That just means your website will shrink down to fit the screen, limiting the site’s functionality and readability. While this allows mobile users to view, browse, and use the site, it doesn’t necessarily make it easy. Login and password bars become hard to click, buttons can become squished together, and user experience usually falls flat.

Fully mobile-responsive, on the other hand, means using layouts, text, and images that will automatically adjust to adapt to any screen size. Clickable items are enlarged and pictures are resized and reformatted. This also safeguards the user experience when turning the mobile device from a vertical view to a horizontal view.

Create a Mobile-Responsive Website

Here are some things to consider for responsive website design:

• Use a fluid grid - To make your website mobile-responsive, you’ll need to build it on what is called a “fluid grid.” Some websites are built on a fixed grid, which means that every element on the page is laid out in a fixed position. A fluid grid allows you to add elements in a way that adapts, or changes, to fit the size of the screen your user is viewing your page on. It will automatically adjust the font size of your text, the size of pictures and images, and where they’re all placed on the screen. 
• Prioritize web elements for mobile layout - When viewing a website on a mobile device, you shrink the size of the screen, meaning you automatically have less space to work with. Therefore, you will want to pick out which text, images, and action buttons are important enough to your webpage that they must be displayed on the screen. 
• Think carefully about images - While you build out a responsive website, you will need to create rules that decide how images will be handled on different pages and screen sizes. Because you will have less room when your website is displayed on a mobile device, you will have to decide whether the image needs to be shrunk vertically, shrunk horizontally, placed in a different position on the page, or removed entirely.
• Save room for touchscreens -  In the interest of making your website appealing to every user on any type of device, it’s important that your website is touchscreen-friendly. To make this happen, there are two main things you’ll want to consider: tap target size and tap target spacing. Tap targets are the links or buttons on your webpage, and you want to make sure they are big enough to easily tap with a finger on a mobile device. Tap target spacing refers to the amount of space between tap targets. They should be spaced out with enough room between them that people with larger fingers don’t accidentally hit a tap target that they did not intend to. 

Questions?