Tag: CSS

Categories
Spacelab Technology

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 never† a very 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.

†Yeah. About a week after I wrote this, I embarked on a project where some styling within the content was just the thing needed. But it was an extremely unusual situation.

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.

Categories
Cosmography Technology

A New Look

This is just here to be decorative really - or prove that I do occasionally take walks

A redesign!

Well, more a redecoration. I happened on a nice-looking WordPress theme and tried it out. I like that it’s distinctly more modern in feel. I’m not totally gone on the current trend to areas of dead flat colour, but it’s healthy to experiment. Expect it to change again, as I try on themes like frocks.

And in the ripe plumpness of time I will give this place a theme of my own. The design itself is not the problem – I’m practically specialising in WordPress sites these days. But with these free hosted blogs they actually charge you to use your own code. I’m already paying them to use a custom URL, so it’s beginning to seem more sensible to host the thing myself. I’d learn more too, and have a lot more flexibility.

But first I have far more important websites to build. And as I am doing them for money now I will have to make a site about making sites – a pretty darn good one, needless to say. Plus my cartoon site is so technically outdated as to be an embarrassment – HTML 4.01. It doesn’t sound like it should be so different from the latest HTML 5, but between those two versions fifteen years elapsed! The practice of Web design has undergone a sea change – from static files to dynamic databases, crude table layouts to complex cascading style sheets. Using HTML 4.01 on my own site now is like being a cordon bleu chef while secretly living on pie and chips.

So I guess this is will stay a hosted WordPress blog for a while to come… But then there hasn’t exactly been a lot of posts in the last year, has there? Or for that matter, the year before. This is a good thing, in that it means I was doing something more useful than writing without being paid. As regular(!) readers will know, that thing was an MSc. That’s all done of course (bar, excruciatingly, my final grade), so perhaps I’ll be writing a bit more often now while I decide my next move.

Categories
Technology

Designers Are Burnt, Not Made

ScreenshotsCssCaptions

Tricky Curves – 4X Magnification

Obsessive attention to detail – that’s the thing that makes me not too bad at design. Also, the thing that makes design… maybe not so good for me. Several kinds of work will keep me up late into the night. But there are few that I will return to the moment I wake, brimming with new things to try. Web design, particularly in the final stages, is a constant stream of interesting problems.

CSS (Cascading Style Sheets), the design language of the modern Web, is a simple yet powerful tool. A style sheet is just a list of instructions about how things should look, really more like description than programming. I’d encourage anyone to try it out, no matter how non-technical you consider yourself. Sadly though, even today there are discrepancies in the way different Web browsers interpret these instructions. It’s not as bad as it was; there was a time they weren’t even trying. Microsoft’s Internet Explorer and Netscape’s Navigator (ancestor of Firefox) both had features actually designed not to work in the other. Today they at least seem to be aiming at the ambitious standards set out for HTML5 and CSS3. Browsers once competed with each other, now they compete with apps – nothing like a mutual threat to enhance cooperation.

Minor as they are, these discrepancies can still make the design that works beautifully on one platform look like something flung from a catapult on another. There really is no alternative except to test and test and re-test – on Windows, Mac OS, iOS, Android, Linux and so on, in all their different browser versions, at screen sizes from HD to phone. The permutations are slightly mind-blowing.

You find a bug, you think up or look up or remember a solution, you see if it works. If it works in Firefox on a PC you see if it still works in Chrome on a tablet, so on and so forth. When you’re sure you’ve solved that, you immediately go looking for another problem. For the best part of last week I did little but eat, sleep, and hunt bugs. And I was cutting corners on the sleep.

Don’t mention corners… See the one in the picture? Most of a day, that cost me. A lot more is going on than meets the eye. For a start, round corners can be a challenge. They look good, and they’re a part of the CSS3 standard, but people using Internet Explorer 8 and (God forbid) lower don’t see them. Well, you face a choice there: recreate the effect using images of round corners, or let the design gracefully fail in IE8. And really the latter is the sensible approach these days. Which is a little rough on users of XP – still my own favourite version of Windows – but frankly if you’re on XP and not using Firefox or Chrome then you (or your IT department) need a strong light shining up your nose.

Round corners at the foot of a page though are harder still. Look closely and you’ll see that the corkboard background pattern overlaps below the corner. (The random nature of the pattern helps to disguise this.) What’s happening is that this is an extra piece of the background overlying the rest of the design – with a bottom end for the page, complete with rounded corners, overlying that again. This whole unit then sticks to the foot of the page’s contents. Carefully-chosen margins meanwhile make sure that it always has precisely the same width as the rest, no matter what size the screen. Oh and those margins have a length described as a negative percentage, which is a little mindbending in itself.

Next problem is that 3D shadow, to make the page look like it’s inset into the background. CSS3 now has a very attractive way to do soft 3D borders, called “box-shadow”. Unfortunately, as the name suggests it only works for things with four sides. My footer wants a shadow on just two of its sides, and for that my only reasonable option is an ordinary border.

The tricky bit then is where they meet. While a border looks much the same in every browser, the shadow has properties of ‘blur’ and ‘spread’; these make it more realistic, but also more open to interpretation. Therefore it comes out looking wider in some browsers than others. What do you do then when the inconsistent shadow meets the consistent border?

The solution I found is a mad hack: I made the border 2.5 pixels wide. This of course is nonsense. The pixel is the base physical unit of the display screen, you can’t have half of one. What happens in practice is that different browsers interpret this nonsense instruction differently – crudely speaking, some round up and some round down – but they do so in a way that broadly matches how they interpret the box-shadow. The upshot, as the images above show, is that the borders join pretty smoothly in the four most popular browsers. It takes magnification in fact to show that there’s a join at all.

I’d like to say this was unusual, but really this is the essence of the Web design job – a strange blend of technical precision and lateral thinking. Part tweezers and microscope, part bent paperclip and sharpened spoon. It’s a voyage deep into an unusual problem-space, one that takes over both my waking and my sleeping mind.

Related articles
%d bloggers like this: