Redesign of How to Go Mobile

Epik Child Theme Genesis Framework

I write almost exclusively about Facebook marketing on the pages of this website. But on occasion, I like to provide some insight into other things that go into decisions I make for my online business.

Facebook should never be central to your marketing strategy since it is outside of your control. Focus first on your website and email list and use networks like Facebook to help build your audience.

My website is the main source or driver of revenue for my business. As such, mobile — how my website is consumed from mobile devices — is an important component of that.

On January 1, 2013, I wrote the following within my New Years Resolutions:

I freely admit that I made a pretty critical mistake when I moved to a new theme back in April.

I mistakenly assumed that all Genesis Framework child themes were mobile responsive. I, unfortunately, chose one that was not.

An amateur mistake, I know. But I’m making fewer of them.

While audio and video are increasingly important for online business, nothing is more critical than being easily accessible via a mobile device.

In 2013, I commit to finding a way to make my content easily digestible from phones and tablets. This will likely take an investment since I do not simply want a plugin that strips out my home page and advertising — essentially the most important items to my business.

It took nearly seven months, but I finally took the plunge. I was held back by that unnecessary need for the redesign to be perfect. But I eventually decided to do it piece-by-piece.

So in early July, I flipped the switch and started making changes on the fly. While this isn’t ideal for everyone, it made it much easier for me to finally do what I knew needed to be done.

The redesign is still in progress, but I wanted to take this time to provide background on why I’m redesigning my site, what exactly I’m doing and what else is still to come.

Why Was Redesigned

As mentioned in my quote above, I went with The Genesis Framework as my WordPress theme back in April of 2012. It’s a terrific product and what I would recommend to anyone looking for a fast, secure, SEO-optimized and well-coded website.

The problem, of course, is that of the dozens of child themes available that were built on Genesis, I chose one that wasn’t mobile responsive. I really liked the look and feel overall, but this was a pretty bad oversight on my part.

When users browsed to from a mobile device, they saw exactly what they’d see when coming here from their desktop. That meant that pinching and zooming were necessary to read any of my blog posts.

That’s obviously not ideal. And as a result, my mobile metrics were not as good as my desktop metrics.

I wanted a site that was mobile responsive. If you aren’t up on design lingo, this simply means that your display adjusts with the size of your screen.

Of course, redesigning gave me an opportunity to reassess some things beyond that mobile conundrum. I wanted to scale down and simplify while also making little graphical tweaks to present better on any device.

I also needed to put greater emphasis on building my email list. As a result, I would either search out a child theme that helps with this or customize a new theme to satisfy this problem.

What Was Changed on

There are dozens of drastic changes and simple tweaks that were made across the site. I’ll highlight the more important ones here.

Move to Epik Child Theme from Genesis Framework
As I mentioned earlier, I love Genesis. So I didn’t want to move away from it. I wanted to keep the framework but go with a modified version — a child theme — that was mobile responsive.

I loved Epik from the moment I saw it. Minimalist, polished, fast and just as beautiful from a mobile device.

I also like that Epik has a wider display when on desktop. The body of my content — and of images at their largest point — grew from 600px to 700px. This made things less cluttered, but also made imagery a bigger part of my website.

Elimination of a Home Page
This was a tough decision for me. Within the most recent iteration of the old design, I had a home page that focused primarily on my One-on-One Coaching service, highlighting recent posts and telling a little more about me.

I originally wanted to keep that. Of course, a pretty small percentage of my traffic is to my home page. Make no mistake, my blog posts make up the meat of this website.

After originally tinkering with a home page, I decided to get rid of it and instead direct users to my Blog Home.

Responsive Images
This is one of those things that is easy to forget about when moving to responsive design.

I simply assumed that all images within my posts would look fine. That’s not the case. When I used images that were a 600px fixed width, they were going way off the side when viewed via mobile.

The first thing I did was use a plugin called Simple Responsive Images. This allowed me to set breakpoints for each image size so it would automatically resize based on display.

I also used the Regenerate Thumbnails plugin to re-run all of the sizes to fit my new settings.

Finally, I noticed one issue with images not resizing that had captions since the caption code also used a fixed width. Advanced programmers may have an easier solution for this, but I went through my posts one-by-one to remove the fixed width of captions.

Responsive Embedded Videos
Another issue was that the sizes of videos were not changing depending on screen size. This meant that most mobile users were unlikely to watch a video on one of my blog posts.

There are plugins for this that are supposed to solve this problem, but I couldn’t get one to work.

Instead, I used some custom code that I found here. I then went through my old posts with videos to put the proper div around those videos. I will need to continue doing this going forward.

Here is what a blog post now looks like from an iPhone that has a video embedded in it: via iPhone

Header Widget Graphics

I wanted to provide a little more polish and branding to the new design. Of course, I’m not a designer, so this is where I hired some help.

JonLoomer VLOG WidgetIf you look on the right from your desktop (or at the bottom on mobile), you’ll notice some custom header graphics (depending on when you read this) for widgets associated with Search, Jon’s Podcast, Jon’s Video Blog, Recent Posts and Ways to Connect.

Getting the graphics was only half of the struggle. I then needed to find a way to replace the header text area within these widgets with a graphic. And it needs to work on all browsers.

If you’re a CSS pro, you have no problems with this. But I spent quite a bit of time researching to solve this issue.

