Five Tips to Improve Your Responsive Website Design

Did you know? According to an article by HostingFacts.com, there were 3.7 billion global internet users as of January 2018. That number has continued to climb ever since. It goes without saying, but I’ll say it anyway. If your business has a website today, it 100% needs to be responsive so that it will load and function correctly on tablets and mobile devices of all shapes and sizes. Furthermore, it should be optimized so that a users mobile experience is the same or better than the desktop equivalent.

With so many factors to consider and implement when making a website responsive, we’ve seen a lot of missteps and just downright incorrect ways of doing things. Here are the top five biggest issues we’ve seen and how to fix them.

5. There Is No Mouse

It might sound ridiculous to say, but we constantly see pieces of website design specifically for desktops without a mobile equivalent. Keep in mind there is no mouse, and that means no hover functionality. If you have information you have to hover to reveal on a computer, you need to make sure there is a click/tap state for the responsive version. Also, users are browsing your website with their fingers, mostly their thumb. The most important elements of your website (menus, call to actions, click to call, etc.) should be easily within reach of the user’s thumb at all times. After all the back button is…

4. Not All Devices Are Created Equally

Your visitors will be loading your website on a wide variety of tablets and phones. The problem is, not all devices are created equally. They’re all different sizes (especially including rotation states), with different browsers, and different functionality. This creates challenges that have to be solved to create a successful responsive website. For example, one of the best things you can do to cater to varying size is creating multiple breakpoints. We recommend at least 3 breakpoints based on width, small (under 600px), medium (600px – 900px), and large (over 900px). Along with breakpoints, you should consider all browsers (Chrome, Safari, Firefox, and Edge to name a few) users may use, gestures available on each device, and other actions like rotation a user may perform while browsing.

3. Create a Fluid Layout, Especially Text

Along the lines of creating breakpoints for your website, every element of every page needs to be optimized for a mobile-first layout. The most important of those elements being text. You should be mindful of text including headings, lists, paragraphs, and overall amount used along with line-height and other spacing factors. To create the best user experience, most text elements need to be scaled down or minimized from their desktop counterparts. The best way to do this is to utilize percentages and browser size to calculate font sizes instead of using something finite like pixels.

2. Speed Optimize Everything

When users are browsing your website from a mobile device, they could be doing so from a slow 3G mobile network with almost no service, or random WiFi connection. The biggest issue with these networks is their unreliability when it comes to speed. You’ve all been on Panera internet during busy hours. Snails move faster. As a business, it is your responsibility to optimize your website with these users in mind. Here are a few things to look into.

• • Remove unnecessary components from loading on a responsive version.
  • Compress images with a program like Compress JPEG or Compress PNG before uploading them to your website.
  • Minify HTML, CSS, and JavaScript files as much as possible.
  • Enable browser caching. This works well to speed up your website for repeat visitors.
  • Use a CDN like Cloudflare to speed up delivery based on customer location.
  • As a last resort, buy a faster hosting plan. Godaddy is great on cost but isn’t the best option for speed. Check around and ask about speed optimization specifically. Or just sign up for our amazing secure hosting plan.

1. Test, Test, and Test Again

No great responsive website is complete without extensive testing throughout the process and again once everything is complete. When testing, try to think like a client and try to break things. Don’t just test the website with actions you THINK users will take, test everything. Click a button, flip your phone randomly, open a different window and go back, try to scale things that wouldn’t normally. Leave no stone unturned.

Not only should you test every browser possible, but every device as well. I know what you may be thinking, I can’t afford all those devices for testing. Luckily Google’s Chrome Developer Tools offers the ability to simulate multiple devices and screen sizes in one convenient tool. If you’re looking for something a little bit easier to use, Responsinator does something similar, however, it is a browser-based tool that shows how your website displays on the most popular screen sizes.