Fantastic Elastic Responsive Design

It is almost cliché to say that the internet has changed drastically in the past few years with the introduction of our new Mobile overlords. Now, clients are not asking their web developers and designers for a site that exists only in one context, but for an application that can move effortlessly from desktop to tablet to phone.

So what is a developer to do? Recently, the concept of Responsive Design has taken hold in the web development world. Responsive Design is a set of best practices, techniques and design philosophies that aim to create a site that can exist comfortably in every resolution. With Responsive Design, a client’s site scales as needed and changes its layout as needed based on screen information the browser detects.

As with most things, examples are called for. Luckily, the web design blogosphere is rife with such examples . The hallmark of responsive design is scalability. And with these examples, you can see that the site maintains a cohesive aesthetic, but self-edits to show the best layout available to a particular device’s resolution. Widths scale down, images decrease in size, and ancillary information that exists in its own column on a larger resolution gets reduced to a link in a smaller one.

Morten Hjerde of Rift Labs and colleagues tracked data for 400 devices over 3 years.

I won’t get into the how; Other sites have done this better than I possibly could, but the why might be even more important to understand. Device resolution might not be a sexy topic, but it governs the environments in which users, clients, and developers cohabitate. The internet is getting more diverse, not less, and those environments are going to get more and more varied. Having a website that scales up or down to fill a device in the most efficient way possible is the only logical way forward in the Wild West of device resolution.