Responsive web design is the next generation of user-centered design. It is primarily concerned with screen size. A responsive website adapts its presentation to suit the viewport of the visitor’s device. Whether the visitor is browsing the internet on a gigantic flat-panel monitor, or scrolling finger-wise down a smartphone, she will feel as though the website’s design was tailored specifically for her device.
Show your website visitors your best presentation in a format that will work for them. Are they on a giant screen? Spread out and take up some space. Are they on a tiny screen? Adjust the layout to make everything fit. Often this will include resizing the content area; moving or removing the sidebars; and reformatting the header navigation menu. The idea is that your web page will respond to the requirements of the viewing device. That’s why we say the design is “responsive.”
Some people get into the semantics, and differentiate between “adaptive” design and “responsive” design. Technically, this is the difference between designs with fixed width breakpoints at certain screen sizes, and designs with all the content enclosed in a flexible bounding box. That’s parsing it a little fine for most practical purposes; but if you’re interested in the technicalities of the distinctions, you can view a demonstration website here.
Responsive CSS media queries
Responsive web design often makes use of the CSS3 @media queries to define breakpoints in the design. The basic grid is a flexible layout. When screen size is adjusted beyond a certain point, some elements may begin to appear too close together. We identify those points, and define breakpoints for those sizes. Once the new style rules are in place, the responsive website design’s stylesheet will either resize or reposition the design elements for screens of the specified size.
A key element of responsive design is the ability to have an image fit a layout design on the visitor’s screen size. Stretch an image to fit a big screen. Squash an image to fit a small screen. Maintain proportions so the image never looks stretched or squashed. These results can be achieved through CSS; for example, with the background-size:cover property, or with the use of max-width:100%.
Have questions about how responsive web design can help your website visitors? Call Mardesco today.