Why responsive design matters?
The stats counter over at GlobalStats has up-to-date statistics on screen resolutions by country and platform that people use. As of November 2018, 22.54% of users are viewing sites on a screen width of 360x640, and coming in behind this is 1366x768 at 11.81%
These numbers are huge because mobile is accounting for most of the traffic. That means it’s more than in your best interest to consider investing in your site to make it responsive.
Some site owners out there still don’t really have too much in mind when it comes to responsive, some often don’t want to invest too much into it either, so most usually agree to let the company doing their site build apply best practices.
In fact, if you understand the importance of SEO and what it means to your business and online well being, you’ll also want to know that Google actually penalizes sites that do not have a responsive layout. You can see how your site ranks in terms of responsive design with Google here.
So let’s look at some best practices.
Use a framework
One of the easiest ways to get ahead with responsive design is to leverage a framework that includes flexible design, with grids and breakpoints all built in. If you’re already using one, then your site, if it isn’t responsive, is probably partially at least.
Responsive web frameworks tend to favour a flexbox design allowing for a seamless grid system which, when used, will stack components in a logical fashion for better viewing on a mobile device, smaller screen or tablet.
Here are some frameworks I recommend.
Bootstrap is a very popular framework, and if you’re using Drupal, it’s one of the most widely used frameworks for kickstarting a site. It has font icons, components and a grid layout built into it, meaning all of the breakpoints are baked into its core for the user. It is a larger framework and has a lot built into it, including javascript functionality for things like sliders and tabbable content.
Zurb Foundation is another big one, which has a Drupal 8 alpha release. Similar to Bootstrap you’re getting a lot out of the box and it’s possible to create a custom build to only include what you need. Sometimes a lot of these larger frameworks can involve some work when trying to implement it on an existing site, so adopting a more minimal framework might be of use to some. Working with a smaller framework can allow for more customization and deeper understanding of all of the components due to it being a smaller toolkit.
Skeleton is a personal favourite it is a more of a boilerplate in that it gives you the bare minimum necessary to create a responsive theme, with the most important part being the grid system which is integral to any responsive site.
Look to your competitors
When you’re considering a jump over to responsive, especially when you’re not quite sure how it should look or what you should include, it’s always good to take a look at your competitors' websites and see how they’re doing it. In some instances, you might find that your competitors don’t have responsive either, but a lot of the time you can get some good ideas into how they’re doing things like filtering, how they’re handling their CTAs for mobile and what sort of layout they’re adopting. If you’re a little short on resources for a designer, you can always give some of these examples to help speed up the process.
Mobile First, or not?
If you’re building out a new site, adopting a mobile-first site is a great idea, but if you’ve never done it before it can seem a little daunting, and more often than not, those who haven’t taken this approach before will fall back into the desktop first idea.
Desktop first isn’t necessarily bad, this is where you mostly see max-width media queries, whereas with mobile first you’ll see a lot more min-width queries. This means you’re placing an early emphasis on the mobile, allowing you to get it right the first time without having to jump backwards and forwards to see if everything is working in harmony still. While screen resolutions could potentially get larger, there’s less likelihood of them getting smaller, so building with that in mind first will help thing scale up in the long run.
CTAs
If you’re not already putting much emphasis on CTAs, you really should check out this article on CTA statistics.
According to the study, 90% of people who read your headline will read you CTA, even emails with a single CTA will increase clicks by over 300%. One way you can make CTAs more attractive to mobile users is to make good use of larger fonts, brighter colours and make them easy to press with one thumb without the need to use two hands.
Thumbs, Typography and Spacing
As mentioned above, making your content more accessible to thumbs without requiring a user to need to bend their thumb halfway up the screen or use two hands can improve usability and keep someone reading for longer.
This means stacking things and avoiding side panels and awkwardly placed interaction elements will give better results.
You should also be aware of your typography and your spacing. The typography you use on your site shouldn’t be too small for mobile readers and spacing out paragraphs and keeping text content leaner will keep readers attention longer.
Don’t use odd typefaces either, the same should go for colours. Usually, it’s good to select one typeface for the site and a secondary one for headings and titles. Having a solid set of well-selected typefaces and a colour pallet will help tie your site together and make it look more standardized and professional.
Check out the font-your-face module for Drupal 8, which will allow you to hook into typeface services like Google font, and Coolors.co for a great way colour palette picker.
Smaller Forms
While keeping text spread out and font sizes large enough to read nicely, you shouldn’t include forms that stretch down the page, it’s awkward enough filling in a mobile form without having to go back and slide up and down the screen to find an error when you make a mistake.
If a larger form is absolutely necessary, try breaking it up into steps with a multi-step form with a pager to let the user know how much they’ll have left to fill. Not only should you be condensing forms, but all other sorts of information that might be cluttering an area up unnecessarily. For instance, contact details should really just be limited to the minimum.
Why not make use of mobile device technology by turning your contact information into buttons? For instance, a phone number button, an email button and even have your social media buttons prompt a mobile user to open their mobile app.
Observe your users
Observer the way your users interact with your site by placing some monitoring tools. Give Hotjar or Crazyegg a try, as both will give you heatmaps of all the areas a user is hitting and missing and can yield some excellent insight into what is turning them on and putting them off.
You can also utilize things like tagging in Google to track clicks. Try using your own phone to use your site or a table, or ask a friend to try it with their phone and see how easy it is to get around, and ask for their opinion also.
Components
Think in terms of reusable components, make use of things like cards and sliders. Things that will fit and scale well into containers, having things in rectangles or cards will stack a lot nicer that way, they are also intuitive to interact with. Most frameworks that you can leverage have many components bundled in with them and checking their API will give you a good idea of what is at your fingertips. If you’re not using a framework it can still be useful to see what these frameworks are doing as you might want to model some of your own components after them.
Images and Compression
Start using more SVGs as they scale down a lot crisper than PNGs and GIFs and can prevent a lot of the ugly blurring that often occurs with other image formats. Although this may not seem like a big deal, as mobile screens get better and better, these things become more noticeable and can make all the difference.
Mobile users, especially if they’re on data and not wifi, could potentially experience slightly longer loading times, to prevent this you should implement some compression. You can set up GZIP compression on your web server, more than likely you already have this, but if not you might want to check.
Start minifying your images or compressing them, if you’re using Drupal 8 you can set up image pipelines using the Image Optimize API you can apply a service to it like Resmushit or PNGCrush to decrease loading times without ruining overall image quality.
CSS Compiler
If you’re not already using a CSS compiler, you really should be. SASS is one of the most popular CSS compilers out there, the one we would recommend and you might already be using it, you can check here for a list of compilers.
Using a CSS compiler speeds up and better organizes your styles, making responsive design a heck of a lot easier by allowing reusable functions and variables, a little tweak here and a little tweak there is a lot better than having to rip apart your code every time you make a structural change.
Use Device Features
As mentioned earlier, make use of the technologies now available for devices. Links to specific apps, to open email clients, social media platforms, to start a call or open up a map should be leveraged for a more integrated experience. You can also look into things like setting up push notifications for things like news articles or blog posts to keep your readers in the loop whenever you make an update or enable two-factor authentication to increase security when they log in.
Declutter
Whatever you have on your desktop site doesn’t need to be there on your mobile site, if you’re wondering the best way to display or scale something down for your mobile audience, chances are you shouldn’t. The best thing to do is figure out what is important and what isn’t, what will deliver your message and deliver it fast, because most people on their phones are thumbing around all over the place, in and out of sites and apps all of the time.
If you have a giant infographic you’re trying to stuff on your mobile client, you should rethink your approach. Start hiding things or creating mobile specific things to be hidden from desktop users and revealed for mobile users, this will streamline their experience and keep them reading and not bouncing.
Optimize loading times
Images and file loading times are important, but so is your site in general. Google now penalizes sites that do not load quick enough, reducing their chances of appearing on the first page of results. At the beginning of the article we mentioned a tool you can check to see how you stack up when it comes to responsiveness, if your numbers aren’t too good, Google will offer suggestions for you to decrease your loading times and optimize your site.