Imagine the scenario. You’ve forgotten to buy someone a present. What are you going to do? You’re probably going to buy something on the Internet. If you’re out and about, you’re likely to go on the Internet on your phone. If you’re at home, you’re likely to use your phone rather than go to your computer. If you’re at work in front of your computer – then you’re still likely to use your phone because you don’t want personal searches to show up on your work computer.
The point is: if you are selling something online, you have to make sure that your website is friendly for mobile. Increasingly, more people interact with a website from mobile devices and this is a trend that is set to continue over time.
You have probably experienced this yourself. You have looked at a website on your mobile phone, and if you can’t navigate the site easily then you will have done a quick search and found a competitor. Even offering an app isn’t an easy solution, as you are putting more steps for the customer to go through to actually become a paying company. So, you need to make your website mobile-friendly – but how do you go about doing that? Here are some hints you can use to make your website more accessible on smartphones, today!
Mobile Check
Something that is successful on a desktop version of a side can be cite-breaking on a mobile version. You need to look at your site on mobile. You need to look at it on your phone, and a tablet – and a £40 entry-level Smartphone phone that you might not touch with a bargepole, but your customers will still be using.
Are the loads times slow? Do all the links and redirects work properly? Does the content play? Do you get lots of broken image links? Are pictures huge because they are uncompressed? Are there annoying pop-ups, widgets, and sidebars? If the answers to any of these are yes – then you know what you have to fix.
Keep it simple
A lot of the design language in modern websites is moving away from using sidebars and widgets. For one reason, it gives each web page a clearer purpose. It also looks nicer. Perhaps most importantly, it means that a mobile screen isn’t crowded with information that it can’t display properly.
A good example of this is the use of pop-ups. Many websites find success by offering a pop-up window which contains a PDF image to get a customer to sign up or interact further. Not everyone is interested, but if the PDF is bigger than the mobile display, the phone user will not be able to scroll the image. That means if they can’t find the cross icon to get rid of the image, they will be forced to abandon your site.
Keep it small
For some businesses, the use of high-resolution images is very important. When people view websites on their computer, they usually have access to broadband speeds and hardware that is able to handle anything a website can throw at it. For a mobile device, the processing power for an entry-level device can be quite slow and depending upon the area (and data plan), Internet speed could still be at 2G levels. That doesn’t mean abandoning things like high-resolution images, but it does mean that they should be optimized to keep image quality at the smallest file size you can manage.
Text is your friend
Pictures are great – so is video – but the text is much more adaptable and loads faster. If you have your text natively within your website, rather than as a PDF, it can easily be reformatted automatically to fit any screen. One thing to remember is to avoid huge chunks of text. For readability’s sake, this is good advice anyway; on mobile, it means that people will be able to see everything that you want to say on their screen before scrolling down. Ironically, the text will probably need to be larger on the smaller phone screen, so anything you can do to keep your Ironically, text will probably need to be larger on the smaller phone screen, so anything you can do to keep your text short and to the point will help.
Use Media Queries
Media Queries are bits of CSS code that let you find out things about the device your content will be displayed on. This can tell you the resolution of the device as well as whether it’s oriented portrait or landscape. These can range from around 384 pixels width for an Android Nexus in portrait mode to 1024 pixels for an iPad in landscape mode. That’s a huge difference, but it does give you an idea of minimums and maximums for easy reflow display. This can help you think about using columns or how to resize certain display elements when being displayed on different devices.
Think of the differences
Mobile websites are different from normal websites – but soon they will be normal websites. Google says that 20% of all searches done are voice searches, and you know that those aren’t coming from computers. That doesn’t just impact the way we have to think about SEO, it also changes the way we think about website design.
Websites are created on computers, so we naturally make them for computers first. We should be making them for mobile devices first, and then making sure that they still look great on a desktop. Clear messaging, sleek and optimized design and a page that looks great full-screen or if it’s in a window tucked away in the corner of the desktop is great for any website. A great mobile-friendly website will be a great website – period!