So I was actually surprised to come across this impassioned article on developers building websites for Webkit only (the rendering engine behind Safari and Android), and the W3C’s proposal to adopt the -webkit- prefix as a de facto standard. Surprised because it strikes me as absurd that anyone would develop something on the web that only works for one browser.

After all, the whole idea of the web is that it’s accessible to anyone, regardless of whether they can afford an iPhone or Android smartphone. The nuts and bolts of the web are built on this idea: HTML and CSS are free, easy to learn, easy to distribute, easy to render and independent of corporate influence.

Maybe I’m old. I can remember the browser wars – a time when websites would only work in Internet Explorer. Banking websites would make visitors upgrade from Firefox to IE6. Can you imagine that now?

Graceful degradation is absolutely fine. But it’s frankly depressing that people are building websites that only work on certain devices, regardless of how trendy they are, or whether they’re made by Microsoft, Google or Apple. And none of these companies should control HTML and CSS standards.

Not so smart from Smart Planet

New(ish) year, same old problems. This time not one, but two pop overs. Not gentlemanly in the slightest.

% based layouts should only be applied to wide screens

Common sense this, but applying a 75% width to a 240px wide screen results in a very narrow content column. Generally, I apply (small) margins and paddings to my base stylesheet and only set a width=x% for wider screens.

Go mad and use most of your available space

Scherzo 3 uses 90% of the screen, plus some 3ems of padding. Using most of the available screen looks good.

Scherzo at 75em

Set a max-width as well

Because a lucky few people have really wide monitors, I set a maximum width of 75em. This means the Scherzo 3 content column won’t expand beyond 707px (assuming the user hasn’t upped the font size), which is a decent enough limit for reading 16px Georgia comfortably.

% calculations are absolute

Sounds odd, but if you use ems to define your website layout, changes to the base font-size will affect font size and your layout. While this is logical, most people are only looking to change the size of the font rather than the layout dimensions.

Furthermore, upping the base font size in an em based layout can result in a horizontal scroll bar should the calculated width extend beyond the width of the screen. 90% of the screen width, on the other hand, is an untouchable value.

Testing Scherzo 3 on my own site for a while.

This dramatic picture of New York simply demonstrates how Scherzo does wide images.

Note: You can see Scherzo 3 in action (or a child theme, at least) on my reading list website.

I use Google Reader to collate all my Google News and Blog searches. It’s a really good system that generates a long list of articles that match various search terms.

So if you’re trying to catch my attention one thing you’ll need to do is write a good headline (more of which later, although the Baymard Institute has written a post on constructing eye catching headlines that’ll keep you entertained in the meantime).

The other thing you’ll need to do is establish some form of credibility or trust. And one of the quickest ways of doing that is by putting a real name to your article.

There’s nothing more suggestive of a robot churning out content than an Admin byline:

A Google Reader snippet. Lots of information here that I can use to evaluate the article. The headline is good, but the byline indicates this was written by a machine.

Setting a real name for website administrators is simple. Make sure you remember to do it whenever you set up a new site.

Also: there are two types of HTML signs. Those that tell machines what document role (paragraph, heading, list item etc.) a piece of content has (internal) and those that tell machines what role they serve in the world (time, small print, citation etc.) This is somewhat sketchy.

<time>1789</time> simply tells the machine that 1789 is a date. Not what it means.

And what this means? Simply that the pursuit of more meaningful markup is a waste of time. And that HTML can’t be judged or compared according to its meaningfulness.

The only considerations are how efficient, effective and manageable it is. How we can make meaningful interpretation easier.

Can’t say I agree with the premise, though:

Integrating social media services in your website design is vital if you want to make it easy for readers to share your content.

Displaying your latest tweets is a good way to encourage people to follow you on Twitter. The most common place to display tweets is in the sidebar, although you can add them to any area of the website.

All this extra stuff around your content is noise. People come to your site in order to find something out or for some entertainment. If they want to share your article on Facebook or Twitter it’s really not difficult to copy the URL and paste it into a box.

Do you ever use share links?

If people want to see your tweets they’ll look at your Twitter stream. Besides, a list of half conversations isn’t particularly interesting.

Adding a comment to an article is child’s play.

Make the reading process as easy and painless as possible. Honour the words by cutting out the distractions.

The comments are designed to make some form of sense, thereby bypassing spam filters and docile website editors.

Which begs the question: Why not get the spelling right? I know English is fiendishly unphonetic, but these are, on the whole, very brief comments.

And even more odd – every comment contains a misspell. Like it’s done on purpose.

There’s some poem, song or art to be found in here. Enjoy this weekend’s offering:

