Blog redesign: October 2012 edition

(Email and RSS subscribers will need to click through to see the change)

I’ve felt for a while that I should make this blog better suited to mobile interfaces and, in particular, touchscreen devices. This is known as responsive web design and I’ve been particularly impressed with Microsoft’s ‘Metro’ design language leading to a tiled approach on Windows smartphones. To my eyes it seems streets ahead of Apple’s skeuomorphism.

Yesterday, when I was browsing architecture blogs and came across the Contemporist site, it reminded me of that clean, touchscreen-friendly approach:

Contemporist blog

I did something I always do when I see blog themes I like: right-clicked to ‘View Source’ as you can tell which blog theme is being used. Judging by the CSS it’s a custom job, meaning I couldn’t simply download the same theme.

That was a shame, but it spurred me on to look for Metro-inspired blog themes. I was looking for something with a tiled, fairly squarish look but that didn’t scream Microsoft. Beautiful though it is, the Subway WordPress theme (from €39) was out of the question. I’d have looked like a Microsoft fanboi:

Subway Metro theme for WordPress

I also found the MetroStyle theme ($45), which I rejected for having too many boxes at the top:

MetroStyle WordPress theme

I downloaded and installed the WP Metro theme (£FREE), but I had trouble making it look decent with my content:

WP Metro theme for WordPress

In the end, after considering signing up to a course to get the Anaximander theme, I decided to pay $35 for a WordPress theme entitled Metro:

Metro theme for WordPress

Like many premium themes it comes with an extremely easy-to-use configuration dashboard in addition to the usual WordPress options. Nevertheless, old habits die hard and I delved into the CSS to tinker about a bit!

I hope you like what you see, and if you want to see the ‘responsiveness’ in action, either resize your browser window or visit this site on a mobile device. It’s only my first attempt – I’ll be tinkering around making improvements here and there over the next few weeks.

Any feedback is gratefully received!

Notes:

 

Wordle-like Twitter screens for conference keynote presenters?

I’ve been at the PELeCON conference this week. After her keynote, Keri Facer mentioned in a couple of tweets that the Twitter wall being visible to the audience but not the speaker can be problematic. Everything was positive in Keri’s session, but this isn’t necessarily the case for everyone (see danah boyd example).

So it got me thinking about what I’d like, as a presenter, when doing a keynote. There’s lots of different reasons tweet about a session using the conference hashtag. For example:

  • To let those who aren’t there know what’s being said
  • To give a voice to the livestream audience (if applicable)
  • To provide links to what’s being discussed
  • For banter/puns/general merrymaking
  • For agreement, disagreement and questions

…and many more.

Whilst you’re presenting there’s no way you can keep up with the stream in the same way that you (potentially) can when in the audience. But it would be nice to know the gist of what people are saying in the backchannel.

Thinking about it, I casually remarked that some kind of Twitter screen in front of presenters would be useful. And if those tweets that had been retweeted (RT’d) several times could appear bigger, so much the better.

Chris Atherton mentioned this sounded a lot like Wordle and Pat Parslow riffed on the idea talking about the potential for sentiment analysis.

That idea look something like this with traffic light colours for sentiment:

Twitter-Wordle idea

The trouble is, that’s still too much to take in whilst you’re presenting. So, thinking some more, I reckon all that’s needed is the top three most RT’d tweets. Which would look something like this:

Twitter wall for presenters

What do you think? Would this be useful?

How hard would it be to make it a reality?

 

Major blog redesign.

This blog used to look like this (click to enlarge):

Old version

Now it looks like this (click to enlarge):

New version

Why?

  1. More information
  2. Better user experience
  3. It was time to tinker

Continuities: things that have stayed the same

  • Reasonably similar colour scheme
  • Prominent links to social media profiles
  • Obvious links to RSS and About page for new visitors
  • Links to related posts
  • Evernote and Instapaper integration

