• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer

Contact Us  |  (480) 744-8392  |  info@saeler.com

Follow MarketingBent on Facebook Connect with MarketingBent on Twitter Check Out The Jason Saeler Pins Link up with me on Linkedin Connect with Jason Saeler on YouTube Subscribe to The Jason Saeler Blog

Saeler Enterprises

WordPress Design, Development & Marketing

  • Consulting
  • SEO & Marketing
  • WordPress
    • Development
    • Maintenance
    • Security
  • Training
  • Portfolio
  • Blog

Mobile Responsive, It’s not just flicking a switch!

March 29, 2016 by J. Saeler Leave a Comment

With Google looming in the background demanding mobile responsive sites, developers have been inundated with requests to make WordPress Sites “Mobile Responsive”. There’s just one problem, “Mobile Responsive” is a set of standards involving HTML 5, CSS 3 and in some cases Javascript; it’s about function and performance, while “Mobile Responsive Design” is the combination of standards and presentation. So when someone says “I want my site Mobile Responsive” it’s no different than saying “I want an eCommerce website that makes lot’s of money”.

O.K. great, but….

  • What should it to look like?
  • How will payment be collected and processed?
  • What are you selling?
  • How are you going to market it?

The request is simply too vague for any reputable website developer to provide a realistic quote. The good news is that any relatively new site design or WordPress theme is Mobile Responsive out of the box. This means that the themes will perform according to Mobile Responsive standards using Media Queries and Device Break Points to adjust the appearance of the site on assorted mobile devices. Unfortunately that doesn’t mean it will provide a perfect presentation or a specific look without a lot of custom CSS (Design). Now lets take a look at some examples to emphasize the difference between Mobile Responsive and “Mobile Responsive Design”.

The MarketingBent Theme (This Site) is an Out Of the Box Theme without any Mobile Responsive CSS Customization

Marketing Bent Theme

In the above example, we see a modified version of the Genesis Child Theme Focus Pro by StudioPress. Because this modified theme is still in development, it makes an excellent example of how it’s Mobile Responsive out of the box but not a perfect aesthetic presentation. While a number of break points function correctly other elements don’t. 

In the image below we can easily see the elements that need to be adjusted in order to create a “Mobile Responsive Design” that maintains the branding and feel of the “Desktop” version:

  • The “Hamburgers” (nickname for the Hash Mark menu icon) are centered on the menu bars
  • The top menu floats over the  site logo when expanded
  • Newsletter subscribe box heading is wrapping
  • Hamburger menu background tiles
  • The site description wraps
  • The Social Icons are misaligned
  • If we were to scroll down many more issues would present themselves.

 Marketing Bent Mobile Responsive

So now it’s time to make some Mobile Responsive decisions

When it comes to making your site Mobile Responsive there are basically four approaches  you can take.

  1. Add HTML5 CSS3 Mobile Responsive code to your existing WordPress Theme Adding Mobile Responsive Code to an existing WordPress website isn’t necessarily a cost effective solution because the entire style sheet will need to be adjusted, which is pretty much the same thing as rebuilding the entire website from scratch.
  2. Convert to an HTML5 CSS3 Mobile Responsive Theme and leave the presentation as it is out of the box. This solution is the most effective for anyone with an older site. It brings the sites code up to current development standards, reducing the risk of conflicts and improving overall search engine rankings (not just Mobile).
  3. Use CSS to hide unsightly elements from Mobile Devices This option won’t make your site Mobile Responsive but, if used with an HTML5 CSS3 design, it will allow you to hide difficult to control elements of your pages from mobile devices, reducing the costs involved.
  4. Use a Mobile Responsive WordPress Plugin A plugin would seem to be the easiest way to make your site Mobile Responsive, but like other methods plugins still require compromise and even have some unique drawbacks the other methods don’t. When using a plugin, you still have aesthetic issues and also have the possibility of conflicts with other plugins. In addition to the above issues, the website theme will still be outdated because it’s not using current HTML and CSS standards.

Get an accurate quote, tell your developer what you want

The two main factors to consider when choosing which of these four options is best for you are Cost and Appearance. The less concerned about a specific presentation you are and the more willing to compromise, the less your overall costs will be. Maintaining branding with overall look and feel in a mobile presentation is time intensive and your developer will spend a lot of time tweaking and adjusting (unless they don’t proof their work). So if you want a perfect presentation, expect to pay for it, but if you are willing to compromise your site can be Mobile Responsive without breaking the bank. Just remember, if you want your site Mobile Responsive because of the upcoming Google update – Google doesn’t care what it looks like, just that it’s Mobile Responsive. Another factor to take into consideration is –  if a Mobile Site truly needs to look as close as possible to the Desktop version, why do the major Internet and Software companies create spartan versions of their sites instead of spending a fortune making their sites look perfect (see Amazon example below)?

A few more examples of Mobile Responsive Design to help with your decision

Click on an image below to see how the site looks on an iPhone 6Plus. Each of these designs demonstrates a slightly different approach to Mobile Responsive Design, some more simplistic, others more detailed, but none use plugins. Some choose to maintain most of their branding, others hide elements from mobile devices and Amazon even has an alignment issue.

Genesis Theme Framework Mobile ResponsiveGenesis Theme Framework Mobile Responsive


WPMUDEV Mobile Responsive DesignWPMUDEV Mobile Responsive Layout


 

iThemes Mobile Responsive LayoutiThemes Mobile Responsive Design


WordPress Mobile Responsive LayoutWordPress Mobile Responsive Layout

Share this:

  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest

Category iconDesign & Development Tag iconGoogle,  Mobile Responsive,  SEO

Reader Interactions

Share Your Two Cents Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Design, SEO & Marketing

If you need a Website, Blog, SEO or Marketing Strategy, you are in the right place. We work with you to create a customized strategy, then build a Web Presence that works for you or your business. Learn More

Request A Quote Today!

Footer

Saeler Enterprises

Tucson, AZ 85756
info@saeler.com

Support

  • Contact Us
  • Client Central
  • Request A Quote

Company Information

  • About Us

TOS & Policies

  • Terms of Service
  • Privacy Policy
  • Cookie Policy

Connect With Us

Join The Jason Saeler Circle Follow MarketingBent on Facebook Connect with MarketingBent on Twitter Check Out The Jason Saeler Pins Link up with me on Linkedin Connect with Jason Saeler on YouTube Subscribe to The Jason Saeler Blog

© Copyright Saeler Entereprises 2019