Creating a Theme for my blog

Part of the Jurassic Coast assignment is presenting everything in a WordPress blog, which I installed onto my own host at mrjose.ph.
There are a lot of great themes freely available for WordPress, but none really fitted with my site. Navigating from my site to the blog was a jarring experience, apart from the title, everything else was different.
I like the sense of uniform in design, and being a digital media designer I decided to try and create my own them that looked and felt like the rest of my site.

“Consistency is one of the key signs of a website designed by a professional web designer and not somebody who is learning the trade. Ensuring your website design is consistent all over the various types of pages and forms gives the website a unified feel and pulls it all together, improving the user experience and increasing conversion rates. Consistency is not only using the same colour scheme all over the website, or a similar set of fonts. It also includes making sure the website behaviour is consistent.” over-blog.com

Using Bones as a template (Bones is a theme designed to ease the process of creating custom themes), and integrating Bootstrap (a repsonsive framework for web design) I feel I have been able accomplished this. I also used an open source jquery project called infinite-scroll which automatically loads the next page of posts instead of clicking on the next page button. I feel this lowers the barrier for readers and encourages them carry on reading (Infinite scrolling feature could increase browse time – retailcustomerexperience.com). By using the php include function, which is the same underlying function I used to create my modular portfolio site, I am able to include the same navigation file on my blog that I do on the rest of my site. This has the advantage of being easily edited, I edit the file once and this change is presented throughout my site.

Screenshot 2013-11-15 at 18.07.48

Speaking with a classmate today, he pointed out to me that on larger screen sizes, the text takes up too much width on the page, making it more difficult to read. This will be the next issue I address, probably by moving the blog navigation back to the side.

 

References

Getbootstrap.com. 2011. About · Bootstrap. [online] Available at: http://getbootstrap.com/about/ [Accessed: 3 Dec 2013].

GitHub. 2013. infinite-scroll. [online] Available at: https://github.com/paulirish/infinite-scroll [Accessed: 3 Dec 2013].

OverBlog. 2013. Consistency in Web Design – Why It’s Important to Be Consistent When Designing Your Website. [online] Available at: http://businessresources.over-blog.com/article-consistency-in-web-design-why-it-s-important-to-be-consistent-when-designing-your-website-86102646.html [Accessed: 3 Dec 2013].

Retailcustomerexperience.com. 2013. Infinite scrolling feature could increase shopper browse time. [online] Available at: http://www.retailcustomerexperience.com/article/211251/Infinite-scrolling-feature-could-increase-shopper-browse-time [Accessed: 3 Dec 2013].

Themble.com. 2013. Bones – The HTML5 WordPress Starter Theme. [online] Available at: http://themble.com/bones/ [Accessed: 3 Dec 2013].

WordPress.org. 2013. WordPress › About. [online] Available at: http://wordpress.org/about/ [Accessed: 3 Dec 2013].