Hot answers tagged

58

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 ...


12

The answer you are looking for is the difference between responsive and adaptive web design. Simply said, responsive is where you can resize your browser window and the website/app resizes with it. Adaptive is exactly as you said: designed for a couple of viewports, so maybe for an iPhone, a tablet, and 15" computer screen. However, adaptive might not be ...


9

Check your assumptions There are a few assumptions in your question that require validation (and I assure you that the ecomm giants are testing). Most people have big monitors now: Maybe. But what about their viewport? And who might you leave out when your target is everyone (like Amazon)? Older users often have their browser zoomed and don't even realize ...


8

Responsive Web Design is a term coined by Ethan Marcotte to describe techniques that use CSS media queries, a fluid grid, and other techniques to adapt a web page to various screen resolutions (usually based on width breakpoints). Typically there will be 3-4 breakpoints as you describe (mobile, tablet, desktop, extra large desktop) in a given design, but ...


7

This is going to depend on what content is within each of those areas, and how big a priority you want to give those items. However a rule I use with Responsive Design is based on screen widths. Therefore the first step is to determine which content elements take up the whole screen width. In your example there are two elements taking up the whole width (...


7

Majority of visitors have 1366px or wider screens But note that screen size isn't necessarily browser viewport size There is a separate version for mobile website (so no need to go responsive) What about tablet users? Do they get the mobile version? Or the full version? It's not necessarily bad they get the mobile, but if the mobile doesn't scale up ...


6

If it's not a long form, the conventional placement for a submit button is below the form, left aligned. Reference: Primary & Secondary Actions in Web Forms


6

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 ...


5

The page doesn't have to be solid! Consistency of image size forces consistent height to each section of content and this makes the content more scannable. It's easier to scan down a group of chunks of similar size. Even more so when scrolling down where you can scroll at consistent speed without slowing down and speeding up. Imagine scanning down Twitter ...


5

Towards the bottom-left end of the form, outside the bounding block. It is because, users scan from left-to-right and top-to-bottom. Placing anything on the bottom-left end of the form block will be noticeable immediately. An input box placed at the bottom-left doesn't need to be starkly visible and a button using similar form-style will be seen, but if ...


3

Take a look at the image guidelines for Medium- which lists a minimum of 1200px and recommends 1400px. This falls in line with the statistics presented in sources like StatCounter and W3Schools. There's also interesting tidbits on how they scale and crop in order to support a responsive layout. Larger screens may be subjected to upscaled images with loss of ...


3

There may be many reason to prefer a fixed layout instead of a responsive or a fluid one. This answer (in my opinion) can not be exhaustive unless it's applied to a specific case: I do not think there is a best solution that should always be used. You're asking about fluid layout (built using percentage of width) but there are also: responsive layout (built ...


3

The main problem I see is that you have a full-width browser, but content that wasn't designed to be displayed as such. Lookchin's idea to make your site responsive may help when viewed at full width. The content your displaying now looks very tight. There's no reason why you can't give each content item some breathing room. Zendesk's new responsive ...


3

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 ...


2

When reading something you sub-consciously attach meaning to font size, colour and weight. If you make the font size larger for smaller posts, you are in effect saying that they are in some way different from those with smaller fonts (usually read as more important). If this is your intention, then great, but be aware of the secondary effects of this ...


2

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 ...


2

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 ...


2

I agree with you that forcing the user to scroll back to the top to read the next column is bad. Even with the 'back to top' button, it is an interruption where the user has to: Find the button Move their mouse to it Click it When it goes back to the top, find the start of the second column with his eye. Compare this with one column where the user ...


2

In the wake of mobile devices and wider support for media queries, liquid (or fluid) designs have largely become a thing of the past in favor of responsive design (refactoring your layout to fit a multitude of viewport sizes). Why Responsive? One of the major negative points against liquid designs in terms of user experience is that the content ends up ...


2

Full-width and fluid are two distinct things. If you have a page of text, you would not want it any wider than a comfortable width for reading (52-68 characters per line, including spaces etc). In such a case, white-space helps to give a clean, uncluttered feel and avoids distracting the reader away from the text. If you have an image gallery, ideally you ...


2

I can relate to this, for a long time we've been pushing to go at least partially responsive for our e-commerce website. The main reason I believe is conversions. the fear of something that already works well will be broken in the process. While Responsive is the trend and probably here to stay with the increasing amount of devices and and resolutions, in ...


2

Do it Breakpoints serve at the pleasure of content Far too many "responsive" sites are designed to fixed breakpoints, and fail to size smoothly for screen widths in between the breakpoints. At best this is brittle responsive design and at worst it's barely responsive at all. Notable offenses include column layouts and images which size OK at fixed ...


1

Both design looks legit to me. I prefer the first one because: It looks cleaner. It provides information on what to expect after I signed up. It also reduces the possibility of user entering garbage information if the email field is visible. Form fields are distracting, hide it if they are not needed or optional. In example 2, the email field has 2 ...


1

1) A grid system can be helpful for alignment and pleasant balance of content, but I'd also pay attention to the OS-specific Human Interface/Design Guidelines (Apple & Android) to determine element size, minimum spacing, common design patterns, and standard placement of typical system functions. Those may or may not cooperate with your chosen grid system....


1

I'm not quite sure if what you're looking for is a pattern (because, according to my knowledge, unfortunately there's no ideal one for this case), I would rather call it a technique (or a set of techniques) of UI/UX design you can use to solve your problem. Make some assumptions on what tabs are for. If they're supposed to categorize contents, then solving ...


1

The problem of responsive design and optimal resolution of web page is old and the old fashioned way of setting the best resolution for your web page so it can be viewed on many monitors with various sizes is to use the average resolution between monitors with different sizes which is 1024 x 768. Example: .warraper { width: 1024px; margin: 0 auto; // ...


1

A fluid design has limits. You can't stretch a column of text, for instance, from 320px to 1120px an have it usable. So, a fluid design is typically for a range--usually desktop screens, and typically consists of a columnar layout where the columns change widths to an extent. To accommodate a greater range of screen sizes you can go the responsive route. ...


1

The answer to your question is: communication. Don't just send files off and expect the other party to know what to do. You need to talk to each other, as with any other process where documents exchange hands. To really solve any problems, the designer should know in advance that this design is expected to be translated to a responsive design, and as such ...


1

As @kontur has already pointed out, there are many considerations when doing this. But if you are looking for a rough but generally workable solution I would consider something like the following. Set the width based on a function of the number of characters in the string, and use a standard word wrap to determine the layout. As a rough example: ...


1

Generally speaking, the way you set your text follows the demands of your application. Without the context you provided, your first example is very much more pleasant to read. However, as you said it is within a UI that contains nodes I can imagine that what you are after is a general space conserving way of presenting text in those nodes. Supposedly, for ...



Only top voted, non community-wiki answers of a minimum length are eligible