Daily Inspiration Upgrade Completed!

View gallery

The special image page, as you can see... a nice color palette!
My test setup :)
The categories, 3 latest posts per categorie
A page you won't see for a while, but this is when you searched for a not indexed color
The featured images
Our custom 404 page, I hope you won't see this that often
The info panels per post (left) or image (right)
The top of the page, containing 5 featured posts
The full homepage
The font for our icons, which makes them look great on retina displays as well.
Searching for a color, this will be the output

…well almost completed, but good enough to write a post about it :). You’ve probably noticed that the website was down for quite some time yesterday, and that it had some hiccups today. I know this is very frustrating, at least for me it is when a website I want to visit is down. To be sure I could handle the growth of Daily Inspiration in the feature I had to make some important decisions, resulting in this downtime. I will go into detail of all the chances inside this post. First of all I want to apologize for the mass post update yesterday. I forgot to disable the RSS, so when the site came back online, our latest posts where pushed to the RSS and automatically to our Twitter and Facebook account.

Why the downtime?

The answer is very simple, I moved the site to a new server, which resulted in a new ip address for the website. The problem with a new IP is that the internet needs to know that the site has a new IP. This was the reason that between 09.00 and 13.00 (UTC/GMT +1 hour) you saw the standard placeholder page of my provider. The old location was gone, but the new location wasn’t indexed (I am not going into details, just do a search for DNS if you want to know more about it). In this downtime I started moving the files for the new website, which I build on my localhost, to the new location and once the new ip was indexed, you saw our ‘Under Maintenance page’. Now I had the website running and it was available via de direct domain, but all the images needed to be moved as well. To give you an idea, these images are about 20.000 files. When I was half way uploading them I decided to open the website and place a warning, so you could start using the website while I was uploading all files. I am currently moving another 2.000 images and when that is done I am going to integrate them with a CDN to make the website faster, tomorrow this will all be fixed and everything should be back to normal.

The new layout

One of the reasons I update the layout of the website is because I come up with new functions I like to include. First of all I noticed that mobile usage has tripled compared to last year, and now counts for 10-12% of our visits. So for the first decision of the layout, it had to be responsive and the mobile version needed as much as possible options as the desktop version. I am currently working on integrating the website with Onswipe, which will allow you to use custom touch gestures while using our website, but I will go into that once it’s finished. For the first time since I started Daily Inspiration I have chosen for a serif font instead of a sans-serif font. I am a huge fan of Google’s Webfonts, so while doing some research I came across the font Merriweather which is designed to be a text face that is pleasant to read on screens, exactly what I needed. As for the colors, I am using them for over a year now and I am still happy with them so I didn’t change them a lot. I added some subtile textures to the background and removed the black from our logo, but for most of the website, the colors are the same.

Adaptive & Responsive

This isn’t new anymore, I have used this approach since the beginning of 2011, but it is still worth mentioning. Scale your browser and you will see the layout adapt to the screen. For the desktop versions I have chosen the adaptive approach. This means that I set several points where the website would change. These points are based on one year of Google Analytics browser resolution results. An adaptive layout gives me more control of all the functions, and since the website is quite huge, control is really necessary. For tablets and smartphones I have chosen the responsive layout, when you make your browser smaller you will notice that there is a point where the content is continuously changing. For these resolution I need less control, as I have disabled functions which seemed unnecessary in my opinion. But, as I said before I will include Onswipe later on, so the mobile variant will get some updates within a month or two. I have also included some swipe gestures in the mobile layout, but they’re only activated when you’re viewing our website on a device which supports touch. It is experimental and doesn’t work always, but you can try to swipe left or right to go to the next or previous page.

The homepage

This page is by far the most visited page of our website, so I decided to give it more content and add some interactivity at the bottom. I started with the top 5 popular posts from 7 till 14 days back. Mostly for those of you who don’t visit our website every day, so they could view some popular previous published posts. After that the content starts. The first part isn’t new for you, based on publish date (or views, if you clicked that option) the posts will be sorted, and below the posts is the pagination. But everything after that is new. Categories are playing a more important role from now so I decided to include them on the homepage. You will see the three latest posts per category, and the image you see is the one of the latest post. Clicking the image will send you to an overview of all posts in that category. Below the categories are the featured images, per post I publish I will add a few (between 1 and 4) images into this “pool”. It will also include all images of our weekly ‘This week on the visual wall’ posts. If you click on the button below the images, the Featured Images part will be reloaded and a new random selection with images is shown.

Trending posts

Moving on to the sidebar there is one thing which I like to mention… the trending posts. The decision to include this is based on something I have been struggling with for the last few months. It happens quite some time that an old posts gets some attention which results in a lot of views within a few days. These posts might be in the interest of every visitor of Daily Inspiration but the old versions didn’t had an option to show them. That’s where trending posts come in. They include the top 5 most viewed posts based on the option you choose. These posts could be published anytime so if you want to know what is popular, that’s where you have to look. For the first 30 days there won’t be much difference between weekly and monthly, all counters are reset so every post counts from zero.

Special image pages

Now moving on to the posts, or better the images inside the posts. As I said before, there where about 20.000 images which where just sitting there inside the posts, but there was no way to do anything more with them. This has changed as well. Almost all posts from August 2012 and later do have a ‘Quick Look’ included. These quick looks contain a random selection of thumbnails of the images inside the post. Clicking any thumbnail will show you a special page with more details about the image. Over the following months I will update the old posts and include Quick Look with each of them.

Indexing the colors

There is one option which I am very proud of, that option is the color palette, which you will see with each image. I have created an option in WordPress which makes it possible to, as soon as you upload an image, grab the colors from an image, save them in the database and show them on each image page Want to do this as well, take a look at Color Thief to begin with. I will write a tutorial on how to implement this somewhere next year. Because this is quite new I now index the colors and show 10 colors in a palette. But there will be more. For me it is already possible to pick a color and show all images with that color. It will take some months before this is available for you, my first goal is to add these image pages to all posts. I also need to tweak some settings for the colors search, by now you can search for one colors, or combine colors in your search (ie show all images with the color red AND yellow, or show all images with the color red OR yellow) but I am planning to make to search for a color group as well. As you can see, much more to come!

Your opinion

Feel free to tell me what you think, but more important, please tell me if you come across a not working feature. I have tested a lot while developing locally, but when a site goes live things can go wrong and I may miss things. Always better to get feedback from several sources! On the next page I will show you some images with a short description, but to experience it all, just visit the pages and posts yourself.

Share your opinion

About the author

Author avatar
Houke de Kwant is a frontend developer from the Netherlands and the creator of TheArtHunters (former Daily Inspiration, which was started as part of his study).

Follow our latest hunts

Facebook Twitter Google+ Instagram Pinterest