Like the vain among us who constantly check their appearance in any mirror they encounter, website designers should likewise be checking how their sites look across the various delivery platforms. It’s 2021 – nobody should have “head-in-the-sand” syndrome when it comes to how their sites look on smartphones, tablets, and whatever new gadget is currently in the pipeline.
These devices are taking over how the world browses the internet. Mobile usage in the UK alone is now more than 34.5 million people with an increase of over 1% each month*. Tablet use in the UK is exploding – it’s going to overshadow TV watching and in many households it already does. One third of the UK population now uses tablets**.
You Can’t Ignore the Multi-Screen Consumer
The popularity of the mobile device cannot be overlooked. Many internet users use their mobile device as their primary method for browsing, perhaps only turning to the desktop PC on rare occasions.
If you want your site to stay relevant and accessible, you must make it viewable from any device. So go ahead, be vain when it comes to your website. Check it on your iPhone, check it on your tablet, check it on your Samsung Galaxy. It might mean the difference between good solid traffic and viewers who bounce because they can’t make heads or tails of your site on their mobile devices.
How to Make Your Site Work on Any Device, Even Those Not Invented Yet
With the exponential growth of WordPress as a web design platform and the incredible rise of smartphone and tablet use for web browsing, it’s a whole new world. While the desktop PC is still holding strong as far as usage goes, it’s clear that the future lies in designing websites for mobile devices.
It’s not even enough anymore to design for the desktop and the cell phone, there are so many new devices on the market, and so many more coming…all different sizes! The latest is the super huge smartphone (like the Samsung Galaxy s5). No web designer can predict the next new thing, the next new size. Few of us have the resources to design a separate website for mobile devices, and keep both current into the future. That’s expensive. The key is universal, responsive design.
Universal Design for Any Mobile Device
Universal design erases the need to create two websites, maintain two URLs, two sets of content, and two SEO campaigns. Why devote the resources to making two websites when you can accomplish something even better with just one?
It’s essential that websites be designed so that they can accommodate any size…they need to be fluid. This means a website is ready for anything the device designers throw at us – it’s future proof. Hands down, the best way to do this is to use a responsive WordPress theme.
What is a Responsive WordPress Theme?
You may think you know what “responsiveness” means in a WordPress theme, but chances are you don’t know the full story. You may have tested some responsive WordPress themes by dragging your browser window down to cell phone width. It condenses just fine, so you’re good to go, right?
Actually there’s more to it than that. Here’s what a Responsive WordPress Theme should do:
- it should have a fluid layout
- it should scale (zoom) your website according to the viewport of the device
- it should stack content blocks according to the width of the device, and make them easy to view
1. Fluidity – We Get It
The fluid layout is clearly about adjusting width according to the device. Your site is fluid if it’s able to shrink down to cell phone size with no horizontal scrollbar. Most people get this. Using “max width” instead of specific widths for containers takes care of the fluidity. Same goes for height and images… use max/min widths and heights to keep everything fluid.
2. Viewports, Pixels, & Orientation?
How about Viewports? Well when a cell phone user looks at a website, it’s better if he or she is not simply presented with a miniature version of the full width site. These are impossible to read without zooming. That’s one more step, or obstacle to viewing your site, so you may lose traffic.
With the viewport meta element, you ensure a readable site right from the start. Your site can also now adjust orientation when a smartphone or tablet gets moved around. Rotating devices are no longer an issue – portrait or landscape, your site will adjust. This capability is also available through the “orientation” media query.
3. Adjusting Content According to the Device – “Media Queries”
This is the real beauty of a responsive theme. Shrinking a website is one thing, but altering the placement of content so the viewer has an easy time of reading and navigating: that makes a truly cross-platform site that’s truly responsive. Here’s what that means:
On smaller screens, a smaller size image will do just fine, whereas on a desktop a larger image is needed. Why make your cell phone users wait for a large image to load? Use media query to adjust the image sizes so your site loads faster just for them, but uses the larger images on larger screens so your site still looks good when viewed on a desktop.
Next thing you want to do is move less relevant content to the bottom of the page when viewed on a smartphone. A small screen can only effectively show so much content before it’s too crowded and unviewable. A truly responsive WordPress theme will rearrange content according to the size of the device. Media Query will re-stack your content blocks for you.
The final method for improving view experience is to insert more white space between those content blocks so they’re more clearly defined. Again, you can use a Media Query to achieve this.
Now You Know!
Mobile devices are here to stay, which is more than you can say about the desktop PC. Making your website so it’s ready for anything will ensure that it thrives in all the new environments. Right now, the responsive WordPress theme is the best way to make sure you and your websites stay relevant now and for the future, and you don’t go bankrupt in the process.
Leave a Reply