"Responsive-bility"

The word Responsive design is fairly new in terms of how it is used especially for those who are not in the design field. Not too long ago, most websites did not see the need to be responsive. Unlike most technological developments in the web development field, the need to have a responsive website has for the most part been fueled by how users interact with the devices that display information as opposed to how the user actually gets the information.

That said, responsive design by loose definition is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries.  The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly.

Responsive design is a somewhat retro approach to web site design that solves a lot of design problems caused by the proliferation of new types of mobile devices. Responsive design pages use x and y coordinates on a grid for layout and mathematical percentages for images instead of fixed-width parameters. Using percentages instead of fixed-width parameters and a grid layout creates a more fluid layout that will resize itself to fit the size of the display. Hence the word responsive.

Media queries, a feature of cascading style sheets (CSS), allow the developer to specify when a certain style takes effect. With CSS2, for example, a media query will serve printer-friendly style sheets if requested. CSS3 has expanded query capabilities that allow style sheets to be targeted to a device’s display and serve a desktop, tablet or smartphone style sheet depending on the query response.

This capacity means that instead of having to build a special mobile version of a website -- which often requires writing new code from scratch -- developers can simply build multiple style sheets for the same web page and perhaps even associate different images with each of the style sheets. As a result, HTML code can be re-purposed instead of having to be rewritten, which saves considerable development time.

So why Responsive? The answer is shorter than the explanation. The traditional notion of “going online” no longer reminds us of a desktop or laptop computer because nearly two-thirds of Americans own a smartphone, and 19% of Americans rely on them to for everything digital. With that in mind we have to understand and design how that content is delivered to those devices. Based on the explanation above, when looking at news, for example on your cellphone, or Ipad, without the responsive functionality, you would be forced to scroll, pinch, swipe etc to be able to see everything you need to see. Now that would be annoying and somewhat take away the pleasure of  getting online for whatever reason had in mind

You will also notice that some websites are "responsive" but only on the landing page and everything after that is simply unresponsive. Websites like these when viewed on smart devices may work in the short run but must should make all pages fully responsive to avoid negative user experiences associated with navigation.

So, in the future when you see a website nicely re-purpose itself (or not) on your cell phone or Ipad, think responsive. Is your website responsive?