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
Cosmography Technology

Hex Code

Well I suppose I’m a programmer now. Of all things.

It’s not what I expected, to be honest. I still associate the word with men in lab coats and bow ties in front of banks of flickering lights, doing arcane things at rattly teleprinter terminals. Something to do with rockets probably. Robots even. And punched paper tape!

Hippo

Punched paper tape was amazing, I used to collect discarded lengths of it from offices where my mother worked as a temp. Its perforated patterns are the perfect metaphor for the state of computing when I was a child. Pretty, delicate, clearly meaningful and yet profoundly mysterious.

These days? It’s writing really. You’re using language, a kind of language, to convey your intended meaning. Like much writing it’s part creativity, part drudgery and repetition. Long-separated senses of the word “hack” meet by surprise in a foreign city.

And like their natural counterparts, programming languages are a pretty diverse bunch. But you’ll hardly find two more different than the ones I just certified in – SQL and PHP. They’re like Choctaw and Chinese. Or more helpfully, Latin and English. One is (relatively) ancient, dusty and rule-bound, the other young and a bit anarchic.

Strangely though, it’s the old one that was actually designed to be English-like. And in the time of the lab coats I guess it seemed like it. A SQL command is called a “statement”, and is constructed much like a sentence:

Select roses, tulips from basket join bouquet where colour = "red"

Sounds almost like the real thing, doesn’t it? But…

Select camel, serendipity from D547 join moonslip where fandango = "buttocks"

…is equally meaningful. The resemblance to human language is superficial for a reason: In SQL there is only a handful of verbs, representing the very limited set of things you can do with items in a database. Its ‘nouns’ are little more than arbitrary labels. Real language is almost immeasurably more complex than that.

The thing that makes SQL seem completely unnatural though is its obsession with data types. These are important up to a point of course. You need to know what kind of data you’re dealing with, whether it’s numbers, “string” (which is what programmers like to call written words), dates and times, or more exotic stuff. You can’t add a word to a number or multiply a date.

But in SQL these break down into seemingly endless subtypes: For a number you need to know what the base is, whether it has a decimal point, if it’s positive or negative. With words it matters what the language is so that the right characters are used, plus you need to know what alphabetical order is for those characters, whether case is significant and so on. Dates and times are available in a mind-bending range of formats, depending on, say, whether you’re more interested in events since 1,000 AD or 1970.

Where it gets ludicrous is that there are still further subdivisions, into units of different size. (My favourite is called the Binary Large Object – or for short, BLOB.) The idea was to set aside only as much space as your data is going to need. If you have a column wide enough for six-figure sums and then enter numbers in the hundreds, you’re effectively saving blank decimal places to your hard disk. In the ’70s, disks were expensive. There was no room for empty space.

Compared to this, PHP seems like it was invented by hippoes. (I meant to say hippies there but I’m going to leave the typo in.) It’s just so… relaxed, skipping lightly over the very things that make SQL tedious. It seems to just guess what your data type ought to be. “You’re trying to add a number and a letter together? No problem, let’s see what happens.”

What makes it even more like human language though is the fact that it’s “Object Oriented”. This is a big idea so I’ll leave the details for another post, but suffice it to say that like real nouns, an object in OO programming is meant to represent something in the world. As such it comes with its associated “verbs” (known as methods) that represent the actions characteristic of that object. So the things that exist in your program have hidden powers that you can call upon if you know the right words. Cool.

Perhaps the best comparison then is not with different natural languages, but with different specialised jargon. Moving from SQL to PHP feels a lot like leaving contract law to take up alchemy.

Categories
Technology

The Machines That Make The Web

CMScartoon1For our next project, we don’t just make a website. We make a way to make a website. Ya may have noticed the Web has transformed drastically in the last few years. Well OK maybe you haven’t noticed. Transformation is pretty much the norm for the Web. But in a short time there has been a sea-change behind the scenes. Or a scene change beneath the sea. One of those. To be clear, this ain’t your parents’ Web.

Twenty years ago when HTML was new-born, most pages were just text with a few code words (called “tags”) laced through. You could type a page into a computer by hand, upload it to another computer called the web server, and voilà, you had a website. Or more precisely, you had a document sitting on a server. Someone typed the address of your page into their browser, the software on the server sent them a copy of what you uploaded. Done. Things were simpler then.

You can still do this indeed. It’s easier than you will be imagining to create a basic website. What’s considerably harder is making a page someone will actually look at. Constantly-changing, information-rich things like Google search results or Facebook timelines or eBay auctions clearly aren’t waiting around as static documents on a server somewhere. Nor are they being typed up on demand by millions of underpaid interns – though that is an entertaining thought. All such modern sites have one thing in common: a database.

