Works of Time 3.1 – “It’s responsive!”
As I mentioned in some of my previous posts, I wanted to make Works of Time responsive with version three. But back then I didn’t have enough time to make this come to pass. After completing my previous project (One Planet One World – my first responsive website) and a relative calm period at school I finally found the time I needed.
After almost a month of redesigning, developing and refactoring I’m proud to announce that version 3.1 is completed. While the main focus was to apply responsiveness, I also took the opportunity to make some other minor changes such as the dotted lines used in titles and the overview page for the PCM stages. However, most changes needed to be made because the old situation wasn’t compatible with the new flexible layout. Or because of limitations of mobile and tablet devices.
In the image below [click for larger version] the three views of the website are shown: desktop (left), tablet (middle) and mobile (right). Some changes that can be seen are:
- Image slideshow gets smaller.
- Navigation of slideshow hide in mobile view.
- Positioning of elements in header and footer change.
- Social network icons (in footer) are larger in tablet and mobile view.
- The sidebar (grey block) positions under the main text in tablet and mobile view.
I’m currently working towards my graduation on the subject of page speed optimization and how it can be applied efficiently. The last two weeks I’ve been reading hundreds of articles, blogposts, papers and websites about this subject. One of the things I learned is that a fast website is more than a good score in PageSpeed and/or YSlow. I’ve been using WebPageTest lately to get an idea of how quick my website loads: the report of this blog (in IE9, on a 1,5Mbps connection from Amsterdam).
I’ve managed to get my average page speed down to 3.5 seconds, which is almost a full second faster than version 3.0. Because I’m becoming a sort of advocate of the importance of page speed I want to share some interesting infographics (from Strangeloop Networks):