What does your website look like on a phone?
Too many websites these days (including a couple of mine!) are stuck in the days before mobile devices became a thing. And by “became a thing”, I mean it became a popular choice of machine to view websites on.
When mobile devices growing in popularity, it used to be that websites adapted by having a separate design for mobile devices — it kicked in when the site detected that it was being viewed on a phone or a tablet. Others had mobile versions of the site — probably not a different set of files, but the URL of each page of the mobile version was different from that of the desktop version. Basically, the page redirects to the mobile version when it detects a non-desktop browser. Which has always annoyed me, because these sites don’t seem to work both ways. Often, when you view a mobile page while you’re on your computer, the page doesn’t redirect automatically to the desktop version. And while some of these web pages do have a button or link that goes to the desktop version, it’s to the desktop version of the homepage and not the desktop version of that particular page.
Jetpack, one of my favorite WordPress plugins, has a feature that, when turned on, automatically gives your website a mobile version. Which is nice and all, but the mobile site you get is generic and stripped of all the colors and fonts that make your desktop site pretty. Furthermore, the homepage displays only your recent posts. This is fine if your website is a blog or a news site, but what if you don’t actually have any posts? What if all your content is in pages? That means nothing shows up on the front page, and the viewer has to click on the drop-down menu to see what pages are available to view.
This is why responsive design for websites is so cool. It basically removes the divide between mobile and desktop: your website when viewed on a laptop is the same website when viewed on your phone, only they look slightly different.
For example, here’s my website (not this one, the other one) as viewed on my Macbook browser:
This is how it looks like on my phone
See? That’s the exact same website, viewed on different machines. The circle buttons are laid out horizontally on the desktop version, and vertically on mobile.
The menu is also displayed differently. Here’s how it looks on a desktop browser (I use Chrome, by the way):
On mobile, the menu becomes drop-down:
Nifty, right? The theme is Minimable by Fedeweb.
(And in case you’re wondering, this blog is also using responsive design. If you’re viewing this on your computer, try checking it out on mobile. And vice versa.)
[green_box]”Design is not just what it looks like and feels like. Design is how it works.”
—Steve Jobs[/green_box]
Having a responsive design saves you having to make separate desktop and mobile designs for your website. And there’s only one URL for each page, no matter where you view it — this matters because when someone clicks on a link to your site that’s been shared on, say, Twitter, and they’re on a computer, they will see your website in its full widescreen glory, even if the person who shared that link did so on a mobile device. And most important of all, your website will not drive me nuts.
You can find wonderful responsive WordPress templates online — and lots of them are free. Now if you’ll excuse me, I need to take my own advice and go and change some of my websites’ themes.
Leave a Reply