A guest article by Katrina Yeo
Gone are the days where you see people sitting down at their desk using their desktops or laptops to surf the Internet. Due to the rise of smart phones and tablets, a more common sight would be people busy surfing on their little hand-held devices. For all those statistically-inclined people out there, mobile traffic accounts for about 53% of total online traffic.
However, this 53% poses a slight challenge to all web designers out there. Whether you are a blog owner or an entrepreneur, you now have the important task of building mobile responsive sites to ensure continued user friendliness.
Hang on a minute.
What’s a mobile responsive site? Why is it important?
When you place all your devices side-by-side, you should notice that all the screen sizes, shape and aspect ratio differs. Because of this, your websites should not look completely the same across all devices.
In the case where websites are not mobile responsive, what would happen is that your entire site would just fit to your screen. This would probably result in your users having to manually pinch and zoom in order to see what information you have on your site. Trust me, this frustrates a lot of people and results in them leaving your site. If you need a visual depiction, this is what I mean:
Conversely, a well designed and mobile responsive site enhances user experience and encourages them to continue viewing the site.
Take a look at the layout of this beautiful Coding For Her website (if i do say so myself). Notice how the layout changes on different platforms.
Oh I see!
So how can I make my site mobile-responsive?
In order to make your site mobile responsive, you’ll have to include media queries using Cascading Style Sheets (CSS)*. If you are using a WordPress site, these can be added in the Custom CSS segment found on your Dashboard.
But before we do that, allow me to show you how to inspect a webpage.
Please be warned that although this is a very useful tool, sometimes it may not be accurate. Hence it would be best if you could test out your webpages on the actual device itself, or at least one device from each size range you’ll see later on.
To inspect a webpage using the developer tools:
- Right-click on any webpage and select inspect on the element itself. In this case, I want to have a look at the background of the CFH site.
- Click on the blue mobile icon on the bottom left side and the view will change to that of a mobile site. You can then toggle the phone screen size either by clicking on the ‘iPhone X’ and changing it to another mobile setting, or play around with the bars just below that.
With this, you should be able to see how your site looks like on mobile devices. If you would like to change something, click the ‘+’ button on the bottom right side of the screen, make changes, and preview them before adding them to your actual site as custom CSS.
Of course if you would like the changes to apply to mobile sites only, this is where media queries would come in.
Let’s see how we can use media queries!
If you were to play around with the boxes (previously in step 2), you’d notice that the demarkation points are used are usually:
- Up to 320px for small mobile phones such as the iPhone 5
- Between 321px to 375px for medium phones such as the iPhone 6/7/8/x, Galaxy 5
- Between 376px to 425px for large phones such as the Pixel, Pixel 2 XL
- Between 426px to 768px for tablets such as the iPad
- Between 769px to 1024px for tablets such as the iPad Pro
So these are the 5 size ranges that we usually play around with when coding mobile responsive sites. There are larger settings for bigger devices, but we won’t be focusing on those for this blog post.
Now, here’s an example as to how to use media queries:
As you can see, I’m controlling the size of h1 elements for the various screen sizes and the letter-spacing for h2 elements of small mobile devices (Up to 320px). Of course, these aren’t the only things that you can do. Anything that can be controlled by CSS on a non-mobile site (to be honest, that’s practically everything), can also be controlled on mobile sites.
My biggest tip on mobile responsiveness would be that you should cut out as many chunks of text as possible (use display: none; on an element), because something that is of ‘decent length’ on a desktop or laptop could be extremely long and wordy on a mobile device. And that would inevitably become boring after awhile.
I think I’ve made my site mobile responsive.
How can I do a final check of my site?
As a final check, you can also test your site’s mobile friendliness using sites like this by google. These sites would analyse you site and give you a final conclusion if your site is actually mobile responsive.
So that’s it from me! If there’s one thing you’d take away, I hope it will be how simple media queries can make your website look more beautiful and interactive. Have fun and code away!
Here’s Katrina signing off, XOXO.
*CSS is used to style websites. For example, you could add a background color, change a font size or place padding on an element. The possibilities are endless.