Questions tagged [fluid-layout]

Fluid layouts have the ability to resize dynamically with their container. In web design fluid layouts typically resize based on the width of the browser window, with percentage widths specified in the page styling rather than widths fixed in pixels or ems.

Filter by
Sorted by
Tagged with
-2
votes
1answer
78 views

Design/development frameworks equally suitable for both desktop and mobile views

I am quite a new to (or way too old for) a modern HTML, and i had to develop simple UI. I need to support 2 types of screen in it: So UI consists of a menu, and content, for instance, a text with a ...
0
votes
1answer
108 views

Design was made to look perfect at full and fixed width, how to deal with it on wider screens?

A website design has been provided to me which I should turn into a HTML page. But here is the catch: It was made to only look good when taking full width (it has a slideshow, and also a horizontal ...
2
votes
1answer
439 views

Responsive Design: How to balance content with uneven column width to arrange itself in horizontal layout

How can I arrange the data in a horizontal layout so that it manages increase in column widths. How can you manage such situations responsive design. I want to make sure: Something that is ...
3
votes
2answers
2k views

When using a grid for a web app, does a sidebar /side tray fall within the grid or outside of it?

I have had this problem for a while. Designed many applications with a sidebar navigation but have never fully concluded on how to best use it within the grid. A, inside the in grid just included ...
0
votes
1answer
120 views

Website Forms - struggling for space, what is the best option?

I am looking for some input on a dilemma. I need to implement a newsletter signup box and I am struggling to fit it in properly to the space I have. The restrictions are: The left hand column is the ...
16
votes
5answers
6k views

Why do very few e-commerce websites use full-width and fluid layouts?

Looking at some of the top e-commerce websites (Flipkart, Etsy, Amazon, Bestbuy), I could find that only Amazon utilizes a full-width layout, and that too isn't fluid. While I understand the ...
2
votes
1answer
3k views

Grid system for mobile app mockups?

1) For native mobile apps (iOS7, Android etc.), do you guys do mockups using the grid system too? Like maybe, 4-column grid layout for mobile apps? I heard of the grid system being used for responsive ...
3
votes
1answer
117 views

Page-specific responsive breakpoints

I am working on a mobile first project and have run into an issue with the design of one of the screens. The issue is that the content of one screen in particular doesn't work within one of the ...
1
vote
1answer
48 views

Custom Type and Mobile Optimized layout for Email Clients

I'm in need of your help in regards of Email Clients. I'm looking at developing some marketing email templates that have custom fonts and can be mobile optimized. I've been searching around the web ...
0
votes
1answer
335 views

Full width background images

I want to allow users to upload full-width background images that would take up the entire width of the page (with a set height of 500 pixels). However, the issue is, what should be the minimum ...
0
votes
1answer
117 views

Mixing fluid and fixed interfaces? Sometimes we have to. (non web)

At the time I'm redesigning some desktop application. Look at the illustration below. Window on the LEFT side of the illustration should be resizable since it contains table which can have any number ...
3
votes
2answers
994 views

Where should the submit button be for these type of compact forms? (bootstrap 3 module)

So, I'm creating a compact form module for bootstrap 3. The project is opensource on github. This type of forms are good in two ways: It's so 2014 and very user friendly on mobile devices. But Im ...
9
votes
3answers
47k views

Suggest good max-width for fluid width design

My websites uses fluid width design. The CSS looks like this: #wrapper { min-width: 960px; width: 90%; max-width: 1200px; } The min-width must be 960px but I am open to suggestions about ...
2
votes
2answers
795 views

How to make fluid web site consistent

I am redesigning my fixed-width web site to be (more) responsive and ran into some problems: For one, I really like using a fluid width layout since a lot of visitors are using my web site in (much) ...
15
votes
3answers
4k views

What does Responsive Web Design actually mean…? [duplicate]

I've gone through with many articles to understand exact difference between Responsive and Fluid web design. But couldn't make my understanding differentiate between these two. Can anyone help me to ...
-2
votes
1answer
221 views

How to inform a designer to use a grid for responsive CSS? [closed]

How do you share information on a grid with a designer / design process, such that it helps in further coding of CSS of a responsive interface? Do you use any tools in a mock? Do you show blueprints ...
5
votes
2answers
295 views

How to calculate the best width of a text element

I am developing a visual editor where the nodes in the editor can contain text. The size of the text can vary, and can contain any character. Since it is important for me to minimize the size of the ...
3
votes
4answers
1k views

Small form, big page

When you have a huge canvas (think: responsive design) but the content you need to display is very narrow, how do you prevent it from looking awkward? Center it, left-align, find more stuff to fill ...
3
votes
1answer
148 views

Using a column based layout for text content

Text typically falls into a single column on the majority of websites - the user reading down the page. The only scroll motion therefore is downward. I've been experimenting recently with the CSS3 ...
5
votes
2answers
563 views

A modern image gallery: fluid or elastic?

I am new to UX and IA and everything about interface and solution design. I need to do a simple image gallery based on grids. I read about responsive design and media queries. Ok, in wide screen i ...
6
votes
1answer
358 views

How to achieve this layout in a responsive design?

I am currently, working on the below layout and I am finding it difficult to maintain alignment and layout. Below is the layout I want, in blue border.
62
votes
7answers
88k views

What is the exact difference between fluid and responsive design?

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 ...
3
votes
2answers
130 views

Decreasing the display size of posts on the home page, depending on the amount of content

I am developing a RSS news feeder. I want to keep it minimal and just to the point, that is the posts. Some bloggers that post news mainly, sometimes they just write content like "You have to look at ...