Is your website really responsive?
Your website will be seen in different devices with screens of all sizes and proportions. Does its size fit all?
Designing websites to be displayed in ever growing monitors, smartphones and tablets with a wide inch range and even in smartwatches where you can even barely fit the time is the biggest challenge for web designers.
The response is to create a responsive website, or adapt and create an adaptive design. We did this on purpose. To avoid any mix ups, many people call “responsive” to any website that accommodates its features according to screen size.
But responsive and adaptive are two ways to tackle this problem, with pros and cons for each option.
Responsive Design
Responsive design flows like water. Everytime it is poured into different screen sizes, it fits its elements according to the available area. If the layout shows three columns and no margin in a laptop screen, a larger monitor may display six columns and wider margins. On a smartphone, all the elements may be displayed in a single column.
Content is presented according to the area made available by the browser. If you want to know if a site is responsive or adaptive, change the browser’s window dimensions back and forth. If the design is responsive, the elements will dynamically arrange themselves to fit the new browser size.
Web designers prefer responsive design because it is easier to carry out, although it does not allow full control over the way the website is displayed across devices.
Adaptive Design
Adaptive design is not about a single fluid layout like in responsive design, but several layouts. Good practices say six of them, at least. An adaptive website has different layout versions, each one created for specific screen size ranges.
If you do the browser dimension test, you’ll see the overall look of the adaptive website won’t change, since it is responding to the size of the screen, so it sees no need to change. But if you open it in a smartphone, you’ll notice the differences between the design targeting large screen and smartphone users.
Each layout is a version developed specifically for each one of those screens, which allows more control over the quality of the user’s experience. But even having many versions can leave some screen sizes out, like ultra wide screens or tablets.
Mobile only is dead
You probably have seen urls starting with “https://m.”. Those websites were designed specifically for mobile devices, and when the main website recognized an access through a smartphone or tablet, it redirected the browser to the mobile version.
The problem is that we now have another website to host and take care of, so this option is being deprecated and largely ignored by search engines.
If you are really into a mobile native option you may consider developing an app, but that is a whole different ball game.
The all-device design strategy
Why worry about which type of design to use? First, all websites must be easy to browse and all the important elements should be correctly placed, well visible and readily accessible to promote conversions, in all devices.
Second, search engines, and foremost Google, will rank better websites that assure good user experience. A website that looks good in any screen will catch Google’s attention.
Choosing between adaptive and responsive websites shouldn’t be based on cost but in user experience (UX). Your website may do fine with a responsive design, but specific layouts adapted to specific screen sizes may be more effective.
Example: there are shopping carts in online shops that would be easier to use if they had a specific design for smaller screens, using adaptive design, instead of just being responsive and created for horizontal viewing in larger screens, preventing users to access or interact with functional items like forms, menus and buttons.
Choosing one over the other depends always on UX and design quality.
Can you tell now if your website is really responsive? Or is it adaptive? None of those?
We’re here to help you pick the best option, we have the correct response to adapt your website to every screen.