Mobile-first themes: Hit or Miss?

Perspective Therapy screenshot

There appears to be a general trend to mobile-first web design these days, and all the trendy bleeding-edge ones are so mobile-ready they don't look too good on desktop PC screens. We still use them, you know.
Back when I did web design, I mostly built on WordPress. There's a wide variety of mobile-ready themes available, many of which are free. My personal preference was for magazine themes built on a grid framework, which provided for stacking columns that fit any screen of any size as neatly as you please.

The purpose of design

"Lobster," a mobile-first theme, as it appears on desktop PCs

Web design is a fork of print design; the idea is to electronically display media, images, and text as they would appear on a printed page in your hand. This is what I expect to find when I browse a website: neat, legible, readable text and crisp, clear images that sit neatly in my screen. What I get with many of these mobile-first sites is an apparition that causes me to cast about looking for a resize button to reduce the huge, screaming headlines and the overwhelming images to make them fit my screen so they're comfortable to view.

See the "Lobster" screenshot? That's how it appears on a desktop PC with a 1600 x 900px screen. No, I'm not going to knuckle down and get used to it because it's the future. We fit the design to our audience, not our audience to the design. Of course, this doesn't mean we can't have a bit of fun; slideshows, fonts, and special effects are all par for the course when you know what you're doing, and they can all the made to fit the smallest screens.

Making mobile-first work

 

It actually takes 3 page-downs to get to the meaningful content.

Responsive and adaptive are all well and good; sometimes serving images of different sizes according to the screen size is the way to go, particularly when you're using a slider.

However, as a rule I've generally chosen to ensure that my images were usually no wider than 220px so they would definitely fit the smallest mobile screen in portrait view. That saves a lot of coding and you don't have to take different browsers into account. Give your content area a maximum width of 800 -1000px and centre it so it sits nicely in the middle of your screen. You shouldn't have to turn your head to read the text.

Mobile-first themes can be attractive if you just take a few rules into consideration:

1. Remember that the primary purpose of your website is to provide information about its subject to viewers. Being pretty comes second by about a country mile. Looking impressive is not and never will be as important as answering the question, "What is this website about?" 
2. Make it comfortable to view - text should be at a size that is easy to read and should not be so big or so dense you have to keep on scrolling to get at the information you're looking for. You certainly shouldn't leave viewers with the nagging impression that their browser's View/Zoom isn't working properly. 
3. Use text, fonts, and colours that are easy to read at any size. No text should be so huge you have to scroll down to read one sentence. Text colour should stand out from its background. Don't use pale text colours on a white background; if your device's contrast needs to be turned up so you can read it, that's a design fault, right there. 
4. Keep the most important information above the fold. I don't want to have to dig to find out what your site is about. I click off websites like that on principle. If you can't be bothered to display your information properly, I can't be bothered to look for it. 
5. Serve images at an absolute maximum height of 600px. No one should ever have to scroll downwards to see the whole thing on a desktop PC. 
6. Test your design at different sizes. The one that works best at all sizes wins. 

Getting it right

Test, test, and test again. I can't say this often enough. If you're going to use large images use breakpoints or width percentages to resize them for larger or smaller screens. If you're going to use large text, ditto.

The Malign Hand... mobile-ready website

People may be using mobile devices to browse the internet more often but that doesn't mean we've all stopped using desktop PCs. On a 1600px screen you don't want the text to fill it but to sit in a neat box in the middle that's not much wider than an A4 (portrait) sheet of paper. If you really, truly, positively MUST use a mobile-first theme either give us a desktop version of the site to view or make it work on large screens, too.

And by "work," I mean, "make it so we don't have to keep scrolling to get to meaningful information." Nobody wants to put that amount of work in (okay, I don't want to put that amount of work in to finding what I'm looking for on a particular website) and I utterly fail to see the advantage of huge body text over 12-16px text. It's just more work for wrist and finger muscles. You're not obliged to follow fashion just because "everybody else" is doing it. I'm all about practicality first and those are the websites I favour. Don't get me started on whole-screen use.

Believe me, if viewers are obliged to view your website on their mobile devices in order to see it properly, you're doin' it wrong.