2

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?

Improve this question
7
  • Take a look at fluid grid systems in popular frameworks such as Bootstrap or Zurb; there are ways to make fluid form layouts behave properly.
    – Joshua Barron
    Sep 16, 2013 at 14:46
  • How wide is your content? You imply that the viewport you're accounting for is 1024px, but is your content taking up the entire horizontal space (minus a bit of margins)?
    – cimmanon
    Sep 16, 2013 at 15:25
  • @cimmanon Well that's exactly the problem. Some pages really profit from a bigger viewport while others really don't need it since the content just isn't that wide
    – horen
    Sep 17, 2013 at 7:07
  • Do you have any concrete examples? Outside of an oversized spreadsheet, I have a hard time imagining content that benefits from being 1024px wide (or more).
    – cimmanon
    Sep 17, 2013 at 14:03
  • @cimmanon Graphs look nicer on a wide screen as well as my dashboard with 3 columns. And I have some tables with a lot of content (columns) as well that work better on a big screen.
    – horen
    Sep 17, 2013 at 15:40

2 Answers 2

Reset to default
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 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.

Improve this answer
0

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/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.