To many web designers, vendors and agencies mis-use the phrase 'responsive web design' or 'RWD'. Today there are lots of 'responsive' sites aimed at mobile optimisation that employ only one tool to achieve the goal - something called a 'media query'.
Using 'media queries' in CSS a site can have a 'fluid' or 'squishy' appearance where resizing a desktop browser will show the content magically move about to fit the new width. Fluid layouts (using just 'media queries') lets a web page look great on a desktop computer, a tablet device or a smartphone. The 'media query' initiated the responsive web design paradigm.
It is great that responsive web design has gathered momentum and now many sites use this technique. There is a dark side to the story - on its own without other mobile optimisation tools the 'media query' is not enough this is the point to consider adaptive technology.
Adaptive does not have to be instead of responsive. Adaptive adds more tools to optimise the experience and can be used with basic responsive techniques. Lets consider just one concern of basic responsive sites... speed.
Basic responsive is too slow.
If you want to do business online, site speed matters. It is NOT a nice to have - performance is a MUST have.
Page load speed impacts SEO, CPC rates in AdWords and conversion. Various research shows that 3 out of 4 mobile users will leave the site if it takes more than 5 seconds to fully load and be usable.
Google and Amazon both published well know stats showing the impact of speed, Google saw half a second delay cut 20% of traffic.
Google recently stated that todays average for mobile page load times is 10 seconds! So there are many mobile sites out there that could dramatically improve their conversion by improving performance.
So what makes basic responsive sites slow...
1. Images are often downloaded and then resized to fit the screen in the browser. This results in a slow download of the larger image which is not shown at full dimensions in some cases the image is downloaded and the 'media query' then hides it - this is very wasteful. Reducing the volume of content downloaded speeds up the site loading.
2. Content is not always suitable for mobile, the volume of text or complex diagrams may need to be re-written or alternatives shown. Using 'media queries' this is achieved by downloading both versions of the content item and hiding / showing the right one base on the screen width.
3. It is a fashionable design to show long scrolling pages on the desktop, with navigation to jump ahead. These long pages then squish up to be narrow and even longer on mobile. On mobile this will work, but it might better for those different sections to be separate pages. Splitting the content on to different pages reduces the size of the page so it loads faster and only loads the content the user has requested.
4. Hiding and showing content can be quite complex and result in large 'CSS' files. These files not only have to be downloaded but the browser has to 'parse' (read and understand) them. This 'parsing' increases memory usage and cpu usage which can slow down the time it takes for smartphones and tablets to draw the page to the screen.
These and other performance issues can be avoided, they require more tools than the 'media query' to achieve fast mobile optimisation. Typically this larger toolset is called adaptive.
Terminology is confusing...
Adaptive design more commonly refers to a site where features change or enhance based on the capabilities of the device. This can be used to solve the above issues.
Sometimes adaptive design will involve multiple templates for a site each targeting different key devices. However this is not always the approach. The adaptive techniques can be used on top of basic responsive design.
Some people expect a responsive site to include the additional adaptive capabilities and simply call it responsive. The terminology is changing as the popularity of technical approaches change.
It is important that when working with a vendor or agency supplying your site that they explain to you how they overcome the above issues. My advice is if they don't have an answer or suggest it is a 'none issue' then do not purchase products from them.