Revamp

As regular visitors here will notice (I hope), I have carried out a revamp of At the Quill.

I’m in the process of building a new website. (It’s going to be called Stops and Stories and will be a forum of me to write about my travels – more on that later.) Anyway, for the new website I looked at a number of themes and I was rather taken with WP’s in-house theme TwentyFifteen. After I’d decided to use it for the new website, I heard the news that Google are changing the way they choose to display websites in their search results. (Journalists are calling this “Mobilgeddon”.) Apparently Google are going to favour sites that are responsive (adapt to different mobile devices) and that give users an easier viewing experience. Various tech journalists have estimated that “millions” of websites will be downgraded (for example, here).

Well, TwentyFifteen is a nice clean theme and seems to me to be both easy to read and very responsive. (I’ve tried it out on a number of different devices – thank you Gothenburg’s Media Markt and El Giganten.) That’s why I chose it for the new site. But then I got to thinking – in the lurid light of Mobilegeddon – that perhaps At the Quill would benefit from a facelift too. So, that’s what you see!

There’s one drawback with the new theme though – the header text and navigation buttons appear in the column to the left (on a computer screen) and there’s no space for my rotating banners, so I’m going to retire them. Before I say Adios, though, I thought I could give them an article to themselves and say a little about each of them. It also gives me an opportunity to test the responsive photo gallery plug-in I’ve added to the site as well. (Click on the pictures to see what I mean.)

Header- booksLet’s start with this one – as the blog is nominally about reading and writing. This is a photo of some of the books on my bookshelves, taken a good many years ago now. I tried out a single shelf first of all, but I decided having the books at an angle was more dynamic. I also decided that applying a raster effect (the dots) anonymised the books and made them more of an abstraction.

Header - cartoon faceThe second banner – which I think of as the cartoon faces – is a piece of cloth from IKEA that I photographed when it was being used as the wall of a tent. The bearded chap in the glasses, I though, looked a bit like me. To help the one figure stand out from the others, I applied a radial blur in Photoshop.

Header - stone eye This one comes from a series of photos I took of what I suppose is a kind of graffiti. The artist, Joakim Stampe, finds faces in the exposed natural rock beside roads and footpaths. He uses paint, mostly in a monochrome scale, to bring out the faces he finds. You come across his art here and there around Gothenburg. Writers, I believe find stories in all sorts of unexpected places, so it seemed a very appropriate illustration. (Here’s a little gallery of some more of Joakim’s faces.)

Header - horse This is another piece of graffiti – a regular horse coloured in like a Dalecarlian horse. It was on a grey electricity junction box. I’m all for redecorated electricity junction boxes (ugly rectangular things) and I liked the idea of a horse painted orange and patterned.

Header - MusesThis header – the muses – I only used for a short period. It’s a wall painting from the South Bank in London. I really liked the painting – I liked that it was made of words and that it named the muses. However, the only angle at which I was able to photograph it gave great prominence to Urania muse of astronomy and Polyhymnia muse of song. The next one along is “my” muse – Clio muse of history – but it’s difficult to make out her name, so I decided to take this picture out of the cycle. But I’ll let it in here, now, for one last fling.

Header - wavingFinally this is a picture of my waving shadow – together with my wife’s waving shadow. It seems appropriate to end with this as we are now waving goodbye to these banners.

The falling quills – actually a drawing of a goose quill I picked up a couple of years ago – remain as the wallpaper behind the left sidebar (on a computer – on a smart phone they’re in the header). I haven’t decided yet whether to add a logo to the sidebar – and if I do, what it should be. Another stylised goose quill perhaps (as on the banners) or perhaps my SC-in-a-circle logo (which is doing service on some of my other sites). Or something else? Any suggestions?

Henceforth each blog entry here will have it’s own Header image (similar in size to the one gracing this entry). Henceforth until the next revamp, I mean. 🙂


This article was written for the #Blogg52 challenge.

7 thoughts on “Revamp”

  1. Nice! Elegant, decidedly easy on the eyes, modern, accessible and functional. Good job (and I have over a decade in the web usability trenches to back up my opinion…)!

    These new(ish) design methodologies that cater to loads of different platforms are quite an important step, actually. One of my duties as an accessibility and usability developer for a fairly large government institution has been to ascertain that our massive amounts of publicly facing information is reliably and well encoded according to current standards of accessibility, in an effort to make this information accessible to the not insignificant percentages of the public who are blind, deaf or otherwise not able to easily get and consume that information. Clumsy sentence, but hey.

    Maybe I’d better check the websites I myself call the shots for too.

    Best regards,
    Lars

    1. Thank you Lars, I appreciate your feedback.

      I’ve tried out a number of responsive themes in the past, but it always seemed that for ones that worked consistently across platforms you had to buy a commercial package. I used Photocrati on my photoblog (GBG365) and was very satisfied, but as I choose not to commercialise my websites I can’t afford to keep buying themes. So it’s very nice to find a free theme that looks good and really seems to work. I’m pleased with the Responsive Lightbox plug-in too.

      I don’t see any downside to the new Google emphasis on websites that work well on mobile devices. Everyone should be able to get the most out of the Internet even if disabled, and I think mobile friendly websites will improve the experience for all users.

      Cheers,
      John

    1. No, Anna, it’s not too hard to make banners as long as you have a bit of patience and time to spend trying them out. Use Photoshop or Gimp or other photo manipulation software and make the banner on your computer before you upload it. The theme you’re using at Annas Ark is Sela, which allows you create a custom header, but many themes have similar options. The important thing is to make sure you find out the recommended pixel ratio for the banner/header and use that in your template so the picture you upload to your image gallery is exactly the right size. That will help a lot. (I notice that the banner you have in your header at present appears complete on my smartphone, but is cut on my computer screen. I guess that means the picture you uploaded was too large for the theme.)

      As I say, it takes time, but I find it’s a lot of fun too. Good luck!

      John

      PS: I have now added your blog to my list of Blogg52ers which you can see in the left-hand column (if viewing on a computer) or in the menu that drops down from the header (if viewing on a smartphone)! 🙂

  2. SpĂ€nnande! Mycket snygg blogg! Ser fram emot dina reseinlĂ€gg ocksĂ„. KĂ€nns som om fjĂ€derpennan Ă€r en symbol för dig, sĂ„ den tycker jag borde finnas med Ă€ven i fortsĂ€ttningen pĂ„ bloggen, om du nu inte har tröttnat helt pĂ„ den 😉

    Ha det gott!

    Kram Kim 🙂

    1. Hej Kim!
      Glad att du tycker om det nya utseende. För tillfĂ€llet behĂ„ller jag fjĂ€dern som bakgrund in header/vĂ€nster kolumn och i “About”. Ska se om jag kommer att anvĂ€nda det mer framöver.
      Kram John

    2. Ja, jag sÄg de smÄ fjÀdrarna nÀr jag var inne och lÀste det senaste blogginlÀgget.
      Kram Kim 🙂

I welcome comments!