ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

What is responsive design?

Updated on March 6, 2013

Over the last few years, we've seen a fundamental shift in how people consume online content. The rise of smartphones, tablets, and other connected devices means that designing your sites for a fixed screen size is no longer a best practice.

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Jeffrey Veen

What is responsive design?

One of the biggest challenges faced by web designers is the lack of control that they have over their medium. Take print design for example. If I'm designing this magazine layout, I'll need to deal with variables such as paper stock, what type of press it's printed on, and which inks I'll use. While these choices may influence my design decisions, I'm still designing for fixed dimensions. I'm largely in control of the entire process, and the people that consume this content will experience it in exactly the same way. Now, contrast that with web design. When I create content for the web, I have to deal with an almost overwhelming set of variables in how that content will be consumed. For example, I have to consider the wide variety of browsers and operating systems that people might be using, whether my content is accessible to screen readers or other accessibility-enabled devices, how my content will look if and when it's printed, or whether they're attempting to access my content on any one of the growing number of diverse web-capable devices that don't really resemble the traditional screen and browser configuration. Of course, the change that's been getting the most attention recently is mobile. The recent explosion of clients accessing the web on mobile devices has made designing for the mobile screen a requirement, not an additional consideration. But mobile is only part of the story. As you can see by the small sampling screens that I have here, screen sizes are not only getting smaller, they're getting bigger as well. That means that as a designer, trying to design separately for each context that your content might be encountered in is almost impossible. That's where responsive design comes in. Responsive design is a design strategy that is centered on designing your content so that it responds to the environment it's encountered in. The term was first coined by Ethan Marcotte who identifies three fundamental techniques for responsive design: fluid grids for flexible layouts, media queries to help you adapt content to specific screen sizes, and flexible images and media that respond to changes in screen sizes as well. For the most part, Ethan's sticking to his guns on those three techniques defining what responsive design is, but like most new terms, its meaning is still evolving. Many people are using it to refer to any techniques or strategies that allow designs to respond to different environments. I feel it's a very broad term and one that can encompass almost anything that frees your content from the restrictions of a single context. To me, learning and understanding responsive design is less about learning specific techniques and more about changing the way that you think about designing for the web. It means totally rethinking content strategies, taking more time to consider how people might use and access content based on specific context, and how to take advantage of the diverse capabilities of the different devices that your audience is likely to use. To that end, I think you'll find that embracing responsive design will dramatically change the way you plan and execute your sites.

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)