Are you setting about designing a website? You’d be crazy not to make it as mobile-friendly as possible – or even designed specifically for mobile!
In 2020, global internet traffic is over 50% mobile and tablet use, despite the fact that business applications, usually only available on desktop, are chewing more bandwidth than ever before.
But just knowing that you require a mobile-friendly site isn’t enough. Here’s what you’ll need to know to actually design one.
Responsive design
A responsive design does not mean that the mobile website responds when clicked or tapped. Instead, a responsive design is a design that adjusts to fit on any size or size-ratio of screen.
You’ll notice how some mobile sites look cluttered, or have too-large pop ups that cover their screens. These sites do not have a responsive design and are often due to using fixed templates that people have ‘bought off the shelf.’
While templates can be created for responsive sites, that can then be browsed with ease across any device, they must be thoroughly tested first – which can be done through a mobile emulator on a computer when designing the site.
If you are not using a bought template, using a framework like Bootstrap will help you to design a website that is responsive across both desktop and mobile devices.
Mobile emulator for testing
Not all mobile devices are built the same. If you just look at your friends and relatives, you’ll see that screen size and ratios differ widely, as does the age of the device, web browser used, and whether they have updated to latest system and browser versions.
To build the most mobile-friendly site, you’ll need to test across a wide variety of devices and versions. This can be done using tools such as MobiReady, which also comes with free analysis and reports, and Google’s suite of mobile-friendly design tools.
Using iframes
iframes are a specific frame which can be embedded within a website. The name, iframe, is short for inline frame, which puts another document into the main body of the website. One feature of the iframe is that it allows designers to sandbox content.
This is a neat feature because it means that if you are displaying widgets from other places on the web, you can be assured of their security – they can’t allow attacks on your site.
If you are using widgets from elsewhere on the web, then iframes make a great choice.
For instance, most online casinos have a slots component that is a game that wasn’t designed by them, but players can still access through their website via an iframe. This is why you will see the majority of casinos will have Starburst in their slot portfolio.
Keep it simple
The best websites on mobile are those with the least clutter. Depending on the type of website you’re making, you will need to prioritise certain elements and even strip out some others on mobile.
This can include advertising which can end up dominating a mobile site if it hasn’t been designed correctly, which will increase your bounce rate – something no one wants.
If you have a full-on web app, then you may find that a mobile website just doesn’t give you the full functionality your users will need. In this case, you will have to build an app alongside it. This is the case, for instance, with Asana, the task management tool.
Optimize for speed
Plenty of people do not have great data connections on their mobile devices. The way that the web works for search engine ranking is that the speed of loading a website is taken into account. Plenty of people will leave a page if it doesn’t load within a reasonable timeframe, too.
To make your mobile website load faster, consider trimming your image sizes or making them a lower resolution, and eliminating or re-evaluating any other media-heavy elements. Ensure any video or audio on your site is not auto-playing to eliminate user frustration.
Listen to feedback
There are a few things that you can do on launch to help refine your mobile-friendly site afterwards:
- Make sure that you have feedback channels for users to leave their remarks
- Watch your bounce rates
- Keep an eye on loading times
- See where your visitors are from (and if this is expected or strange)
- Make sure to test site updates on mobile before rolling them out
With all this information in hand, you should be able to create a mobile-friendly site that’s pleasing for your users, as well as relatively easy for you to manage. While it takes some time and effort, the pay off is certainly worth it!
from Feedster https://www.feedster.com/website/todays-essentials-for-a-mobile-friendly-site/
No comments:
Post a Comment