--- title: What Does Responsive and Adaptive Design Mean? description: The terms responsive and adaptive design have been around for years, but what does responsive and adaptive design mean? image: https://info.keylimeinteractive.com/hubfs/mobile-devices-2017978_1280.png --- [![Key Lime Logo](https://info.keylimeinteractive.com/hs-fs/hubfs/Key%20Lime%20Logo.png?width=200&height=39&name=Key%20Lime%20Logo.png "Key Lime Logo")](https://keylimeinteractive.com/) - SERVICES - [All Services](https://keylimeinteractive.com/services) - [UX Strategy](https://keylimeinteractive.com/ux-strategy-design/) - [User Research](https://keylimeinteractive.com/user-research/) - [UX/UI Design](https://keylimeinteractive.com/ux-design-strategy/) - [EmTech Strategy](https://keylimeinteractive.com/emerging-technology/) - OUR WORK - [Our Approach](https://dev.keylimeinteractive.com/our-approach/) - [Enterprise Clients](https://keylimeinteractive.com/work/) - [Public Sector](https://keylimeinteractive.com/public-sector-gsa-schedule/) - [ABOUT US](https://keylimeinteractive.com/about-us/) - [Who We Are](https://keylimeinteractive.com/about-us/) - [People](https://keylimeinteractive.com/our-team/) - [Careers](https://workforcenow.adp.com/mascsr/default/mdf/recruitment/recruitment.html?cid=1eb079d3-bb50-438a-a731-eaa18a982193&ccId=19000101_000001&lang=en_US) - INSIGHTS - [CX Blog](https://info.keylimeinteractive.com) - [Events](https://keylimeinteractive.com/upcoming-events/) - [Competitive Indexes](https://keylimeinteractive.com/reports/#rankings) - [White Papers](https://keylimeinteractive.com/reports/) - [CONTACT US](https://keylimeinteractive.com/contact/) [![](https://keylimeinteractive.com/wp-content/uploads/2024/02/key-lime-interactive.svg)](https://info.keylimeinteractive.com/) - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Blog](https://info.keylimeinteractive.com/) - Resources - [Case Studies](https://keylimeinteractive.com/case-studies/) - [Events](https://info.keylimeinteractive.com/events) - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Blog](https://info.keylimeinteractive.com/) - Resources - [Case Studies](https://keylimeinteractive.com/case-studies/) - [Events](https://info.keylimeinteractive.com/events) [Contact us](https://info.keylimeinteractive.com/contact) [![](https://keylimeinteractive.com/wp-content/uploads/2024/02/key-lime-interactive.svg)](https://info.keylimeinteractive.com/) - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Blog](https://info.keylimeinteractive.com/) - Resources - [Case Studies](https://keylimeinteractive.com/case-studies/) - [Events](https://info.keylimeinteractive.com/events) - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Blog](https://info.keylimeinteractive.com/) - Resources - [Case Studies](https://keylimeinteractive.com/case-studies/) - [Events](https://info.keylimeinteractive.com/events) [Contact us](https://info.keylimeinteractive.com/contact) - - - # What Does Responsive and Adaptive Design Mean? [By Key Lime Interactive](https://info.keylimeinteractive.com/author/key-lime-interactive) May 18, 2017 - [Tweet](https://twitter.com/share) ![](https://info.keylimeinteractive.com/hubfs/mobile-devices-2017978_1280.png) ![What-Does-Responsive-and-Adaptive-Design-Mean](https://info.keylimeinteractive.com/hs-fs/hubfs/mobile-devices-2017978_1280.png?width=530&name=mobile-devices-2017978_1280.png "What-Does-Responsive-and-Adaptive-Design-Mean")      Times have changed in the world of [UX](https://info.keylimeinteractive.com/topic/ux) since I first started in this industry. I designed and developed websites for only desktop views, and there was a standard content container size at that time. As a result, designing was much easier. If I placed a button on the screen it would stay that way on all devices, I didn’t have to worry about it moving. The only time I had to account for multiple scenarios was when it depended on the user’s internet browser. This all changed when Apple released the [iPhone](https://info.keylimeinteractive.com/the-iphone-6-review). We were all forced to break out of our rigid thinking in regards to designing and developing web pages. Now we had to design pages in a way that could respond, transform and adapt, seamlessly to any device.       The terms responsive and adaptive design have been around for years, but what does responsive and adaptive design mean? **Responsive Design** is when you design the experience to adjust according to the device (screen size, platform, and orientation) being used. This is done through using fluid layouts, media queries, and scripts. There is one flexible layout created that is able to detect the visitor's screen size and orientation and change the layout accordingly. **Adaptive Design** is different from responsive design in that there isn’t one layout that always changes. Instead, there are several different layouts that are developed for multiple screen sizes (or viewports).          Knowing exactly how to approach the subject of designing for a digital experience to be responsive and knowing how it works from a development perspective is key. It allows you to see what is needed to create a design that responds correctly. It also helps one understand what needs to be communicated to the development Team and stakeholders in terms of ideas and designs.          When the internet was born, websites were mainly informative and were mostly developed as one clear, giant table of information. These tables included rows and columns, and the intersection of these are called cells. These cells were populated with information, like text, buttons, and images. Before CSS, tables placed content in the appropriate locations and kept the visual grid structure that is used to this day. Prior to the need to create [responsive and adaptive designs](https://info.keylimeinteractive.com/which-one-should-you-use-adaptive-or-responsive-design), it was all pretty simple and rudimentary.           When designing a responsive experience, one needs to think of it as a table that has the width of the device’s viewport i.e. the screen size of the specific device. This table contains rows and columns. When you shrink the viewport (or browser) the table will adjust accordingly. The number of columns will not change, but instead, they will only become smaller. To prevent the columns (containing content) becoming a usability and accessibility problem when the width of the viewport shrinks, one will need to decide the width and how the columns will stack inside the specific row. This is what responsive and adaptive designs are all about.           In most cases, UX’ers are designing responsive layouts around 12 column grids (for smaller Devices, like the iPhone) they may drop the number down to 8. If your design calls for two content areas side-by-side in a container, they will need to be 6 columns (12 / 2 = 6). If you need 3 then each content area will be 4 columns. You can also mix and match content widths as needed, as long as the columns add up to twelve.         Breakpoints are where you set the width to stack the columns. The platform Bootstrap uses three breakpoints (sm (768px), medium (992px), and large (1200)). Keeping the number of breakpoints to a minimum helps make the experience simple and consistent when creating a responsive or adaptive design. It keeps the process simple and easy to understand, which in turn prevents your development team from running out of the building screaming.          Always keep in mind that the idea around responsive and adaptive design is to create, design and develop one consistent experience regardless of the device. Think of the design and development process merely as setting rules to help that experience. This is not restricted to the horizontal collapsing of the experience, or the stacking of columns inside of a specific row. One can still include important functionalities like showing or hiding elements, adjusting the dimensions of elements and content for better usability, etc.                     For more information on how responsive design works or how to design for responsive web, I strongly recommend learning more about the platforms [Bootstrap](http://getbootstrap.com/) and [Foundation](http://foundation.zurb.com/). You can also take our quick quiz on [Which One Should You Use, Adaptive or Responsive Design?](https://info.keylimeinteractive.com/which-one-should-you-use-adaptive-or-responsive-design). Learning how responsive design works will help you make better decisions around the experience you are creating, and it will help you communicate your ideas to the developing team.   **READ MORE:** [Flat Design UX Expert Review](https://info.keylimeinteractive.com/flat-design-ux-expert-review), [Outstanding UX Research Naturally Leads Us to UX Design](https://info.keylimeinteractive.com/an-8-year-evolution-outstanding-ux-research-naturally-leads-us-to-ux-design), [Tamagotchi Gestures and UX Design](https://info.keylimeinteractive.com/tamagotchi-gestures-and-ux-design), [Four Key UX Best Practices for Chatbots](https://info.keylimeinteractive.com/four-key-ux-best-practices-for-chatbots), [How to Create Trust Through Digital Design](https://info.keylimeinteractive.com/how-to-create-trust-through-digital-design) ###### More by this Author [Key Lime Interactive](https://info.keylimeinteractive.com/author/key-lime-interactive) #### Comments [Add Comment](https://info.keylimeinteractive.com/what-does-responsive-and-adaptive-design-mean#comment-form) ABOUT KLI [Key Lime Interactive](https://keylimeinteractive.com/about-us)is a user experience research and service design agency, with a sweet spot for emerging technology. As UX experts, our goal is to make your life easier, optimize user experiences, and make the world a better place. - [Recent](https://info.keylimeinteractive.com/what-does-responsive-and-adaptive-design-mean#tabs-0) - [Popular](https://info.keylimeinteractive.com/what-does-responsive-and-adaptive-design-mean#tabs-1) ![Upsell with Purpose: Fueling SaaS Growth Through User Insight](https://info.keylimeinteractive.com/hubfs/Multiethnic%20group%20of%20young%20people%20sitting%20in%20conference%20room%20and%20brainstorming%20on%20business%20meeting.jpeg) [Upsell with Purpose: Fueling SaaS Growth Through User Insight](https://info.keylimeinteractive.com/upselling-in-a-saas-environment-with-a-user-centric-approach) Aug 21, 2024 ![5 Ways to Get the Most Out of Working with a UX Research Consultant](https://info.keylimeinteractive.com/hubfs/Attractive%20businessman%20speaking%20with%20fellow%20coworkers.jpeg) [5 Ways to Get the Most Out of Working with a UX Research Consultant](https://info.keylimeinteractive.com/5-ways-to-get-the-most-out-of-working-with-a-ux-research-consultant) Aug 21, 2024 ![Designing Engagement Through Micro-Interactions](https://info.keylimeinteractive.com/hubfs/AI-Generated%20Media/Images/A%20closeup%20shot%20of%20a%20finger%20gently%20tapping%20a%20digital%20button%20on%20a%20sleek%2c%20modern%20interface.jpeg) [Designing Engagement Through Micro-Interactions](https://info.keylimeinteractive.com/the-significance-of-micro-interactions-in-shaping-user-engagement-and-experience) Aug 21, 2024 ![What is the Keystroke-Level Model?](https://info.keylimeinteractive.com/hubfs/Keystroke.jpg) [What is the Keystroke-Level Model?](https://info.keylimeinteractive.com/what-is-the-keystroke-level-model) Aug 21, 2024 ![Current-State vs. Future-State Journey Mapping](https://info.keylimeinteractive.com/hubfs/destination-2386255_1280.jpg) [Current-State vs. Future-State Journey Mapping](https://info.keylimeinteractive.com/current-state-vs.-future-state-journey-mapping) Aug 21, 2024 ![A History of Voice Technology](https://info.keylimeinteractive.com/hubfs/Screen%20Shot%202020-08-11%20at%2012.18.34%20PM.png) [A History of Voice Technology](https://info.keylimeinteractive.com/history-of-voice-technology) Aug 21, 2024 Create a UX Strategy [![key-lime-interactive-ux](https://info.keylimeinteractive.com/hs-fs/hubfs/key-lime-interactive-ux.png?width=635&height=634&name=key-lime-interactive-ux.png)](https://keylimeinteractive.com/ux-strategy-design) ### Post By Topics - [Research Methods](https://info.keylimeinteractive.com/topic/research-methods) - [UX Strategy](https://info.keylimeinteractive.com/topic/ux-strategy) - [Events & News](https://info.keylimeinteractive.com/topic/events-news) - [UX Research](https://info.keylimeinteractive.com/topic/ux-research) - [User Experience](https://info.keylimeinteractive.com/topic/user-experience) - [User Interface](https://info.keylimeinteractive.com/topic/user-interface) - [UX](https://info.keylimeinteractive.com/topic/ux) - [News](https://info.keylimeinteractive.com/topic/news) - [Mobile UX](https://info.keylimeinteractive.com/topic/mobile-ux) - [Usability Testing](https://info.keylimeinteractive.com/topic/usability-testing) - [Competitive Research](https://info.keylimeinteractive.com/topic/competitive-research) - [UX Design](https://info.keylimeinteractive.com/topic/ux-design) - [Eye tracking & Biometrics](https://info.keylimeinteractive.com/topic/eye-tracking-biometrics) - [Qualitative Research](https://info.keylimeinteractive.com/topic/qualitative-research) - [Customer Experience](https://info.keylimeinteractive.com/topic/customer-experience) - [Journey Mapping](https://info.keylimeinteractive.com/topic/journey-mapping) - [DEI](https://info.keylimeinteractive.com/topic/dei) - [Remote Testing](https://info.keylimeinteractive.com/topic/remote-testing) - [User Experience Consultant](https://info.keylimeinteractive.com/topic/user-experience-consultant) - [VR](https://info.keylimeinteractive.com/topic/vr) - [XR](https://info.keylimeinteractive.com/topic/xr) - [Multicultural UX](https://info.keylimeinteractive.com/topic/multicultural-ux) - [Mobile Banking](https://info.keylimeinteractive.com/topic/mobile-banking) - [Quantitative Research](https://info.keylimeinteractive.com/topic/quantitative-research) - [App Development](https://info.keylimeinteractive.com/topic/app-development) - [User Experience Research Studies](https://info.keylimeinteractive.com/topic/user-experience-research-studies) - [Diversity Equity Inclusion](https://info.keylimeinteractive.com/topic/diversity-equity-inclusion) - [UI](https://info.keylimeinteractive.com/topic/ui) - [Voice Technology](https://info.keylimeinteractive.com/topic/voice-technology) - [Accessibility](https://info.keylimeinteractive.com/topic/accessibility) - [Behavioral Personas](https://info.keylimeinteractive.com/topic/behavioral-personas) - [Diary Study & Ethnography](https://info.keylimeinteractive.com/topic/diary-study-ethnography) - [Global Research](https://info.keylimeinteractive.com/topic/global-research) - [Inclusivity Index](https://info.keylimeinteractive.com/topic/inclusivity-index) - [User Testing](https://info.keylimeinteractive.com/topic/user-testing) - [Card Sort & Tree Test](https://info.keylimeinteractive.com/topic/card-sort-tree-test) - [Human-first Approach](https://info.keylimeinteractive.com/topic/human-first-approach) - [Personalization](https://info.keylimeinteractive.com/topic/personalization) - [CX](https://info.keylimeinteractive.com/topic/cx) - [Diary Study](https://info.keylimeinteractive.com/topic/diary-study) - [In-Depth Interviews](https://info.keylimeinteractive.com/topic/in-depth-interviews) - [Inclusivity](https://info.keylimeinteractive.com/topic/inclusivity) - [A/B Testing](https://info.keylimeinteractive.com/topic/a-b-testing) - [CX Research](https://info.keylimeinteractive.com/topic/cx-research) - [IDIs](https://info.keylimeinteractive.com/topic/idis) - [Bias](https://info.keylimeinteractive.com/topic/bias) - [Personas](https://info.keylimeinteractive.com/topic/personas) - [Research Participant Recruitment](https://info.keylimeinteractive.com/topic/research-participant-recruitment) - [Usability](https://info.keylimeinteractive.com/topic/usability) - [Women in UX](https://info.keylimeinteractive.com/topic/women-in-ux) - [Workshops](https://info.keylimeinteractive.com/topic/workshops) - [Customer Journey Mapping](https://info.keylimeinteractive.com/topic/customer-journey-mapping) - [Remote Research](https://info.keylimeinteractive.com/topic/remote-research) - [Research Analysis](https://info.keylimeinteractive.com/topic/research-analysis) - [UX Methods](https://info.keylimeinteractive.com/topic/ux-methods) - [Webinars](https://info.keylimeinteractive.com/topic/webinars) - [Anthropology](https://info.keylimeinteractive.com/topic/anthropology) - [Competitive Benchmarking](https://info.keylimeinteractive.com/topic/competitive-benchmarking) - [Competitive Insights](https://info.keylimeinteractive.com/topic/competitive-insights) - [Competitive Intelligence](https://info.keylimeinteractive.com/topic/competitive-intelligence) - [Confirmation Bias](https://info.keylimeinteractive.com/topic/confirmation-bias) - [Ethnography](https://info.keylimeinteractive.com/topic/ethnography) - [Gaming](https://info.keylimeinteractive.com/topic/gaming) - [Healthcare CX Design](https://info.keylimeinteractive.com/topic/healthcare-cx-design) - [Healthcare Customer Experience Design](https://info.keylimeinteractive.com/topic/healthcare-customer-experience-design) - [Heuristics](https://info.keylimeinteractive.com/topic/heuristics) - [Unmoderated](https://info.keylimeinteractive.com/topic/unmoderated) - [sample size calculation](https://info.keylimeinteractive.com/topic/sample-size-calculation) - [AI development](https://info.keylimeinteractive.com/topic/ai-development) - [Biometrics](https://info.keylimeinteractive.com/topic/biometrics) - [Communication](https://info.keylimeinteractive.com/topic/communication) - [Competitive Intelligence Analysis](https://info.keylimeinteractive.com/topic/competitive-intelligence-analysis) - [Concept Testing](https://info.keylimeinteractive.com/topic/concept-testing) - [Consultant](https://info.keylimeinteractive.com/topic/consultant) - [Custom Projects](https://info.keylimeinteractive.com/topic/custom-projects) - [Dedicated Services](https://info.keylimeinteractive.com/topic/dedicated-services) - [Digital Divide](https://info.keylimeinteractive.com/topic/digital-divide) - [Impact](https://info.keylimeinteractive.com/topic/impact) - [Keystroke Level Model](https://info.keylimeinteractive.com/topic/keystroke-level-model) - [Literature Review](https://info.keylimeinteractive.com/topic/literature-review) - [Negotiation in UX](https://info.keylimeinteractive.com/topic/negotiation-in-ux) - [Nonprofit UX](https://info.keylimeinteractive.com/topic/nonprofit-ux) - [Presentation](https://info.keylimeinteractive.com/topic/presentation) - [Rapid Research](https://info.keylimeinteractive.com/topic/rapid-research) - [Report](https://info.keylimeinteractive.com/topic/report) - [SaaS](https://info.keylimeinteractive.com/topic/saas) - [UX Templates](https://info.keylimeinteractive.com/topic/ux-templates) - [World Usability Day](https://info.keylimeinteractive.com/topic/world-usability-day) - [digital design](https://info.keylimeinteractive.com/topic/digital-design) - [persona](https://info.keylimeinteractive.com/topic/persona) - [user engagement](https://info.keylimeinteractive.com/topic/user-engagement) ![ ](https://keylimeinteractive.com/wp-content/uploads/2024/05/aicpa-soc-certified.png) ![Logo of the National Minority Supplier Development Council with colorful abstract shapes and text.](https://keylimeinteractive.com/wp-content/uploads/2024/05/NMSDC-Logo-NATIONAL-1024x716.jpg) ![Logo with the text "Insights Association" and colorful squares forming a pattern above the text.](https://keylimeinteractive.com/wp-content/uploads/2024/02/insights-association-logo-v2.png) ![](https://keylimeinteractive.com/wp-content/uploads/2024/02/key-lime-interactive.svg) Your Trusted Partner for UX Research Key Lime Interactive - [What We Do](https://keylimeinteractive.com/ux-research-services/) - [Proven Process](https://keylimeinteractive.com/proven-process/) Resources - [Case Studies](https://info.keylimeinteractive.com/case-studies) - [Events + Workshops](https://info.keylimeinteractive.com/events) - [Blog](https://info.keylimeinteractive.com/) Company - [About Us](https://keylimeinteractive.com/about-us/) - [Meet Our Team](https://keylimeinteractive.com/our-team/) - [Careers](https://keylimeinteractive.com/careers/) - [News](https://keylimeinteractive.com/news/) - [Security & Compliance](https://app.vanta.com/keylimeinteractive.com/trust/cylnxu23wx6pzvej7bloh9) - [Public Sector GSA](https://keylimeinteractive.com/public-sector-gsa-schedule/) Get in touch - [Contact Us](https://keylimeinteractive.com/contact) © 2025 All Rights Reserved. - [Privacy Policy](https://keylimeinteractive.com/privacy-policy/) - [Terms of Use](https://keylimeinteractive.com/terms/)