Mobile use of websites has been common for some time now. Most smartphones released in recent years can browse websites without problems and at a decent speed. However, this does not mean that the same user-friendliness is present as what you are used to on your normal PC or MAC. Normal websites on a very small format are not really usable; the user is frantically zooming, scrolling, and trying desperately to tap the small links with the tip of their finger.
This sounds quite user-unfriendly for the user, and this is precisely the user you want to persuade to order a product or otherwise inform about your new services.
The challenge: A pleasant mobile experience
We can conclude that too much information is displayed on a small screen, more information than is actually pleasant and certainly much more than can be read without zooming in.
Furthermore, we can also conclude that navigation that works perfectly on your large monitor is not really practical when used on a very small screen. The challenge is to provide mobile users with a pleasant experience.
Solutions for a better mobile experience?
There are 2 methods: not displaying certain information on a smartphone or displaying certain elements differently when the website is accessed with a smartphone.
These 2 methods can be used interchangeably.
Method 1 - Not displaying certain information on the smartphone: The intention is to leave out certain information that is perceived as redundant/disruptive when you visit the website with your smartphone. This can involve extra descriptions, images, or videos.
Advantage: You can quickly and easily strip a website of 'unnecessary' information, and you do not have to worry about presenting this information in some way to your mobile visitors. (this method works well with 'fully mobile website' - more about this later)
Disadvantage: In these solutions, certain information is not displayed to the user at all! (See also the following questions)
Question 1: Is the filtered information by definition uninteresting or more inconvenient due to the mobile nature of visiting this website?
Question 2: Does the visitor get the full picture of your message by filtering the information?
Method 2 - Displaying certain information differently on the smartphone: With this method, you know that certain information is less important, but you still give the visitor the option to display all information, for example, through a 'read more button' or 'plus icon'.
Advantage: The user is able to access all information; in other words, all information that you also present on the main website. The user is able to filter themselves, and the website does not display more information than necessary at first glance. (this method works well with 'responsive design' - more about this later)
Disadvantage: It is not very simple to give a website the previous quality. The most challenging part lies in the navigation: how can you keep it simple while showing the user as much information as possible (if they want it).
Question 1: Is it necessary for you that the visitor can access all information on any medium, or are you also satisfied if the visitor can at least see the main points?
Next Steps
In the next point, I will discuss mobile website variants.
Mobile website variants
If we now look at what we can do with the previous methods, we arrive at the following variants, which are divided into 3 groups:
HTML - Desktop
Standard not optimized
Responsive website
HTML - Mobile
Full mobile website
Mobile ‘native’ apps
Tablet
Smartphone
HTML– Desktop: Is the normal PC, MAC website for large monitorsHTML – Mobile: Is a website that has been completely and exclusively designed for mobile use and thus small monitorsMobile ‘native’ apps: These are apps that you can only install directly on your smartphone; a good example is the Facebook or Twitter apps. ‘Native’ should be read here as ‘own’. The software belongs to that device.
It is important to know that each variant has its own pros and cons; none is perfect!
Mobile website variants discussed
HTML - Desktop
A standard not optimized website is the normal non-customized website; this is the oldest type of website that does not take users with small screens into account. This website is well usable for many types, think of many news websites, blogs, and webshops.
Advantage: This type of website is the most conservative regarding its construction; it follows fixed patterns and is not 'complicated' in that respect.
Disadvantage: Mobile users may have significant difficulty using these websites. Everything is displayed very small. Users with a tablet may use these websites comfortably.
A responsive website is a website that takes its users into strong consideration. This website will make a lot of ‘effort’ to make it pleasant for all users. An example: For large screens, everything is immediately visible, but users with small screens (smartphones) may need to click a bit more to see all the information.
The principle: The principle of this type of website is that only one website needs to be developed, which can be used by all user types (desktop, tablet, smartphone). The previous point is then always in the most ideal way.
Advantage: mobile users can use your website comfortably and quickly, and it looks nice. The most important thing is that you only have one website that serves everyone. Maintenance is much simpler than maintaining 2 websites, but the construction/development is not (see disadvantage).
Disadvantage: the possibilities of graphic design decrease when choosing this type of website. Because the website can adapt to demand, large images or layout elements may not be well utilized (the image ratios may be lost). Also, the production of this type of website is not without difficulties; it is far from traditional regarding the development process, and the people in the roles of designer and technical developer must collaborate more than ever for a good success!
HTML – Mobile
A full mobile website is, as the name suggests, only usable on mobile devices. It can be used on a desktop, but everything will then be too large and therefore somewhat strange to use. This type of website will be developed completely separate from the normal ‘large’ website.
Advantage: The advantage of this type of website is that it is a standalone fully optimized website for mobile users. They will then experience the best experience. Additionally, you do not have to worry about the newest additions breaking anything on the standalone mobile website when maintaining the large website. The construction is very traditional regarding the process.
Disadvantage: The disadvantage is fairly simple; the website is completely separate from the normal large website. If there is also a large website, then with this type of website, 2 complete websites must be designed and then maintained. You can, of course, reuse the data from the large website. The development process is quite traditional, only everything is done twice (large website, separate mobile website).
Mobile ‘native’ apps
Smartphone and tablet apps. Apps are pieces of software that you usually download from the internet or from an app store. Here, 2 groups can be distinguished within this last website variant, smartphones and tablets.
The following descriptions are quite typical and do not apply to everyone.
With smartphones, we are talking about mobile devices with a small screen, let's say just over 5 inches. Tablets start around 7 inches. There is a clear difference between these 2 groups:
Smartphones: The user is ‘hurried,’ wants quick specific information, and the use per session will be relatively short.
Tablets: The user is relaxed, sitting or lying down during use, and has time to absorb information calmly. The tablet user is strongly comparable to the desktop user, only intensive input tasks will happen less quickly on a tablet. A tablet can be viewed more as a media viewer rather than for producing content.
App target audience choice With the previous explanation, I have directly explained the basic differences; it then becomes a matter of where you think your target audience lies. Or perhaps with both?
Advantage: Apps have the advantage that they are more one with the devices they operate on. The user will start them up faster, and often the interaction is better with apps. The advantage and disadvantage regarding the development of an app is that it is a separate environment, separate from the large website (despite apps being able to load full websites).
Disadvantage: Apps are standalone software components; they are not a website, and to create an app you need significantly more knowledge than is required to set up a simple website. Additionally, you often have to publish your app in an app store (depending on the platform). Things like Google and SEO are less or not applicable, making it more important to score well in stores like the Apple App Store.
Summary
We have now discussed 3 variants and the sub-variants below them. We have covered the main advantages and disadvantages of all variants, and hopefully, this has given you new insights regarding the (mobile) website choice.
The previous article has given you many possibilities. Many possibilities also lead to additional questions, so feel free to ask them by contacting us.