Elastic Design. A note from the editors: While accurate in its day, some of the techniques and behaviors described in this article have become out-dated, especially when discussing the behavior of specific browsers. It can be difficult to move from a static, pixel-based design approach to an elastic, relative method. Properly implemented, however, elastic design can be a viable option that enhances usability and accessibility without mandating design sacrifices. Article Continues Below A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size.
Because font sizes vary, the em is a relative unit that responds to users’ text-size preferences. It is perhaps easier to adopt a print-like, static approach to design because there is less to think about when dimensions don’t change. You may want your website to display in a specific way, but your users may want it another way. Elastic text#section2 Text is the most obvious candiate for elasticity. The problem with ems#section3.
Fixed vs. Fluid vs. Elastic Layout: What's The Right One For You? - Smashing Coding. Advertisement The problem has boggled the minds of Web designers for years: fixed, fluid, elastic or a hybrid layout design? Each option has its benefits and disadvantages. But the final decision depends so much on usability that it is not one to be made lightly. So, with all the confusion, is there a right decision? By considering a few factors and properly setting up the final design, you can end up with a successful layout design that reaps all the benefits. This article discusses the pros and cons of each type of layout. Also consider our previous articles: Flexible Layouts: Challenge For The Future1, which discusses the challenges of flexible layouts for the future.Applying Divine Proportion To Your Web Designs2, which explains the process of applying divine proportion to fixed layouts, but concludes with applying the Rule of Thirds to fluid layouts.
Why all the debate? 1. Fixed Website Layouts The image above shows the general outline of a fixed-width website layout. 2. Pros Cons 3. 4. Pros And Cons Of 6 CSS Layout Patterns: Part 2. Last time we began talking about some different css layout patterns. We looked at fixed-width, fluid/liquid, elastic, and hybrid designs. Today we’ll look at the 2 layouts we didn’t include last time, responsive, and fluid/elastic grids. I’ll then offer some additional thoughts about which layout you might choose for a project. 6 CSS Layouts As a reminder and to once again make sure we’re talking about the same thing, here are the quick definitions for each layout.
Fixed-Width — Overall width is fixed with absolute measurements (px). Responsive Layouts The idea behind responsive layouts is to have the design respond to various conditions that your visitor controls. In order to develop a responsive layout you need to use either browser detection or media queries to serve different stylesheets to different device, browser, or screen resolution.
Pros: Cons: Responsive design really goes further than layout alone. Fluid/Elastic Grids Thoughts About Which Layout To Use Which layout should you use? Pros And Cons Of 6 CSS Layout Patterns: Part 1. There are a number of css layout patterns you can use when developing a website. Your design could be of fixed-width or it could be fluid or elastic. It might even be a hybrid layout or be responsive to different devices. What are the pros and cons of some of the common css layouts available to us? Are some layouts preferred over others? Note: While you can’t always tell from the screenshots throughout this post I’ve tried to match the screenshot with the layout described below it. You can click through on any of the images to see the site in question and then resize your browser of font size to see how the layouts react. 6 CSS Layouts You’re likely familiar with all of the css layouts below, but to make sure we’re on the same page, let’s quickly define each.
Fixed-Width — Overall width is fixed with absolute measurements (px). Pay attention to the difference between fluid/liquid layouts and elastic layouts. Fixed-Width Layouts Fixed-width layouts are static. Pros: Cons: Elastic Layouts Summary. How To Develop Elastic Grid Layouts In CSS. Flexible layouts are created by using relative measurements as opposed to absolute measurements. The question is relative to what? With elastic layouts the measurements are set relative to something internal to the design, usually the size of the type. We previously talked about fluid layouts, which I defined as using measurements relative to the browser window. Moving from a fluid layout to an elastic layout is actually quite simple. Before getting to the code let me say the definitions above aren’t necessarily used by all.
Flexible layout — any layout that uses relative measurements to allow the layout to resize under different conditionsFluid layouts — layouts with measurements relative to the browser windowElastic layouts — layouts with measurements relative to something internal to the design such as the size of the type Both fluid and elastic layouts are flexible.
The HTML You can alternately use the body tag as the container. The CSS In many ways this is the beauty of css. Fluid Grids. Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Article Continues Below Over the past few years, this sort of thinking has become more common. Thanks to the advocacy of Mark Boulton, Khoi Vinh, and others, we’ve seen a resurgence of interest in the typographic grid, and how to use it on the web.
However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window. Minimum screen resolution: a little white lie#section1 Instead of exploring the benefits of flexible web design, we rely on a little white lie: “minimum screen resolution.” As it turns out, it’s simply a matter of context. With ems, it’s easily done.