As consumers’ standards rise, building your website with responsive web design (RWD) is a basic website requirement.  In fact, nearly 60% of all Internet access was from mobile devices in 2016.  And in the U.S., 25% of web users rarely use a desktop to access the internet.  That means that over half of your users may come from mobile, while 1 in 4 people will never even access your site from a desktop.  If you’re still on the fence, check out this article to better understand how important responsive web design has become.

Despite this growing global trend, 91% of small businesses still don’t have a responsive, mobile-friendly website.  This is almost definitely damaging their business, especially if your target customers include millennials.  According to Adobe, 38% of users will stop engaging with a website if the content is unattractive in its layout.  Additionally, more and more people are using two mobile devices at the same time.  This means making your website great on iPhones alone may not be enough.  A responsive design should take into account a plethora of different screen sizes and adapt accordingly.

If you are thinking about building a new website or redesigning your current website, it’s time for you to build it using responsive web design.  Here are some responsive web design rules your site should follow.

Mobile-first approach

What is “mobile-first responsive design”?  It’s a way to design websites for smaller screen size first, and then adjust your website design progressively for devices with larger screens.

Pros of mobile-first responsive web design

You might think, “Who cares where I begin the web design process as long as I can get it done.”  Well, the truth is that a mobile-first responsive website is usually more polished than a not mobile-first website.  Why?  When you start your web design project with bigger screen size, such as desktop, you tend to take advantage of the space and add content that may or may not fit on a smaller size screen.  Also, designing from a smaller screen size forces you to focus on the priority of content, the user flow on mobile, and the core functionality of your responsive website.

Having a mobile-friendly website is more important than ever, due to the rapid growth of mobile device activity.  If you design your website with mobile-first approach, you can avoid most of the common responsive web design mistakes.

The downside

Designing and developing a website with mobile-first method is surely more challenging, and you might miss out some aspects because you are too focused on creating a minimal interface.  Some people think the mobile-first method is reducing the website’s capability and sacrificing user experience for desktop users.

However, a well-designed responsive website should not be less functional on any screen size.  Before you start designing, make a list of the features your site or application need.  Then you can start with the fundamentals and reduce the superfluous design or features in the site.

Make content legible and scroll-friendly

Many times, this problem happens when the images or text are not scaling down or adjusting properly on different size of screens.  It’s very important that every image and block of text should be legible on your mobile website.  No matter how cool your website is, it’s meaningless if users can’t read your content.  Always make the font size, color and line height a comfortable size to read on any size of screens.

Scrolling is the main way people browse your responsive website.  Test thoroughly to make sure your responsive website is scroll-friendly on every device. Testing on a real mobile device is always better than using the built-in browser testing since some issues or bugs can’t be replicated in a desktop browser.  You may encounter scroll catching on your site where users are not able to move past due to areas that are touch enabled (maps, carousels, draggable items, etc.).

Fast load time

When your responsive website takes too long to load, 39% of people will leave your site.  The longer your website takes to load, the more frustrated your website visitors become.  It also affects your website’s conversion rate and make your website looking unprofessional.

How fast should your mobile website be?  Studies show that 4 seconds is the waiting time limit for website visitors, but  2-3 seconds is a good baseline. You can either compress your images, or minify the code (especially JavaScript).  Uploading images that are sized properly is very important too.  Find the largest pixel dimension needed for your responsive website and do not exceed that.  If you only need this image to be 800 pixel wide, there’s no need to upload an image which is bigger than that.  The other thing you can do is losslessly compress your images as much as possible.  This will reduce your overall load time while keeping your images pixel perfect.  The overall goal is to keep the file size as low as possible to have faster load time on your responsive website.

Using a mobile-first approach really helps here when it comes to development as it may significantly cut down on the amount of CSS and Javascript needed in your mobile site.  While coding this way can be a bit annoying, trying to add it after the fact can be messy.

High resolution image

Most of the mobile devices nowadays have high-res displays or HD screens, this means your text will look smoother on it, but if you’re not using high resolution images, they will look blurry and miserable.

Use fonts wherever possible as they scale easily on any device and don’t add additional load to your site.  When using images, make sure you’re using 2x size images for images that need to be retina-ready, especially if they’re something that represent your brand.

Now we know your images need adjustments when they are displayed on different screen sizes, but how can you make an image look great on all devices?  Using a combination of media queries, a good framework like Bootstrap or Foundation and image srcsets, you can easily fix these issues.

Conclusion

With the rise in mobile visitors, if you don’t have a responsive website, this should be your first priority.  Mobile websites are no longer the future, they’re the present and very much a necessity.  The future for mobile is making responsive websites that don’t suck and have better UX design.  If you have any question about building a responsive design website, please leave a comment below or get in touch with us.