Adding Mobile Responsive Capabilities to an Existing Desktop WordPress Site
Enjoy this blog? Please spread the word ūüôā
Skype
LINKEDIN

Adding Mobile Responsive Capabilities to an Existing Desktop  WordPress Site.

Understanding the best strategy for adding mobile responsive capabilities to an existing site is critical for the conversion of traffic on a site. Ignoring the needs and experience of the mobile / tablet user, is running the risk of losing up to 27% of the internet traffic. The best strategy for optimizing  the view for the phone and tablet will depend on the current site layout. There will be some sites that due to the number of pagers will not be practical to view all of those on a phone or smaller handheld device. In this case a separate mobile site could be an alternative to allow the users to view only what pages are practical on a phone. I will examine different strategies I have used in the past and weigh the pros and cons of each one. Many factors were taken into consideration when picking a strategy. Enviably the most common factor seems to be budget. In each case the web development companies client, had an existing WordPress site and was looking for some sort of solution to convert traffic on the mobile devices as well as display the information properly on the tablet / iPad. In Each case the existing site was a WordPress site that was one that the client was at least somewhat  satisfied with.

 

I am going to make the following assumptions in this blog:

 

  • They are at least somewhat satisfied with their current site:

If the client was not happy with their current site a new design and responsive build would be the more likely recommendation.

  • Client had been made aware of the facts on the traffic and trends from non desktop users to their site:
    In order for your client to realize the value of making their site mobile friendly / responsive it will be important to share the facts about the number of users that visits their site via nontraditional devices that will not render the same way on a desktop or laptop.

 

Initial Evaluation:

Prior to making a recommendation on the best strategy for your client, you will need to gather the necessary information in order to come up with a solution that fits your clients business needs well as falls within their budget. In most cases this evaluation will involve the developer, business marketing expert as well as the end client.

 

Understand Your Clients Business Model:

The most important step is what is the expectation for your client. Once you understand how the client expects their business dream to work, adjustments can be made for how the tablet / mobile user will interact with the site to achieve the highest number of conversions. In this phase it is critical to find someone that understands the business model and can begin gather to information in order to make adjustments. In most of my blogs I “preach” about the importance of having more people involved then just the developer when building a site. It takes a vast array of knowledge to make any business grow. A business that is hoping to achieve business via the web is not any different.

 

Budget:
Prior to coming up with a solution that the client cannot afford, it will be important to understand the budget of your client. If the client has budget in the range of the full WordPress build, they should be able to get a full desktop to responsive conversion that will Work on all devices. Understanding budget will reduce time spent during the quoting period as a client with a lower budget may not be able to afford the development effort for some of the recommended solutions. Presenting all the options and explaining the pros and cons of each is important to maintaining  the trust of your clients.  Providing a short cut solution without providing all the information can lead to lack of credibility down the road.

 

Traffic:
In order to come up with a recommendation that will yield the highest rate of conversions, I strongly recommended looking at the current mobile / tablet traffic. This will allow you to properly recommend the best solution to your client. This will go a long way to fully understand how the users of the site in question tend to navigate. On a larger site, a comprehensive traffic reports can define the criteria for what pages that will be displayed on a mobile / handheld device. This is an important reason why I recommend  that business owners not try to cut costs and go directly to a programmer / developer if they are not able to make these business evaluations on their own. There is a good chance the programmer will not be able to match traffic flow on a website to the best possible way to convert that traffic. Saving 3-4 times in cost with more than 10 times less conversions will not pay off in the end. A reputable web development company that provides business, marketing (SEO) is critical for understanding the best solutions for increased mobile / responsive conversions.

 

Functionality of the Site:
It is critical to¬†evaluate¬†both content and¬†functionality when formulating a mobile / responsive¬†solution. There may be “desktop only” plugins, software or functionality ¬†that will not render well on a handheld device that is critical for the messaging of the site. The content, messaging and functionality may require a different¬† approach as there is less real estate to work with on the smaller devices. In some cases the functionality of a site that is working perfectly on a desktop / laptop can be problematic on even a tablet. Understanding what pages use a plugin a piece or software is key in the evaluation stage. Once this list is compiled, an action plan of how to display the content on the different devices (if at all) is needed. This will be the foundation for building out a scope that is best suited for your client. A perfect example of this would be a matching shopping cart on the same domain. In this case, it is important to understand how each piece of software will be handled as they will not share the same CSS / HTML for a one-shot solution.

 

 

