Using Blogger to make quality websites beyond the Blog

Pinch Gallery

For some time now, we've been documenting how people can take advantage of Google's Blogger service to make blogs that really showcase their incredible content by using the flexibility provided by this free hosted service. That's why we were surprised when we came across an article detailing the blog platforms among the top 100 blogs and noticed three things: that very few of those blogs use Blogger (3%, one of which is Google's Blogger Blog so really only 2%), that the majority of the blogs listed there are exceptionally unattractive and/or use default templates*, and that the ones that are good looking are all custom software (A List Apart is a good example).

Since our first foray into fully customizing a Blogger blog beyond the standard templates or pre-built templates, we've been exploring possibilities with other blogs and seeing how far we could push the functionality included in Blogger, but also trying to capitalize on Google's other free services. Pinch Gallery's website redesign project gave us the opportunity to take Blogger even further. We took advantage of both Blogger and Picasa and created a beautiful website with a rich visual experience that matched the feel of the store's unique brand.

Why did we do it?

You may be asking yourself why, as a web development firm with expertise and a focus on building custom content management systems, we would put effort into using Blogger as a CMS for a client. There are a number of factors that went into this decision, mainly:

• Low cost to deploy
• No need to saddle a client with extra hosting fees and server issues
• Ease of use for the client using full range of Google services
• Self-sufficient, once launched little need for site maintenance by web development firm
• Google karma and search engine benefits
• Alternative to overly-complex off-the-shelf software packages

Blogger enables us to deploy a feature-rich website and CMS at a lower cost when a custom content management system is not needed based on the technical requirements of the project. And with the added benefit of free hosting, it further lowers the learning curve for the clients' management of their site. We believe that, when a custom solution is not warranted and the budget limits the scope of the project, providing a Blogger-based solution can achieve a high level of return on investment. 

How did we do it?


Created a CSS template like any other website

Concentrics Restaurants

The trick to Blogger, as with any modern website development, is extensive use of Cascading Style Sheets (CSS). You can design just about any sort of website/web page, code it in standards-compliant HTML/CSS, and turn that into a Blogger site. It can even be a one-page site if that's your goal. Beyond that it is simply a matter of copy/pasting the different include elements from the system into the div containers that you've built into your design. The Firebug plugin for Firefox is extremely handy when it comes to identifying the specific elements within the page for styling in CSS. If your design requires Javascript files to work, you can create an extra "site" using Google Sites that functions as your file repository.

Got creative with IF/ELSE statements

With the Pinch website we wanted the homepage to look a bit different than other pages within the site, and with a little if/else mastery, you can make some pages look or behave different. You can make the homepage different than the interior pages, some interior pages different than other interior pages, etc. For example, on the homepage of the website we wanted to have the photo gallery, but didn't want that section to be in the rest of the pages. Simply wrapping that div with an if/else statement like the one below let us accomplish that!

<b:if cond="data:blog.url == data:blog.homepageUrl">
<div id="gallery">
</div>
</b:if>

You can learn more about if/else statements in Blogger, and other manipulation, on this help page.

Used the Pages for the "standard" web pages in the site

Renew Pilates, Easthampton MA

One of the limitations that used to frustrate us with Blogger was that some times you really just need to be able to create a webpage that is not a blog article. You could hack your way around it, burying a blog article by post-dating it and referencing it directly, but that's just sloppy. Thankfully they stopped this madness by adding the ability for you to make a small (10) number of standalone web pages within the site. While the limitation of 10 standalone pages might seem arbitrary, for the majority of websites it's a perfectly acceptable amount. For the content that is continually changing, that's where you can use the "blog" functionality!

Organized the main content of artists and event announcements as blog articles

The major types of content that we identified for the Pinch site as being the ones that would be continually updated were the new artist bios, organized by categories, and special event announcements. As we didn't care for these two content types to be co-mingled on a page, at least not one being displayed to visitors, we took steps such as limiting the display of the blog on the homepage to one article only. After that we created managed lists, and label pages, that limited the articles by labels that we specified such as "artist", "event", or combinations such as "artist" and "jewelry". Using this technique we broke up the "blog" feel of the site while still making use of it and getting past the 10 page limitation.

Created a slideshow and stored photographs in Picasa

We knew that with this project that the success of the website resided squarely in the photography of the pieces, and their showcasing within the site. At the same time, we wanted to make sure that the client was easily able to add photos to articles/pages, add photos to an album that was used for the slideshow, and make the resizing necessary to properly fit the space allocated in the design. Picasa and Picnik to the rescue! Using these two services the client is able to easily upload and store photographs, resize images to fit the slideshow dimensions, rearrange the order of the slideshow and much more. The slideshow functionality is a Flash movie that is generated by Picasa using the "embed" functionality; when the page loads it gets the photos and ordering information necessary and automatically creates the new Flash file, no coding necessary and no extra software required.


And the result?

In the words of Jena Sujat, owner of Pinch Gallery,

"My two favorite things about the new pinch website are how beautiful it is and how easy it is for customers, and for us at pinch, to use. I am grateful to be able to update almost everything myself, quickly and easily, and to see the changes immediately. It makes for easy editing and instant gratification. I feel in control of the store's web content like I never have before."

* Not to bash Wordpress, but when bloggers speak highly about Wordpress, one of their main reasons for choosing it is the ability to really customize the look of their blog using the wealth of templates and code availability, but if that's the case, why are the majority of those top 100 blogs that are Wordpress blogs so... generic looking? This also doesn't apply to the "free/hosted" Wordpress.com solution, where your design freedom is limited to the available templates.