Times are changing faster than many of us even notice. It is already pretty hard to remember the time when you could get on a bus and not see someone concentrated on their iPhone or tablet. People switch to mobile devices to perform more and more operations without even turning on their laptops, not to mention PCs. This means that websites should be really responsive on mobile devices, in order to survive this silent technology revolution. Here are 11 tips for those who want to know how to make websites mobile-friendly.
First of all, what does mobile-friendly mean? It means that all the information can be read and all the operations can be performed from a smaller screen. For example, you can conveniently book airplane tickets or chat with online support from your phone. Some time ago, people could only do that from a PC or laptop, but not today. Today is a smartphone-friendly time, so those who have mobile-friendly website designs are winning the game.
Now there are many companies developing websites that are mobile-friendly from the start, though this is still a new concept. If a website is old, it is likely that plenty of adjustments need to be implemented to improve the situation. There are many tools to test and see which parts should be fixed. Google can help, but let’s not stop here. Concentrate on actionable advice and choose those that fit the situation.
This one is the first and one of the most important, as it allows the website to download faster. Nobody wants to wait long, especially on the go. Compression of CSS usually provides a speed boost, so go ahead and install a good caching plugin that can help with that. Also, compress all the high-resolution pictures so they don’t frustrate users by consuming extra data. Sometimes it is still important for those who don’t have an unlimited connection.
There is such a thing as a minimum viewing size. This can be seen if you open the existing website in a desktop browser and start narrowing the window. Stop right at the point when everything looks fine and the details can be read. This size can be set as a preferred viewport width. Just change the meta tag in the head of a page. After that, every time somebody opens the site on a portable device, it will be shown without any extra space on the sides so users don’t have to zoom in or zoom out.
Even if the site is built to work with different screen sizes, you can still experiment to find the best width for it. Remember that users appreciate clarity and convenience.
This tip depends on the previous one. Setting a preferred page width may change the way some pictures are displayed, and they can become too wide for small screens. No need to cut pixels here. To make them smartphone-friendly, the maximum width should be set to 100%, so that they will be resized automatically for different portable devices.
There is also a trick for background images that have no imag tag – set the background-size CSS property. Upon this, all the background pictures will also be resized depending on the screen.
Custom fonts are great, no doubt. Some of them really make websites look more professional or stylish; however, there is a downside to this advantage. If a user doesn’t have this font installed on his or her device, the trick won’t work quickly. It may take several seconds for the mobile device to download pretty large font files and, in the meantime, users will only see blank spaces instead of text. You may think it’s only seconds, but those seconds can become crucial.
There is a way to show a default font while the custom one is being downloaded, but for this, you will have to write two sets of rules in CSS. One set will display the default font so that users can start reading, and the second one will appear upon downloading. It is a great way to avoid frustration while still maintaining the style.
To make websites mobile-friendly basically means to make them useful for users. Useful often means readable, especially if it’s a media site or blog. Nobody wants to read text that hurts the eyes with tiny fonts. Nothing difficult here, just configure a viewport so that fonts render to the right size for different devices. It might require some CSS knowledge, but the result is worth it.
This tip only concerns WordPress, which is actually a great choice for the modern website. It provides users with the clearest answer to the question of how to convert websites to mobile-friendly websites. Simply get yourself an up-to-date WP theme with mobile-friendly web design and replace the old one with the new one. It is as easy as that.
There are some plugins that can optimize the site, but those are more temporary solutions, as they decrease loading speeds.
User interaction methods are completely different for mobile versus desktop devices. People start tapping and swiping when mobile devices with touch screens appear. They also learned how to zoom in and zoom out using fingertips, as opposed to using an additional device. Now these methods are so habitual that it is sometimes hard to switch to a screen that shouldn’t be touched. You’ve seen people trying to swipe on a PC screen too, right?
Mobile-friendly web design implies that the website can be conveniently used on touch screens, by adding touchscreen navigation. For instance, there should be an option to swipe through slideshows, as not many users want to look for any additional buttons.
Media queries can help create custom rules that only have power when a user opens a website from the mobile device or makes a browser window really small. It is needed to keep the desktop version large and clear. To make a website mobile friendly, just add targeted styles into a media query and enjoy the great aesthetics both on desktop and mobile.
Fixed headers and sidebars may look nice on a big desktop but, once the user tries zooming in on a page, some problems might appear. For example, the header can potentially cover the entire screen instead of staying where it should be. Or, the sidebar might obscure everything else on the page and stop users from further exploring.
To avoid this, check the CSS position properties and disable the fixed position for headers, sidebars or whatever else you need. This can be done exclusively for mobile devices through the media queries that were mentioned above.
Account numbers, reference codes, website URLs – these are usually long strings of numbers or letters with no spaces between them. On desktops, they look fine, but mobile screens may be too small to contain the whole line. This means that the line may extend off the screen and break the perfect picture for your user.
To avoid this on a mobile-friendly version, wrap your long line with a word-wrap style. It will break the line on the edge and spare the user extra scrolling. No worries about links, they will still work as they should.
It may be not the most important thing for creating a mobile-friendly website, but small details do matter, too. Many websites disable contact form buttons upon the first click. This makes sense for prevention of multiple submissions and may be helpful for those who work with the information from the forms, but it’s very also very frustrating for smartphone users.
The point is that mobile devices are prone to network disruptions, including poor signals or a phone call interrupting in the process of submitting the form. After the disruption, the user simply cannot get back and finalize the request. To continue, they have to refresh the page and fill in all the fields again. That’s no fun and should be fixed.
There is no way to pretend that standard websites can keep numerous mobile users happy. So, mobile-friendly websites are neither redundant nor complicated. It is simply based on a different approach that answers the calls of a modern world where everyone is on the run. Responsive design can really save the day here. The big plus is that the process of adoption is not too difficult, as you may have already noticed.
We hope that all the mentioned tips will be helpful to you and help you achieve the best experience for your users. Just take one step at a time and you’ll get there.
If you want your website to be responsive and convenient from all mobile devices, but don’t want to spend too much time on adjustments, there is another way. Simply contact us at Fireart Studio and let’s hit the ground running, together. We sure know how to save your time on this one!