Simple & Best Methods To Achieve A Fully Responsive WordPress Website

by Addison Cohen in wordpress on 09 Sep 2015


The influx of smartphones and tablets has motivated individuals and organizations to opt for building a responsive website that can easily adapt to any device with any screen size and resolution. WordPress, a leading CMS(Content Management System) is now being utilized for developing websites that not only look great but comprise of best features and functionality. Whether you’re a non-programmer or a tech-savvy person, building a responsive WordPress website is as simple as a mere walk in the park. Today, in this post, I’ll be highlighting some of the most used ways of creating responsive WordPress websites. Hope by the end of this write-up, you’ll be all geared up for developing one for your next client or even for yourself.

Screen Shot 2015-09-09 at 08.12.57

Method No.1- Choose a suitable WordPress plugin

This method is tailored for the non-tech savvy population which is interested in creating a WordPress powered responsive website. Well, there is a wide majority of WordPress plugins which can be used for making your WordPress website fully responsive. Here is an explanation of two of the most talked about WordPress plugins that help in attaining a responsive version of the WordPress website:

1. WP Mobile Detector

mobile-detect

WP Mobile Detector is best suited for WordPress websites which aren’t targeting visitors who’re using smartphones. Upon installing this plugin into your WordPress website, it will be automatically detected whether a particular visitor is accessing the site via a standard mobile phone or a smartphone. After this, a theme(in accordance to the device) would be loaded for the website, allowing the visitor to have an easy access to each and every feature and function available within the website. Whether you’re thinking about mobilizing your WordPress site for the iPhone, iPad, Android phone or the Windows phone, WP Mobile Detector will ensure to render a perfect user experience. Some of the best in-class features available with this WordPress plugin include eleven pre-installed themes custom-made to suit a range of blogs,websites, e-stores etc., advanced mobile statistics, an interactive theme editor, detection of more than 5,000 mobile phones, automatically formatted content and many more.

2. Jetpack

Screen Shot 2015-09-09 at 08.31.01

Jetpack is yet another remarkable WordPress plugin that can easily augment your WordPress website’s UX in addition to offering you the ability to optimize the site for a wide range of mobile devices and platforms. Some of the most impressive features available with the Jetpack plugin include the following:

  • Flexibility to customize your WordPress website using Carousels, Sidebar widgets, Tiled Galleries, Custom CSS, spam-free Contact Forms etc.
  • A suite of content tool that make it easier for you to create and publish content using Shortcode embeds, Spelling, Post by Email. Markdown etc.
  • Flexibility to speed up the image delivery via a quick access to visitor Stats and Photon CDN
  • Convenience of keeping your WordPress website hacker-free via Jetpack Monitor, Single Sign On and Akismet anti-spam.

Method No.2- Choose to make your current WordPress theme responsive

If you aren’t interested in downloading and installing a new plugin into your WordPress website, then a quick and simple alternative is to make your current WP theme responsive. Have a look at the below steps that will help you do the job in a stress-free way:

Step 1- Organize the theme’s media queries

The CSS of every WordPress theme can be conveniently implemented both, on desktop as well as mobile version of the website. As per this step, just define the max width in addition to a specific set of styles using the below code:

@media screen and (max-width: 780px)

In addition to above, you may choose to specify a particular set of styles for screens with sizes as 480 pixels, 1024 pixels and so on.

Step 2- Handle the images well

Heavy images can cause a huge threat to the responsive nature of your WordPress website. Hence, simply add the below code snippet in your theme’s CSS to combat this problem:

body img{ max-width: 100%; }

Step 3- Opt for implementing the best suited text size

The typography of your responsive website plays a vital role in ensuring maximum readability on different screen sizes. Just run the below code for adjusting your text in accordance to the targeted screen size:

body {
    font-size: 40%
    line-height: 1.4em;
}

Step 4- Modify the other UI elements

The UI elements that need to be modified for creating a responsive layout for the WP site include the header, content, widgets, footer and the width of the website.

Step 5- Tweak the navigation to deliver a stunning user experience

You can either allow your existing navigation menu to expand the options on the entire web page or go ahead with implementing a suitable drop-down menu for leveraging your WordPress website’s navigation in the best possible way. Fortunately, there are multiple WordPress plugins that can help you with easy and faster management of your website’s navigation menu, to suit the desires of visitors pouring in from mobile devices.

That’s it for now!

Conclusion

When it comes to enhancing your WordPress website for improved visitors count, going the ‘Responsive’ way is unbeatable. I’m sure the methods explained above would allow you to create a scintillating responsive WordPress website which will exceed the expectations of mobile visitors.

Written by Addison Cohen

Addison Cohen is a mobile app developer working with Appsted Ltd, the leading mobile application development company which delivers most comprehensive mobile application solutions. He loves sharing latest information on mobile technologies like iOS, Android development processes.

Addison Cohen has written 1 posts.