Coding Standards of The Existing Site.
How the site was built is a big factor in not only cost, but will determine the final recommendation to your client. A properly coded WordPress site can be converted to full responsive WordPress theme in much less time than one that does not follow the proper WordPress, and CSS / HTML standards. I have seen some cases where it took less time than to build out the site from scratch then to attempt to modify the existing site. If I was not aware of how the site was build, I would definitely  ask to see the code in order to make an intelligent evaluation and recommendation. How the WordPress theme was built and what version will defiantly play in to what the best strategy is for building out the mobile / responsive environment for your clients. This will all be part of the initial site evaluation process.

 

Possible Solutions:
Once an evaluation of the clients business needs are understood and the full site is examined it’s time to develop possible recommendations and solutions for your client. I will examine each solution I have used in the past as well as the best case to use them and the pros and cons of each.

Static Mobile:
The static mobile solution is one I developed for my clients with end client on an extreme budget that needed a quick and inexpensive solution to get their site mobile ready.  This site does not share the content of the WordPress CMS and will have to be updated manually VIA a FTP tool.  This solution uses a piece of code at the top of the site and will switch to a different folder on the server as it detects the site being viewed from a mobile device as it initially loads.

Why Use a Static Mobile Solution:
The number one reason to use a static mobile will be budget. These can be done in a matter of hours with a template and can serve as a temporary solution for a client that does not have a mobile ready site. The other reason is that a responsive solution would not work with the needed mobile layout.

Pros / Benefits:

  • Quick and cheap.
  • Cost saving
  • Faster load time
  • Can have a separate flow / layout aside from the desktop / full site.

Cons / Drawbacks:

  • Both sites need to have content updated independently:
  • End client may have more difficulty updating content on their site:
  • Some devices that are not handheld / mobile may incorrectly read the code and load for a bigger device.

 

Separate Mobile Theme Solution:

A separate mobile theme solution is one I have used for a number of clients. This involves taking an approved design and converting it into a separate theme. This theme is loaded via a plugin that determine what type of device the user is viewing the site on.

I have been using this plugin to switch the version of the theme: http://wordpress.org/plugins/any-mobile-theme-switcher/. There may be better or more popular ones out there, this is just the one I have been using.

I originally borrowed this idea from Sports Illustrated. If you  visit the SI (Sports Illustrated) http://sportsillustrated.cnn.com/ on a mobile phone it will redirect to a WordPress theme as seen here: http://m.si.com/ . While I think the overall best solution for most clients is to make the site fully responsive, the separate mobile theme can be a powerful low cost solution that offers a completely different view and functionality as the desktop version.

The Separate Mobile Theme Solution:
The separate theme solution can be a low cost alternative to making the site fully responsive. A possible reason that I have seen to recommend this solution outside of budget is that the current desktop layout would either not work on a hand held / mobile or it is determined the mobile business requirement varies too much to work with a responsible layout.

Pros / Benefits:

  • Done correctly, will work on almost any device
  • No updating multiple WordPress themes or code
  • Faster load time
  • Can have a separate flow / layout aside from the desktop / full site.
  • Ability to update via a the same administration area as the desktop site.

Cons / Drawbacks:

  • Some devices that are not handheld / mobile may incorrectly read the plugin and load for a bigger device.
  • Only address the layout for the mobile / handheld version.
  • Depending on 3rd part plugin.

Fully Responsive Solution (making the desktop site responsive):

