Tag: theme

Redesigning dougbelshaw.com

I wrote my own HTML and CSS for dougbelshaw.com back when I was at Mozilla. It was originally a template to be used with Thimble, and a few people ‘forked’ it to use it for their own site.

Although it had some nice features, however — like a JavaScript library that swapped out text, a custom DuckDuckGo search engine, and one of my photographs of Druridge Bay — it wasn’t responsive and, quite frankly, it looked a bit old-fashioned.

So, on the train on the way back from Dundee today, I thought I’d do something about it. I knew that I wanted something pretty simple and minimalist, yet with just enough to ‘delight’ visitors. It needed to serve static files, not rely on a database back end (as with WordPress).

I also wanted to link to something I’ve been tinkering around with that allows me to surface my most recent writing. I’d already put that together at dougbelshaw.com/feeds in response to people complaining that they miss my stuff because I post it in different places around the web.

For those interested, I’m using the LazyGuy personal landing page template (cheap!) and the Font Awesome Favicon Generator (free!)

Please do tell me what you think: http://dougbelshaw.com

(note that this redesign doesn’t affect the look/feel of this blog)

New blog theme

Dai Barnes reminded me on the latest episode of TIDE just how annoying pop-ups are. That led to me thinking more generally about my blog and how I wasn’t happy with the theme I’ve used here for the last six months.

As a result, I searched for a new, clean theme. I think I’ve found it in a lightly customised version of Rams. I ensured the sidebar was the same colour as my consultancy website, and that I used the same fonts.

I think it’s looking pretty good!

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:

Has WordPress-powered P2 left me ‘more organized and productive’?

Doug's work record - search for 'Google Apps'

Last month I wrote a post entitled How WordPress-powered P2 is (hopefully) going to leave me more organized and productive. If you haven’t read that yet, you probably should do now so that you understand what follows… :-p

There’s several reasons for my wanting to keep a record of the stuff that I do in my role as Director of E-Learning. These include:

  • Performance Management
  • An aide-memoir when dealing with other people
  • Interest – how much of my time do I spend on various activities?

Does it work?

If you’ve got this far into a second post on the subject, the question you’re probably asking is probably something like Does it work? or Is it useful? The answer to both of those questions is YES!

What’s harder to answer is whether it’s left me more organized and productive. After all, entering even a one-liner (and adding tags) takes time. When you’re flat-out busy (like I am most days at the Academy!) that could be seen as a bit of a waste of time.

So I suppose the best way to answer questions relating to organization and productivity are to take the politician’s approach and not really answer them. Instead, I’ll tell you what I’ve used the WordPress + P2 system for. So far, it’s been for three things:

  1. Checking when I emailed someone and tasked them with a particular activity.
  2. Counting how many of a particular meeting I’ve been to.
  3. Seeing which individuals I interact with most often (the tag cloud is very useful for this!)

I can’t help but think that this system would go from good to great if it were being used by more than one person. For example, ICT technicians could use it to keep a record of what’s going on, cropping up, and taking their time. This could be viewed by their line manager, who could make comments. And as with my personal work record, it could be password-protected yet internet-based for secure yet easy access! 🙂

P2 is available as a pre-installed theme at WordPress.com. A standalone version for self-hosted WordPress-powered blogs can be downloaded at p2theme.com.

So why not give it a go? It’s free! 😀

How WordPress-powered P2 is (hopefully) going to leave me more organized and productive!

Ever since I read Matt Mullenweg’s post How P2 Changed Automattic I’ve been thinking about how I could best utilise a similar system. If you don’t know what I’m talking about, watch this video:

But then it dawned on me this morning: there’s no reason I couldn’t use such a system for private, me-only stuff!

As E-Learning Staff Tutor last year and as Director of E-Learning this year, I’ve been keeping a record of what I’ve been up to. This is as much about me being able to cross-reference stuff as proving to others (if needed) that I’ve been fulfilling my role. Up until now I’ve been using Google Docs, which looks like this:

Work record on Google Docs

Now, however, with WordPress, the P2 theme and a plugin called Absolute Privacy, I’ve got a close, web-based system that should hopefully be a lot more flexible and powerful:

Word record on WordPress/P2 system

We’re discussing productivity for educators tonight at EdTechRoundUp‘s weekly meeting. Why not join us? I’ll post my reflections on this system next week! 😀

Reblog this post [with Zemanta]

A Week of Divesting: Blog design

If you’re reading this in a feed reader, you might want to click through or click on the images below.

A short post, this one. I’ve been working on-and-off for the past few weeks on a new blog theme courtesy of an excellent WordPress plugin by the name of Theme Test Drive. This allows administrators (i.e. me) see a different theme when they visit this blog than non-logged in visitors (i.e. you).

Here’s the difference between the two:

Old blog theme - 'Digital Statement'

The old theme – ‘Digital Statement’

New blog theme - 'New Geeky White'

The new theme – ‘New Geeky White’

Some may say they prefer the old one. It’s certainly more ‘visual’. But I didn’t like the font and the amount of time it took to load. Serif fonts are much more pleasing on the eye and it’s certainly faster loading. Readers don’t have to click through to read the most recent post, and I don’t have to write a summary and crop pictures down to 90×90 to go next to that summary.

Taking my inspiration from the Flickr blog and Seth Godin’s blog (see images below) I pared everything down as much as possible.

