Mobile is critical to your online success. Not simply whether you have a mobile website or not, but how well does it perform, how easy is it to use, how quickly does it download, and how good does it look? Mobile websites and online commerce have grown rapidly in the last few years. With such rapid growth, some of the buzzwords and definitions have gotten a little fuzzy. Specifically, what the heck is the difference between a responsive and an adaptive website? Is there a difference? Which one do I need?
If you’ve been doing your research, you might have encountered some of these terms:
- Mobile website
- Mobile specific site
- Responsive Web Design (RWD)
- Responsive website
- Mobile responsive
- Fluid layout
- RESS (responsive web design with server side components)
- Adaptive web delivery (AWD)
DEFINITIONS:
Mobile Website – This is the most generic of terms. It refers to any website that is designed or developed for display on smaller handheld devices or phones. This can be a website meant only for mobile devices, or it could be a website that accommodates smaller devices through some form of responsive display, meaning it looks different on a phone than it does on your laptop.
Mobile Specific Website – This kind of mobile site is specifically formatted only for smaller devices like smart phones and is meant only for mobile devices. They are designed to load quickly and deliver only the information and tools that the developer and client feel are most important for a mobile visitor, meaning that most of the time a mobile specific site only has part of the standard website’s content. A mobile specific site detects when someone is accessing the standard website via a mobile device and then will reroute them to the mobile site, typically hosted at m.website.com or website.com/mobile. The important thing to note here is that a completely separate set of files and URL are at work here, so there are 2 separate sites. This sometimes hurts your Google search rank.
Responsive Web Design (RWD) – At the beginning of the mobile development movement (back in the stone ages!), Ethan Marcotte coined the term Responsive Web Design, defined as the use of 3 techniques: using fluid layouts, flexible images (and media objects), and media queries. This phrase is often swapped with “responsive,” however responsiveness and responsive websites have come to encompass more techniques than these three here as mobile development has evolved.
Responsive Website / Mobile Responsive – These broad terms are interchangeable and refer to the many different website strategies for delivering a mobile optimized experience to website visitors by adapting the layout, content, and functionality of a page depending on their device and screen resolution (or a combination of the two).
Fluid Layout – One of the building blocks of responsive design, fluid layouts use proportions to define elements on the page, for instance a width of 60% instead of a fixed width of 500 pixels.
Fluid Layout was the beginning of responsive design and a necessary building block. When combined with grid systems, media queries, HTML5 and CSS3 (see RWD above), page layouts not only shrink and expand proportionally depending upon the resolution of the visitor’s screen and browser window, but they will also adjust the layout of columns and block-level elements for optimal display and usability based on screen resolution. For instance, the menu might collapse into a stacked two column list when the screen resolution is between 640 pixels wide and 960 pixels wide.
RESS (responsive web design with server side components) – The traditional understanding of Responsive Web Design relies exclusively on client-side rendering and/or hiding of elements. Client-side refers to your browser, meaning all of the code is sent to your web browser, and then CSS and scripts are applied to change the way elements look. RESS uses server-side components in addition to RWD techniques to produce faster load speeds and performance and improved functionality on mobile devices. RESS can include server-side dynamic CSS, like Sass, as well as device detecting software for functional enhancements. The important improvement over traditional responsive here is the reduction of “payload.” Instead of simply hiding elements on the client side and shrinking down full resolution images and elements, we deliver exactly what is needed for that device and resolution, swapping out scripts, images, and plug-ins as necessary for specific devices.
Adaptive Web Delivery (AWD) – This technique takes RESS to the next level, by detecting the requesting device and then delivering entirely different batches of HTML and CSS code.
VISUALS:
Fluid Layout is typically edge-to-edge, and each element adjusts proportionally, depending on the size of your browser window.
Responsive Web Design combines fluid layouts with a grid system that allows columns and rows to reorganize depending on browser resolution.
Adaptive Web Delivery takes the next step. It combines some fluid and responsive elements to create a mobile experience for visitors. However, some elements will be completely different on mobile (an entirely different header, a slideshow where there was a static image…) not just resized or stacked according to screen resolution, and not just hidden in the code.
So… What Does Your Business Need?
Your business needs a website that can be viewed optimally on a mobile device. Period. At the very least, this means that you need a responsive website. And with the changes to Google’s search ranking algorithms in the last few years, you need that responsive website yesterday!
However, if you’re struggling with page speeds, because you’re website is visually elaborate on desktop, you might need to discuss Adaptive Web Delivery with your developer. If your website has high bounce rates on mobile, cart abandonment issues, or low conversion rates on mobile, you might want to consider whether you are delivering the right elements in the right way for mobile visitors.
Our web designers, programmers, and consultants can help you develop the right solution for your business and goals. We don’t just deliver the latest buzzword because we can, we help you leverage the right technology to grow your business. Give us a call, to see how we can help you today!