• I thouhgt finding this would be so arduous but it’s a breeze…
• This piece was a lifejacket that saved me from donwring.
• Hahahaha. I’m not too birhgt today. Great post!
• Whoeevr wrote this, you know how to make a good article.
• Articles like this are an example of quick, helpful aswenrs.
• Wow, your post makes mine look fbeele. More power to you!
• I can’t believe you’re not playing with me–that was so helf…
• A minute saved is a minute earend, and this saved hours!
• You mean I don’t have to pay for expert avdcie like this any…
• You mean I don’t have to pay for expert avdcie like this any…
• AFAIC that’s the best awensr so far!
• Hey, sbulte must be your middle name. Great post!
• This atcrile keeps it real, no doubt.
• With all these silly wbesiets, such a great page keeps my in…
• Wheover edits and publishes these articles really knows what…
• My porlebm was a wall until I read this, then I smashed it.
• If you wrote an artlice about life we’d all reach enlightenm…
• Your cranium must be protecting some very vaullabe brains.
• I think you hit a bullseye there fealls!
• All of these articles have saved me a lot of headaechs.
• Great post with lots of imoptrant stuff.
• Many many quality ponits there.
• You got to push it-this eessnatil info that is!
• Oh well, …
• Good point. I hadn’t touhhgt about it quite that way. :)
• A good many vlaubleas you’ve given me.
• Son of a gun, this is so hlepufl!
• Download free here: http://goo.gl/Nnsxe
• I bow down humbly in the presence of such geratesns.
• What a great rsecoure this text is.
• What a great rsecoure this text is.
• Wow! That’s a really neat aswner!
• So that’s the case? Quite a reevltaion that is.
• Got it! Thanks a lot again for hlepnig me out!
• Great stuff, you helepd me out so much!
• Surprisingly well-written and informative for a free online …
• An itnelligent answer – no BS – which makes a pleasant chang…
• Way to use the inertnet to help people solve problems!
• I appreciate you tiakng to time to contribute That’s very he…
• I bow down hmulby in the presence of such greatness.
• Calling all cars, clailng all cars, we’re ready to make a de…
• Gee willikres, that’s such a great post!
• No qeustion this is the place to get this info, thanks y’all…
• That hits the target dead cteenr! Great answer!
• You’ve really captured all the essentials in this subjcet ar…
• Grazi for mainkg it nice and EZ.
• Thanks for hleinpg me to see things in a different light.
• Grade A stuff. I’m uqnusteionalby in your debt.
• Yo, that’s what’s up trutfhluly.
• Ho ho, who wodula thunk it, right?
• That’s 2 cevler by half and 2×2 clever 4 me. Thanks!
• Just what the doctor orederd, thankity you!
• At last! Someone with the iinsght to solve the problem!
• Real brain power on dsilpay. Thanks for that answer!
• Unbelievable how well-wtreitn and informative this was.
• I suoppse that sounds and smells just about right.
• Glad I’ve fnailly found something I agree with!
• This is the perfect way to break down this inforamtion.
• I literally jmuped out of my chair and danced after reading …
• Hats off to whoever wrote this up and ptosed it.
• Alright algriht alright that’s exactly what I needed!
• Such a deep anwesr! GD&RVVF
• Kudos to you! I hadn’t tohghut of that!
• Thanks for hlenipg me to see things in a different light.
• I am forever indebted to you for this inofmration.
• Deadly accarute answer. You’ve hit the bullseye!
• Good point. I hadn’t tohught about it quite that way. :)
• This wesibte makes things hella easy.
• If only there were more cevler people like you!
• I could read a book about this without finding such real-wor…
• I didn’t know where to find this info then koabom it was her…
• Mighty useful. Make no mistkae, I appreciate it.
• Your arlitce perfectly shows what I needed to know, thanks!
• This piece was ceognt, well-written, and pithy.
• The expertise sihnes through. Thanks for taking the time to …
• A rolling stone is worth two in the bush, tahnks to this art…
• I’m not easily impreessd but you’ve done it with that postin…
• My hat is off to your atstue command over this topic-bravo!
• Your wesibte has to be the electronic Swiss army knife for t…
• Going to put this atircle to good use now.
• This is exactly what I was looking for. Thanks for wriintg!
• Weeeee, what a quick and easy soulotin.
• Wow, that’s a really clever way of tihnikng about it!
• Thought it wulodn’t to give it a shot. I was right.
• Surprsiignly well-written and informative for a free online …
• What a joy to find such clear thinking. Thanks for potsnig!

In an ideal world we’d build a separate site for tablets and mobile phones, tailoring the layout and content according to screen size and offering different navigation menus according to the physical restraints of the screen, and the user’s context.

This is an expensive and time consuming approach. It’s far more efficient (and elegant) to write our HTML once and style it for the user’s device. This is what Scherzo does.

However, long navigation link lists don’t work too well on narrow screens. Horizontal lists will often stretch beyond one line, which looks plain ugly, while vertical lists will extend beyond the bottom of the screen, which is plain baffling. They get in the way of the content.

