Revamping Blog Design

Yes,  it’s  mid year and not the beginning of a new year. But this was something that I’ve contemplated for awhile now – whether to change the design of my blog with a new look and to ensure it looks right on all the different devices you use to check out the blog.

Previously, for a few years now, I was happy with the previous design that looks like any blog / sites you see out there. (up to mid 2012) (up to mid 2012)

Last week, I shared on my Facebook, Twitter and even Google+ that I did a revamp of the blog. - June 2013 – June 2013

This design wasn’t too far a departure from the traditional site layout. Instead of a scrolling banner of posts, it has square clickable images of the featured posts, with blog posts listed in the reverse chronological order at the bottom.

Over the last week, I played around with a few design options and finally – I’m happy to announce that has a new look! - mid June 2013 onwards – mid June 2013 onwards

Here are a few notes of the new site design:-

  • RESPONSIVE DESIGN – layout adapts to the screen size of the device you’re using.
  • TOUCH FRIENDLY – Yes – if you have a touchscreen Windows 8 desktop, you can navigate with touch gesture and tapping on the screen to navigate on my blog!
  • Cleaner, simpler and modern design – No more old chronological blogpost layout.
  • Grid based content presentation – Posts are presented in squares ala Pinterest style navigation. It’s colour coded based on categories and interactive, too.
  • Interactive Post Sorting – Sort post by Date, Name, Popular, etc and watch the animation as the post re-organise itself. I love this!
  • “Back To Top” button – As you scroll down the page (especially with some of my super long blog posts), you’ll see an arrow at the bottom right for your one-click to go back to the top of the page. Simple design elements like this matters, no?
  • Easy Share and Related Posts – At the end of each blog post, you’ll see quick buttons to easily share the post on social media. Oh – the “Related Posts” are nicely presented for you to discover new content, too.
WinnieKepala 2013 revamp (blogpost)
WinnieKepala 2013 revamp (blogpost)

The site is based on (what the industry calls) “Responsive Design”. Which means that the layout adapts to whatever device and screen size you use to go to my site.

2013-06 WinnieKepala revamp 3 (desktop) on desktop (with touchscreen friendly design)
2013-06 WinnieKepala revamp 3 (tablet)
Navigate on your tablet (Android, iPad, Surface, etc)
2013-06 WinnieKepala revamp 3 (mobile)
Mobile friendly design on your smartphones

It took me awhile to tinkle around with this and get it working the way I like. Do note that the site is not 100% functional yet – there are some scripts and bugs here and there that I need to correct as I go along. So, if you come across some weird code language or scripts, layout problems or anything at all with the site design, let me know in the comments below.

Most importantly – Let me know what you think of the new design? Test it out on different devices and let me know if you like it!

Although it’s a pre-defined design theme, there was still a lot of customisation involved in getting it up today! In the end, I am very happy with the result – the site is keeping up with the times, touchscreen friendly and has a nice design aesthetic that truly represent me as an individual. I only hope you guys like it!

Go ahead – enjoy the new!!!

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Up ↑

%d bloggers like this: