Before I let you know what stunned me about WordPress websites, let me provide a little background.
The 60 Second Marketer uses a customized approach for the back-end of our website. By that, I mean we use Freeway Pro to design many of the pages on the site, then we use WordPress as the platform for the blog portion of the site. This approach for our website has worked for us for quite some time.
When someone visits our website from a smartphone, they’re redirected to a mobile version of our site, which can be seen here. This is an adaptive version of our site (as opposed to a responsive version).
Adaptive versions of websites use sniffer code to re-direct smartphone visitors to pages designed specifically for smartphones. In other words, there’s a line of code at the head of the website that sniffs out whether someone is visiting from a desktop or a smartphone. If they’re visiting from a smartphone, they’re re-directed to a mobile page on website (often designated by an m. subdomain, as in m.60SecondMarketer.com).
(If you’re interested in using sniffer code to re-direct people to a mobile version of your site, you can read this blog post on the 60 Second Marketer blog).
Responsive versions of websites serve up web pages based on whether someone is visiting from a desktop, a tablet or a smartphone. In other words, they respond to the size of the screen the site is being viewed from and then change the layout based on that information. Most people use responsive designs for their websites, but there’s a fatal flaw if you’re using WordPress.
What’s the Big Problem with WordPress Responsive Themes?
The problem with WordPress responsive themes is that most of them simply re-package all of your content into one long, cumbersome mobile page. In other words, they take all of the existing content and simply lay it out vertically onto one super-long page. This means your mobile visitor, who is looking for short and specific information, is served up a big, clunky web page that gives them too much information. (Special shout out to Desiree Scales, CEO of Bella Web Design who helped clarify a few questions I had about this issue with WordPress themes.)
This approach ignores the fact that your mobile visitor doesn’t want a ton of copy. In fact, because they’re typically visiting your site when they’re at walking through a mall, at a coffee shop, at a stoplight or in a parking lot, they’re interested in just the essential information.
Here’s how I addressed this issue in Go Mobile, the book I co-authored with Jeanne Hopkins:
The first step to developing a mobile website is to get inside the mind of your customer. When you step outside yourself and go inside the mind of your customers, you begin to see things from their perspective.
Typically, given the medium, your mobile website will be more streamlined than your corporate website. People who will be visiting your mobile site are themselves mobile, and they have a very specific set of needs—none of which include the desire to read a lot of extraneous information. Thus, you can do without company press releases, employee bios, case studies, company philosophy, and photos of your employee holiday party.
So, in the end, most responsive WordPress themes don’t take context into consideration when they serve your website up to your visitors. In other words, they ignore the fact that most visitors don’t want a ton of information when they’re visiting your site from a smartphone. This is a fundamental flaw in the way WordPress themes currently work.
How Can You Solve This Significant Flaw?
Here are some steps you can take to adjust and fix this issue:
- Try to find a responsive WordPress theme that adjusts the amount of copy based on the size of the screen. So far, I haven’t been able to find a WordPress theme that does this, but maybe a member of our community knows of one. (If so, please make a comment below.)
- Alternatively, create an adaptive site by adding re-direct code: Ask your web designer to install a browser re-direct feature onto your website the way we’ve done with the 60 Second Marketer website. That’s a line of code that “sniffs” out whether your visitor is coming from a large regular browser or a smaller mobile browser. With a browser re-direct feature, your website will be able to re-direct mobile users to the pages on your website that were set up to be viewed in a mobile browser. (You’ll find the line of code to accomplish this by clicking here.)
- Redesign key pages: In most cases, you’ll want your mobile website to be a smaller version of your regular website. After all, visitors are typically looking for a few key pieces of information — directions to your store, information about your services, special offers, etc. In our case, we set up the 60 Second Marketer iPhone website with 6 key pages — Videos, Blog, About Us, Work with Us, Call Us and Speaking.
- Follow best practices: Here are three key tips to make your re-designed mobile web pages the best they can be: 1) Reduce the amount of content — mobile visitors want essential information about your products or services, not in-depth information, 2) Make it thumb-friendly — mobile visitors are often in a parking lot, a coffee shop or at a stop light, so keep navigation simple, 3) Take context into consideration — mobile visitors only want the key facts. Will your mobile visitors be looking for directions? For hours of operation? For a click-to-call button? Think this through as you re-design your mobile site.
In the end, if you’re a small business that handles its site in-house via WordPress, you may be stuck with this less-than-optimal WordPress responsive theme approach. If you’re a mid- to large-sized business, you’ll want to ask your agency or web design firm to fix this issue for you. After all, there’s no point in having a mobile website if it doesn’t take context into consideration.
Jamie Turner is the CEO of the 60 Second Marketer and 60 Second Communications, a marketing communications agency that works with national and international brands. He is the co-author of “How to Make Money with Social Media” and “Go Mobile” and is a popular marketing speaker at events, trade shows and corporations around the globe.
View Comments (21)
i a!most didn't get to read this on my nexus7 tablet because the marketing pop-up wouldn't re-size itself to allow me to "x" it out if the way. There's always something. This "flaw" is remedied like everything else. Money. Lol. I find myself struggling with a vertical scroll monster as we speak. When the magic theme is developed I want to get a copy as well.
Hi Randy -- Good to hear from you. I think you have a good point -- there's a flaw in just about every website. LOL. The pop-up shouldn't come up again, now that you've visited and X-ed out. If it does, let me know so I can adjust it. Thanks!
Randy, since you're viewing a "vertical scroll monster" (I like that) on what is considered a mobile device, do you think it would be beneficial to remove half of the article text you just read...but leave it all there for desktop visitors?
Or would a better solution be to manage that vertical monster somehow. Maybe collapse each section of the article into a header bar that expands the article when it's clicked on? So the monster is tamed, but you don't lose a word of what Jamie said just because you're on a tablet?
Generally the mobile aspect of wordpress works really well and it is great to post lots of information and know that it will at least work properly on mobile as well. So overall it is a strength.... but....Wordpress on mobiles has a couple of other poor features too:
- the embedded google calendars are not properly "hot" the way they are on a desktop. They misbehave on tablets too. :(
- the mobile themes vary depending on what desktop theme you choose - and you have to take the pair as a bundle. So I have been landed with one mobile theme where the main menu button is so insignificant that users can't find it. Can't change that without abandoning the desktop theme which we really like..... I have asked Wordpress to make the menu button bigger but they were not interested.
I get the impression that all the 10001 features that wordpress offers are properly tested on desktops but they don't always test them enough on small screens. I expect they will take hold of the problem and sort it out in due course.....
I agree with your thought that most of the Wordpress features must be tested on desktops. It seems as though some of the bells and whistles don't work on mobile.
The solution outlined above -- to re-direct to a customized mobile page via sniffer code -- seems to be the best solution, in my opinion.
Thanks for your comment, Rosalind.
Isn't the problem you speak of here more a problem of using responsive mark-up than using a responsive WP theme? In other words, even a hand coded site with code added to make it responsive will have the same problem?
I have the problem when a customer is selling a product online. Do you use a responsive site but urge the consumer to use the full laptop/desktop site to make a purchase or do you just pack all of the eCommerce into a responsive site and hope for the best?
I often use two WP sites, one more involved for big screens and a second WP site (such as WP TouchPro) for mobile screens. I put just the mobile essentials on the small screen site. I think this works out to make the mobile site truly mobile. What say you?
Yes, I agree 100%. Essentially, we're saying that we want to create a site specifically for mobile devices. Whether you use WP TouchPro or use the adaptive technique mentioned above is inconsequential -- the key is to create a site that is easily useable by your visitors.
Thanks for your input and feedback, Joelin.
Joel will do. It's Joel in PDX.
While I have your attention, how do you get the promos below the comments. The one that says "WHAT'S THIS?ALSO ON THE 60 SECOND MARKETER". Is that part of Disgus or is some other plug-in required?
Hi Joel --
That's part of Disqus. They didn't have it originally, but have updated it recently as a new feature. Thanks for asking!
Cheers,
Jamie
Thanks. I'll have to try that out. I'm testing Disqus on one of my blogs.
The problem you are describing is not a WordPress problem. You are experiencing it because you are trying to do the development, rather than hiring a professional who can properly code your sites--which is probably why you are using WordPress themes. There's nothing wrong with that, but I design sites with a WordPress backend all the time, and my developer is able to code in what information is hidden in responsive mode, cutting back on all the fluff that's not needed on a mobile platform.
Agreed -- in the end, the best option is to either have a developer code the site for a mobile device, or use one of the alternatives discussed here. Hopefully, businesses that are serious about creating a real mobile site will hire someone like you or will use the adaptive technology outlined above. Thanks for your input, Katy!
What?! I can't just click my way through building a beautiful website that works on all devices, shows up on the first page of Google, brands my business and communicates all the benefits to potential customers, downloads in a fraction of a second and all hosted for just $2.99 per month? GoDaddy says I can.
:-)
LOL. Good point, Ty (and Katy)! That's another blog post in and of itself.
Despite responsive design already having been around more than two years, it's still in many ways a fledgling methodology. Designers are faced with an ever-changing landscape of devices, code frameworks and scripts – and, of course, the need to work in a new way with clients to manage the process of creating responsive websites.
It is an evolving technology, isn't it, Barbara. I guess that's what makes this such an interesting field to work in!
Barbara, I like that you define responsive web design as a methodology. More designers and developers need to think of it that way. We tend to be too quick to throw a bunch of content into a responsive layout, without thinking first about whether that content should be there in the first place, or if it's being presented well at all the defined breakpoints.
Many people don't understand that web design is much more than throwing together a pretty web page, and mobile devices can make things much more challenging.
AMEN! I've been saying this for over a year, but because I build "real" mobile sites, everyone thinks I'm just bashing responsive themes. I think getting an m. domain or a .mobi option that you redirect is much more affordable and user friendly for most small businesses.
Glad it resonated with you, Kevin! Thanks for stopping by.
"...it allows us to take the context of the mobile visitor into consideration (i.e., that the mobile visitor is mobile and, as such, doesn't want to read a lot of copy).
Sorry, but I have to disagree on this. I don't think we can assume context based on screen size today. We don't know if that mobile visitor is in a hurry walking across the street while staring at a phone or if they're sitting on a bus with an hour to kill...or sitting at their desk with only an iPad. (Just today I spoke with a new client who got rid of his laptop and now uses ONLY an iPad for his daily work.)
It's a false assumption that a visitor on a mobile device doesn't want the full detail on your website merely because he's on a "mobile" device.
The real source of the problem lies with those of us who manage websites. We're too wordy. Copy should be trimmed in half. And probably trimmed in half again. Content need to be concise and "web friendly" for ALL our visitors, regardless of their screen size. We shouldn't choose to remove content from our sites because the visitor is on mobile.
This is 2014. The customer is in control, so let's empower them on mobile devices instead of crippling them. A responsive website (or adaptive) should take the screen size into account for optimizing the display of content, but not eliminating it.
Hi Ty --
Thanks for stopping by. Your comment is thought-provoking. I'm not in 100% agreement, but your example does illustrate a good point that we can't assume everyone on a smart phone is in a parking lot.
Thanks for adding to the conversation -- you've given me something to think about here.
Cheers,
Jamie