This really means no more than putting your information into tables so it’s logically organised and accessible, but the difference that makes is enormous. Say you’re looking for a particular car, a blue Golf around ten years old, for less than about 2,000 eurodollarpounds. Imagine having to read through the details of hundreds and hundreds of used cars arranged in no particular order. You’d settle for the first one you found. Hell after an hour you’d settle for a burnt orange Daihatsu three-wheeler. But if the info is in a database the computer can do the tedious work for you, instantly winnowing that huge list down to the few that meet your criteria. Most excellent; this sort of thing is why we keep those darn machines around.

And a huge proportion of modern websites also work this way. Instead of sending out static documents on request, new software on the web server takes the visitor’s input, queries the database for relevant information – which could include images and other media as well as text – and pours the results into a template to create a custom page. And that is what it sends back to the visitor – a document that didn’t even exist before they asked for it.

This ‘new software’ on the web server is called a Content Management System, or CMS. You create the templates that dictate how your pages will look, you put the information into the database, but the CMS mixes them together and serves them to your website visitors. Modern ones even give you tools to create those templates and an interface with which to enter your information. A good one is as easy to use as a word processor – like the one I’m writing on here.

A content management system is what we need for the ‘team thesis’ I spoke of. We could make our own one using PHP, a popular language for writing code that runs on web servers, but the objective is not to show off our coding skills. The objective is to deliver a real working solution to a real working client. If we were consultants here, we’d recommend they use an existing CMS, customised for their needs. So that’s exactly what we’ll do for them – choose the best for their needs, and customise it to suit them even better. There is a huge range of great ones available.

The question we face now is, which?

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.

Categories
Technology

The Font Of All Typefaces

GoogleFont3

In magazines, you have a freedom of design almost on a par with illuminated manuscript. You can set your headlines in any font imaginable, even one where all the letters are little nude couples demonstrating the Kama Sutra, and run them vertically, horizontally, or at any angle between.

On the Web, you’re more constrained. Snazzy design was not a significant priority when it was conceived as a way to publish academic papers. On the contrary, the choice of font was originally left entirely to the reader. That makes a hell of a lot of sense when the priority is conveying information rather than amusing the eye (and in fact any decent browser still lets you override the creator’s intent and choose the font you find most readable), but of course designers soon wanted more control.

One way to insert fancy lettering is to do it as images. But these take longer to download, and directly conflict with important principles of flexibility and accessibility. Worst of all, search engines can’t index the text in a picture. So though they are used a lot for the headers of pages, images are deeply unsuitable when it comes to the body text.

There is some flexibility; the designer can specify what font they want. But “want” is the operative word – the wish will only come true if the user happens to have that font installed on their computer. While this is OK for a handful of almost ubiquitous “Websafe” fonts like Times New Roman or Arial Black, go for anything more imaginative and you’re taking your chances. There are different fonts installed on PC, Mac, Android, Linux, and so on. If the one specified isn’t there, another must be substituted. The result might look OK, or it might be grotesque.

But hey, it’s the Internet – why not just download a font? The idea looks good at first glance but there are a number of problems. A font is a big thing and takes time to download, so you either wait for it to finish before the text can appear, which would be tedious, or switch to it when the font arrives, which would be ugly and annoying.

What’s more, fonts tend to be expensive and proprietary. It’s a profitable industry, and foundries (many still call themselves that) are reluctant to give their high-value goods away. Thanks to this lack of cooperation, attempts to make downloadable fonts part of Web design have sputtered and died several times already in the medium’s brief history.

And that’s the stage we’re still stuck at, as I was telling a friend a couple of days ago. Afterwards though I decided to check on the latest developments – and I found I was dead wrong. Things have moved fast since I’d last looked. There are currently two “Webfont” services actually up and running. Adobe’s, which you pay for, and one from Google that’s free.

Hmm. I do like free.

So I had to try this. I’ve been (sporadically) working on a whole new cutting-edge website using Drupal and PHP and MySQL and all that good stuff. It’s still a long way from being finished though, and the aesthetic stage of the design, when I get there, must start with a clean sheet. So I can’t be doing experiments on that. In the meantime however I’ve neglected my actual working website. In fact it’s dated to the core now. Standards compliant, sure, but not to standards that people remember now. And the newest material on it must be five years old. But it’s all the showcase I’ve got, and I do actually get business from that site. A design refresh might be just the thing.

So I gave it the Google Webfont treatment. You might find it displays the old sensible face first before the fancy handmade-looking one appears, but once it has loaded you wouldn’t know it’s not a normal font.

