So let’s talk about making your website work on mobile devices.
Or to be a smartarse about it, making it work on a big screen – because naturally you designed it first and foremost for mobile. We all do that now, right?
I don’t think it matters all that much; even the idea that one must come before the other strikes me as a holdover from print design. What should really come first is an intense and almost Zen-like awareness that you’re designing in a fluid space. So while it’s tempting to approach them separately, there’s so much overlap between the dimensions of desktops, laptops, tablets and mobiles that it’s hard to draw any clear line between them. To my mind the best approach is to create one design that can smoothly adapt itself.
‘Responsive’ is the key word here: design that responds to the shape of the browser window or phone screen that’s displaying it. (The ‘viewport’, to use the terminology). You want things to change their position and size to use the available space attractively.
My partner designs for Web too, and it irritates her when she hears people use the term ‘pixel perfect’ like it was somehow a good thing. Defining the position of everything in your site in terms of the actual pixels – the individual illuminated dots that make up the image – may have made sense back when screens came in two different sizes, but those days are gone. Long long long looooooong gone. I flinch now when I see a website squeezed into a 1024-pixel runway down the middle of the monitor.
Don’t get me wrong, the pixel has its uses as a unit of measurement. It’s just that they’re… rarely good uses. My rule is that if you’re using them, you’re probably missing an opportunity to do something better.
(And the same goes for the other absolute-length units like millimetres or picas – or even inches. Did you know you can lay out a web design using inches? Seriously, it’s part of the spec. I’ve never seen it done, I can’t imagine why you would want to do it. I kind of want to do it now… Inches. Wild.)
The fundamental unit for responsive design is the percentage. Declare some area to be say 50% wide, give it margins of 25% either side, and it will sit in the middle of whatever area that contains it. Beautifully simple. There are other proportional units, including some weird but cool new ones like ‘rem’ and ‘vmax’, but percentage measurements are to responsive design as big stone blocks are to pyramids. Think of a pyramid made out of stretchy, bouncy blocks. No wait don’t, that’s stupid. What I’m saying is that if you describe your lengths with percentage units, the size and shape of the screen no longer matter. The layout shuffles around to fit. It really is as simple as that.
OK it’s not, there’s usually more you have to do to make a layout look good on every screen. But it’s the foundation. The new home page of Spacelab.ie – pictured here as it appears on both desktop and mobile – is a rare example of an almost purely proportional design.
Even here there are a few cheats; those transparent navigation tabs at the bottom right for example will have text behind them on narrower screens, so they turn opaque to keep the labels readable. The official name for these cheats is ‘media queries’, clever little rules that tell the browser to change its behaviour when the shape or size of the viewport changes. These are what make responsive design possible for layouts of any real complexity, and they are excellent.
But as simple as they may be, using media queries can get complex fast. I’ll return soon with tips for how to avoid that. In the meantime, I invite you to enjoy the fluid simplicity of the new Spacelab home page.