It is no secret that the mobile and tablet screen sized is more important than ever. If you have not reviewed your website analytics recently, it may surprise you that 40% or more of your traffic is coming from mobile and tablets. "In 2015 we have seen our client website traffic data pivot from desktop to mobile and tablet traffic," said Jay Joyce with The Idea People. "The average mobile and tablet traffic we are seeing is in excess of forty percent of total traffic."
Providing an extraordinary user experience to your mobile visitors is key. It is also paramount to provide a consistent branding experience as visitors migrate from desktop to mobile.
When designing for mobile and tablet screen experiences, there are two viable design techniques in the development community, adaptive and responsive. Whereas both of these give the same result they have multiple differences between them.
Responsive web design adjusts to the screen size no matter what device it is being displayed on. “Responsive development is unique in the way it uses CSS media queries to determine display type, height, width, and so on based on the target device. Only one of those is needed for it to adjust accordingly,” said Joyce.
Adaptive is different in the way that is uses specific breakpoints. Unlike responsive, adaptive initially determines the screen size and continues to load the layout for that specific size screen. Designers must create a minimum of six different style sheets so the appropriate one can be selected during the loading session.
So, which should you use? It really depends on the project goals. "Overall we see responsive as the better solution," added Joyce. "It provides that fluid and clean look and it delivers a better user experience."
That can also be the downfall to responsive design. "By making it fluid and simplistic, you remove functionality pieces," said Joyce. "If your project calls for specific pages to keep specific functionality on different mobile screens, your best option might be to use responsive design with specific calls for adaptive." (Yeah, what he said!)
For example, the Lufthansa website uses an adaptive design that provides a full experience on the desktop version. If you pull up the website on mobile, features related to flight status, check-in, and 'my bookings' are displayed, since the assumption is that the user is on the move.
Responsive and adaptive each have their own design and user pros and cons. No matter who you ask in the industry, they will have a personal preference one way or the other. "Although we really prefer responsive web design, we may have a project that the adaptive design may be better suited for a more natural and pleasant user experience," said Joyce.