Let's start by showing the previous version of ameijer.nl. It was a very simple website: fixed width, fixed height, custom scrollbar, small database for the blogposts, pages and portfolio projects. I was really proud of it at the time (late 2008), since I had just learned a little PHP and had to combine all my "skills" to make it work.
So I blogged for a while, about my experiences as a Mediatechnology student, my internship at Label A and a never ending fight against ClickAndBuy. In the meanwhile smartphones (iPhones / Android devices) and tablets came along, turning the website into an unfriendly, unusable, *^*$, &#@! website (you can fill in the blanks yourself). A change had to be made!
Even though my Photoshop skills are better than the average developer, it still doesn't make me a designer. So instead of making a design in Photoshop, I headed straight for the code! Downloaded wordpress, installed it on my server and downloaded & installed a stripped-down Wordpress theme.
After that I created a short list of guidelines for the new website:
So I started editing the theme to make it HTML5 compatible, added some CSS3 properties and after while ended up with the following website:
The menu was fixed to the left side of the page, and it was scalable up to a certain point. However, it looked too much like the Google Chrome preference screen which I didn't like. So I decided to started all over. Later on I discovered a similar website (http://sickdesigner.com/), which I actually quite liked, but I was already working on a new "design".
Next thing I came up with turned out to be a raw version of the actual (current) website. It was completely scalable, had a full background image and unfortunately showed some mayor performance issues.
You can see the base for the current website already: menu at the top & in the footer, blue color scheme and the menu icons. Mostly due to the performance issues, I tossed out the huge background image.
For the final version I added the sidebar including the social media part, created a different landing page, implemented media queries and added some CSS3 enhancements (e.g. gradients, box-shadows, animations & transitions). Even though it's not completely finished, I am quite happy the way it is. Hopefully it'll last for more than 3 years... but it probably won't.
Let me know what you think about the new look, just leave a comment.
PS. Try resizing this page: keep an eye on the screenshots.
- The website must be made with HTML5 & CSS3.
- The website has to be Responsive! So it should be viewable in all browsers & screen sizes.