![]() ![]() ![]() However, website builders with out-of-the-box responsive page templates have made complex responsive pages more attainable for those lacking the design chops. Resources: Because of their relative simplicity, fluid designs generally take less time, money, and effort to incorporate from scratch.Mapping your layout with wireframes is helpful in this phase. Otherwise, it’s better to incorporate adaptive and responsive principles. Site content: If your site is relatively light on text, media, and interactive features, you can get away with a purely fluid design on some or all pages.Use metrics to inform where you put your design resources. Audience metrics: Tracking tools like Google Analytics can segment your traffic by desktop, tablet, and mobile.When considering a fluid design, you should think about: These methods don’t have to be used in isolation, either - principles from any of them can be combined to improve the mobile experience. When Should You Use Fluid Design?įluid design isn’t a one-size-fits-all solution, nor is responsive or adaptive design. Though they take more work to implement than purely fluid pages, a responsive design ensures that text, media, and interaction elements look great at any viewing width, especially when simply shrinking page elements width-wise doesn’t guarantee good usability or aesthetics. Responsive designs are the go-to for business websites with content-rich, highly interactive pages. There’s more going on here than just shrinking widths of elements, though that is part of the design as well. Notice the effects of these breakpoints as I shrink the browser window. Its breakpoints are set to 960 px and 560 px. Take the responsive website for the clothing brand Kotn, for example. Therefore, a responsive layout might appear quite different on a desktop versus a tablet versus or a smartphone. Unlike fluid design, responsive websites use breakpoints to rearrange or eliminate elements on a page, instead of simply resizing them. Breakpoints are set in CSS with media queries. A breakpoint is a specific viewport width value (in pixels) that triggers a change in the website layout. Here I’ll be discussing responsive design in the latter sense.Ī responsive design layout is a single layout applied to a web page that reformats and resizes elements based on breakpoints. However, the terminology becomes a bit confusing here - “responsive” can also refer to a particular way of making these adjustments. In this sense, both fluid and adaptive designs are technically “responsive.” You might have heard the term “responsive” to describe any website that adjusts its layout for different devices. Essentially, you’re creating multiple layouts rather than a single dynamic layout, so this approach may not be sustainable for individual website owners to pull off, especially as new devices enter the market. The tradeoff here, perhaps obviously, is that adaptive designs take much more time to make than fluid ones. You don’t need to worry about a poor user experience if you account for any device they use. Whereas fluid designs might look clunky on very large or very small screens, adaptive design lets us make more precise layouts for specific devices. The media query reads the screen size, then selects the best-suited fixed layout from multiple fixed layout options. Web designers achieve adaptive design with media queries, a feature of CSS that detects properties of the user’s device including screen dimensions. So, a website might have a separate layout design for viewing on desktop, tablet, and smartphone. In the adaptive approach, designers create multiple separate website layouts for specific screen widths, the goal being to cater to multiple specific devices. Fluid Designįluid layouts help make websites more usable, but they lack the fine-tuned control of adaptive design. In most cases, it’s worth the effort rather than stick to fixed sizes. You’d be hard-pressed to find it applied to any professional website - designers now usually for fluid, adaptive, and/or responsive sites instead. Unlike those in fluid designs and fluid grids, elements in a fixed layout are set to specific pixel widths, and these widths do not change by device or screen size.įixed design has lost favor among designers for its lack of flexibility and user-friendliness across devices. Layouts that follow a fixed design do not conform to the viewport size. However, fluid design isn’t the only approach - let’s compare it with three other common layout designs: fixed, adaptive, and responsive. Grids are a widespread layout for structuring page content in a digestible way, and applying fluid principles to grids is one way of making grids suitable for different screens. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |