|Perspective Therapy screenshot|
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|
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.|
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:
- 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?"
- 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.
- 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.
- 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.
- 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.
- 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|
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.