This solution determines the device the site is being visited on and resizes the elements on the page VIA CSS / Media Quires. This has come to be the most excepted solutions for most new sites and can work with less effort then a full site build on many correctly coded existing WordPress sites. This solution will rely on the current desktop framework more so more than any of the other solutions, it will be critically important to fully evaluate the site prior to making this recommendation. How the theme is built, if the CSS is correctly done to standards, the plugins that provide functionality and how the content is displaying thought the site will all be important in determining if it is cost effective / plausible to add responsive functionality to an existing site. I find this is generally the most time consuming of any of the solution that don’t involve rebuilding the site from scratch. In some cases site revisions between the different browsers and devices can run up hours in excess of building out a responsive solution on a framework¬† / theme or custom solution from scratch. This solution will involve a lot of testing as not only the new devices need to be tested ,but changes to the CSS will require a retesting of all the browsers.

Why Use a Desktop Responsive Rebuild Solution:
This is a good solution for a correctly coded WordPress site that will support adding the CSS to make it fully responsive.  This for sure is the standard for a new WordPress site build and most of the frameworks and theme have the functionality already build in for easier development.

Pros / Benefits:

  • Industry standard
  • One WordPress theme to maintain
  • All content is controlled in one area
  • Less need for device / size specific pages
  • Ability to update via ¬†the same administration area as the desktop site.
  • Works on most devices

Cons / Drawbacks:

  • More testing after the development required.
  • More evaluation of the current desktop site needed:
  • High cost
  • Longer load time

Rebuild The Site Responsive From Scratch

This is solution involves building out either using the current design or modifying with a new design and building the site as a brand new build. While this may seem like a drastic solution a site that has been incorrectly coded , has a lot going on the current site, a fresh approach may actually be faster than the needed time for coding testing and revisions on an existing site. This could be especially  true if the programming team / individual  tasked with  developing the site, was not involved in the creation of the original site. The lack of familiarity with code will add up hours.

Why Use a Rebuild The Site Responsive From Scratch Solution:
I think more justification to the end client is needed to justify the cost of rebuilding the site from scratch. This is especially tricky if a prevailing reason is a poorly coded website created by the same entity or individual that coded the original desktop site. In this case it might take a little bit of creative explaining to justify the full site re-build. In many cases the most logical explanation is the rapid evolution of technology.

Reasons for a complete rebuild:

  • Theme / CSS within WordPress will not support adding the CSS to make the site responsive in a way that is practical.
    This is the one that might take a little bit of creative explaining if the development entity proposing the rebuild is the original developer.  It may not be a reflection of the coding standards of the original code as much as the expectation that the site would need to responsive after X number of years. The older the site is, the easier this will be to explain. A new site done in the last 6 months will be a little hard to explain to anyone that knows development , then one done 2 years ago when responsive was really not as prevalent as it is now. If the site needs to be recoded from scratch due to poor programming, my suggestion would be to take a hit on a few hours to maintain a long term relationship with your client.

 

  • The current layout will not support the desktop conversion to responsive.
    I have seen sites that would really not easier support a desktop conversion due to the way the design is laid out. This may be a reason to recommend a separate mobile site, but in some cases the site will not look good by default on mobile. This may be due to an older sites prior to the standard 960px / 1000px designs that we tend to see today. This will need to be explain to your client and effort will need to be made to produce a design that will support desktop to responsive conversion. In most cases this will involve creating a modern design. These design tend to support almost automatically the resizing of objects to the smaller displays and devices.
  • When faced with the cost of rebuilding the current desktop and the additional cost of adding design / layout functionality, the end client may decide the extra cost is worth the additional development costs.
    This is a decisions the end client will have to make when faced with the options / solutions and final quotes on those. If the option to rebuild the desktop as responsive  is around 40% of the cost of a total rebuild , the end client must ask themselves how much they like the current design and factor that with the cost for the rebuild. As the number get lower (a larger % of a new build) due to development efforts and  other associated labor cost , there more sense it makes for the total re-build.

 

Pros / Benefits:

  • Can be correctly coded to the latest responsive standards.
  • One WordPress theme to maintain
  • All content is controlled in one area
  • Less need for device / size specific pages
  • Ability to update via¬† the same administration area as the desktop site.
  • Works on most devices

Cons / Drawbacks:

  • More testing after the development required.
  • More evaluation of the current desktop site needed:
  • Higher cost then static and handheld /¬† mobile design template solutions.
Enjoy this blog? Please spread the word ūüôā
Skype
LINKEDIN