When I first decided it was time for a design refresh I was interested in purchasing a pre-made template to "skin" my blog or hiring a designer to redesign the blog for me. I was surprised at the difficulty I had in finding pre-made themes (I found none) or experienced designers who work on the Blogger platform (I found no one). Thus I was forced to plan and execute the redesign on my own.
Blogger does feature some very modern and sophisticated templates which are highly customizable. My blog is based off of the theme "Awesome Inc." which includes six color variations. This, and most other Blogger themes includes a mobile optimized template as well. This is extremely important for anyone with a blog as mobile views continue to increase. Roughly 12% of traffic to this blog is on mobile devices.
After choosing my theme, I had to determine the layout of the blog. Blogger themes contain a range of layouts-- 1 column, 2 column, 3 column, left sidebar, right sidebar, etc. You can also adjust the width of each layout area down to the pixel. After doing a bit of research I determined that the optimal total width for a blog is 900-950 pixels. This ensures maximum readability regardless of the screen size of the viewer.
The primary content column on The Electric Educator has a width of 600 pixels. The right sidebar is 350 pixels. My previous design included both a left and right sidebar, squeezing the content into a smaller area to make room for the extra side-space. I determined that I wanted to make my posts the focal point and eliminated one of the sidebars to remove clutter and distraction.
Another thing to consider when choosing your layout width is the media which you embed into your blog. I include a lot of YouTube videos on my blog. The smallest standard embed size for a YouTube video is 560 pixels wide. I wanted to ensure that I could fit a video in without having to manually adjust the size of the embed code.
I was uncomfortable tinkering with the design of this blog before I had determined the final layout and had all of the artwork available and ready to post. As a work-around, I created a new blog that I called "test-electriceducator" to fiddle with the design and settings. Blogger allows you to download a full copy of the HTML and CSS for your blog in order to back it up. I simply downloaded my old template and restored it on the test site so that I could play around with some new design ideas before posting everything live on this site.
As you can see I have heavily styled my blog using a base design that was created for me by freelance artist Maria of Style Graphic Design. I connected with Maria via Etsy on the recommendation of my wife who also had a logo designed. Maria did an outstanding job in creating several design concepts and adjusting the design based on my feedback. I would highly recommend her services.
My blog masthead and social media icons were designed by a firm out of India that I contracted through Elance.com. Although I am pleased with the final product, I was not satisfied by the interaction and customer service of the firm with which I worked. I would, however, recommend checking out Elance which brings together freelance designers, writers, artists, and anything else you can imagine for hire by people who need to get work done.
I have removed most of the widgets and gadgets that were present on my old theme. I was using a Twitter gadget, Feedjit, Friend Connect, and a host of other plugins. I found that this slowed down the overall load time of the site. The new design is very clean with simple button links to my various social media outlets.
I am pleased with the look of the new design. I think that it captures the essence of my writings and personal mission to advance educational technology. Blogger remains a solid choice for my blog. I don't feel hindered by the platform and enjoy the simplicity of the interface.
I began posting on the Electric Educator on Christmas day in 2008. Since then I have written over 200 posts which have had over 120,000 viewers. I never expected this blog to become such an important part of my professional development. This blog has allowed me to interact with a variety of people all over the world. Thanks for being a reader! I hope the new redesign makes it even easier to read, comment, and share.
Blogger does feature some very modern and sophisticated templates which are highly customizable. My blog is based off of the theme "Awesome Inc." which includes six color variations. This, and most other Blogger themes includes a mobile optimized template as well. This is extremely important for anyone with a blog as mobile views continue to increase. Roughly 12% of traffic to this blog is on mobile devices.
After choosing my theme, I had to determine the layout of the blog. Blogger themes contain a range of layouts-- 1 column, 2 column, 3 column, left sidebar, right sidebar, etc. You can also adjust the width of each layout area down to the pixel. After doing a bit of research I determined that the optimal total width for a blog is 900-950 pixels. This ensures maximum readability regardless of the screen size of the viewer.
The primary content column on The Electric Educator has a width of 600 pixels. The right sidebar is 350 pixels. My previous design included both a left and right sidebar, squeezing the content into a smaller area to make room for the extra side-space. I determined that I wanted to make my posts the focal point and eliminated one of the sidebars to remove clutter and distraction.
 |
| The Electric Educator, August 2010 Screen Shot courtesy of the Internet Archive "Wayback Machine" |
I was uncomfortable tinkering with the design of this blog before I had determined the final layout and had all of the artwork available and ready to post. As a work-around, I created a new blog that I called "test-electriceducator" to fiddle with the design and settings. Blogger allows you to download a full copy of the HTML and CSS for your blog in order to back it up. I simply downloaded my old template and restored it on the test site so that I could play around with some new design ideas before posting everything live on this site.
As you can see I have heavily styled my blog using a base design that was created for me by freelance artist Maria of Style Graphic Design. I connected with Maria via Etsy on the recommendation of my wife who also had a logo designed. Maria did an outstanding job in creating several design concepts and adjusting the design based on my feedback. I would highly recommend her services.
My blog masthead and social media icons were designed by a firm out of India that I contracted through Elance.com. Although I am pleased with the final product, I was not satisfied by the interaction and customer service of the firm with which I worked. I would, however, recommend checking out Elance which brings together freelance designers, writers, artists, and anything else you can imagine for hire by people who need to get work done.
I have removed most of the widgets and gadgets that were present on my old theme. I was using a Twitter gadget, Feedjit, Friend Connect, and a host of other plugins. I found that this slowed down the overall load time of the site. The new design is very clean with simple button links to my various social media outlets.
I am pleased with the look of the new design. I think that it captures the essence of my writings and personal mission to advance educational technology. Blogger remains a solid choice for my blog. I don't feel hindered by the platform and enjoy the simplicity of the interface.
I began posting on the Electric Educator on Christmas day in 2008. Since then I have written over 200 posts which have had over 120,000 viewers. I never expected this blog to become such an important part of my professional development. This blog has allowed me to interact with a variety of people all over the world. Thanks for being a reader! I hope the new redesign makes it even easier to read, comment, and share.
The redesign looks really nice. We actually JUST made the move from Blogger over to Hubspot. Hubspot's blogging platform, design-wise, is nothing in comparison to Blogger or WordPress, but is supposedly the best platform for SEO, bar none. Time will tell whether that proves true or not. I think you did a really nice job of making your blog not LOOK like a blogger blog. :-)
ReplyDeleteBut anyway, Hubspot is supposed to be currently working on an update to make the blogging platform they have more visually appealing. I'm looking forward to the update.
Thanks for the post, John.
If you'd like some more tips on making your Blogger site not look like a Blogger site, give this a read
ReplyDelete-David