Innovations: things that have changed:

  • New name for blog, to enable guest posts improve identity
  • Photos of real Doug, not just social media avatar
  • Use of @font-face web font (Orbitron from The League of Moveable Type)
  • Change of body font from Georgia to Arial (it’s easier to read online)
  • Recent comments in sidebar
  • Links to e-books
  • Better use of footer

You like? Wondering why Synechism?

 

Digging deeper: some considerations for blog design.

Introduction

I’m off work ill today, having succumbed to the bugs brought by two separate sets of visitors in the last week. Fun.

When I’m ill, which is thankfully an occurrence seemingly less frequent that it used to be whilst I was in the classroom, I see it as an opportunity to ‘step outside of the stream’ and do something slightly different. I’m constrained, obviously, by a need to avoid overly exerting myself but, in a way that my parents didn’t understand when I was a teenager, there are as many and varied things one can do in the digital world as there are in that of the physical.

Today, then, I decided to continue the ongoing saga of the redesign of this blog. Whilst to some the design of their blog is merely a choice between pre-existing themes, to me it’s – perhaps slightly pretentiously – much more than that. Not only is it an opportunity to do some research in the field of webdesign and user experience (which I always enjoy) but it’s an chance to reflect upon my digital identity and the facets I deem important to present to other people.

Popular blogs

Whilst Technorati may have taken somewhat of a dive in popularity since the heady days of 2005, it’s nevertheless useful for ascertaining which blogs are the most popular. There is, of course, a problem with equating the most widely-read and visited blogs with effective design and user experience, but I’m going to assume that there must be at least a significant overlap. Those with a large readership are likely to be the most effectively monetised and therefore will have the ability to redesign to improve that monetisation. Or, at least that’s the theory.

After looking at some of the top blogs I came to realise that the functionality of a blog depends massively on the expectations of its audience. Most of the top 50 blogs are about either politics or technology. Whilst I blog about the latter (and occasionally about the former) the type of technology being talked about on the top blogs is the latest and greatest. This is reflected in the shiny shiny nature of the blogs and short, sharp updates. Take Engadget, for example, a blog that I, for one, read every day:

Good practice, is of course, contextual. That is to say that what works in one field doesn’t necessarily work in another. A blog is not a blog is not a blog.

Refocusing

Looking at Technorati’s categories for a better alignment, it was difficult to see a ‘natural fit’ for a blog like this one which ostensibly covers ‘education, technology and productivity’ but also delves occasionally into leadership, design and philosophy.

It turns out that the Technorati’s business directory looked to have the best fit. I should say that my aim in doing all of this is not to slavishly replicate an existing design, monetise this blog or become a dedicated follower of fashion. Instead, I’m looking at what works in practice, not just on the drawing board (and, to be honest, in my head).

Here’s thumbnails of the top 10 (fairly loosely-defined) ‘business’ blogs:

Notice anything?

  • Sidebars on the right
  • Coloured bar at the top
  • Easily identified logo
  • Coloured sections in sidebar for highlighted content
  • People’s faces
  • White backgrounds

Digging deeper

Looking at the top themes is all very well, but in my daily digital digressions I often come across sites which feature elements or an overall design that I find pleasing. I’ve attempted recently to start adding the tags ‘webdesign’ and ‘inspiration’ to my delicious links but it’s early days.

Here’s some sites I’ve come across recently that have pleased and/or inspired me:

  1. TECHi – clean, clear with colour-coded categories and thoughtful typography.
  2. Cennyd Bowles on user experience – very crisp and obvious functionality (as you’d expect from a UX guy) – nice used of ‘mulletised’ post structure.
  3. Joe Hewitt – minimalist yet distinctive.
  4. 37 Signals – colourful whilst still being predominantly white; simple.
  5. Bryan Boyer – über-minimalist, stripped down to the bare essentials (Google cache as seems to be down)

Extrapolating from the above, it would appear that the things that appeal to me most are:

  • Minimalism (or at least, stripped-down design)
  • Innovative use of colour
  • Appropriate typography

Finally…

