Web Responsive Tips

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.

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.

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.

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.