The range Google has is still limited, at least when it came to my specific need for an all-cap, comic-lettering style font. The best I found is called “Walter Turncoat”, for some bizarre reason. It might remind too many people of MS Comic Sans, but it bears a surprisingly good resemblance to my real hand-lettering.

It’s not hard to use Google’s free Webfonts on your own site. (If you take care of your own hosting anyway. If you have a hosted blog it can be more tricky and/or costly. I’ve added a few useful links below.) In fact there are three ways: The easiest is to simply add an “@import” link to your style sheet. That way you can change the whole site with just one edit. However that method can cause some browsers to slow down, so the faster way is to add a link to the header of every page. There’s also a technique using JavaScript, but I don’t know of any advantage to that. More details on Google’s page.

It’s true that it seems a little rough. In the illustration I’ve inflated one up to some ridiculous size (350pt!), and you can see that in spite of it being a real vector font the edges are bizarrely complex and jagged. This I guess is an artefact of the compression that makes them load at such an impressive rate.

I’d like to see the roughness improved upon somehow – or perhaps it will be less important as screen resolutions continue to increase – but even with it I think the font gives the site a personality and friendliness that simply would not have been possible otherwise. We are on the threshold of a new era here.

Categories
Cosmography Technology

State Of The Uni: ON

A picture of my college’s quadrangle from an absolutely fantastic angle that makes it look like a bucolic idyll and not on a campus crowded with many much less attractive modern buildings in the middle of a city and opposite a busy hospital.

I don’t want to speak too soon here, but… OK that is a barefaced lie. I do want to speak too soon. And so I will.

I’m going to be a scientist! Just like when people asked me what I wanted to be when I grew up.

Well to be precise I’m going to have an MSc. If I complete the course. But I have a place! That’s the main thing. They actually let me back into college. After last time.

It’s an MSc in Information Systems Management. I wanted something that would seriously augment my Web design and IT abilities. I liked this because it’s extremely practical; hands-on and skills-orientated rather than theoretical and talky, an interesting mix of art and technology and… well, business.

There, I said it. Business. My greatest fear. Now I must go face to face with that which I abhor.

All right, I am in business; I’m self-employed. But that’s just a way to be an artist without getting arrested as a vagrant. I’ve had as little to do with the business of business as I possibly could. Now, I’ll be studying “business situations”, whatever those are exactly. Thinking about business problems. Using business words…

But I reckon I’ll enjoy it if I approach it in the right way. I like having problems to solve, things to fix. This is real-world problem solving, using techniques and skills I enjoy. I might actually be good at it.

It will mean getting well outside my comfort zone though. I haven’t studied anything other than what immediately interested me, sat listening for hours at a time, even slept to a regular schedule, for over twenty years.

I’m sure this is going to be very good for me.

Help.

Categories
Technology

My Web Design Hell

image

You know when you’ve got some news or an idea you’re dying to tell someone, but can find no one who has the faintest idea what you’re on about?

Good.

I’m trying to learn some advanced Web design. Briefly, websites were originally done pretty much like you might lay out a document or design a magazine spread. You put things in their place, they stayed there. The more modern way is to use a ‘content management system’ (CMS). With this you just design the template of your page, then upload your content. The user enters search terms, and a page containing what they want is created for them.

This is obviously a lot more complex, as your website is now essentially a computer program. But there are plenty pre-existing systems you can use. WordPress, the one behind the blog you’re reading, is a fine example.

I’m using the CMS called Drupal because it’s widely said to be the most flexible and capable of all, and if I’m going to the trouble of learning any it might as well be one I can use for other things. But lord, I bit off something chewy. It has that vast sprawling-ness so typical of popular Open Source Software projects, and the learning curve is vertiginous. It’s made out of modules; a core with all the basics built in, then countless others you can add for greater functionality (and complication). I parachute into this jungle with little idea of how to tell a tree from a tiger.

But sometimes things are hard for wholly wrong reasons. I was stuck there for weeks – well, hours spread over weeks – because something really basic didn’t work. You see I want a site I can upload cartoons to, so that people can search through them. But Drupal 7 flatly refuses to display images in search results. Imagine how annoying that would be on eBay. Of course I thought that this was my fault, that I’d just got one of its (many, many) settings wrong. But I discover eventually that it’s a bug. The only solution – or at least the only one simple enough for me to implement – was to add a whole other module that did it right.

So I have solved my first real CMS problem, and went to bed tonight with the basics of my new site actually working. Whereon I find I’m too excited about the damn thing to actually get to sleep.

Thanks for listening.

%d bloggers like this: