Theme and Layout redesign of ProgrammingKid

ProgrammingKid.com has underdone a design overhaul. Although most of our readers were happy with the previous design, we decided to experiment and give a fresh look to the website. With the new design in place, we hope our readers will be able to navigate more effectively as we have tried to reduce clutter and make links more accessible.

Why the redesign?

In order to address some issues, we decided to make changes to the layout. Some of the problems we hope to address were :

• Site Navigation
• Cluttered look due to multiple thumbnails
• Post excerpts occupying unnecessary space on the home page
• Inaccessible old posts
• Higher Page load times compared to average website
• Increasing bounce rates

The NEW Design at a glance

We hope the the redesign of ProgrammingKid.com solves the above problems to a large extent.  However, It remains to be seen how well do the users/visitors respond to the new design. We would be keeping a track on our Analytics and statistics for changes in bounce rate, average time on page and average page views per visitor.

Note : ProgrammingKid uses DIY Thesis. Related Read : The Dummies guide to Thesis Customization.

Header

We changed our logo to a combination of RED and DARK GREY to start with. Keeping the new logo colours in mind we matched the navigation bars to the same colours. The Above navigation bar was kept RED while the below one was kept DARK GREY.

Revised Categories

In order to reduce the bounce rate and to increase relevancy of the content, we rearranged our categories in the Navigation Bars and move programming related categories under a main subhead – Programming instead of being scattered around like C, C++, Java etc

New content Layout and Placement

The thumbnails were removed from all the post excerpts to reduce clutter and reduce page load times. Also, we further used hand-crafted excerpts of no more than 20 words so that the information is conveyed using the least possible words. This we believe would significantly reduce vertical scrolling and would make room for more posts to be displayed on the home page.

After the Content Changes

In order to engage the visitor, we added 10 random posts after the post/page content. This we hope would help the visitors to access old posts which have got buried due to the recent articles. Further, we also replaced the Self-Sponsor banners from the sidebar this new position to reduce clutter from the sidebar.

No more Footer Columns

We decided to do away with the Footer Columns toreduce page load times and to decrease unnecessary vertical scroll.

Tabbed Accordion Widgets

We made some minor visual changes to the Sidebar Widgets. In addition, we added an accordion to hold various previously published posts in different subheads to give the visitors a sneek peak into the wonderful content at ProgrammingKid. In order to reduce space, we used accordion style tabs and made this into one single widget.

Result

The result we hope is a simpler, cleaner and more navigation friendly design that would hopefully be able to engage a lot more visitors.

ProgrammingKid recommends DIY Thesis. You can also customize Thesis like a Pro!

Do you like the new design of ProgrammingKid.com? We would love to hear from you. What do you have to say about the new changes?

Tagged as: DIY Thesis, Thesis