sourcegate Now Mobile Friendly With ZeroTheme

By Mike Maddaloni on Wednesday, February 25, 2015 at 03:37 PM with 0 comments

screenshot of Google Webmaster Tools email on The Hot Iron

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.

screenshot of old sourcegate design

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.

And you?

Did you enjoy this? Subscribe to sourcegate by RSS/XML feed or Read by Email.

Subscribe to sourcegate by RSS/XML Feed  Subscribe to sourcegate by Email

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.

BloggingBrowsersHTMLJavaScriptMobile PhonesWeb Development • (0) CommentsPermalink

Give Your Web Site A Web 2.0 Look

By Mike Maddaloni on Tuesday, December 29, 2009 at 08:07 AM with 0 comments

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!

Did you enjoy reading this?  You are welcome to subscribe to sourcegate by RSS feed or by email.

Graphic DesignHTMLWeb Development • (0) CommentsPermalink

Hex Color Chart

By Mike Maddaloni on Wednesday, October 01, 2008 at 05:30 PM with 0 comments

Looking for a visual display of all colors and their hex values?  Check out this hex color chart, which includes a handy printable image.

Did you enjoy reading this?  You are welcome to subscribe to sourcegate by RSS feed or by email.

CSSHTML • (0) CommentsPermalink

Page 1 of 2 pages  1 2 >