Flickr blog Seth Godin's blog

I took as my starting point the (very yellow) Old Popular Yolk theme, which looks like this:

Blog theme - 'Old Popular Yolk'

It was then very easy to modify the CSS to end up with what you see now. 🙂

I’ve called this derivative theme New Geeky White. I’m no good at CSS or WordPress hacking in general, but if you really want to use the theme get in touch and it’s yours!

The story behind the new design of dougbelshaw.com

Whilst I haven’t tinkered with the theme for this blog (yet!) I’ve changed the landing page when you visit dougbelshaw.com. There’s a bit of a saga behind it. :-p

A tweet from Kathy Sierra directed me to Brynn Evans’ (@brynn) blog where she had a great post about an idea called ‘betacup’. What struck me about Brynn’s blog, however, was the clear and straightforward layout. Summising that she was running WordPress (most blogs, including this one, do!) I looked in the footer for an indication of the theme she was using.

Brynn - blog footer

Hmm… no dice. Another way to find out a blog’s theme is to use the ‘view source’ option in your web browser (View/Page Source in Firefox). Sure enough, this revealed the following:

Brynn - blog theme

In other words, the theme being used was in a folder with the title love_work. Again, summising that this was probably short for Love & Work, I searched Google for it. No joy.

Refusing to be beaten and now intrigued, I looked at the CSS by following the link above. CSS stands for ‘Cascading Style Sheets’ and it is the method used to ‘style’ the blog. Authors often put their details at the top of such documents:

Brynn - blog CSS

Although a little downhearted that it would seem that the author – a ‘Chris Messina’ (@chrismessina)- created a custom theme (meaning it was probably generally available for me to tweak) I decided to visit his website – factoryjoe.com. I was impressed with what I saw:

Chris Messina - profile

I thought this was wonderful. Not only does it link to everywhere Chris is online (and deems important) but it tells a story. Unthinkingly (and to my shame) I set about copying him. I ended up with this (CC-NC-SA factoryjoe):

Doug Belshaw - old profile

I did mention on Twitter what I’d done (in fact my network were very helpful in my tweaking it) leading to this tweet the following morning from Chris:

Chris Messina - tweet about Doug Belshaw's profile

Whilst Chris was a gentleman and agreeable about it, others were a bit more to the point. The outcome was that I realised I needed to do my own thing rather than copy someone else’s design. After all, as someone who makes his living through web technologies, it’s only fair that Chris’ design is unique. 🙂

I spent a while thinking about what I wanted and, to cut an already-too-long story short, with the help of my Twitter network, I’ve ended up with this:

Doug Belshaw - profile

Yes, I’ve had all the comments that I’ve got stubble on my head, it’s a bit ‘noir’, it looks like a dating site, and I look like I work for Apple. Oh, and my wife wants me to point out that she took the photo. 😉

I may not be finished my tinkering yet. Chris has challenged me to incorporate a hCard and I really like the design simplicity of the Flickr blog. However, again, it’s a custom-designed theme…

Reblog this post [with Zemanta]

Thinking of changing this blog…

BloggeurI’ll keep this short. I’m thinking about changing this blog for two reasons.

  1. WordPress (which powers this blog) is database-driven. That means it’s not archived over at archive.org. That means if I died tomorrow, my work would be pretty much lost forever. This is the main reason.
  2. I get bored of the same blog theme after a while. While the one I’ve got at the moment (Digital Statement) allows me contain lots of ‘stuff’, I’m thinking crisp and clean – like the Flickr blog, for example. There’s also some nice onces over at plaintxt.org.

So… suggestions for blogging engines that produce static HTML pages? (or do you know of WordPress plugins that allow the same?) 🙂

Oh, and before you say archive.org renders WordPress blogs just fine, have a look at the mess it made of the previous iteration of this one! (pic)

Image cc-by Mike Licht, NotionsCapital.com

Update: Upon further investigation after this helpful tweet by @ctdesign, it would appear it could be something as simple as the link to the CSS file in my header. Cool.

Reblog this post [with Zemanta]

New Asus eee user? Read this!

This is my first blog post using the powerful combination of my new (replacement) Asus eee and the Scribefire plugin for Firefox. 🙂

The purpose of this post is to demonstrate how I have setup my eee for better productivity (i.e. made it more powerful whilst retaining ease-of-use). I think you’ll agree that my setup at least looks good:

There’s two programs/scripts I used to get to the above. I was made aware of these by the excellent Eeeuser.com wiki, which should definitely be your first port of call! In particular, the following are very useful:

  • pimpmyeee (a script that turns on and turns off features – includes themes, icons, ‘Advanced Mode’, etc.)
  • TweakEEE (a program that is installed to the Settings tab and allows you to modify the Easy Mode user interface)

By using these two programs/scripts I now have the advantage of being able to use the fantastic Easy Mode whilst having the power and flexibility of accessing the Start Menu. This means I can install and access programs such as Frostwire and the GIMP quickly and easily using Synaptic Package Manager:

How have YOU modified your eee? Are you pleased with the results?:p

Technorati Tags: , , , , , , ,

Minor update to blog design

John’s blog theme

I visited a blog called John’s blog today; I can’t even remember what for now. I like what he’s done with the Hemingway theme for WordPress (the same theme that I use on this blog), so I nicked his CSS. I hope he doesn’t mind…

css.php