Categories
Spacelab

You’ve Got Style

As the saying goes, you don’t know what you’ve got till you’ve gotten shot of the damn thing. To really get what’s cool about modern Web design, you need to know what we had to put up with over its chequered history. So strap in, things are about to get condensed!

Did you ever wonder how Web pages got so attractive? You can remember, I’m sure, when they looked liked amateur Word documents, with the height of excitement being some moving text or a background apparently chosen give you an ice cream headache. Why was that?

Back in them ancient days, styling a website was not impossible. But it was awful. Your typical bit of HTML code would look something like this:

<h1>Your Heading</h1>
<p>Yadda yadda, herp derp etc.</p>

That’s how you’d make a paragraph with a heading above it – it hasn’t really changed to this day. You put words between tags, which tell the browser how to display them. Back then though the browser would use its own default styles – which on most computers meant plain black text, sixteen pixels high for the “p” (paragraph) text and twice that for the “h1” (main heading), in the dreary Times New Roman font. So like this:

Your Heading

Yadda yadda, herp derp etc.

Default styles incidentally are still a thing which you can see – and mess with – in your browser’s settings. Though most sites override them with their own styles there are still some that don’t.

I have an old font which I made from my own hand-lettering, and sometimes I like to pretend I wrote Wikipedia.

So how did you, as a Web author, put in your own styling instead of this awful default stuff? Well, with difficulty. It went pretty much like this:

<h1 style="color:red">Your Heading</h1>
<p style="color:darkslategray">Yadda yadda but in grey now.</p>

You insert some styling information into the tags themselves, which the browser displays like so:

Your Heading

Yadda yadda but in grey now.

OK… Not too hard. Let’s try to change a few more things:

<h1 style="color:red;font-family:Helvetica,Arial;font-size:36px;font-weight:normal">Your Heading</h1>
<p style="color:darkslategray;font-family:Helvetica,Arial;font-size:18px">Yadda yadda only better.</p>

Which renders as:

Your Heading

Yadda yadda only in a nicer font.

Let’s face it, it still looks like utter dogfood. (Must remember to turn off the profanity filter.) It’s nothing compared to the powerful typography used in posters or magazine layouts. And it’s getting complicated fast. What’s worse though, you’ve only styled a single paragraph. Imagine doing that for every paragraph in your page.

Then imagine doing that for every page in your site.

And then imagine the day you wake up to find you no longer like the colour “darkslategray”… Even with multi-document search-and-replace, editing every one of those style instructions across the whole site is depressing just to contemplate.

So Web design was a complete pain in the early years. Tedious, inflexible, highly restricted. And then, along came Cascading Style Sheets (CSS)!

The Revolution

Well actually they’d been there all along, in theory. Håkon Wium Lie had the idea while working with Tim Berners-Lee and Robert Cailliau at CERN right back in 1994. It was always part of the plan for the World Wide Web, but it took considerable time for browsers to catch up with it.

So what does it mean then, Cascading Style Sheets? Well, ‘style sheet’ simply because all the styling that used to be stuck all over the place in tags was now gathered into a single document. So instead of…

<p style="color:darkgray;font-family:'Courier New';font-size:18px">God help us, not again.</p>

…for every single sheeting paragraph, you just write…

p {
    color: darkgray;
    font-family: 'Courier New';
    font-size: 18px;
}

…once and that’s your work done for the whole meter-parking site. YES!

Ahem. And the ‘cascade’ part of the name? That would probably take a whole other article to fully do justice to, but put crudely it means that the specific overrides the general. Styles in the style sheet apply to the entire site, but these can be overruled by styles specifically for one page, which can in turn be overruled by styles right in the tags just like the old-fashioned examples above*. They flow together in a consistent and logical way, allowing you to create a unifying theme for your site as a whole and then tweak that with styling specific to different sections. In Spacelab for example, as shown in our featured image up top there, each page shares the same fonts and colour palette but has its own unique background.

Thanks to the powerful CSS language, all the aesthetics of your site, all the fonts, colours, backgrounds, shapes and sizes – and far more these days, up to and including animations – can and, where possible, should be written in one single document: your style sheet. It’s hard to convey what a huge… relief it was when I first designed this way. Suddenly you could change a whole site at a brushstroke. It was the dawn of a new age of creative freedom.

*There is almost never a good reason to put styles in the content like that now, but if it wasn’t allowed then older Web pages wouldn’t work any more.

Categories
Spacelab

Making It Mobile

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.

Go on, open it up and pull the corners around.