Ethan Marcotte introduced the concept of responsive web design in an article for A List Apart in 2010. Responsive design is an approach that does away with fixed width design where everything in a web page is laid out down to the pixel. A web page is fundamentally fluid. Without fixed widths and containing parent elements, content adjusts fluidly to the size of the browser window. Goes with the flow so to speak. A responsive design uses fluid grids and scaling images which adjust to different screen sizes. If done well, the design maintains its integrity even though it changes depending on the device or the size of the browser window.

Many web designers begin with experience in print graphics where absolute control is exercised in creating a beautiful design. The enormity of differing device screen sizes and the shift of the majority of internet use from desktop to mobile devices in recent years has created the need for more flexible designs. As Ethan Marcotte observed over four years ago,

“Our work is defined by its transience, often refined or replaced within a year or two. Inconsistent window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate when we publish our work…”.

The practice has been for a company to have one website for the desktop and a mobile app for smartphones and smaller tablets. This approach creates much more expense. Responsive design can be an elegant solution which establishes consistency and a more streamlined approach to content. It can actually help to make the desktop design less cluttered and more user friendly due to the need for the mobile version to be more streamined and easy to navigate.

The basic technique used to create a responsive layout is to use relative measurements like percentages instead of pixels. A fluid grid uses a percentage for the width of the containing elements and the columns, images and other elements within. Margins and padding are handled the same way. Floating the child elements in the container let them stack as the screen width is adjusted downward. This does need tweaking in order for the content to maintain readability on large screens as well as smaller ones. The pixel’s form of absolute measurement is used to set maximum and minimum widths on elements to set the boundaries on the layout.

Most designs have a breaking point where max and min-widths cannot effectively control the layout. The answer is the media query. A media query lets the design adjust to the particular screen width of a device. Pixels are still important as they tell the the design to adjust if the device's screen width is within certain parameters. For example, at less than 480 pixels certain elements might be resized and the navigation structure may change; however, between 481 and 769 pixels background images or the banner area may adjust to function better in that range.

“Universal design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.”

           Ron Mace, Founder of the Center for Universal Design

Responsive Design adapts to the environment of the device screen. Universal design attempts to create a good user experience for all users. Responsive Design is more than just adjusting to screen sizes but also to functionality. Clicking on a desktop to move to the next item translates to a swipe on a smartphone. Content revealed on hover should be accessible to screen readers. The user on a phone should be able to navigate easily with their thumb while walking or traveling (the icon links should be large enough to be easily tapped).

The responsive designer should always be mindful of the extremes. Design for the smallest and the largest device, adjust to the breakpoints of the layout and always keep accessibility in mind.