Here we meet again in our weekly Understanding WordPress! This time, I will provide you with a very different type of WordPress know-how, that is basic information about mobile web design optimization and tips.
Feel interested? Please keep on reading!
To begin with, do you know that in 2015, global mobile data traffic was 3.7 exabytes per month, but is expected to reach 30.6 per month in 2020? The need of mobile data is on the rise, so is the need for mobile-friendly websites! Fortunately, WordPress is an expert in this aspect, and for those who want to build a website of this kind, you are in just the right place! If you are wondering why it is important to optimize mobile web design while there are mobile-friendly themes available, well, not everyone’s WordPress website is powered by that type of themes. And what should you do if your website is not one of those? Should you jump to another theme? No! Such a waste of money is unnecessary and time-consuming! That is why you are here, where I will supply some useful tips to fix the problem for the already-mobile-unfriendly websites, as well as for those future websites whose owners cannot afford a mobile-friendly theme!
Before we get on with the 9 tips for specific mobile OSs, to image optimization, layout design, and other subjects, I want to remind you that:
What does that mean? It means that the experience they expect to get is completely different from what they would get from a normal website. Imagine yourself as someone who are surfing the Internet a mobile phone. Do you want to see a long biography, a corporate philosophy? No, right? You will want something like directions, locations, or click-to-call phone numbers.
Bear that in mind, and you will excel at carrying out the 9 tips I have for you right down below!
I assume that you already know what media queries are, right? They are particular rules inserted in your CSS provided that a particular scenario appears. Regarding mobile design, these scenarios might be a little bit different, with different resolutions, device orientations, and browser dimensions. As a lot of designers and developers build websites to be a mobile-second one, that is the problem, because the real approach should be otherwise.
If you do not know what mobile-second approach is, well you can see it in media queries with the well-known device dimensions (for example, 320px, 480px, 768px) as guidelines. However, this approach is only ideal theoretically because in reality, new devices integrated with new screen sizes are being released continuously.
Therefore, take my advice here when you work on a design again: Why don’t you try a mobile-first perspective? And that is:
As I said in the beginning of this Understanding WordPress article, the content that users would look for should be short and neat, therefore, you should set priority as what information is important and what is not. Choose the key pieces only in order to ensure you can present everything your visitors need on a restricted area of the mobile phone’s screen! For example, are you going to put there a “Contact Us” form with 10 different questions? Well, for me, I’d say that is a totally “No!”.
What is more, if your website is an e-commerce one, you should also pay attention to the purchase process and make it as simple as possible. Don’t chase your potential customers away by giving them a long and exhausting process!
What would you do with a website that takes too long to load on your cell phone? Me? I would run away. Time is precious, do not risk losing your visitors, unless you can make sure what you provide on your website is unique enough to make them wait. So how can you avoid this issue?
Image optimization is the answer!
As a customer, I understand that we customers want a website with graphics that are not only perfect pixel but also can be loaded fast. To make it happen, take a look at my recommendations: EWWW Image Optimizer and WP Smush are two of those plugins that can compress your WordPress website’s images, they can even apply optimization on images uploaded in the past. In case you do not want plugins, there are other tools such as Tiny JPG or TinyPNG. These standalones do a great job in cutting down on the numbers of colors of the images and getting rid of unessential data.
As a content writer, I myself understand the temptation of web designers who want to cram as much information as possible into one page. But also, my experience has taught me that this practice does not seem to be a very good idea. Why? Because so much stuff on such a small screen of a mobile phone would make users go mad, for example, when they cannot click the right button they aim at. Furthermore, white space will make your website look more graceful and elegant, especially on such a small screen.
Understanding WordPress enough, you will see that fonts do matter a lot in WordPress mobile design. As text is used as the main means of delivering the website’s content to audience, it is quite important that you should choose the right fonts for your texts.
Regarding this issue, I have some pieces of advice to pass on to you:
Pop-up windows on PC and laptop screen are annoying enough sometimes, imagine them on mobile screen. Not a very likeable scenario, right? Because navigating through tabs on mobile is more difficult a job than it is on laptop screen, so make sure that you will notify your users first before putting them through to another browser window. You know, not everyone is a mobile phone master, they will be furious should they do not know how to come back!
Another thing about text that I want to remind you about! You should be aware that not only font matters when we talk about readability, but you will also want to view text as part of the whole UI experience, because we are bound to work with a varying range of viewports. To be specific, when it comes to treating text as part of the UI, you should:
In understanding WordPress, the technique of contrasting colors earn its fame in mobile web optimization for the very simple reason: It works really well!
It is because these contrasting colors play a vital role in highlighting the text and other elements of your WordPress website on the small cellphone screen. So, in case you are not sure whether your choice of colors is good enough, visit this tool to find out the answer! Just tell it which your two color options are, and it will decide whether they are contrasting enough from a specialized viewpoint.
One last thumb up about using WordPress is the availability of numerous plugins that can help you solve numerous problems! Our problem is to make your WordPress site mobile-friendly, and there is absolutely a (or some) plugin for that!
Just concentrate on your content, and leave plugins to do the rest for you, including such small technical issues as transforming websites into mobile-friendly ones! With just one plugin, your users can read freely and comfortably without having to zoom in and out or scroll left and right multiple times! Moreover, you owners can also take control of your website’s mobile version or optimize your websites in such a short time. My recommendations? I suggest WordPress Mobile Pack and WP Mobile Detector.
There you go! Now I believe you have got the grasp of how to create a good mobile-friendly WordPress website! As these tips are collected from very trustworthy sources, you will not need to doubt its authenticity. Just carry them out with your website, and you will see the magic! As you may have figured out by now, understanding WordPress is not a short journey but it is a necessary one! And I will be very happy if you can stick by our side until the end of this path.
Have any comments or questions? Please let us know in the comment section, will you?