Typography, Context and The Desktop

As 95% of the web is typography, both content and context are king, and mobile first is the way to a more ubiquitous web, are we forgetting about the lowly old desktop?

Obviously, at this point, Responsive Web Design is in it’s infancy. We’re finding our feet and experimenting with techniques and what works across a multitude of viewports, devices and contexts.

Of course, context is the hardest thing to define in any given situation. From a user being outside and their screen being difficult to see in the sun, to someone doing a task whilst being distracted as the kids run riot around their feet, or simply sat in front of their desktop machine in their office.

And it’s in the desktop context that I currently find an odd trend developing as we use responsive techniques for typography.

Not that long ago, 16px was deemed to be the smallest size for a good reading experience, but there was no mention of an upper limit.

I really think there should be. At least as a guide. Larger sizes for headlines? Fine. Even blockquotes being larger than the main body copy? Not a problem. But the body copy itself?

This is where we need to make sure we’re delivering a good reading experience.

The ‘Web Design is 95% Typography’ article (linked at the beginning of this post) is a perfect example of a good reading experience, not only at the desktop, but also responsively through other, smaller viewport sizes.

At it’s largest, in which context we would currently assume as the desktop, the font-size reaches 21px (this is the computed style, in the CSS it’s actually 1.14286em).

However, I’ve come across a couple of notable sites where, for me, the text is just too large to be readable in my desktop context.

N.B. At this point I’d like to say that this isn’t about attacking these particular sites, one is the site of one of the most influential people on the web, the other is a great project providing great insight from it’s contributing writers, but for the purpose of this post, they are simply an example of the point I’m trying to make.

Just because I have a desktop machine, and my resolution is 1920×1080, I’m still only 12-24″ from my monitor at any given time.

For these particular sites, I have to be at least 36″ from my monitor for it to be a comfortable read. But then I can’t reach my mouse and keyboard.

So how do we compensate for this? Well, the key, again, is context, the most difficult of things for us to detect in a technical capacity.

There’s no real way (as far as I know, so please correct me if I’m wrong) to know the resolution and physical monitor size of an end user. So what can we do?

The only thing I can think of is to give the user control. Admittedly they can do this by using the zooming functionality in the mainstream browsers, but should we be providing users with the ability to adjust sizes for their own specific tastes?

I’ve noticed a few rumblings on Twitter of some sites allowing their users to disable the responsive design, or at least thinking about it.

Is end-user control over typography size a step to far? Or is it just a small tweak from accessibility and usability standards to allow a users to change stylesheets and font sizes?

I’d seriously be interested to hear what you think.

The worrying state of our knowledge on accessibility

When I say ‘our’, I refer to us as an industry. A great, innovative industry that builds the web as we know it.

But unfortunately we don’t build for everyone.

We think we do, I mean, it’s the Internet, everyone has the Internet. Well, pretty much, but not necessarily in the forms that we view and use it.

As designers and developers who build for the web, I’m sure the vast majority of us know about screen readers, users who have javascript disabled, and people with older browsers.

That’s why, when I see a tweet like this one:

@wdtuts: Quite surprised by how many of our readers seem reluctant to make their sites accessible enva.to/12aquxY #challengeaccepted

I get rather worried that it paints a picture that if you don’t build your site using ‘em’ instead of ‘px’, your site isn’t as accessible as it could be.

And this is from a site that aims to help teach designers and developers how to build things on the web.

Out of all of the possible issues with accessibility on the web, things like ARIA Landmark Roles, alt text on images, unobtrusive javascript and contrast ratios, using ems instead of pixels really wasn’t on my radar.

This is why things like The Accessibility Project are very important. It’s a great repository of information, and a community driven effort to make learning about creating accessible websites much easier than Googling and scouring through pages and pages of documentation.

If you want to make sites that everyone can use, I suggest we get some collective reading and learning done.

And if there’s things you know that aren’t on there, it’s time to contribute.

Either way, get cracking.

The birth of Northants Geekup

