Responsive web design is a must nowadays. Given the increasing number of people using their mobile devices to do research before buying a product as well as to catch up on the latest news, your business can't afford to have a non-responsive website.
When you add to that the fact that Google favors mobile-responsive websites in their search algorithm, it becomes clear that responsive design is here to stay. If you're just getting your site off the ground, the tips for responsive web design outlined in this article will help you design an attractive and responsive site. And if you’re redesigning an existing site, the same tips will come in handy as well.
How to Implement Responsive Web Design
The following tips for mobile website design and responsive design will help you make sure your site is both responsive and mobile-friendly too. Here are some of our best tips for responsive web design:
1. Learn How Your Visitors Use Mobile
Understand that people will use websites differently on desktop computers than on mobile devices. Consider surveying your website visitors or using analytics to figure out why they're accessing your site with a mobile device and which pages and elements they access the most. This information will help you understand which pages and other elements of your website need to be readily available on smaller screens.
For example, if they're doing a quick search of your site to access your contact information, then making sure that your Contact page shows up on mobile navigation is a smart choice.
2. Plan Your Design First
Before designing your site, it’s helpful to plan the layout first. In fact, most web designers start by creating a wireframe and then the visual design of the website before moving onto the coding part. Not only will this help you create the exact look and feel that you want, it will also make it easier for you or your designer to customize the template and integrate it seamlessly with your brand.
Be sure to create several prototypes of your website and test them on various screen sizes to ensure the end design will be responsive. Here are a few tools that you use to create responsive prototypes:
- Adobe Edge Reflow. Adobe’s tool makes it possible to visually design a responsive website by converting Photoshop files into HTML and CSS and allowing you to adjust the design using mobile breakpoints.
- InVision. Thanks to InVision, you can create interactive prototypes of your website. Users with a link can test the navigation, buttons, scrolling, and more and leave you feedback. It’s a useful tool for seeing how your website would behave in different contexts.
- Wirefy. This tool comes in handy if you want to base your design on your content first. It allows you to use a responsive grid and create a wireframe of your site without having to manually calculate widths and percentages.
3. Be Careful With the Navigation
The navigation is the most important part of any website. It serves as a roadmap for your visitors and allows them to easily access other pages on your site. On desktop versions of your site, your navigation will usually have visible links to all the important pages. On mobile devices, the regular practice is to use a hamburger icon and hide the links behind it.
However, this isn't always the best approach as some users may not realize they need to click the icon to reveal the menu and leave frustrated as they can’t visit other pages. A better approach would be to leave the most important menu items visible even on smaller screens and using the hamburger menu for the rest of the links. You can also include links to other pages in the text on your homepage to facilitate the navigation.
4. Optimize Images
Images play an important role in your website’s design. They can help you make an emotional connection with your visitors and allow them to visualize the product they're interested in buying. As such, it’s crucial for your images to be optimized for the web.
This means the images should be saved in the appropriate format - JPG for photographic or scenic images and PNG-8 for icons and logos that require a transparent background. On top of this, you should reduce the image size using a tool like TinyJPG and consider using images that are optimized for various mobile breakpoints to reduce scaling and bandwidth issues.
5. Consider a Mobile First Approach
Another way to approach responsive design is to design a mobile version of your website first. This allows you to see how the images, text, logos, and other elements will look on smaller screens. If they display without problems, then you shouldn’t have any problems adapting your design to larger screens.
6. Learn How to Use Media Queries
Media queries were first sketched as a part of the initial proposal for CSS, but didn’t become a reality until browsers added official support for them in 2012. The main role of media queries is that they allow you to optimize the layout of your website for various screen widths.
When using media queries, the content will respond to different conditions on specific devices. In a nutshell, a media query will check for the resolution, width, and orientation of the device and display the appropriate set of CSS rules. An example of a media query looks like this:
@media screen and (min-width:500px) {
your CSS rules here
}7. Add Keyboard Triggers in Forms
It goes without saying that forms on your site should adapt to the width and size of the screen. However, you can take it a step further and make sure the input fields trigger the correct type of keyboard. You can easily do so by adding input element to your form fields.
Fields that require text input like name, email, address, and others should trigger a textual keyboard while any input field that requires a number should immediately trigger the numerical keyboard. This improves the overall mobile-friendliness of your website as well as the user experience.
8. Ensure Buttons Can Be Easily Clicked on Smaller Screens
Don’t forget to pay extra attention to the buttons on your website. Because the screen real-estate is so precious, it’s easy to fall into the trap and make your buttons smaller so they fit on the screen. However, this also makes them harder to click.
Make sure your buttons are easy to recognize:
- Use color to make them stand out from the rest of the page.
- Use a rectangle or a circle to represent the button.
As far as the size goes, consider using padding on your button to increase the clickable area. You can also follow Material design recommendation for button accessibility and ensure they're 36dp high. (1dp = 1px).
9. Optimize Typography
When it comes to text, you want to make sure that the text is legible on smaller screens. A good size for your body copy is 16px or 1em and then adjust the size of your headings accordingly. At the same time, you’ll want to adjust the line height of your text to 1.5em to ensure your paragraph lines have enough breathing room.
Another tip for mobile website design is to use a legible font. Avoid decorative or script fonts for body copy or in your menu items because they're hard to read, especially on smaller screens.
10. Use Microinteractions
One of the biggest trends slowly making its way into web design is the use of microinteractions. In previous years, animations and interactive functionality might have been considered "nice to have" for the majority of business websites. However, as designers have become hyper-focused on user experience, the use of animations have really jumped to the spotlight, specifically in forms.
They provide users with quick feedback, which is especially useful on mobile devices, instead of reloading the page--which can bump up your bandwidth usage. Consider this example from an Australian end of lease cleaning company. I reached out to them about their use of microinteractions. Here's what they had to say:
Our checkout form was designed to help Sydneysiders easily get an end of lease cleaning quote. We really wanted to emphasise the fact that it was truly instant and nothing did this more than through the use of a microinteraction. When you request a quote, a receipt animates from behind the form, revealing the total price of your bond clean. We feel that this little "ta-da" moment has really increased our completion rates during the checkout process.
Another great example of microinteractions comes from Le Cafe Noir Studio’s website. Their online store features animated hearts that cross your screen when you add an item to your cart, instilling a sense of immediate customer appreciation:
11. Adopt Frameworks
You can save a lot of time designing a responsive website if you add a responsive framework to your workflow. An HTML framework like Bootstrap used in an HTML template is a nice starting point if you want to design simple, static websites.
You can also take advantage of premade responsive WordPress themes if you want to make a more complex website and incorporate a blog into your marketing strategy. Frameworks such as these are also a great choice if you aren’t an experienced coder but want to do everything yourself.
12. Stick to Minimalist Design
Minimalistic design has grown in popularity over the last few years and with good reason. It eliminates all the clutter, makes it easier for visitors to focus on your content thus improving conversion rates, and helps your website load faster because it uses fewer elements. It also goes well with responsive web design because it can help you highlight important website areas and draw attention to your calls-to-action.
13. Make Sure Your Share Buttons Aren’t Blocking Your Content
Including share buttons on your website can help your content get more visibility and lead to more traffic. However, share buttons can often block your content, making it hard to read on smaller screens. Make sure the share buttons scale nicely on smaller screens by testing them on a mobile device or consider disabling them on screens smaller than 768px.
How to Check If Your Website Is Responsive
Once you’ve implemented the tips for responsive web design above, it pays off to check if your site is now responsive. There are plenty of tools online that will allow you to test the responsiveness of your site. Here are the top three tools that we recommend you use:
1. Mobile Friendly Test by Google
Google has its own version of the mobile-friendly test and it’s rather straightforward. You enter the URL of your website and click Analyze, and then wait for the results. If your site is mobile-friendly, you’ll see a green confirmation message. If it’s not, the test will show you the reasons your website didn’t pass the test and point you toward resources to help fix the issues.
2. Screenfly
Screenfly by QuirkTools will show you how your website will look on different screen sizes. This tool won’t help you out by adding helpful hints and suggestions, however, you can see how your website appears on smartphones, desktops, and even large TV screens.
3. MobileTest.me
Finally, MobileTest.me allows you to choose a particular mobile device, enter your URL, and interact with your site as if though you’re on the specified device. This tool is especially useful because you can see how your website works on a mobile device, test forms and buttons, and understand whether your visitors will have a good user experience. You can use it on its own or in conjunction with the above two tools to make sure your website is truly responsive.
Get Ahead With These Responsive Web Design Tricks and Tips
Creating a responsive web design is no longer optional. It’s a necessity. Responsive web design makes it easier for anyone to view your site without any issues and can impact your brand’s reputation as well as your conversion rates. With the responsive web design tips and tricks above, you’ll be able to make your business website look great no matter which device your visitors are using and ensure they have a great user experience as well.
