Let’s Get Responsive

let's get responsive
Have you ever looked at your website on a smartphone or tab? Does it look the same as it does on your desktop at home but only a little smaller, kind of hard to see? If the answer is yes then your website isn’t responsive. Sure you can do the reverse pinch, as I like to call it, to zoom in on areas of interest on your site but then you have to drag scroll the screen all over the place. To be honest it is a pain in the ass to do and by not making your website responsive you are trusting that your potential clients are willing to be inconvenienced by this process. Obviously I can’t speak for your customers but when I find a site like that on my smartphone I almost always go someplace else, to a site offering similar products and services that make my user experience as convenient as possible.

So what are the steps involved in “how to make your website responsive?” Well it really depends upon whether or not you use a content management system like WordPress, Joomla, Drupal or any number of other brands of CMS or, if you use HTML and other codes that are used to make a web page.

There are several ways on how to make an existing website responsive and naturally Google offers a detailed list of steps to accomplish this in their Web Fundamentals which can be found here. In truth the task is not that difficult if you are familiar with coding but for those who are not they will likely require the help of web designer or an HTML editor to make their website responsive.

Fortunately there are quite a few other resources to draw from on how to make your site responsive that drill down a little deeper than Google’s guide does. Not that there is anything wrong with the Web Fundamentals material but other sources may explain things beyond the fundamentals and be more in tune with your particular requirements.

A good example of another resource to use to make a site responsive is Restive.JS. This site offers a JQuery plugin that will work on any browser that supports Javascript. The plugin reportedly makes it easier to set up responsiveness on an HTML site but if your web site is larger and more complex they also offer business solution services to aid in modernizing your web presence for the constantly changing device landscape. I have not personally tried their plugin as I have been migrating website to WordPress for close to 10 years now. I do have one site that I can try this plugin out on and I think I will in the near future. Once I have I will update this post with the results.

Like I said I began to migrate html websites to WordPress about ten years ago because the CMS offered easy solutions to a great many problems and common functions that basic web designs encounter. When smart phones and handheld devices started being used to view the Internet the problem of responsiveness was quickly addressed for WordPress based sites through a wide variety of plugins. Granted some of the earlier plugins did not work for all themes equally but over the years these responsive WordPress plugins got better and better as did the themes themselves.

One of the better responsive plugins I found that worked well with most themes is called WPTouch by the Canadian company Brave New Code. WPTouch is very easy to use and it offers some well thought out options for taking your basic WordPress theme and making it mobile friendly in just a few clicks. I used this plugin to modernize dozens of sites and to be quite honest, some of the themes that were already responsive but for one reason or another lacked the effectiveness offered by WPTouch. If you don’t like the responsiveness of your current WordPress theme you might want to check out this plugin as it has its own various skins to choose from and a few good add-ons.

Today most of the latest themes, and pretty much all of the premium WordPress themes, now come with built in responsiveness so you don’t have to do much other than toggle the feature on. However, after activating the responsive element to your new theme or framework you still need to visit your website using various devices just to make sure you like what you see, check to see how long it takes to load and things like that.

One of the things you want to check is how the slider works and looks if your website uses them. On a tab your sliders will probably look the same as it does on your desktop but on a smart phone your slider may be partially truncated. This is a potential problem if part of your sales message is cut off or completely lost. Fortunately the better slider systems offer the option of turning off the slider functionality when viewed on a smartphone. Definitely check your website performance and aesthetic on several devices before toggling on or off any of your responsive theme features.

Another common thing to check on for your responsive website design on various devices is how the other images display. For example a common error happens when using an image as a background for a section. Given the nature of responsivity the written content generally gets stacked to accommodate the narrowness of the video display on smartphones, this is quite normal. The problem is that the written content may no longer be contained within the colored or imaged background as designed for the desktop version. At best this may blow out the carefully crafted layout of your design and at worst the text content may be lost to the overall color of the page background.

To avoid this potential inconvenience make sure to use a colored background for the section that matches the color of the image you are going to use as a section background. In doing so if the text content is no longer contained by the image background when viewed on a smartphone at least the text won’t be lost to a page background color and the integrity of your design will be better represented on the smart phone.

For those of you who prefer using infographics for examples on how to apply information, you should check out the
Mobile Friendly Website infographic by firstsiteguide.com.

The following two tabs change content below.
Search Engines are now one of the biggest lead generators for any online company, and Les Romhanyi is passionate about Google and Bing and everything ‘SERP.’ Truly an SEO expert in organic search optimization, Les has optimized websites for search engines before it was even called Search Engine Optimization, going back to 1995 while working on the Net Sheppard project. In the nearly two decades since, Les has provided SEO services to some of the most competitive and difficult business verticals, such as online gambling, pharmaceuticals, and real estate.