Tag Info

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

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

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

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

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

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

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

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

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

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

The question can sit in both places. Your not asking the right question. What you should ask yourself is "am I designing for a problem that really doesn't exist?" What I mean by that is. Yes, a user can re-size in a browser. There is a way through code to stop a user from doing that as well. But, before you go through the effort find data to back up what ...

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