Web Design: Fluid vs. Fixed-Fluid/Responsive...?
3 comments
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.
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.
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.
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.
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.
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?