With the help of Firebug on Firefox, I was able to look at the code for my website. You’ll notice that each widget has a unique label. This could then be used within my CSS.

Here’s an example of the solution I used for my Video Blog widget (code added in CSS):

#loomervlogwidget-2 h4:before {
content: url('/images/video-sidebar.png');


So now, a header graphic is inserted before the H4 tag within that widget.

Prominent Email Signup Widget
Building my email list is central to my business.

When I am actively promoting a product that requires an email address, I get a ton of subscriptions. But when I’m not, this number can lag.

The main way I was driving newsletter signups before was through a sidebar widget. This widget couldn’t be that prominent because I had promised space to sponsors. So it was midway or even further down the side, making it less likely readers would notice it.

As a result, my subscriptions started dipping to 20 or fewer per day. I needed to address this.

I did that with a new and prominent widget at the top of every blog post. It’s a dark gray color (consistent with my logo) that helps it stand out. I am now getting closer to 40 or 50 daily subscribers as a result.

The first thing I did was work with that same designer to come up with a look and feel of this widget and design an icon. I then added the following code to my functions.php file:

/** Add Newsletter Box on Single Posts */
add_action( 'genesis_before_post', 'include_newsletter_box' );
function include_newsletter_box() {
if ( is_singular ( ) )
require( CHILD_DIR.'/newsletter-top.php' );

The newsletter-top.php file is within my theme’s directory. This is all it is:

< div class="newsletter-top">
< / div >

I made sure to put the form on the left side so that it isn’t cut off on mobile devices, also making sure the form was no more than 300 px wide.

Removal of Facebook Recommendations Widget
On the old site, I used a Facebook Recommendations widget (it’s from the official Facebook WordPress plugin) that would open on the bottom right when scrolling down a post. It was somewhat effective.

However, it’s also annoying on mobile devices. It takes up far too much of the screen and is intrusive.

I also find it to be overkill since I already have three share areas from the Flare plugin (I LOVE this plugin!). As a result, I chopped out Facebook Recommendations.

Sometimes less is more.

Removal of Voice Mail Plugin
For a while, I was using the Speak Pipe plugin that allowed users to leave me voice mail messages.

This was a pretty cool feature, but the novelty quickly wore off. I received far too many “joke” or downright creepy messages than I’d care to count. And it also intruded on the design while my website was viewed from a mobile device.

Once again, this plugin didn’t make the cut within the new design.

Cleanup of Sidebar Widgets
Avoiding clutter as a website grows is a big struggle. It was time to take this on.

As a business owner, the impulse is to highlight every important thing imaginable within the sidebar. But with each new widget, the amount of attention that this content gets goes down.

So I decided to remove the Newsletter and One-on-One sidebar widgets. The Newsletter is already prominently highlighted at the top. And I’m probably going to start rotating that real estate with other things I want to feature, like my One-on-One service.

I think I removed one or two other widgets as well. But since I can’t remember what they were, you see just how important they were!

Tagline Change
When I redesigned my site in April of 2012, I went with the tagline Social Media That Makes a Difference.

I loved that tagline. It fit what I was doing and my target audience.

But that tagline was targeted at small businesses and nonprofits. My focus has moved away from those groups and more on those willing to invest in their Facebook marketing. Most important, my target audience wants to experiment with things well beyond the basics.

I don’t want to be seen as just any other Facebook marketing blogger. That market is already saturated.

I’ve differentiated myself as someone who focuses on advanced Facebook marketing strategies that go well beyond boosting posts and getting more Likes. I focus on Power Editor and the endless features most marketers don’t know about. Tagline For Advanced Facebook Marketers

As a result, I wanted to make it painfully clear that my content is “For Advanced Facebook Marketers.” As a result, a new tagline was born.

What is Still Coming to

As I mentioned, I’m still working on this design. But it’s closer to complete. Here are a few other things I’m addressing:

Recommended Tools Footer
My designer drew up a new footer for me that does a really nice job of highlighting tools that I recommend. I just need to implement it.

I want to put greater emphasis on directing my target audience towards extremely effective tools that I use that help with my Facebook marketing. The focuses will be in the following areas:

These are affiliate links, so the focus is two-fold. It drives revenue for me, but it also serves to help my readers by directing them to products that are relevant to them.

This is a turn away from focusing on general tools that I use for my online business.

Fixed Header
I’d like to create a fixed header so that when a user scrolls, important items remain at the top (see Facebook as an example).

This, I think, is more complicated than it sounds. I haven’t found the perfect solution yet. And it needs to be simple enough so that the fixed area doesn’t take up too much of the screen on a mobile device.

If you know the perfect solution, give me a shout!

Navigation Clean-up
I need to refocus my navigation and sub-navigation to determine what can stay and what needs to go. I also want to make it easier to discover buried content.

This is a work in progress for sure!

Product and Service Features
As mentioned earlier, one of my biggest struggles is featuring my products and services while also decluttering the navigation and sidebar. I need to find a good solution for this.

The fonts currently used on this site are those that are the Epik theme defaults. I actually like them, but I need to go back and take a look at what not only fits my brand but is also easiest to read from any device.


I am not a designer. Much of what I do with my website is based on research and trial and error. I’d love to hear what you think about some of the changes I’ve made and any recommendations or feedback you may have.

Let me know in the comments below!