In the early days designer only needed to think about ways to design websites for desktop use. Most monitors and displays were easy to design for and one size usually fits all. But then came mobile web.
When mobile web came along one of the biggest debate was whether to design a responsive site that would different portals or to design a standalone mobile site, known colloquially as m(dot) design. However, the mdot was abandoned because it was not considered as best practice to create a separate website just for mobile use.
With this in mind let’s take a look at designing websites for multi-portal use.
Responsive Web Design VS Adaptive Web Design
There is confusion between responsive web design and adaptive web design. While both meet Google recommendations for site accessibility in mobile devices, good UX and strong performance, each has its own pros and cons.
Adaptive web design (AWD) is like fixed layout design where it uses static layouts based on breakpoints. AWD works by detecting screen size and then loading the approximate layout for it. This involves designing for 6 screen widths which can mean extra work for designers.
The advantage of AWD is that it gives you a certain amount of control over style and content strategy without using responsive design. However, designing for 6 “new sites” from scratch is a ton of work.
You should consider adaptive design if:
- Device specific experiences are necessary.
- You can provide different experience for every device.
- You can handle and maintain adaptive templates and resources.
- Your audience is accessing your site on different devices. However if analytics show that more than 70% access on a single device, AWD is not for you.
On the other hand responsive web design (RWD) does not give you much control when it comes to content and style but it does take less work to build and maintain. RWD is like a descendant of fluid web design where in it adapts to the size of the screen no matter the device. RWD uses responsive CSS queries to change style based on the device used than loads each page layout per your device screen size.
Since RWD moves the content around screens in order to fluidly fit on device window you need to pay attention to visual hierarchy as it shifts around. This is why testing on multiple devices and browser is important.
Reason Why RWD Is The Future Of Web Design
- It is more pleasant for readers because there are no screen limitations like AWD. RWD is guaranteed to work well regardless of screen size.
- RWD loads faster. AWD needs to load on all possible layouts while RWD only needs to load one that works across all platforms.
- It’s future-proof because it’s not hindered by screen size limitations. Your website will look great even if the next Samsung or iPhone comes out (including smartwatches and tablets).
While mobile phones and tablets account for 56.4% of global internet usage, many people still use other devices such as laptops and desktops to access the web. This means that using RWD will make your life easier not only as a web designer but as an owner too.
