Whenever clients and companies want a website, the words “mobile-optimized,” “mobile friendly,” or “responsive” are often used. Indeed, these terms have become such buzzwords that the true meaning behind these them are often lost in translation.
Because in reality, when you’re talking about responsive design vs mobile site, you’re actually referring to two similar but distinctly different things. So let’s try to clear up some of the confusion and misconceptions regarding these topics.
In this post, we’ll tackle some common questions like “what’s a responsive website?” and “is my site mobile friendly?”
A responsive website, as the name suggests, responds to whatever device you are using. It’s a highly adaptable, even intelligent, design that restructures itself based not only on a mobile device’s display size but on any screen dimension. As a result, whether you browse a responsive site on a 5.8” iPhone X screen or display it on an 11.6” widescreen monitor, it’s going to look and work fantastically well.
You can easily see a responsive design in action. Next time you’re browsing a website on your desktop, try resizing your browser window. If the text, images, and navigation menus move and scale accordingly, then you’re using a responsive website. Another helpful exercise is to compare a desktop and smartphone browser side-by-side showing the same webpage.
People often think that a mobile responsive website is just about making everything larger or smaller to fit a screen, but it’s more than that. Phenomenal user experience is the name of the game.
A responsive website isn’t afraid to cut out elements on a webpage for the sake of enhancing a visitor’s browsing experience. If something like a menu bar or image will make it harder for users to navigate the website on a smartphone, then that has to go. That’s why some responsive websites won’t look exactly the same when viewed from a desktop versus a mobile phone.
The best example of this is the drop-down menu bar often used on websites. In a desktop version, this won’t pose a problem, but it’s an absolute nightmare for a mobile user. A mobile responsive design solves this issue by using the now-familiar hamburger button (the icon with three lines) to show or hide the menu bar. There are also fewer elements and nested menus to make navigation easier.
Responsiveness is the pinnacle that every web design strives for. It ensures users will always have a great experience using your website. And, when users find your site easy-to-use that means you’re one step closer to meaningful engagements and conversions.
The only drawback with a responsive website is that it takes a big chunk of time, planning, and money to pull off. However, if you’re looking for the best customized experience for your users, there’s nothing better (at least for now).
A mobile friendly design is the absolute minimum a website must have before it can definitively call itself a mobile site.
In most cases, a mobile friendly website is merely a smaller version of your desktop website, resized for the smaller screen of a mobile phone. Because it’s less sophisticated than a responsive site, a mobile friendly website features simpler elements. Content is static, and navigation is often simplified. The font might be bigger for easier reading and photos cropped to fit the layout, but that’s about it.
The advantage of this is that it’s easier and cheaper to implement since you don’t need to account for the device’s operating system for it to display correctly.
The biggest downside, of course, is that a mobile friendly website will give minimal consideration to usability and user experience. Yes, it will display correctly and be functional in smaller screens, but that doesn’t mean it will be easy to use.
If you want to give mobile users a decent browsing experience, implement mobile optimization.
Of the two, mobile optimization is the better approach because it takes usability into account. For example, optimization won’t place links too close together because they can be more challenging for touch display users to click as they are not “thumb-friendly.” A single-column layout is preferred to prevent any horizontal scrolling, which is tedious for any mobile device user. Large paragraphs should also be shortened to smaller blocks of content for easy reading on smaller screens.
Now, you might be thinking: if both mobile-optimized and responsive websites put a premium on a mobile user’s browsing experience, what makes them different?
Here’s the distinction: mobile optimization will only have mobile devices in mind, while a responsive design considers every screen size. In other words, a responsive website will always be mobile-optimized, but the reverse isn’t necessarily true.
Before we answer this, let’s first talk about why you would want to make your website mobile-ready in the first place. As is typical for websites, it always has something to do with Google.
As of 2018, Google now ranks pages that are optimized for mobile higher than those that aren’t. Even the best desktop sites with stellar content and SEO techniques will get down-ranked into oblivion if they work horribly on mobile.
But more than just for the ranking factor, having a mobile website can help reduce bounce rate and increase conversions for your website. As a result, mobile-optimization is essential to both Google and your users.
Now that you have a clear understanding of why a mobile friendly website is important, let’s compare a responsive web design vs mobile friendly. We’ll detail which is better and which one you should use.
In most cases, it’s always best to go with a responsive design. It’s a foolproof way to give your site visitors an easy and frictionless experience. You can’t always control where your customers or readers consume your content. However, you can influence how they see it. As it turns out, the latter is just as important.
Applying responsive design to your site is especially beneficial if mobile users comprise a large portion of your market (more than 35%). Extensive content and complex features also warrant using a responsive approach. The more complicated the desktop site, the more you should consider a responsive design. If a desktop site is rather complicated, it will most likely need a responsive design to create an optimized user experience.
When comparing responsive vs mobile friendly, you’re probably thinking “but aren’t responsive websites more expensive to develop?” Well, they are, but the maximization of your ROI offsets the added cost and effort. In fact, it will probably become an afterthought.
However, don’t dismiss the mobile friendly approach just yet; it has its place and purpose
For one thing, it’s easier and cheaper to make a desktop website mobile friendly than it is to make it responsive. For simple websites (think static sites with less than five pages and no interactive features), having a responsive approach will likely have a minimal impact on usability. And if budget is an issue, creating a mobile friendly website is better than nothing at all. Moreover, it will help your ranking efforts on Google.
Now that you have an idea of whether you want a responsive web design vs mobile friendly web design, how do you actually implement it?
Glad you asked.
Now, making a website mobile-optimized and responsive is a complex process with lots of tips and tricks that can’t be covered in a short article like this. Nevertheless, here are a few best practices to get you started.
As with anything, the first step is to know where you stand so you can chart where you want to go. So start by asking “Is my website mobile friendly?”
To get the answers to that question, there are a lot of handy tools available, mostly from Google. The mobile friendly Test allows you to enter your site URL and get a score based on how mobile-optimized Google thinks your site is. The tool will also let you know the critical issues that you need to fix. Speed is an essential aspect of mobile-optimized web pages, so run your site through Google’s PageSpeed tools and see how it stacks up.
Next, think about the individual elements on your page. For font size, go for at least 14 – 16 points for body text. This ensures that words are large enough to be read easily on smaller devices. For layout, always go for a single column at a fixed size; around 1,000 pixels wide is a good start. Also, make clickable elements like links and buttons larger and spaced apart enough to make them “thumb-friendly.”
Finally, to make your website responsive, you need to use special HTML and CSS codes (which is the “language” a browser uses to display web pages correctly). These pieces of code will first determine the user’s device type and dimension, then make the appropriate size adjustments on the fly. Using this trick, you can also optimize images on your website by displaying smaller or larger versions depending on the detected device type.
Now, you can dabble with these fixes yourself to make your website more responsive or mobile friendly, and that’s perfectly okay. Or, you can save yourself the trouble and get the services of a premier web development agency like Expedition Co. Get in touch with us today and let’s have a conversation!
%20(1).jpg)