Having come across Cameron Moll’s Good vs. Great(er) Design a couple of months back I felt I needed to go back through it. Awesome does not even begin to describe how good this slidedeck is! Check it out (I’d click on menu to go full-screen):

My favourite parts?

  • Great design produces an emotional response
  • “The simplest way to achieve simplicity is through thoughtful reduction” (John Maeda)
  • Effective design is like good poetry

All of these considerations are why people pay people such as my friend Paul Lewis at Fi to do these things for them. Not me, I’m interested in the nuts and bolts. 😀

 

Got 5 seconds? Help with the redesign of this blog!

Those who follow me on Twitter will have seen that I’m currently redesigning this blog. More on the theory and practice behind that to come, but I wonder if I could ask for 5 seconds of your time?

The first few seconds of visiting a website are crucial for visitors gaining an impression of its content and author. Unfortunately, it’s difficult to gain insights into what visitors think during that period.

Until now, that is.

Using a tool called Clue I’m able to take a snapshot of the new site and submit it for your consideration. The following link is available until midday on Wednesday 13th October 2010 – I’ll share the results. Take a look!

clueapp.com/17352

 

UX: 5 valuable resources

I realised recently that the middle of my Venn diagram is ‘user experience’ (broadly considered) user outcomes. This incorporates what’s known as UX:

User eXperience (UX) is about how a person feels about using a system. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction (HCI) and product ownership, but it also covers a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s performance, feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change. (Wikipedia)

Since then, I’ve been looking for resources that will help me sharpen my thinking around UX. Here’s five that I’ve come across:

  1. UX booth – a blog ‘by and for the User Experience community’.
  2. Chris Messina’s Design Patterns – a collection on Flickr of ‘interesting interfaces and design flows from around the web’. Definitely worth checking out!
  3. UX Myths – a collection of user experience misconceptions, with explanations of why they aren’t true.
  4. Smashing Magazine: 25 User Experience videos that are worth your time – the title says it all!
  5. UX Magazine – a really nicely laid-out site (as you’d hope!) settting out ‘to explore, promote & discuss the multiple facets of user experience one article at a time.’

Have you come across UX resources that would help? 😀

 

Let me tell you what I think ‘this’ is.

Last week I wrote a post entitled What’s this? which included the following diagram:

Answers from the comments:

  • DEPTh
  • A planned presentation
  • Apple
  • Nirvana
  • A 21st century educator
  • The future
  • dougbelshaw.com/blog
  • Trust
  • Innovation

Good answers all. 🙂

My answer? The user experience. User outcomes*

Think about it.

It’s what designers, teachers, productivity gurus and technology enthusiasts all strive to improve. And it’s what Kathy Sierra used to blog about. I think it’s time to take up that mantle. :-p

*Thanks to Neil Adam for the pointer!

 

New metaphors and symbols required!

What’s wrong with this image?

Part of the problem with technology adoption in education comes from perceived parental pressure and expectation. This is fuelled by a rather reactionary media who use outdated metaphors and reference points in their discussion of education.

Want to represent education? Here you go:

The trouble is, I can’t remember the last time I saw a teacher in a mortarboard, a child giving an apple to a teacher, or a blackboard in a classroom. These are outdated metaphors.

Come to think of it, why should the following represent ‘accessibility’?

I’ve been reading about Universal Design for Learning recently, which makes ‘accessibility’ an issue to consider for every student and individual. It’s not just about people with disabilities.

We need new metaphors. The way we communicate things is hugely important and imagery is especially important given the human brain processes images 60,000 times faster than text.* We need metaphors that help to explain education as it should be in the 21st century, not the 19th.

How can we represent learning and education more generally in a more forward-thinking way?

* I can’t seem to find a source for this scientific study although it’s often mentioned.

If you’re still wondering what’s wrong with the introductory image (which I took at a service station recently) it uses a green RSS icon instead of the recognised wifi logo. It’s not the end of the world, but they should know better.

 
css.php