Redesign of JonLoomer.com: How to Go Mobile

38 Shares Facebook 15 Twitter 0 Buffer 10 Google+ 9 LinkedIn 4 Pin It Share 0 38 Shares ×

epik 700x525 Redesign of JonLoomer.com: How to Go Mobile

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 JonLoomer.com 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 JonLoomer.com 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 JonLoomer.com

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:

jonloomer iphone Redesign of JonLoomer.com: How to Go Mobile

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 widget Redesign of JonLoomer.com: How to Go Mobile If 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">
[AWEBER iFRAME FORM CODE HERE]
< / 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.

jonloomer advanced facebook marketers Redesign of JonLoomer.com: How to Go Mobile

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 JonLoomer.com

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.

Fonts
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.

Feedback?

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!

38 Shares Facebook 15 Twitter 0 Buffer 10 Google+ 9 LinkedIn 4 Pin It Share 0 38 Shares ×
About Jon Loomer

Jon Loomer is a digital marketing consultant with a unique perspective on social media. He was introduced to Facebook in 2007 while with the NBA (back before Pages) and has been using Facebook for business ever since. Stay in touch by liking his Facebook Page (Jon Loomer Digital).

  • http://www.ryanhanley.com/ Ryan Hanley

    Jon,

    I rock the EPIK theme for Genesis as well. Love it. Have you ever thought about Leadplayer to capture more leads with your video?

    Hanley

    • http://jonloomer.com/blog Jon Loomer

      Thanks, Hanley! I don’t know anything about Leadplayer. Good stuff? Premium product?

  • denisetonin

    Great Jon! Thanks for sharing all these precious tips! Greetings from Rio :)

  • http://www.postplanner.com/ Scott Ayres

    Looks good bro!

    • http://jonloomer.com/blog Jon Loomer

      Thanks, Scott!

  • Paolo_Sini

    Jon,

    Great Theme. It looks great both on my PC and in my Galaxy SII with Android OS.
    I always read your articles on my Galaxy and it was really difficult with your previous theme.

    Again, great choice.

    • http://jonloomer.com/blog Jon Loomer

      Love to hear it. Thanks, Paolo!

  • AmeerAftab

    Hey Jon. Great stuff! I’ve categorically checked all these elements on my own blog ThirdWorldStrategy.com to make sure my site was as pleasant to read as possible.

    Also, I’ve been in love with the Flare plugin you have on your site. Unfortunately, the developer has added a self-promotion button onto the widget in their new update without any way to opt out of it. I’d really really appreciate if you could share the 1.2.2 plugin version that you have on your site right now.

    • http://jonloomer.com/blog Jon Loomer

      You just need to remove that portion from the code. Same with changing “Flares” to “Shares.”

      • AmeerAftab

        Thanks for the tip. I’m not very handy with the code as yet, but I’ll figure it out. Cheers!

      • Kristine

        Hi Jon. I used this plugin too!
        Please guide me, how to change “Flares” to “Shares” ? Thanks

  • http://weddingideasalbum.com/ Brankica

    Hey Jon, I love the post and what you did with the site. But the moving header, I know Brian Gardner had a post about a sticky menu, maybe that would help…

    • http://jonloomer.com/blog Jon Loomer

      Thanks for the heads up, Brankica!

    • http://jonloomer.com/blog Jon Loomer

      Are you a designer, Brankica? I just implemented that code. I like it! A couple of things though:

      1) It doesn’t work in mobile. Just a gray bar. Any idea why?
      2) I LOVE Brian’s bar. That is what I’d like to copy. Any clue how that’s done?

      • http://brankicaunderwood.com/ Brankica

        sorry for the late reply, I didn’t see the notification. No, not a designer :( But I would contact Brian and ask him, you use Genesis and he seems like a totally cool person, I am sure they would help you with this!

      • John Grover

        Hi Jon,

        Love your site and all the amazing Facebook marketing tutorials you teach and share!

        I wanted to share a tip of my own with you as far as mobile theme technology goes… I hope you don’t mind… I am finding (as a web designer) that the “types” of responsive themes that “render” the best are the ones that show a square grid icon at the top left corner when viewing the site with a mobile device, because it makes navigating the site in question look and function in a way that others just cannot match. Here’s a theme from ThemeForest that has this feature that I am referring to — > http://demo.tagdiv.com/newspaper/

        You also mentioned “imagery” …and that was anther reason I wanted to show you this particular theme.

        Kind regards,
        John

  • Catherine Saunders

    Great stuff. I had some trouble with the LinkedIn link taking me to Filament – don’t know if that is something you’re aware of.

    • http://jonloomer.com/blog Jon Loomer

      Fixed it, Catherine. Thanks!

  • Andrew Voirol

    Great article Jon! I would be interested to hear how your google analytics measurements change with the move to less pagination. As always great to read your blogs. I don’t know how you find the time to generate so much quality content time and time again. (PS I couldn’t seem to login via FB to leave this comment, only v via Twitter)

    • http://jonloomer.com/blog Jon Loomer

      Thanks, Andrew! I’m keeping an eye on the metrics. So far, no noticeable change — though the numbers are up and down, so it’s tough to make much sense of them.

      Thanks for the heads up on the Facebook login. I don’t think that’s anything I can control and would have something to do with the Disqus plugin.

  • http://dannybrown.me/ Danny Brown

    LOVE what you did here, mate. As you know, I’m a huge fan of Genesis, and even bigger fan of Epik ;-)

    But, dude, you’ve taken it to a cool new level with your custom CSS – love the email sign up form. Curious – did you place it before post deliberately? Are you A/B testing with After Post too? Interested to hear your thoughts, mate. Great job!

    • http://jonloomer.com/blog Jon Loomer

      Thanks, Danny! I’m no CSS expert, but I feel pretty good about what I’ve been able to do so far.

      I did put the email widget above posts deliberately. I have since added another widget to promote products below posts. So it actually doesn’t matter much to me which one performs better since both are important.

      I did, however, used to have a sponsor below all posts. The one above posts performed better.

      • http://dannybrown.me/ Danny Brown

        Interesting. May have to experiment with that, sir – cheers, and have a great weekend!

  • jacobv73

    Hi Jon,

    I’m looking for a simple YouTube Widget like the one you have in your sidebar. I know you manually added the text/image, but did you also manually create the entire widget? or did you add a plug in? If so, what youtube video plug in did you use?

    Thanks!

  • JenniferGrayeb

    I also have a question about the Flare plugin. I too run on the Epik theme and when I use the plugin and run my mouse over the icons, the sharing buttons are cut off (unlike yours which stay on top of your content). JenniferGrayeb.com in case you are curious. Any ideas?

38 Shares Facebook 15 Twitter 0 Buffer 10 Google+ 9 LinkedIn 4 Pin It Share 0 38 Shares ×