A responsive theme or responsive design means that look and feel of your website will automatically adapt to the device that your visitor uses. This means that your website will automatically look different on a desktop compared to for example a mobile phone or tablet. This is very important as more and more content is consumed on the go, potentially misrepresenting the nice design of your desktop oriented website.
A responsive theme automatically reshapes the images, layout and text of your website based on device and the space available. An easy way to quickly check if a website has a responsive design is by resizing the window in which you are viewing the website (that is if you view the website on a laptop or desktop).
The importance of a responsive theme is even more significant in 2015
Earlier this year in April, Google rolled out a new mobile-friendly updated that included a change of their algorithm. The changes are heavily focused on responsive and mobile friendly websites. In order words, if you don’t have a responsive or mobile friendly design implemented, Google is going to give you less traffic.
Likewise, a mobile friendly or responsive design has never been so important. Not adapting to the current state of events could ultimately dissolve your business in the worst case scenario.
What can you do?
One of the great things of WordPress that there are numerous (free) responsive WordPress themes available. If you access the themes menu under ‘appearance’ you have the option to add a new theme. You can browse the themes library to find one that you like and that suits for your website.
If you are currently using a premium theme from StudioPress, Elegant Themes or WooThemes, the chances are that you already have access to a large collection of premium responsive themes. Another benefit of paid themes is that they come with premium support, which makes it easier to troubleshoot in case you have any problems.
Some small hacks you could implement yourself to set yourself apart from the competition
If you are not using a premium theme you could find yourself in the position that you need to implement some shortcode yourself to get the desired result. I will share a few of my personal hacks that I used for Tropical U.P to make the front page more responsive. You could implement these on your website if that suits your requirements.
On my homepage, I have a custom header that shows Tropical U.P, a custom header allowed me to change the font, size and color just for that header only. However, a custom header does not automatically resize when a user is on a mobile device.
In the text above you can see that the header Tropical U.P is named home-headline, which can be edited in the customizer options of your theme. If we would keep the code like this, our header would not resize and would potentially leave some part of Tropical U.P outside the frame. Luckily the solution is relatively simple!
Now we have added a command before the home-headline, namely headline-resize. This command tells the headline to automatically change the shape and size depending on the browser and device of the visitor. In this case, we have done this for home-headline, but you could also do this for a different class. In case you have a subtext under your headline, most likely something like home-sub, you could put sub-resize in front of it.
How to change to the focus area of a responsive background image?
Now a lot of websites use a page-wide image on their home page, however, it could be that the images do not change accordingly when viewed on a smaller screen. Automatically most themes tend to focus on the left side of a picture when resizing the screen. If you have a picture that for examples shows you or your product, you could be potentially left out on a resized version of your website.
The default setting for most page-wide background images is aligned to the left, meaning that when the picture is resized the right side of the picture will be cut.
The CSS style looks like this:
Now if you want to shift the focus on the right side of the picture all you have to do is to change the CSS style of the background image.
Focused on the right looks like this:
Now it is also possible to focus on the center of the image when resizing, the CSS style for this is:
You can directly copy paste these codes in the CSS style under attributes in the row style. Note that the above instructions apply to if you have the PageBuilder plugin installed of SiteOrigin and if you page wide image is set up as a row background image that functions as a cover.
I hope that the above tips and tricks help you to improve the design of your website and to ensure that your theme is future proof. If you have any specific questions about your website, do not hesitate to contact me in the comments below or through the contact form. Thanks and good luck!