Websites: Responsive vs. Adaptive vs. Switchy vs. Mobile Site vs. Mobile Version vs. Mobile First

This is an article for anyone thinking about having a new Responsive Website made, or having an existing website converted to a Responsive Design. Its a quick rundown to take the mystery out of terms you might hear when talking to a potential designer for your project.

So you want a website that looks right and gives the visitor a good experience on any device. Here are some choices:

Responsive Design: These websites figure out what device the visitor is using by issuing “media queries”. Once the website figures out if it’s a phone, a tablet, a desktop or whatever, the website automatically resizes elements and moves them around to optimize readability, menu function, and general user experience. Technically, responsive websites are built on a “fluid grid”, so you might hear that term. There is no particular reason why you need to know what it means. If you really care, fluid grid design assigns space to elements in terms of a percentage of the viewable area.

Responsive Design is generally the best choice in web design for a small business. You don’t need two sites, one for phones and tables and one for larger screens. That saves money initially and makes keeping the sites updated much easier.

Adaptive Design: This term is used in two ways. In the first way it’s just an synonym for Responsive Design, and it’s not used very much. To some high level designers who care about such things Adaptive Design is the same as Switchy Design which is defined below.

Switchy Design: To the user a Switchy website functions just like a Responsive website, but beneath the surface the design uses a “fixed grid”. That means that the the sizes of elements are assigned in pixels not percentages. Switchy Designs adjust to screen sizes by switching out, say, a bigger element for a smaller element when adjusting for a laptop instead of a phone. One of the WordPress themes that I use a lot is a switchy design.

Mobile Site: This is a completely separate site that is optimized exclusively for phones and tablets. It’s more expensive and harder to maintain than a Responsive site.In the past it was the way to go if you want absolutely the very best performance on a phone. That is still technically true but responsive design has now evolved to the point that a good responsive site is so close in performance and usability that a separate mobile site is rarely the best solution, and for a small business almost never the best solution.

Mobile Version:  This is NOT the same thing as a mobile site. This a version of your website that is shrunk so the visitor can see (more or less) a whole page on a small screen, The very best of them are actually pretty good on a tablet but in general on phones the text gets to small to read and the menus too small to use. Mobile versions are a temporary solution to get a website that is totally unusable on a phone to be semi-usable on a phone.

Mobile First Design. This is a relatively new concept. Mobile First Designs are Responsive websites that are first and foremost optimized for phones. This not only means that elements are simplified to make sense on a tiny screen, but special attention is paid to the code and to files sizes to optimize loading time. Such sites are a great alternative to a separate mobile site for the small business owner who believes that a big chunk of potential clients are viewing the website on phones. The disadvantage of a Mobile First Design is that the resulting websites tend to look like really big phones when viewed on big screens. This will probably improve as this promising approach matures.

If you’re dying for more details try this article