Web Design: Fluid vs. Fixed-Fluid/Responsive...? | Hacker News Reader

Web Design: Fluid vs. Fixed-Fluid/Responsive...?

10 pointsjhacks3 comments

So, I'm currently trying to decide the best way to approach this here. I am currently designing my website to be responsive to varying screen sizes. However, while I started off using a fluid grid, I didn't like it much. For instance, in too many instances, proportions were thrown off when the width would change but not the height.

I opted for remaining responsive, but just using a fixed grid/layout within each parameter. i.e. cell phone, tablet, ultrabook, desktop, etc. I can always refining it more and more (although could become a pain managing too many screen sizes). However, since I like white space anyway, I just design at the smaller end of each screen size range and then just let white space / gutters grow until hitting the top of the range. When I hit the new breaking point, I change the grid, I'll adjust again.

Is this common practice? Or are just sticking with more fluid grids still recommended?

Any advice?

KNOW YOUR TARGET AUDIENCE.

Really, this is the best way to start to figure out what's needed. Flex layouts take a lot of work and a lot of times add hours to a project. If the audience for your website doesn't tend to use mobile devices... then don't optimize for mobile.

I try to extend this all the way down to CSS Resets. Only use what you'll need.

Even if you get some users who are using mobile devices, mobile web browsers are remarkably modern. Chrome and Safari have mobile counterparts that will help hammer down cross device compatibility (although checking on the actual system is always recommended).

Most of the time, I design with an averaged screen size in mind. I tend to do fixed layouts more than responsive or fluid. I make sure that it's not breaking on other devices, but I tend not to go out of my way to design for them if its not needed.

Although we all want to avoid unnecessary code, etc, I think you need to do what best serves the user experience and still satisfies your aesthetic for the site. I'm in a similar situation. I want to follow good practices, but ultimately I want the UX to be optimal for the user's device/browser-proportions.

So I'm currently planning on several designs targeted to specific devices optimizing the experience for each. So, we'd have a small device design (phones), a larger mobile design (tablets/small-desktops), and even larger (desktops). Within each, we have to accommodate for a range of resolutions/orientations, but overall we want to provide the experience that's best for how the user is visiting our site.

Yes, using fixed widths with media queries is a fairly common approach (sometimes termed adaptive web design rather than responsive web design). If you feel that the design needs more control (over proportions, etc) then it's sometimes a good trade-off but it's a decision I'd make on a project by project basis.

Reply on news.ycombinator.com