Responsive? Adaptive? I don't know, just make it work!

website mockup.jpg

I've been a web developer - not a designer, but a programmer - for a while.  I built my first (Netscape? OMG it has pictures!) website way back in my early days of college (1995-ish), when layouts and "design" were accomplished by extensive use of tables.  So many rows and columns...

Really, there weren't a lot of players on the website display field, so all I really had to consider was if it showed up properly on one browser (Netscape).  As more browsers entered the game, there were a few considerations between them, but you could pretty much assume they'd be looking at your work of art on a computer monitor and behave mostly the same way on most graphical browsers. (Let's just pretend there weren't people viewing your page in text-only formats).

Now, it's not one game, but a world of different ways of displaying the humble website, which has introduced a new aspect of design: Responsive or Adaptive (or Mobile-only) layouts, and if you're not a web programmer who has to implement that stuff, you may be wondering what the difference is and why you should care about it for your own website.

Here it is, in simple terms (based on my various readings and experience of the subject):

Responsive - these are the websites that resize on the fly, or where the layout is fluid, moving around to accomodate the size of the display.  It's all the same code and images in the background, just using various methods of resizing or moving around the content in your site.

This one takes some advance planning and is easier to implement in new sites, harder when you're updating old non-responsive code to become responsive.  To build a responsive site, the main thing I need to know is how the layout is going to change as the display shrinks and grows - will my grids become a stacked column? Will my site nav turn into a little dropdown menu?  These are things you need to know before you build a responsive site.

Adaptive  -  these are the ones that serve up essentially different versions of the site based on what you're looking at it on.  The layouts may be different, they may serve up different versions of images, etc.

Although this does take some planning, you don't necessarily have to rewrite your old code, just create mobile or tablet versions (or low-res/hi-res versions, or whatever else you need) and your code determines which version to serve up.  It doesn't adapt as easily to the wild digital landscape of mobile devices - how many different sizes of mobile phone and tablet screen do you need anyway?  

Native or Mobile - Mobile is what it sounds like, designed only for the small screen. Native means you're basically building an app - a different one for each mobile platform you plan to support.  Not a simple task, so invest wisely if you really want a native app (or several).

Good luck on your journey through the Wild Web.

Xin-min Lai

I started life as a web developer like any other, but I’ve since morphed into this business owner who dabbles in graphic stuff on the side.

My name is a conversation, apparently the face doesn’t match the Chinese-ness, but there it is.

Embrace the strange, but buy it dinner first.