It’s taken a decade for responsive web design (RWD) to go mainstream since Cameron Adams first introduced the concept. The idea was ingenious – why can’t we design sites that adapt to the the viewport of the device it’s being viewed on?
What is Responsive Design?
Responsive web design (RWD) is a web design approach aimed at crafting sites 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 mobile phones to desktop computer monitors). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.
Wikipedia
In other words, elements like images can be adjusted as well as the layout of those elements. Here’s a video that explains what responsive design is as well as why your company should be implementing it. We recently redeveloped the Highbridge site to be responsive and are now working on Martech Zone to do the same!
The methodology of building a site responsive is a bit tedious as you need to have a hierarchy to your styles that are organized based on the size of the viewport.
Browsers are self-aware of their size, so they load the stylesheet from top to bottom, querying the applicable styles for the size of the screen. This doesn’t mean you have to design different stylesheets for every size screen, you just need to shift the elements necessary.
Operating with a mobile-first mentality is the baseline standard today. Best-in-class brands are thinking not just about whether their site is mobile-friendly but about the full customer experience.
Lucinda Duncalfe, Monetate CEO
Here’s an infographic from Monetate illustrating the potential benefits of creating one responsive design for multiple devices:
If you’d like to see a responsive site in action, point your Google Chrome browser (I believe Firefox has the same feature) to Highbridge. Now select View > Developer > Developer Tools from the menu. This will load a bunch of tools at the bottom of the browser. Click on the small mobile icon to the far left of the Developer Tools menu bar.
You can use the navigation options up top to change the view from landscape to portrait, or even select any number of preprogrammed viewport sizes. You may have to reload the page, but it’s the coolest tool in the world for verifying your responsive settings and ensuring your site looks great on all devices!
Web design isn’t a choose of webmasters anymore, it is now mandatory for them. Thanks for sharing this informative post.
Thanks a lot Douglas for this well explained article. I must agree with this though on the content side of things. For most of the sites we make a responsive layout will not be enough. We need responsive content. But for the more basic websites we will sure going to use your well documented article on how to handle this!
I think you’re absolutely right, Aaron. It’s not enough just to resize and move things… we really need to utilize content effectively as well.