User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
What is the exact difference between fluid and responsive design?
I am bit confused about fluid and responsive design. Fluid is the one where we give width in percentages so that design will look good on browsers even if shrink or expand the browser. But what's different about responsive?
The main difference is that Fluid Layouts (also called Liquid Layouts) are based on proportionally laying out your website so elements take up the same percent of space on different screen sizes, while Responsive Design uses CSS Media Queries to present different layouts based on screen sizes/type of screen. For some examples of both kinds of design, see Inspiration: Fluid & Responsive Design.
Fluid's intent is to keep the same spatial weighting to all elements, and works okay on different sizes of screens of the same sort. They tend to look okay on a 32", high resolution monitor and a 12" lower resolution laptop. They're pretty easy to implement.
Responsive design's intent is to serve different devices layouts tailored specifically for the type of screen. Your site's layout will generally be cut down to a single column on a smartphone for example.
For a deeper look, check out Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? by Smashing Magazine, which goes in depth on the primary changes in Fluid design. They also have Responsive Web Design Guidelines and Tutorials for an overview of responsive (with plenty of links should you want to dig deeper into Responsive Design).
Responsive Design is very much "in" at the moment thanks to Mobile, Smashing actually has a whole tag for responsive design.
Fluid Design means that different sections of the site are defined relatively (eg, an element is 50% of the page width). No matter what browser you're using: Smartphone, Tablet, Desktop, the site will look (mostly) the same and have the same proportions (this element will take up half the screen). This is because in your CSS, everything is defined in terms of percent, or ems, or some other metric that scales nicely from device to device (Whereas defining fixed sizes in pixels might make and element take up half the screen on a desktop, the whole screen on a tablet, and be bigger than the screen on a smartphone).
Responsive design is usually more on the programming side, where you detect the user's browser (via useragent) or the size of their screen, and actually show them a different view based on the size of their device. For example, you might use a three column layout for desktops, a two column layout for tablets, and a single column layout on smartphones. In this case, the view on each device looks very different, because you are actually changing the view based on the device.
Twitter Bootstrap can do both of these, and they have some nice examples on their site:
You are correct in that a fluid design is one that uses percentages to allow for content to grow or expand based on user's device screen width. Responsive takes fluid (or fixed) design one step further with CSS3 @media queries. The @media query targets specific intervals (or devices) where a developer may change specific content to improve upon UI/UX.
A simple example might be a form in a fluid design with inputs that are width:90% which will stretch according to screen size. This might look nice on a mobile device, but larger tablets and desktops will look rather unpleasant, so you could target [@media screen only and (min-width:600px)] and reset the width to be a smaller percentage, making it responsive.
One step further, a web site navigation menu may be fluid and stretch across the top of a desktop, but a developer could target an iPhone [@media screen only and (min-device-width: 320px) and (max-device-width: 480px) { #nav {different style...} }] to display the menu as separate buttons.
the confusion probably stems from the use of the term fluid design to mean also responsive adjustment of elements based on context. e.g. text box expands as user types in more. so fluid doesn't just have to mean percentage based css property. responsive design is a much broader term that is the result of good ux design. the right kinds of things happen based on context or even backend data, providing good (cue) feedback to user.
Fluid will grow and shrink content when the browser window is re-sized, however this isn't to say that it will change it's layout and style when resized so your website could look awful at full width or smallest width.
Responsive is similar, however care is taken to ensure the content is usable at different sizes, so for example a conditional style sheet may take effect if the browser is greater or less than a specified width. This gives designers and developers control over how content will appear on different devices at different sizes.
Fluid = UI stretchy when you increase/decrease window etc.. whole point is it works similiar to vector graphics in rendering... in fact you'd stand more of a chance of success with Fluid design if you rely on vector or bitmaps that have scale-9 stretch formulas..
Responsive = mixture between stuff stretching and stuff being added/removed depending on the metrics of the screen. Beyond that it's just pure semantics :)
Look at Office Ribbon for real-world example for Responsive... different states are managed depending on the size of your screen.
Responsive well probably look at Office as product line... The codebase / apps themselves are all different per say in terms of actual code but the philosophy is sound - "The experience stays the same as you make your way across multiple platforms/devices"
Imho people want to write code use everywhere dream and after years and years of watching these solutions crash and burn, simply put its a rare thing to find in the wild.
Only closest Rendering pipeline that's been successful in pulling off 3D/2D would be Unity3D ... even HTML5 your mileage varies in experience between breadth vs depth engagement ...
just rephrasing the prev. answer...
fluid design = the webpage looks at your client window size in pixels and continuously tries to fit the elements so they look good on the screen (for example if there are three divs you would try to arrange them equally spaced)
responsive = the webpage looks at your screen size (is it a mobile screen? or a tablet or a PC sized browser window? ) I will use trigger points at different size values and display a different content and layout at each trigger point.
