For all of the regular readers of sourcegate, you probably noticed over the past weeks that the user interface for the blog has changed, especially if viewing it on a mobile device. Thanks to ZeroTheme and a little prodding from Google Webmaster Tools, this became a quick, straightforward reality.
A Multi-purpose Blog
Where sourcegate is my collection point for technical tips for hardware and software, from PCs to mobile devices, it is also the “sandbox” test site for my blog development work, from design to functionality to content. So when I needed to make to changes to my primary personal blog, The Hot Iron, those changes were made on sourcegate first, then integrated there.
Google Made Me Do It And I Am Glad
I got the email shown above from Google Webmaster Tools that The Hot Iron was not mobile-friendly. As a Web professional, I already knew this. As my focus on The Hot Iron has been on content, I made the conscious decision to focus my efforts there, knowing the site needed some design work. But when I got this alert and learned more about how Google tags mobile-friendly sites as such in search results on mobile devices, I had to take action.
The goal of that action was to make the site mobile-friendly and look nice, all without reworking the entire site. Breaking this down, I was seeking to integrate a framework to achieve this, give it a simple but elegant design and not make any major changes, realizing I would most likely have to make some or want to once I got into the weeds.
Building a better design
For the mobile-friendly design, I chose ZeroTheme, a free framework and template set. Its framework allows for the development of custom, responsive Web templates. For those not familiar with the term, a responsive user interface is one which can conform or “respond” to the size of the Web browser window and screen from the largest HDTV screen to a mobile device. As I did not want - or need to - have separate UIs for a standard (a.k.a. on a PC or Mac display) and a mobile browser, I went responsive. I also chose a basic template from the framework called ZBasic. I decided to keep the same linear layout for sourcegate rather than opting for something akin to a news site.
The integration of ZeroTheme was straightforward, and made easy by how I developed my blog sites long ago. I first setup the code on the server, setup a test page with the template, made some customizations to intgrate the name, colors, etc., then added the template to the blog page-by-page. I started with the simplest page, the about page, then worked my way to the home page.
As I look back on the process, it took about a week to integrate, broken into blocks from 1 to 3 hours. Had I a whole day, I could have done it all at once, rather it took about 12 hours. I decided to remove some content from the sidebars, namely recent posts and categories, and made them menu items. Overall, the template was good for aout 90% of the site, with the remainder 10% being required changes. One significant change was with AddThis sharing buttons, as I integrated a newer, more elegant sharing toolbar. It was good to revisit AddThis functionality as I hadn’t done so in a while. The integration into its final destination on The Hot Iron took only a few hours, as I knew what and where to make changes on the sourcegate-specific templates. One additional change was integrating the CentUp button on The Hot Iron.
Below you can see what sourcegate looked like before the new design template was integrated. The significant difference is the whole Web site is not presented in tiny print with the new design, and the focus is on the content, as it should be.
I am pleased with the outcome of the integration of the ZeroTheme responsive template, as it met my goals going into the effort, and I have already received feedback from people that reading either blog is easier on a mobile device. I have also found the sites are now tagged as mobile-friendly in Google search results, which is an added bonus. There is more work to do, such as modifying ad banners to also be responsive, but for now I am happy with the result.
This is from sourcegate, souvenirs (aka tech tips and resources) collected along a web developer’s journey by Mike Maddaloni, a mobile, Web and business strategist based in Chicago.
I came across this post where you can give your Web site a Web 2.0 look, complete with title and design elements. Where some of these may have been developed with tongue-in-cheek, these are also real elements generators!Graphic Design • HTML • Web Development • (0) Comments • Permalink