The new responsive design for my website

After a long time, I have finally release my first responsive layout for this website. Let’s see what is new in this version.

Responsive layout with smart phone supported

I’ve implemented three layout in this new design. One is designed for screen wider than 1280px – almost modern notebooks, one for 1024px-wide screen, the other is for smart phone screen with the minimum accepted width is 640px (Iphone 4 vertical screen width). The varying part of this design is the main menu bar, the sidebar and some module in the about page. You can resize your browser window to try with different layout.

For those who have not heard about the word responsive design, you can read wiki article as well as do some quick search in Google.

The 640px-wide version of my about page in new design

The 640px-wide version of my about page in new design

The 960px-wide version of my about page in new design

The 960px-wide version of my about page in new design

The 1280px-wide version of my about page in new design

The 1280px-wide version of my about page in new design

More semantic, more SEO friendly

In this new version, I have done a lot of things to improve the way search engines see my web pages. Now, each article will have a dedicated description and keywords for the meta tags, which is generated automatically in the previous version. I have also added Article, Review, and Person microdata into each post with the hope that Google an recognize my web pages better. For social networks, I have implemented the new View Hook module to add Open Graph meta data in to the head element of each article page as well as update the code of social sharing buttons to the latest version from the vendor.

Prepare for post thumbnail

As you can see, now each post will go along with an image (currently, my avatar). I’m developing the new gallery module to manage images, therefore, allowing attaching thumbnail for each article.

the new thumbnail position for each article

the new thumbnail position for each article

Large background

You can consider this being one of my effort to get used to with the large background designs before getting new camera by the end of this year. After getting the new camera, I’ll start learning photo and designing some themes, hope you can wait until then.

Leave a Reply

Your email address will not be published. Required fields are marked *