Mobile Responsive Website WordPress Before and After

I’ve been visiting a lot of WordPress websites lately on my iPhone only to discover a large majority of website owners have ignored Google’s threat earlier in the year to “Convert to a responsive website by April 22, 2015 or else!”


The non-responsive websites I’ve been looking at are either using cheap or old themes that did not include responsive design during their original crafting or custom themes that used a free plugin from a few years ago that has not kept up with today’s mobile standards.


Have You Looked at Your Website on an iPhone, Android, and Tablet Lately?

If not, do it today! Some markets are reporting 85% of their website visitors using a mobile device in their Internet travels. Having a non-responsive website for your business is almost as bad as not having a web presence at all.


Actually, now that I think about it, the negative experience a non-responsive website gives to a first-time visitor could be even WORSE than not having a website at all!


If you are a professional speaker (one of my main markets), know that meeting and event planners are almost exclusively using their phones or iPads to view speaker websites and watch keynote videos and demo reels.


If your website is not 100% responsive, you are simply losing business.


Google’s New Mobile Standards

Google suggests (translation=”demands”) mobile responsive websites have a certain look and readability when visited through a cell phone versus iPad, versus tablet, verses desktop computer. Fail to comply, and you have a very good chance that your website will be so far down the list on Google’s Mobile Search, that it won’t get seen at all by people searching for your topic.


Google also wants your website to contain ONE set of content. We used to build one website for desktops using the .com domain name and then we would register .mobi for the other completely separate website. Then, we would write some sniffer code to determine which site to show the visitor, based on their mobile device type, when they made their way to the home page or interior page of the website.


Times have changed. Scrap the .mobi and just use one website.


What is a True Mobile Responsive Website?

A truly mobile responsive website adapts its view (or responds) to the size and type of mobile device used by a website visitor. When mobile websites first started to become popular, a plugin was possibly installed so that your website was “visible” on phones and iPads and that was good for a while.


In just the past year, mobile device suppliers have upgraded the way their products display websites. So, even if you did have a free or low-fee plugin installed and customized, your WordPress website may need some additional work. If no efforts were made to mobile-ready your website, consider this a shout out for you to get with your WordPress helper this week and evaluate what needs to be done for your website to have better visibility and usability on cell phones and mobile devices.


With such a high percentage of website visitors using mobile devices, upgrading now will payoff quickly.


What Should a Mobile Responsive Website Display?

Just like a website viewed on a desktop, there are a few best practices to follow when converting your WordPress website to mobile responsive.


Mobile responsive WordPress website header example
Surprisingly, responsive header graphics are optional—maybe even a bit discouraged. Sure, you can have normal graphics on your website for viewing on desktops, but ALL graphics should be held to a minimum when viewed on a phone or other mobile device.


Many reputable websites have no graphic header at all on their mobile responsive website. Some website owners choose to have just a logo at the top middle with either content or navigation immediately below the logo. The key is simplicity. Get your mobile site visitors to the content quickly without holding up their mobile device by having to display a bunch of heavy graphics.


I always have to chuckle a bit when I think about use of the graphic header and how branding experts thought web marketers were crazy to create a sales page without a header graphic years ago. Now, those same branding experts are telling their clients to not use graphic headers in the mobile responsive components of the website.


Hamburger Menu
Example hamburger menu for responsive website


The 3 lines you see on the top of a mobile responsive website using your phone are known among WordPress and mobile developers as a “hamburger menu” because the image looks a bit like a hamburger patty in the middle surrounded by a top and bottom bun. This is the widely accepted method for supplying clickable links to other pages of your website.


Primary Section Navigation Buttons
Mobile responsive website silos


Have you ever visited a website on your desktop or laptop computer to find 3 main sections on the home page? We call these “silos” where the objective is to direct a website visitor to one of three main website sections.


Silos are typically the three, four or five pages or sections of your website that visitors most frequently come to your website to see. Google likes silos on your home page because they quickly route the visitor to information they want most. The silos you have on your home page should be featured in the mobile responsive version as well.


