Just What Is Responsive Design?
Years ago, websites were designed for viewing on a computer. Now people view websites on their computer, their tablet, their cellphone. At first, websites were simply created for one optimal size and you would have to scroll around if the size wasn’t quite right. Then some websites got designed with separate versions of the site for various sized platforms. Then came Responsive Web Design…
Responsive Web Design is having one site that adapts to different sized devices.
Here’s Wikipedia’s definition:
“Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”
And here’s a great quote about the approach of designing for the web:
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.” John Allsopp, “A Dao of Web Design”
TECH TALK SIMPLIFIED
In order to design for the web’s flexibility we separate the design formatting from the content with Cascading Style Sheets, or CSS, and HTML, the standard foundation of web pages. To design for various viewing sizes, you set breakpoints, or widths in pixels, for mobile, tablet, and desktop, etc. You can have your web page call up the information about these breakpoints, with what’s called a Media Query, which basically says “If the screen is smaller or larger than this size, make the page look like this.”
SEEING IS BELIEVING
SevenBlocksDesign.com was made with a Responsive Web Design WordPress template. Look at it on different platforms or just make your browser on your computer larger or smaller and see what happens. Here’s a couple things to note: with full desktop mode there’s a slideshow on the homepage, but with a smaller screen a single image scales to size; the navigation links at the top become a drop-down menu on smaller screens; content that’s side-by-side with a large screen reconfigure to be displayed top-to-bottom on smaller screens.
WHY IS THIS GOOD?
Because content is king! These subtle changes take advantage of making the content as easily accessible in different formats. And that’s good design!
Credit: “Desktop, Tablet, Cell” image by Diana Hobstetter