Daily Inspiration V3 Is Here!

written by Houke de Kwant on July 28, 2014

If you’ve visited the site earlier today, you might have ended up on an error page generated by CloudFlare (a service I use to protect this website from spammers, bots, etc). I wanted to make the transition from v2 to v3 as smooth as possible, obviously, I failed. But here you are, looking at a new design!

When I released v2 over a year ago, I didn’t had the intention to change that design anytime soon. I just started my full-time job as front-end developer and didn’t think I could make the time to do a whole redesign & recode of the site. This all changed after I completed my first jQuery plugin. The goal of that plugin was mainly to improve my javascript skills, and once I finished the project I couldn’t understand why I didn’t write my code earlier like that.

So I started looking at DI: how could I make things better, rewrite my scripts, optimize some css, etc? I ended up starting from scratch. So instead of v2.x (which was the idea when I launched v2) it became v3. This design is based around four keywords: Speed, Structure, Content Design and Maintainability. But before I go into the thought behind each keyword, first something about the redesign.

The redesign

There where a lot of things I liked from v2, so I decided to take those things with me in the next design. The logo and Icon didn’t change, the big links to the social media profiles are still in the footer (but with another design now). The colors are the same, I reordered them and added one new color (which I think is a nice touch in combination with the DI green). The font is still the same, I really like Source Sans Pro. Posts, Projects and Artworks are still the core of this site and the footer didn’t change much either.

But…

I also had a look at the feedback I gathered over the year. Every now and then I get emails from visitors with suggestions, or complaints about the layout, I collect all those emails so I can fix them when I think they’re valid. For the previous design the three most important compaints where:

There is too little room to breath (I need to set my browser on 75% to enjoy your site). This was a valid complaint, on smaller screens there was max 20px spacing on either sides and on larger screens there where to many characters on a line). This has been fixed, a max-width has been set for the larger screens and for the smaller screens I added more spacing to the sides.

Your background is too bright (I need to dim my screen). I used solid white background for the content, but I caugth myself dimming my brightness in the evening when working on the site. So I decided to make the background a little less white, making it more greyish.

I can’t submit my work (I’ve entered all fields, but keep getting an error). Probably the most important of all, cause submissions is what drives this website. The problem was that I couldn’t reproduce the error and not everyone was having them (based on the number of successful submissions). I now use another system for the submissions, don’t know if this fixes the previous error, but we’ll see.
For me, the plus about this system is that I can easier process the submitted artworks. With the old system it could take up to a month before I published a submitted artwork, now I can do it within days.

Speed

One of the things we recently started looking at at Ivaldi (the company I work) is ways of optimizing site speed. I spend several times doing research into proper ways of optimizing content, possibilities of automating this in WordPress and applying it to live websites, testing the results with tools like Pingdom and Google Page Speed.

I already used MaxCDN for the content delivering, they spread the images over different servers all around the world. Based on your location you get the images from the closest location. If I didn’t do that, you would all get your content from Amsterdam, which would mean longer loading times for over 70% of our visitors. I also used W3 Total Cache for caching of the pages, once they’re published they don’t change much, so if a page has been visited before, it’s quite possible that you’re looking at a page which is saved to our servers a few days before. (If you want to know how old the page is you’re looking at, right click the page, select view-source and scroll all the way down).

To optimize images I create 3 sizes on upload, a large version which is 800px wide, used inside posts and for artworks. A medium version, 400px wide. Currently used for the category images on the frontpage and the popular post images on the categorie pages. Later on this will be used for mobile devices (the large files for posts and artworks will be swapped with the medium versions). And last but not least a thumbnail of 350×350 which is used on the listing pages. To get the most optimized images (ie, those where all useless meta data is stripped from, so they’re as small as possible) I use the Smush.it service from Yahoo.

As for the code, I now also minify the CSS, Javascript and HTML so that instead of (for example) 20 different files, you’re only loading one, which speeds up the loading process of the site. I could even go further, I didn’t do that because the profit I made with just those changes where already big, but if you where wondering what more to do, take a look at recent Smashing Magazine articles, as they go into font rendering and css ‘above the fold’ rendering. Subjects I didn’t touch for v3, but which I might in v3.xx…

Due to the fact that all our cache was deleted before I released v3 the first few days the site might seem a little slow, as we’re rebuilding the cache.

Structure

As for the site itself; I wanted more structure between posts. I created categories back when I developed v1, but they played only a minor role within the website. This is about to change. I need to fill the categorie pages, which I will do this week, but as soon as they’re all filled they will integrate in the posts and contain some extra information for themselves. Not just an overview of all posts inside that categorie.

I also added more attention for Pinterest, it’s the fasted growing social network based on referring traffic, so the boards will be more visible, integrated within posts and category pages.

Content Design

If you know me a little you’d know that css animations are my thing, I love them. Subtile animations used to make the experience better, or just to add some fancy effect to the site. Here on DI, when hovering links or posts for example, you will see a color change. This change doesn’t happen directly but within a time of 250ms. It also doesn’t happen linear, but with a little easing. When Google released their devguide for their latest ‘material design’ they spend several pages showing the goods and wrongs about animations.

Of course I also added some animations just for fun, when you’ve a newer browser (chrome, firefox, safari or IE10+) and you start scrolling on our homepage you will see some titles flying in from the bottom. I also added these effects to our longreads: posts with extra detail for content design (This was the first one).

Maintainability

In the beginning of this article I wrote that I decided to create the new design from scratch. If I had made my code more maintainable that probably didn’t had to happen.

So with this project, right from the start, I created a structure so that I can go on with this design ‘forever’ without the need to start over any time soon. Most important for this release is the version control. If you’re any sort of developer you’re probably familiar with Github, a code management for open source and private projects. I never used a code management system before v3 (which has resulted in several days of work gone due to some stupid crash). Now I use Bitbucket to control my code. I can simply commit my changes and push them to the repo. Once pushed I don’t have to care about a crash, because I can take another pc, checkout the repo and continue where I left. So looks like I can finally work on a .xx version of the site.

This also means that I can work with iterations. So instead of working months to one huge release (like this one). I will work on features for a max of two months and release small updates every now and then. This v3 is a first release which I found useful, but I always come across new things, new optimization tools and the web standards are continue evolving. So something I make today can be outdated next month…

For now, I would suggest you to take a look at the changes click through the pages and let me know what you think. I am always looking forward to receive feedback (either positive or negative) so don’t hesitate to write me an email!