A few tweaks to my blog

17 Jun 2011

As a (web) designer you always see ways to improve things on your own site. I have been slowly editing things around here, bit by bit here and there. A lot of them are hardly noticeable as they are small really, but some of them are rather big and are also new since today. I'm happy they are finally live today as it isn't always easy to find time to tweak. Here is an overview of everything I have been working on over the past couple of months.

Explore section on the homepage

This is something I've already done a couple of months ago. The way I designed the 'Explore' section on the homepage has always bothered me a bit. How I summed up the different categories for each section of the site felt clunky and cluttered, and the way I added links to the archives. It spoiled the clean design and it looked as there wasn't much visible structure either, especially between the categories and the archives. The search option came across as an afterthought as well.

How it was before:
Explore section on the homepage, how it used to look.

I tried to find a way to display the categories in a more subtle way so that it doesn't spoil the cleanness of the design, while also combining the search option, plus a link to the archive pages, and a way to direct access the tutorials category as they are popular. I wanted to display all these options in a compact and coherent way. It's hard, because you quickly end up with a rather cluttered result. Not sure how many versions I tried, but I remember it took some trial and error to end up with something to my liking.

How it is now:
Explore section on the homepage, how it looks now.

Slideshow on the section homepages

This was something I already had in mind while designing this site, but it just got postponed for a long time: being able to navigate through my (so called) 'top featured' articles on the section pages using some kind of nice transition. It's thanks to the help of Yves Van Broekhoven that this came to live, and I hope people will love it. He has used jQuery and JSON scripting magic to make this work. You're now be able to slide through these articles on both the Graphic & Web Design and Modern Home Design section pages using the white corner arrows.

Slideshow on the Modern Home Design section page Slideshow in action on the Modern Home Design section page

The archive pages

Better flow of the article items

Not sure if you remember but these pages used to look a bit different. The flow of the articles wasn't really perfect. I used 2 different widths for each articles column. The left column was wider than the right one, and the left was reserved for the special styled articles where I show a snapshot of the page. The problem was that things got a bit out of balance when I didn't post styled articles for a while, or when I posted a few styled ones in a row. There were these big empty spaces. It messed up the flow of things a bit. So I decided to find a way to avoid this from happening. By just giving each of the columns an equal width and a bit of CSS trickery, the page was given a better flow. Though I still have some gaps here and there. So it's far from perfect yet. I might consider to implement Masonry in a next step to make the flow work perfect, just like I have done on the Inspiration Stream page.

Showing chosen category or month as a title

A small detail, but still important to add is when you choose a category or a month in the left navigation on the archives pages, this chosen category or month also appears as a title at the top. This, and the flow of the articles were changes I implemented a couple of months ago. There is also a linking to my previous blog for those who want to 'Dig deeper'. I have a ton of content there as well, as you can go back to articles written in 2003.

Design Bits link on the section homepage

Design Bits archive pages

I've been posting a lot of design bits over the past couple of months on both the Graphic & Web Design and Modern Home Design section pages. They are external links to things I like and want to share, and they only stayed there for about a week for people to access. Since I've been doing this so long already, I've built up quite a collection, and the effort that goes into finding them isn't really rewarded if you can't access them later on. My thinking was, why not create an archive page for these in some kind of a gallery style. So I decided to create such a page for both Graphic & Web Design and Modern Home Design Bits pages. They are both accessible via the archives pages and the section pages.

Moving from Delicious to Pinboard on the Lifestream

The links I share are now served via Pinboard instead of Delicious, since its future is a bit of a question mark after Yahoo decided to stop with it. The link service now has a new owner and that caused problems with Yahoo Pipes. That's why I moved my links. Thanks to the help of Yves Van Broekhoven I've been able to make this transition rather smoothly.

Updating jQuery version

Fixing what can be fixed

The biggest technical change and challenge for me was to upgrade jQuery 1.3.4 to version 1.6.1. Some things didn't work anymore and needed a bit of fixing. The biggest one was the script I was using on the gallery pages to show the image bigger in a popup view with overlay and close button. I was using a script called Top Up, but the script hasn't been updated since version 1.3 and things got broken. I've tried to fix it myself, but didn't succeed in doing so. I was close though. I couldn't fix the problem in IE9 where the close button didn't show up. I just gave up on it, and decided to trash the whole idea of showing the bigger image in a different way. The way it is now makes more sense anyway.

Gallery detail page

A while ago I decided to create a detail page for each gallery item, showing the bigger version of the image, as I wanted a permalink for each item. So I decided to just link to that page instead. I figured, this is better for accessibility, and you're also able to navigate from image to image (either by clicking or keyboard navigation), with the option to go back to the gallery list view at all times. This way people were able to link to a gallery item which wasn't possible before. Another advantage is that I can use these permalinks in the RSS feed. There is an iPad app called DesignScene that make use of this as it is an inspiration explorer for iPad.

Tweet this

Recently I decided to implement the standard 'tweet this' button from Twitter, because the custom one I was using didn't seem to work anymore (the EE add-on Short'n tweet) because the method was deprecated by Twitter. Design wise I preferred a button in my own design, as I dislike the disconnection the one from Twitter creates. Sometimes you have to give in and as the Twitter button is important to my readers I didn't really have a choice.

Enjoy

Perfection doesn't exist, but I hope I'm doing my best to get as close as possible. This is my playground, but I also take it seriously as I want you to be happy and feel 'at home' here. So hopefully you can appreciate these changes and most of all enjoy them.

Comments

  1. 1 Jan van Droogenbroekcx 17 Jun 2011

    Ik ben per ongeluk op jouw website terecht gekomen, maar ik moet zeggen dat dit vanaf nu mijn favoriete stek geworden is. Wauw!

  2. 2 Hazel 17 Jun 2011

    I always appreciate your commitment to your visitors, Veerle! As an aspiring designer, I find it very helpful to read about your process and I learn so much from you.

    Thank you for all that you do!

  3. 3 alemar 18 Jun 2011

    Hi veerle! Thanks to this post I discovered TopUp… a very useful script! According to your blog release: you descrived a very nice path to reach a good result! Really!