Tag Info

Hot answers tagged

35

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


11

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


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


6

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


5

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


5

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


4

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

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


2

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

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


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

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


1

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


1

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



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