By now, the overwhelming majority of websites, especially e-commerce sites, are mobile friendly. However, that doesn’t mean that creating a responsive WordPress website is effortless. It takes quite a bit of time to design a site that is truly responsive, and that works seamlessly on multiple screen sizes. The following guide will explain how to create a high-performing, responsive, WordPress site or help you decide whether it’s time to switch to a new theme.
Why Must WordPress Developers Keep Thinking About Responsive?
Shouldn’t creating responsive design be as easy as just picking the right theme? While theme selection is important (see below), it’s not the only consideration. Remember that new devices with different screen sizes are being released fairly continuously. There are various smartphones, tablets, phablets, watches, and other devices. Not only do designers need to think hard about responsive design when they create websites, it’s a subject that needs to be revisited during maintenance as well.
It’s also important to keep in mind that over half of the users on the internet are using mobile devices. And the percentage will keep growing. That’s why responsive design in 2017 is not optional anymore, it’s a must.
If that’s not motivation enough, there’s always Google. If you want to earn that coveted first page on search engine rankings, you’ll want to prioritize this. Google rewards sites that it determines to be mobile friendly.
How Responsive is Your Current WordPress Site?
Your website may look perfectly fine on your personal mobile phone. That doesn’t necessarily mean it is fully responsive on all other devices. In order to truly consider your site mobile friendly, or more preferably mobile first, you need to test it thoroughly. You have to understand how your site looks on a variety of devices and screen sizes.
You could round up friends, coworkers, and family to test your site on their devices. Unfortunately, that is really time-consuming. It’s also not a complete and thorough test.
This is why it’s a good idea to start with Google’s mobile-friendly testing tool. It’s free. It’s easy to use. All you have to do is paste your URL in the testing tool. Google will work its magic behind the scenes, and let you know if it is mobile friendly or not.
Take note that this test is available as an API for web developers as well. This means you can test the mobile friendliness of each page as you are developing it. The API runs over your code, so you don’t have to rely on browser mode to test it.
When testing our Themes, I also use the Chrome testing tool. You can access it by right-clicking anywhere on the website and after the properties tab opens click Inspect. Chrome console will open and you can click on the responsive devices icon to toggle between desktop and mobile view. The screenshot below is showing how our Everly Lite Blog Theme looks in Chrome mobile view. You can select various devices from the drop-down menu.
Taking a Look at Your Current Theme
So first check your theme with the tools above to see if you have to do any adjustments. It’s not a simple process, but well worth it if it allows you to keep your great theme or if you are not willing to change it just yet. You’ll need to roll up your sleeves and prepare for a bit of coding though.
First, a definition. A media query is a request that a website sends to the devices that access it. The device in question sends that information back to the website. This information includes the screen dimensions of the device the user has. In turn, the website displays perfectly for that device, or at least as perfectly as possible. That also depends on how well the CSS is coded for that particular dimension.
Your WordPress theme comes with a style sheet. You’ll use a single style sheet for both mobile and desktop version, but you need to need to define a maximum screen width. This is defined using the @media screen attribute. The line in your stylesheet will look like this; @media screen and (max-width: 320px) or @media screen and (min-width:0px) and (max-width:515px).
What this tells your website is to use different style attributes when it sends out a media query, and then learns that the screen width is less that 320 pixels across. Remember that responsive design is all relative and uses percentages while non-responsive templates are more fixed and use pixels as a unit of measure.
Other commonly used pixel measurements are 1024, 480, and 780. You may want to create line items for these in your stylesheet as well. Experiment for a while, and you should get your website displaying fairly nicely on a variety of screens.
You need to be comfortable with checking which elements your Theme uses. So Chrome Inspect tool is your best friend here. Your first line of CSS would probably have to be:
width:100%;
}
This now defines the width of the main container in percentage, rather than in fixed width. You need to adjust that for other elements on your website. Chrome Live view and inspect tool will be of great help, so you don’t have to refresh your browser for every small change.
Now Your Text And Images
Your website should now display better on mobile devices, but that doesn’t mean you are finished. Your website is already more responsive, but the text and images in your website probably still need some work to do. For one, your text is probably over-sized. You can use this bit of code to make it an appropriate size for mobile.
font-size: 60%;
line-height: 1.4em;
}
Font size can also be defined in px and em, so font-size:16px or font-size:1em, all will have similar results. If you define it in pixels you will have to add it individually for each media query (for each dimension).
Another thing to consider when creating a responsive WordPress website is typography. What works on a desktop, may cause some real problems on a smaller screen. Consider avoiding serifed fonts that can be difficult to read.
Images can be an issue as well. One option you have is to upload images in varying sizes, and then load the most appropriate image depending on the results of your media query. If you’re planning a site without many images, and your images will be largely static, this is a realistic option. If not, this technique will become frustrating very quickly. In that case, use this code:
max-width: 100%;
}
Remember that in this case, the size of the image will remain the same, as the query is only resizing the original image to fit within the mobile device dimensions. Good news for all WordPress users is that you can also use a WordPress plugin for that. This will make your life much easier.
Responsive Navigation
Another important aspect of your website to optimize for a mobile view is your website navigation. You can improve page load speed and other features by opting to use a WordPress plugin to handle navigation for you. Another option is to convert from a navigation bar to a drop-down menu.
There are several plugins that can help you in this aspect as creating a responsive menu on your own means a lot of work and extra CSS:
Going With a New And Responsive Theme
In many cases, the best course of action is to select a responsive theme when you start creating your new website or replace your existing theme. Fortunately, there is no shortage of themes you can choose. While responsiveness is important, it’s not the only consideration. You want to pick something that is aesthetically pleasing and helps you meet your goals.
By selecting a theme that is already responsive, or ‘responsive friendly’, you can get your site launched or re-launched much more quickly than you would if you take the route above, and roll on your own.
Our themes are all designed to be fully responsive and you can also take some of them for a free test drive (we offer them as Freemium). But if you would like more variety, below is a list of some of the best markets for WordPress Themes where you have amazing selection of Themes from simple blog themes to complex multipurpose themes and all sorts of niche Themes.
Of course, this is only a partial list. The WordPress community has developed thousands of themes that are perfect for almost any purpose. Whether you are using your site as a professional portfolio, online magazine, or to display your products, there are some great WordPress themes available to you. Before selecting, do some research on each theme. You want to limit your selection to shops with good reviews.
As a general rule, if you pay for a theme, you should expect that it will be customizable. If you are using a free theme, that may not be the case. Majority of the Theme in WordPress repository are not very customizable as they need to follow strict guidelines and are not allowed to change core functionality. Whether or not customization should matter to you depends on your goals. You may be perfectly fine using a theme, as it is, right out of the box.
Another important aspect is performance and good user experience. Not all themes are equal when it comes to page load time and other performance considerations. They also don’t provide the same level of quality UX. Whether you purchase a theme or go with a freebie, test extensively. Your users (especially visitors from responsive devices) will bounce quickly if your site chews up a bunch of bandwidth or is clunky to navigate.
How is the aesthetics? Are the color schemes pleasing? What about the typography? Looks may not be the most important thing to consider, but they certainly do matter.
Check Your Theme For Updates
If the theme you are currently using is not responsive, or not as responsive as it could be, check for updates. Theme developers know about the importance of responsive design, and many are constantly improving their themes, including the responsiveness. Keeping up with updates also ensures that you avoid security and technical bugs.
Conclusion
On of the best attributes of WordPress is its flexibility. Not only are there a wide variety of themes and plugins that can help make your site as mobile friendly as possible, anyone can make changes to improve their WP site.
Experienced or simply adventurous developers can really dig into the code to create sites that really sing on any mobile device. Those with less experience can take advantage of the many resources and plugins available thanks to the big WordPress community.
2 Comments
Hey! I like your article! It remembered me about one web designer’s blog https://fuselabcreative.com/the-role-of-graphic-designers-in-the-healthcare-industry/ where they explain how do they work and what good web designer needs to know and to learn. It’s always interesting not just to learn yourself how to do something but also to read how others do that, their thoughts and experience. Maybe it will be also interesting to others 🙂
Decent, informative and well written article, keep it up good work. It is also helpful a lot and can download https://www.tutorialsexperts.us/product/ent-435-grand-canyon-entire-course/ ,loving your Post . Bundle of Thanks!
https://www.tutorialsexperts.us/