8 Secrets to make your WordPress Theme more Responsive

In May 2015, Google confirmed that mobile searches had surpassed desktop searches. This is the main reason why you should consider responsive web design (RWD). A responsive website is one that responds to the size of the screen. Other benefits include:

• You will get higher SERP ranking since RWD reduces page load time (and Google has confirmed that it considers loading time as a ranking factor).

• RWD means you do not need multiple versions of your website. You will only have one style sheet (CSS), meaning the site will have a consistent feel. This means visitors will stay longer and enjoy the experience, which will lead to higher click through rate and more sales and revenue.

• You will save time because you will not be tracking multiple website versions in Google Analytics. You will have enough time to concentrate on running your business. This also means more accurate monitoring. 

• Not having to design multiple sites means you save money on website design and development.

• There is a risk of duplicate content and consequently punishment by search engines when you have different versions of the same site. You would have to be very creative to come up with unique content for two websites meant to serve the exact same purpose. Duplicate content could even lead to the de-indexing of your site.

• Most tablets and smartphones today are HTML5 enabled, meaning users can take advantage of offline browsing. Responsive web design, therefore, means more visitors will read your content.

• RWD is still relatively new and many websites are still not responsive. This web design, therefore, allows you to stay ahead of your competitors.

• Your site will not look dated (which makes you look unprofessional and which will raise a red flag with visitors). Responsive web design gives your website the “cool” factor.   

• You get improved user experience since the web design will not interfere with usability. The users are able to easily navigate and read your site without such problems as links that aren’t clickable, navigation and text that is too small to read, scrolling problems, not seeing introduction paragraphs or article headings, and images taking over the small screen.

You should go for WordPress landing page themes that are already responsive. Examples of responsive themes include Shapely, Illdy, NewsMag Lite, Activello, Sparkling, Dazzling, Travelify, Ascent, FlatOn, Onetone, Auberge, Awaken, Constructzine Lite, BookRev Lite, Esteem, Ample, Accelerate, Lola, StanleyWP, Unite, Zerif Lite, and Enigma, mostly available free of charge. So, what can you do if you already have a theme and you want to make it more responsive (although this is like retrofitting an existing building, so it is more difficult)?

1. Setting up CSS breakpoints

Setting up CSS breakpoints allows you to change the CSS at different screen widths. You can make a lot of changes to the appearance/layout of a website by simply modifying the CSS. You could also use CSS3 for decorations and other fancy stuff. The Responsive Page Tester plugin will assist you in this.

1. Making your images responsive

There are WordPress plugins that you could use to ensure your plugins are of the right size, a good example being responsiveimg.com. You should also adjust the page weight of the image. This plugin allows you to rebuild your images so that they can match the desired breakpoints.

You could use the Responsive Images Technique from Filament Group to help make your images responsive. This technique not only resizes images, but it also shrinks their resolution on smaller devices to ensure large images don’t misuse space on smaller screens. This technique needs files from Github, namely rwd-images.js, the htaccess file, and rwd.gif.

1. Hiding and Showing items selectively

Selectively hiding and displaying items is an important component of RWD, meaning some elements such as region can be displayed for desktop versions and hidden for mobile. To do this, hover over it and click on the eye button displayed. There are also plugins that allow you to use short codes to hide and show items, a good example being WP Mobile Detect. The plugin allows you to hide and show items at the template level and not just at the edit window level.

1. Ensuring the menu is mobile-friendly at smaller sizes

You should convert the menu to be mobile-friendly at mobile sizes. You can achieve this by collapsing the menu at a certain breakpoint. Examples of plugins that you can use for this are UberMenu and Responsive Select Menu. Other elements that you should make fluid by changing the CSS inside the style sheet are the body, wrapper, header, main content, sidebar, and footer.

1. Defining the default zoom

With a simple line of code, you can tell the browsers to render the pages of your site based on device width. This means if the screen is 320px wide, the site will be rendered in that size and not the default size. You do this by editing the header.php file in the theme folder and putting the <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> code between the <head> and </head> tags.

1. Adapting the fonts

Text in your content, especially header text, may not fit properly on a small screen. You can adjust the font size to the right size through CSS inside media queries.

1. Resizing the videos

There are plugins like WP Touch Pro that allow you to resize videos. Desktop videos tend to be heavier and are not ideal for mobile screens.

1. Adjusting site elements

Once you have identified an element that is not optimized for mobile devices, you can replace it with an element that is. As an example, if your menu is difficult to optimize for mobile, you can replace it with a car icon instead of a list if you are in the car business.

Different mobile devices require different screen resolutions, platforms, and orientations (portrait, landscape, and square). Because of the different orientations, sizes, and color, ensure all components are flexible because it will be tedious, almost impossible, creating custom solutions for every screen out there. Once you are done making the changes, check usability on different devices before deploying.