LearnWhat’s the Difference Between Fixed, Fluid, Adaptive, and Responsive Web Design?

Allison Grayce
writes on December 14, 2012

As a web designer, it’s important to embrace that your website is going to look different in various browsers and on different devices.

Focus on making your website change layout to match the device that your visitors are viewing it on.

Here’s the difference between different types of web design and layouts:

Fixed websites have a set width, and resizing the browser or viewing it on different devices won’t affect on the way the website looks. This can require horizontal scrolling and a site that doesn’t look good on tablets or smartphones.

Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser, allowing it to scale up and down fluidly.

Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.

Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.

5 Responses to “What’s the Difference Between Fixed, Fluid, Adaptive, and Responsive Web Design?”

  1. Ashish Chauhan on April 9, 2018 at 4:36 am said:

    I’m always looking for the great informative article and your article also very good.

  2. eCommerce website designer on December 17, 2017 at 3:23 am said:

    Thanks for clearing my doubt on responsive and adaptive website designing. I am a fresher working on responsive website designing. Thanks for sharing information.

  3. Web Solution on January 20, 2016 at 1:12 am said:

    We are Expertise in Web Service, Like Website Designing, Website Promotion, Internet Marketing, Search Engine Optimization,

    Social Media Optimization, PPC etc..

    If you want to see your business growth & want to see live your business don’t think anything, feel free to show your

    business growth.

    We have 5 years of Working Experience and 1000+ Genuine & Satisfied Clients.
    Our Technical Skill In Web Designing-
    1. HTML & HTML5
    2. CSS
    3. JavaScript (JS)
    4. JQuery
    5. PHP
    6. E-Commerce Market Place
    7. WordPress
    8. Magento
    9. Flash Animations
    10.Logo Designing etc..

    Our Technical Skills In Web Promotion-
    1. Search Engine Optimization
    2. Social Media Optimization
    3. Internet Marketing
    4. PPC
    5. Keyword Planner etc..

    Contact With Me On E-Mail

    Email Address- websolution000@gmail.com

    Blog- web-services-dwarka.blogspot.in

  4. thirtytwodigital on May 1, 2013 at 7:12 am said:

    I agree! Adaptive is form of responsive design. You either use media queries to respond to device width or not (fixed).

  5. Johan Hernández on March 15, 2013 at 10:49 pm said:

    Good!

Leave a Reply

You must be logged in to post a comment.

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more