New blog design

This blog is now 5 years old and needed a design revamp badly.

The old theme was based in a very simple one which was not designed for large screens. Also, back in 2007, cellphones were not like they are now and their use to browse the web was not comparable to nowadays’.

I wanted the new theme to be clean and responsive to different screen sizes, from my work screen (1920 pixel wide) to my cellphone’s.
I tried many themes and ended up modifying the Twenty Eleven one so I benefit from its great features but I also have a distinctive design.

So my blog passed from this:

To what you see now on your web browser.

I need to thank my friend Mario Sánchez and Helena, my wife, for their advice on sorting out some details in the design.

I also took the chance to create a software section where I put the most interesting projects where I have been involved. I had a similar section a couple of years ago but it was not maintained and I figured that Ohloh and other web pages would do this for me but the fact is that in the end I had a section about travelling in my website and none about the subject that the blog’s main subject (software).

Hope you like it.

4 thoughts on “New blog design”

  3. Looks good. There’s one point where the layout of the header gets messed up for me, with the browser window at ~828px wide:
    http://ubuntuone.com/3fe8IcMxds0V5b2MyFIkQz

    This results in a very obvious flicker at some point if you resize the browser, and (more commonly) in a messed up layout if you happen to be viewing the page with a larger-than-normal font size.

    I _think_ it is happening because #access and #site-brand have a relative width and an absolute horizontal margin, so at some point the two converge: the calculated width + the absolute margin of #access doesn’t fit in the same line with #branding, so it gets pushed below it. Quickest way to solve this is to get rid of the margin on those two elements, so they have 0 margin and 0 padding. Add the margin back to a child element, such as #site-title and ‘#access .menu’. (I’d use padding in that case, but it doesn’t matter). Then, your content will be given space strictly within the percentage you specified in the parent element.

    I hope that helps! 🙂

Comments are closed.