Content, typography and geeky stuff (#MKGN)

Posted on By Mark Wilson
This content is 10 years old. I don't routinely update old blog posts as they are only intended to represent a view at a particular point in time. Please be warned that the information here may be out of date.

As another Milton Keynes Geek Night approaches, I’ve realised what a terrible blogger I’ve been lately… heck, maybe I don’t even qualify as a geek any more! I thought I’d try and make amends with these notes from the last event – which was, as always, an enjoyable evening with a real mix of speakers providing plenty of food for thought.  If these little tasters leave you wanting more, check out the audio on Soundcloud:

[soundcloud url=”https://api.soundcloud.com/playlists/28799053″ params=”auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true” width=”100%” height=”450″ iframe=”true” /]

Future Perfect Tense

The first talk was from Relly Annette-Baker (@RellyAB) – bursting with energy as she blasted through her talk on “Future Perfect Tense” – or creating content for in imperfect web. The talk is worth another listen but, effectively, Relly spoke of the separation of content and design so that websites can evolve as technology moves on.

Taking a physical world example, every piece of Lego is built to combine with every piece of past and future Lego, whereas Playmobil have hard-cast mounds.

On the web, our content needs to be structured chunks that build packages (screen sizes, needs, requirements, points). Once we understand what the content is, it can be put in the CMS, and we need to understand how people are using that content.

Additionally, we shouldn’t fork content – pragmatically there are times when we may need a separate mobile site but that’s short term – long term we need to cope with a plethora of devices (from a 1″ watch to a 50″ smart TV – we can’t have a new site for each one). We need to have a plan to move content to new sites.

Netflix is on 100s of devices but only has 3 content formats – short, medium and long.  And, as for the next big thing – Google “iPhone will fail” to see how, in 2006/2007, people were seeing an expensive smartphone, not a cheap portable computer.

None of us know the next cool thing but we don’t need to. Build teams, tools and content that adapt whatever the conduit. Create chunks that can move around and be repurposed. The rest will look after itself…

Knowing you know nothing

Knowing you know nothing was a short talk from James Bavington (@JamesBavington) who started out with a quote, from Socrates no less:

“The only true wisdom is knowing you know nothing” [Socrates]

Or, to paraphrase:

“You’re stupid if you think you know everything” [James Bavington]

There are many, many tools available to help us in creating websites (thankfully we don’t have to know them all) but web design concepts can be limited by our technical knowledge and ability:

James used an analogy about how he started investigating the Google Maps API to push his skillset and improve the user experience in a site he was creating.  This led him to a side project using the Google Maps API and experimenting with many features.

James takes the view that expanding your technical awareness (not necessarily ability) gives your creativity more to play with.  As someone who struggles with seeing loads of interesting “stuff” that I rarely investigate as fully as I’d like, I may try James’ advice for expanding my knowledge:

  1. Little and often.
  2. Set project challenges.
  3. Have a side project.
  4. Know that I know nothing.

Distributing the future more evenly, with JavaScript

Jeremy Taylor (@jdt_me) was next up – talking about distributing the future more evenly, with JavaScript.  The gist of Jeremy’s talk was that we’re not using the “slab of glass in our pocket” (i.e. smartphone) properly and that, instead of collaborating and solving the grand challenges of our age, corporations are in battle.

Many socially-ethical businesses will use “free” services that rely on ads – it’s just not healthy, Jeremy believes.

Browser is no longer a document browser but is effectively a hypervisor with each tab running in its own sandbox, and WebRTC peer connections to connect them, making the entire web a giant playground.

Citing the examples of Browserify (introduction) leading to WebTorrent, Jeremy suggests that we need simpler tools to create distributed systems and that JavaScript provides new ways to integrate and collaborate.

Sass: a whistle stop tour

Stuart Robson (@StuRobson) gave another 5 minute talk – about a CSS extension language called Sass (Syntactically Awesome Style Sheets).  Stu’s slides are on SpeakerDeck and he describes the talk as “a quick blast through what makes Sass an awesome extension of CSS that you should use no matter how marginally”.  It certainly looks useful to me – with variables, nesting, code snippets and more…

One minute talks

Then, there were the one minute talks with the usual bunch of recruitment pitches, conference plugs, and two that made me sit up and listen:

  • A new TechHub co-working space coming to Milton Keynes (although I can’t find any details on the web).
  • Fibe (sp?) are a young startup of school kids who understand they can only do so much (having said that, the speaker was really confident and came across really well). They are looking for an HTML hermit, a JavaScript genius or a database [demon] to work with and help them…

Take your stinking paws off my design you damn dirty developers

Finally, Andrew Clarke (@Malarkey) gave a provocatively-titled but fascinating talk that is intended to help developers udnerstand design issues.  Andrew’s talk normally takes an hour, so he cut it down to just typography (the full set of slides is on SpeakerDeck) and I could have listened for hours. whoever thought that the finer details of lettering could be so interesting?

I learned how it’s important to understand the size of type to be fused and how the measure (the width of the body of type) can be controlled for comfortable reading by reducing column widths or increasing font sizing (2-3 alphabets, i.e. 56-78 characters is ideal). I learned how adjustments to the measure need to be accompanied by changes to line hight and how different styles should be used for reversed out content to improve readability. I learned that the tracking (word-spacing in CSS) can be used to improve readability and that san serif typefaces need looser line heights.

Then there’s the area of typographically-correct glyphs:

  • Hyphens break words over multiple lines, or join-words.
  • En dashes are longer and denote a range (equivalent to the work “to”), for example 1–10 or Earth–Mars.
  • An em dash is even longer — for a pause — or a separate train of thought in the same sentence. Either use no space or a hair space. And two adjacent em dashes can indicate a missing letter in a w——rd.
  • Single and double primes should be used for feet and inches or minutes and seconds. Never for quotations!
  • Quotations use curly quotes: “ ” or ‘ ’.
  • And an ellipsis is not just 3 dots — it’s one entity… which marks a continuation.

[Related reading: 10 HTML entity crimes you really shouldn’t commit]

Moving on, Andrew spoke of markers and margins in lists, and of using CSS relative positioning to place © close to the baseline – and adjusting parentheses too!

In summary: designers and developers need a better understanding of each other’s work. They need to know how to work together!

When’s the next one?

If you think this sounds good, follow @MKGeekNight or check out the MK Geek Night website – MKGN number 9 is coming up on 12 June 2014 and speakers are:

  • Rachel Andrew (@RachelAndrew): Your own definition of success – choosing a profitable side project idea.
  • Dan Donald (@hereinthehive): Designing evolution.
  • Robert Bavington (@RobertBavington): Responsive Web Design Today.
  • Ben MacGowan (@BenMacGowan): The era of gratuitous animations.
  • Mark McCulloch (@wearespectaculr): Are you speaking Scottish in Tokyo?

There’s usually free beer and pizza too… so what’s not to like! 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.