Generated Content by David Storey

Realigned.

It has been just over a year since I moved from my old blog at My.Opera.com to the Tumblr blog you’re reading now. In that time I persevered with a slightly modified built-in theme, that wasn’t really designed for long form blogging. As things broke, I fixed them, but the code was getting messy, and the Disqus integration was acting all kinds of weird.

I knew that with my kind of experience with web technology, I should really have a theme of my own, that fit my particular needs. As I was laid off recently, there is no time like the present to give the blog a complete overhaul. What you see now is the result of that labour.

The redesign

The initial seeds of the idea for the blog theme came around a month ago. I designed the website for the Montage and Ninja projects at Motorola, while the project was in stealth mode, and so I was limited in the amount of developer outreach I could do. For that project I used a lot of noise textures. As time went on I got more and more jaded with seeing these kind of effects all over the Web. I knew when I got around to redesigning my own blog, I wanted to go as much towards the minimalist stripped down aesthetic as possible. I wanted to keep just the amount of detail that was needed to get the design across. Above all else, I wanted something original.

In many ways it is ironic. I‘ve been talking about CSS3 for years, all the way back to the early years of CSS3.info and my work with Opera even before that. In those days we longed to be able to move away from square corners, and be able to lift the design with shadows and graphical flourishes. Now that we are finally at the stage where many of the CSS properties that allow us to achieve those effects have got prefixless in the major browsers, here I am designing a theme that almost requires none of that. Indeed, this blog design could easily have been done ten years ago with almost the same lack of images.

Colour palette

After deciding on the stripped back look, the next thing I wanted to do was play with colour. Its my weakest point as a (pretend) designer. I know next to nothing about colour theory. Well, actually, my weakest point is that I’ve no idea how to use Photoshop (or any tools of its ilk), and actually prefer to code up in CSS. So choosing colours was going to be a challenge to get me out of my comfort zone. I made it a no-no that I could just fall back to the neutral tones and strong photographic imagery I usually rely on in my designs.

Orange was a colour that kept coming into my head. Its a colour that cropped up in a photo I used in a demo recently, and I’ve seen it used with striking effect in print design. I knew I wanted to try moving in this direction when looking at images of the classic Gulf Ford GT40. As a sucker for retro styling, I thought “This is it!”. And so the foundations were in place for the other other accent colour was also in place. The blue and orange just worked so well together, without being too trendy. In the end I rejected that blue after trying over and over to get something legible in place, and I put the design on hold. I ended up with a different blue by chance when playing around while bored on a flight back from London after a trip to the Netherlands.

The blue was most likely unconsciously inspired by KLM even though I was flying United at the time. In any case, the whole colour scheme looks fairly dutch, and I was remising at the time how bad United’s design is now it has merged with Continental and dropped the Saul Bass Tulip (Dutch again!) logo. It was partly this disappointment of the state of design around me compared to European airlines that inspired me to start working on my design again.

Typography

The typography in this design actually came last, which is unusual for me. It is often the first thing I do. I still consider this design a prototype, and have a lot of work to get the ratio between different headings and sections correct, and the whole vertical rhythm sorted out. I went for the safe option here, after the daring colours, and plucked for Helvetica Neue. I may revisit this in the future when I’ve lived in the design some more.

For the main headings, menu, and logo, I wanted to try something else, and went with the free (and bizarrely named) Ostrich Sans font from League of Moveable Type. The logo uses the light font, an the headings use the black variant.

Layout

The layout is where I did follow a trend, and went for a mobile first, responsive design. Well, not exactly mobile first, as I designed around how the design looks at specific widths rather than to common mobile sizes.

I wanted to keep the side bar I had in the current design to keep a link to the past, but increased the size to give the design some balance at larger widths. I actually looked at work from print designers such as Jan Tschichold to get inspiration here, although didn’t stick to the golden section any more than as an initial inspiration for the margin sizes. You can see s crop of the initial design on my Dribbble account. The main change in the final design is the logo placement, and the tags.

I knew the sidebar would become problematic at smaller sizes, so I first did a narrow design with the logo and menu across the top of the page. This more or less stayed unchanged in the final design.

Design process

While I’d love to say I designed in the browser, I actually built the design sketches in Keynote. Although I’m happier working in code than tools like Photoshop, I love using Keynote to quickly experiment placing and deleting elements on the page. I find it is incredibly easy to use and just powerful enough to be able to implement a lot of ideas, without being too complex to get in the way. The restrictions it has also places some boundaries that allow me to focus rather than play around too long with all kinds of crazy ideas.

While Keynote is great for initial experiments and layout (except the restricted canvas size), I find text styling and layout much harder than in CSS and the effects such as shadows render differently. So, after the initial exploration phase, I usually move over to a text editor to code up and finish off the design.

The recode

The coding aspect of this design is perhaps less interesting. It took about as long as the design (approximately 1 day, with another half day for nips, tucks, bug fixes, adjustments for mobile, and procrastination. Old content also has to be updated to fit the new heading structure, and add hooks for Prism integration for the code snippets, but that is a job for another day.

CSS

As mentioned, there is very little visual effects, so there are not too many techniques to learn or be inspired by. I actually did use some CSS3 for the text and layout, as I used the rem unit and box-sizing (my only prefix) to make measurements easier to calculate, and hyphens for the text. Other than that, I used Media Queries to make the design responsive.

I’ve mainly tested the layout on desktop browsers, and still have some work to do to ensure that mobile and tablet browsers get the right layout, and don’t break when zooming. I have some bugs to iron out here. I also need to add a fallback to the rem unit so that it works better in Opera Mini.

I also need to fix the web fonts in Firefox, which suffers from cross origin restrictions.

HTML template

The HTML is perhaps more modern, using HTML5 structural elements, rather than just using the doctype and pulling out the buzzword. I based the template off the original theme as a starting point, but more or less ripped it all out, except for the parts around Tumblr integration and the non-text post types that I’ve not looked into yet.

The logo

The logo is done in SVG. Most of the time was spent wrestling with Inkscape so that I could change the font glyphs to paths rather than use another web font. Design tools insert a lot of non-optimal markup, so I cleaned it up somewhat by hand. I’ll leave cleaning the paths to another day. Probably by running it through Scour.

The complete picture

I think I’m happy with how it turned out in the end. Using orange as the background colour for the text was something I worried about doing, and I still am to some extent. How much will the colour distract the reader from the actual content? I need to live with it some more to really know, but the issue is less than I initially feared when floating the idea. I also worried about black text on orange giving a dirty feel (as the orange couldn’t be too vibrant), but the freshness of the blue on white in the sidebar adds a freshness that overcomes that issue.

Will I stick with it? Who knows, but I’ll give it a try, iterating as I go, and see what people think.