Mobile Friendly vs Responsive Design
When creating a website, not only the desktop version counts but also the mobile version. One of the reasons behind that is the mobile traffic worldwide has grown over 220% in the last 7 years. Nowadays more people use mobile over desktop.
A website that features their content and product or service easily and attractively on mobile is a way to go. Not only for the user but the company, for the SEO, and even for the search engines.
What is looking good on mobile? The answer is not straightforward but let’s try. Image a website that on the desktop looks great. Then you think that you want to get that look also on mobile but what is the best way? We “shrink it up” till all fit on one page? Many websites are still like that and it’s not a good experience. It’s difficult to find or press the buttons, the information is all clumsy., etc…
What are the main features of your product or service? What is the most important call to action you want to show? Figure that out and then you can plan how is going to look on mobile. But you need to make it responsive, hence the responsive design, that more than 50% of websites are now using.
Let’s focus then on 3 aspects of mobile development, what they are, and should you use them or not:
- Mobile Optimized vs Mobile Friendly
- Responsive design vs Adaptive Design
- Mobile-First Approach
Mobile-Friendly vs Mobile Optimized
Mobile-Friendly is the minimum that your website should have. Normally that is enough for Google. You can check if your website is mobile “approved” here.
Mobile-friendly is not enough, as what happens, in that case, is that the mobile version gets a scaled-down version of your website. You can access all the features but not in an easy way leading to a bad user experience. Also, this approach is not adapted to different screens.
Because that mobile-optimized came to the rescue. With mobile optimization, the mobile version is taken into consideration. What does that mean? It means that the images, buttons, text, links are adapted for the mobile version. Can be size, place, color, or any other feature to make it look better on mobile. I mention before that for mobile is important where and what content there is on mobile. That is mobile optimized. So the website on mobile is more minimalist but as or more functional than the desktop version.
Normally mobile-optimized website is only a column website, which makes it easier to scroll So a mobile-optimized website is mobile-friendly but not the other way around.
The winner here: Mobile Optimized.
Responsive design vs Adaptive Design
What is adaptive design? A mobile website with adaptive design changes the appearance based on the browser width, but so responsive design.
The important feature is that adaptive design adapts the browser width at a specific point while responsive not. What I mean is when an adaptive design is created, that browser adaptation is based on mobile screen sizes for example. So that browser adaptation is based on fixed sizes. It works and it’s used on desktop websites that are created before and you have to create a mobile version.
It’s a good way but it’s not fluid as even that it has multiple layouts( one for each type of screen size), these multiple layouts are with fixed sizes.
What is responsive design? Responsive design has only one layout and that layout will be adapted to the screen size in percentage normally. Is easier to implement and it’s most used nowadays. Instead of focusing on straight sizes of the screen, the layout will adapt to the % of the size. Responsive has much more to it than that, but without going too much technical I leave it here.
I think there are no winners here as both of them as great advantages and can be used accordingly with the situation. Remember that you know better where your customers are and what they want. If they use your website on mobile then it makes all sense to use…
Mobile-First Approach
The name kind of says it all so no plot twist here. The Mobile-first approach means that when a product/website/service is created is focused on how it looks on mobile-first.
Why? Because of progressive enhancement. Progressive enhancement put simply focus on the content. So when you are on mobile is important that the right content is displayed in a straight and simple way for the user. That is difficult, as you have to know what to focus on to show off first.
First, you focus on the content that is important to show no matter what, and then you build the website based on that.
Is it challenging but after that is done, all the other layouts became easier. You have put the important content and information on the lowest browse, so now you “ have to scale up”.
Simply mobile-first approach builds the website with the users that are on mobile on their mind by improving their user’s experience. This was my short approach to websites on mobile. What are your experiences on mobile and what is for you a good mobile experience when visiting a website? Follow me on Twitter where I talk more about programming, entrepreneurship among other subjects.
Next week I will focus on the next topic of web performance: accessibility.
Attributions:
image: Freepik.com
