Adaptive & Responsive Design

Adaptive & responsive design are web development approaches that create dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. It's a big deal right now, as everyone wants their website to be presentable on any device that's viewing it in a web browser. This includes desktop computers & laptops, tablets and smartphones.

The goal is to maximize the legibility and usability of their website across all available web browsing platforms so that it can be used by anyone, anywhere. Take this website, for example. If you view it using your smartphone or tablet, you'll notice that it's rather easy to read. There's no need to zoom in to read tiny letters. This is because this website is created using responsive design. That's pretty spiffy, eh?

So what's the difference between the two? Well, an adaptive design will change to fit a predetermined set of screen and device sizes. A responsive design will fluidly change and respond to fit any screen or device size.

With that being said, there's a lot of things to consider when designing a website's appearance. It can require a lot of pre-planning depending on the complexity of the website's interface layout. Sometimes it can even require radical changes in the overall appearance of the interface to keep things tasteful. I've found that using a little bit of both adaptive and responsive design creates the best results.

To get an idea of what I'm talking about, go ahead and try resizing your web browser's window. You can also try loading this example page on your tablet or smartphone. Give it a try - I'll wait for you.

As you can see, when you greatly reduce the width of this web page, the spinning logo cube disappears and is replaced with just one of its faces. The navigation bar relocates itself to underneath the logo. The right sidebar disappears underneath of this content area. Yet it maintains the overall theme of this website. This is what an adaptive design looks like.

What's more, this web page will utilize responsive design when it's between 768 - 960+ pixels wide. The words will move to fit within the space they occupy, and the navigation bar will scoot towards the logo cube if there's still room for it to fit. Responsive design is an approach that focuses more on the end user rather than the specific device size, which creates a much more user-friendly experience.

In fact, most of the web pages on this website are created using responsive design. This is the reason that this website generally doesn't make your smartphone's web browser burst into flames as it tries to render this website in a legible manner.

Some Responsive Examples

A Tile Contracting Company's Website

An Airplane Insurance Company's Website

A Mock Landing Page Example