Instead of the three silos being featured across the mid section of a home page like you would normally view on a desktop computer, these silo sections are featured most commonly as vertically stacked buttons on the mobile responsive website.


Readable Text
Example of mobile responsive text on a home page.


Alright, I’m not a big fan of a big “Welcome” word instead of a real headline, but this is just an example to use to demonstrate how the text is so much easier to read on a mobile responsive website than one that has only basic mobile ready features.


As website visitors, you and I were okay with scrunching our fingers together on our smart phones and fanning our fingers apart to create larger text. But, we grew tired of that extra effort quickly. Now, we expect to land on a page that has the text immediately correct in size for reading.


How We Can Help

First, review your own website on as many different mobile devices as you can. Ask friends to visit your website with their phones and take a screenshot of your home page and email it to you. If you get a consistent look and feel and the components on this page are included (header, hamburger menu, silos, readable text), then you are probably good to go.


If your website is not 100% mobile responsive, consider allowing Here Next Year to do some work on your website to get it fully mobile responsive, which is the current term going around these days as you’ve probably heard.


We average about 8-10 hours of hands-on work time for each website. So, it’s something we simply have to charge for. But, it’s a lot cheaper than having to re-design your entire website! And, the way we manually code CSS files, you will have a more consistent outcome throughout your site without having to custom code plugins.


Why Not Use a WordPress Plugin for Mobile?

We could probably use a plugin for this to save everyone money, but plugins have their own set of problems, including:

  • Needing customization during initial setup costing you more money anyway
  • Requiring monthly monitoring and updating plugin versions
  • Containing malicious code that you probably don’t even know exists on your website
  • Conflicting with other plugins as they are updated
  • Causing the dreaded “black screen” because the plugins not being compatible with old or new WordPress versions
  • Reliance on your WordPress developer to fix any problems immediately when they arise


A few years ago, that all would have been fine. But, with 80% of all visitors using a mobile device, I just cannot put that much reliance into a plugin. Better to make manual, custom changes to the CSS files within WordPress once so that the mobile version of the website ALWAYS works the way it’s supposed to…without relying on any 3rd party plugins.


One Fix Forever?

Does our method guarantee that I’ll never have to come back and charge you for an update to the code? I can’t make that promise. Mobile web is just too new. But, my feeling is strong that we should be good with this manual coding upgrade for at least two years.


Expected Turnaround Time

We are only working on a few mobile responsive conversions per week to keep our focus and quality at the highest level. This is your website we’re talking about after all, so we want to make sure everything happens smoothly and quickly for you. Our average turnaround has been 3-5 days per site.


Your website will not be down during any of the transition. And, anyone viewing your website through a desktop or laptop will see no difference in the design or content layout…until, of course, they view the site through a mobile device.


Will New Content be Responsive?

After the mobile responsive version is complete, you will be able to add new pages and blog posts without having to have us do any further work to make those new pages and posts mobile responsive. New content will automatically be fully mobile responsive as long as you do not install another WordPress theme or customize a new template layout for pages or content. Of course, if you do install a new theme or template, it’s no big deal. We would just go through the same process to get that theme or template responsive for you.


Next Step

We’d like to invite you to get your website into our queue for converting your WordPress website to being fully mobile responsive. This happens first by Marty Dickinson reviewing the website you would like converted to mobile responsiveness.


To assure our quote will be within our standard rate or to obtain a custom quote, please complete this quick quote form and answer the additional questions in the fields provided. We usually reply within the hour…but at least within 24 hours.

Get a Quick Quote for
Here Next Year to
Convert Your Website
to Mobile Responsive


Based on the new traffic you'll receive, and the happiness those mobile viewers will experience when viewing your site through their mobile devices, it won't take long before new sales and new opportunities will reimburse your initial expense of having us perform this upgrade.


If you have any questions, please ask.