Take the New Adventures in Web Design Conference website. It’s a gorgeous thing that scales perfectly on my old Nokia N78. However, the vertical navigation makes me scroll a lot before I reach the content (note: I guess this sounds like an argument for the fold. But there’s a difference between stating that all important content should be placed above the fold – an absurd idea on mobile and desktop screens – and that it’s OK if the navigation menu extends well below the bottom of the screen):

The New Adventures in Web Design Conference website viewed on a Nokia mobile

There are a couple of solutions that allow us to retain all our navigation links while using a small amount of screen space, but they’re not without their problems.

The Select option

This technique displays a standard, long navigation menu on wide screens and replaces it with a select box on narrower screens. See the Information Architects website for an example:

The iA widescreen navigation menu

At narrow widths the iA site displays two select boxes instead of normal navigation lists

While this solves our space problem, we’ve replaced it with another. From a usability perspective select lists are awkward for a few reasons:

• they don’t look like navigation lists
• they require two actions to activate a link
• they require more dexterity to use successfully than a properly styled list of anchors

What’s more, this technique can generate bizarre markup. Your HTML would include a list of links and a select box. You’d hide the link list at narrow widths and hide the select list from wider screen devices. If you’re accessing the page using software that ignores CSS you’ll see both.

Move navigation to the bottom of the page

This technique moves the navigation link list from the top of the page to the bottom, where it doesn’t get in the way of the content.

You place an in–page link to the navigation menu near the top of the page, thereby keeping to convention. See Manuel Martensen for an example:

Manuel Martensen's narrow screen navigation link. The menu link sends users to a different location on the same page.

The navigation menu sits at the bottom of the same page

However, there are problems:

• as with the select approach, navigation takes one more step than usual
• links to other parts of the page are baffling to most users. When we click a link we expect to be taken to a new page, or for options to reveal themselves where we clicked.
• if we don’t want to use the navigation menu we’ve lost our bearings

Manuel’s implementation is inventive. When users hit the link to the navigation menu the page scrolls, which reinforces the notion that we are still on the same page. There’s also a top button that returns to the top of the page. But this alleviates rather than solves the problem.

Think context and selection

I think there’s only one real solution to this problem, and that’s to limit the number of navigation links at narrower widths. Think about what your narrow screen users want to do on your site and only display these options to them.

At leonpaternoster.com you’ll see just two navigation links on mobile devices: home and archives. If you’re reading this on a wide screen you’ll see the change if you reduce the screen width. I figured the index, Scherzo and RSS links are largely superfluous as you can find them in post footers, or they offer a nice rather than essential means of navigating the site. They’re of secondary importance.

Technically this is relatively easy to implement – just use a small piece of CSS to either hide or reveal items within the navigation list. Ideally you’ll create a hide or similar class and add it to list items you don’t want to display at narrow widths. This is the CSS I’m currently using:

header nav ul li.menu-item-1932 /* wp generated class */ { position: absolute !important; /* CSS nabbed from snook.ca */ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); }

The only problem here is that you’ll need access to your site’s styles in order to target your links, which may not be possible if you’re using a CMS. Maybe WordPress and the like will build this function into their dashboards in the future.

Still, it’s had a somewhat chequered history. It started out as a very simple thing: no customisable backgrounds and headers, no threaded comments. At one point older versions of Internet Explorer weren’t served the two column version at all; now they are (through some conditional comments and javascript).

I plan to start charging for Scherzo in the future. In return for the 10–20 quid you’ll get:

A navigation menu

There’s nothing stopping you from adding a menu as a sidebar widget, but the single most common request I receive is for a horizontal navbar. I’m still thinking of ways of implementing this in a mobile friendly way. I’ve discounted a select box and link to a bottom–of–the–page menu. Any ideas gratefully received.

A truly flexible layout

When I first created Scherzo back in 1814, I was using ems to size layouts. Now I (usually) use percentages if there’s more than one column involved, and that’s what I’ll do with Scherzo.

No media query support for old versions of Internet Explorer

At the moment IE<9 loads some javascript to make it understand media queries. I’m becoming more strident in my approach to bodges and polyfills, so I’ll be ditching this support. Instead, older versions of IE will be served a slightly modified version of the base stylesheet. They won’t see what sits within the media queries. (See Leaving Old Internet Explorer Behind for some more details.)

Some form of support

Not sure what, yet, but something.

Better header images

Scherzo uses a background image for the header. I plan to change this to an inline image, which will make header links more usable. The image will also scale better than it does at the moment.

The far future

I’m also thinking of a few more custom options that you’ll be able to access in the dashboard; accent colours and fonts, for example.

What would you like?

If you’d like to see any changes to Scherzo, drop me an email at mail@leonpaternoster.com or tweet me.