As I’m writing this opening paragraph, we are but 4 hours away from the very first night of Northants Geekup.

I’m not really nervous, which is strange, but I know there’ll be at least 5 people there! To me, that’s all I want, just enough people to talk about their work and the things they love about the web industry. That people want to share their experiences and opinions, and hopefully generate some inspiration and maybe even new working relationships and maybe even new friendships.
Continue Reading

Learning to let go of your work

I’ve recently been listening to the Unfinished Business podcast by Andy Clarke and Anna Debenham on my daily drive to and from work.

In episode 4, ‘Total Jerk Loser’, Andy told of how he never revisits a site once the client moves on, and makes a very good point as to why you shouldn’t put yourself through it.

This got me thinking. I have found it very difficult in the past to let go of the work I’ve done. Not just in terms of handing over to a client, or revisiting the site once the client has had control for sometime, but handing over to the people I work with, my colleagues, my fellow developers.
Continue Reading

A misconception of the em

I have always been under the impression that an em was derived from the width of the character ‘m’ in your chosen font.

Wikipedia informs us that:

An em is a unit of measurement in the field of typography, equal to the currently specified point size. The name of em is related to M. Originally the unit was derived from the width of the capital “M” in the given typeface.

The key part in this phrase is ‘Originally’. Continue Reading

What’s going on in my funny mind

Earlier today, the wonderful Laura Kalbag wrote about burnout.

She wrote about how really caring about your work can create a serious side effect in the shape of burnout. But it was the last sentence in Laura’s post that made me want to write this.

“Let’s talk about these funny minds of us more.”

So here I am, about to give you a little glimpse into how my rusty old noggin functions. So here it goes…

Continue Reading

Why do our old processes have to die?

The web moves on at a rather astounding pace for such a relatively young industry. This is inherent in our industry as it was borne out of a still rapidly evolving technology industry.

In our little corner of the technology sector, we see constant updates to browsers, new elements and properties being added to HMTL and CSS specifications, and much, much more besides. As a result, our methods and process have to evolve just as fast to keep up with current trends and new developments.

But how do we keep our processes up to date? I don’t think there’s another industry out there that has to “wing it” as much as we have to when designing and developing in this “responsive” era of the web. Continue Reading

The importance of planning in our design process

Personally, I always loved the waterfall method. For the majority of my career I have solely been a developer. You’d go an get everything you need in terms of content, style and functionality. It would be all planned out, visuals would be provided, then I could get on with the build and finally launch the site.

This simply cannot be the case anymore.

For something as flexible as the web, especially since the introduction of Responsive Web Design, we cannot afford to be so structured in the way we plan, document, design and build a website.

On another personal note, I’ve never liked the agile process. I have only worked with the approach for a short period of time, but in my particular experience, it really felt like nothing was moving. Nothing was getting done. Just to re-iterate, this was my own personal experience. Once. Continue Reading

The Parallax Effect

I don’t mind a trend.

The yo-yo craze in my 3rd year of middle school.

Having your hair in “curtains” in the mid-90s.

Wearing a long-sleeved top under a short-sleeved t-shirt (I’m thinking of bringing that one back).

These are things that, to me, were great at the time, but looking back on it, with 20/20 hindsight, you wonder how that ever became a ‘thing’.

For me, this has already happened with these Parallax websites that keep popping up. Continue Reading

Second Wednesday – Wot I Learned

For the third and final(?) year of the New Adventures in Web Design conference, Second Wednesday had been bought on board as a fringe event alongside Erskine Bowling and Fr00tball.

For me this was a great decision. I’ve been lucky enough to attend all 3 of the New Adventures conferences, and the first year I took on the bowling, the second I decided to turn up on the day (which turned out with me being late). So for me it only made sense to take in a couple of extra talks and make sure I didn’t miss the start of the main event.

Second Wednesday was held at Antenna, a great little space which felt a lot more relaxed than a big conference does when held over a day or more. The atmosphere reminded me a lot of the quarterly MK Geek Night, with beer readily available, but with a few more comfy chairs. Continue Reading