How to make fluid web site consistent

by horen   Last Updated August 13, 2019 18:16 PM - source

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) bigger browsers than 1024px in width (currently minimum supported browser width). It just works well for the dashboard and statistics and tables with a lot of content - so I'm very happy with this part.

On the other side though I run into problems with sub-pages that contain less or condensed information. For example, input forms don't make any sense stretched all the way from left to right. Either the text input gets to wide or the input label moves too far away.

So I could just leave those pages as they are with a 960px width which doesn't look bad on its own but kind of breaks the user experience with other pages. Especially on one sub-pages with multiple tabs it just looks weird that the content width jumps from one tab to the next.

So here are my questions:
Is there a good way to get forms into a fluid layout?
Should I just mix fluid and fixed layout?
Is there a better solution?



Answers 2


You can use media queries in CSS to set the min and max width.

This could then allow you to produce a reusable grid for smaller elements and still have them behave responsively.

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

August
August
September 16, 2013 18:31 PM

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 being too wide to be read comfortably. There have been many studies regarding line length, and the long lines of typical liquid designs on a very wide viewport cause eye fatigue. Using media queries reduces this problem, as now you're free to say viewports X wide are 1-colum, viewports Y wide are 2-column, etc. to prevent your content from sprawling all over the place.

Note, however, that writing media queries based around "standard devices" is like painting yourself into a corner. Plan for any sized device, you never know what is coming out next month or next year.

Alternatives

Media queries are excellent for making rules about how your layout should adapt to the size of the viewport, but they're weak when it comes to adjusting content layout relative to the size of its parent. There are 2 very useful CSS modules on the horizon (they've been around for a while in most browsers, but IE doesn't support either until v10) that let you be responsive without media queries:

I have a collection of demos of them in action (many are solutions for SO questions): CodePen Naturally Responsive Collection

Forms that Fit

Forms are inherently responsive, as all form controls are inline. The only way to make them non-responsive would be to mark them up (eg. via tables)/style them that way.

One thing to be very aware of is how forms behave on many handheld devices (eg. phones). When focus is brought to an input or textarea element, the device zooms in to fit around that element (and if the device has a touch keyboard, the keyboard will take up the bottom half of the screen). If your labels are to the left, they might not be visible to the user while they're trying to fill out the form.

cimmanon
cimmanon
September 16, 2013 21:35 PM

Related Questions



Page-specific responsive breakpoints

Updated March 26, 2015 14:05 PM