background preloader

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? - Smashing Magazine

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? - Smashing Magazine
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? 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? When designing a website layout for a large audience, the designer must consider the following potential differences among visitors: 1. Fixed Website Layouts The image above shows the general outline of a fixed-width website layout. Fluid Website Layouts 2. Pros 3.

Cognitive Disabilities Something to Think About... The concept of cognitive disabilities is extremely broad, and not always well-defined. In loose terms, a person with a cognitive disability has greater difficulty with one or more types of mental tasks than the average person. There are too many types of cognitive disabilities to list here, but we will cover some of the major categories. Most cognitive disabilities have some sort of basis in the biology or physiology of the individual. The connection between a person's biology and mental processes is most obvious in the case of traumatic brain injury and genetic disorders, but even the more subtle cognitive disabilities often have a basis in the structure or chemistry of the brain. A person with profound cognitive disabilities will need assistance with nearly every aspect of daily living. Functional vs. There are at least two ways to classify cognitive disabilities: by functional disability or by clinical disability. Memory Problem-solving Attention

Elastic Design 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. A pixel is an unscalable dot on a computer screen, whereas an em is a square of its font size. 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. To understand how Elastic Design works, we must first take another look at a subject that would seem to be played out: namely, different methods of text sizing. Elastic text#section1 Text is the most obvious candiate for elasticity. Accessibility isn’t all about blindness and screen readers. The problem with ems#section2 Ems would appear to be the unit of choice when it comes to relative text sizing. For example:

15 Key Elements All Top Web Sites Should Have There are a lot of details to consider when designing and developing a web site. In reality, it can seem like an endless list — but if you look carefully you’ll see that there are certain elements that are more important than others, elements that are used consistently among the most successful sites. Once you’ve completed the planning Stage of your website, the rest of the elements fall into broad categories ranging from User Interface Design to Content Creation to actual Development. With that in mind, here are the 15 elements that should always be included on any top web site. 1. First things first… Visual design. “This rule of thumb applies to everything from eCommerce software to a community forum layout.” That’s not to say that every top website needs an incredible visual design — but if a site looks like it hasn’t been updated since 1994, it’s just not going to be associated with other great websites. A clean and simple design is usually all you need. First impressions are key. 2.

5 Simple Ways to Improve Web Typography Type is one of the most-used elements of the web. Think about it. Unless you are YouTube or Flickr, chances are your site visitors are coming for your text content – not the fancy packaging that surrounds it. So why are web designers still treating text like a secondary element? Good typography brings order to the page and increases legibility. It allows people to process information faster. A more scannable, readable site means happy visitors. I could blather on forever about how far typography has come on the web, and how far yet it has to go. But plenty has been said about what web type can’t do. 1. Stupid, but true: No two browsers use the same presentation defaults. Two I recommend: Yahoo’s CSS Reset Stylesheet Eric Meyer’s CSS Reset Stylesheet 2. Measure refers to the length of a single line of type. Additionally, your leading should increase with the length of your Measure. Likewise, if you have a small column such as a sidebar with a short Measure, your leading should be tighter.

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?

Website Planning Overview When you decide to have a website for your business or personal interest there are a number of things you have to consider before you start actually building your website. Website planning has various steps: Purpose of Website Why are your building this site? As you can see, website planning has a number of steps to go through before actually building the website. Start today buy determing the purpose of the website. Responsive Web Design: What It Is and How To Use It - Smashing Magazine Advertisement Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The Concept Of Responsive Web Design Ethan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. “Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Transplant this discipline onto Web design, and we have a similar yet whole new idea.

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. 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. The difference is that fluid layouts are measured relative to something external to the design (browser window), while elastic layouts are measured relative to something internal to the design (font-size). Fixed-Width Layouts

Custom Web Design vs Website Templates As a business owner you are always looking how to save money and make your business profitable. When it comes to creating an online presence for your business, just like your marketing materials and office’s appearance, your website needs to project a professional image. The more professional looking your business appears, the more creditable it looks. Many business owners don’t really understand the difference between having a custom web design done and using website templates. Custom Web Design Many think having a custom web design is too expensive but let’s look at the advantages of hiring a web designer over using a free website template or purchasing one. Benefits of custom web design: Unique design. Other points to take into consideration when deciding if custom web design is for you are: Are you planning to maintain the website yourself? Another idea if considering a custom web design is, just have a template made incorporating the website theme. Website Templates What's next?

Replace GIF with PNG Images - portable network graphics images compress more efficiently than gifs Summary: PNGs are designed to be a more efficient, flexible, and patent-free replacement for GIFs. By replacing your GIFs with PNGs you can speed up your web pages and save bandwidth. The Portable Network Graphics (PNG) format is designed to be a more efficient, flexible, and patent-free replacement for GIFs. PNG versus GIF Compression PNGs uses the deflate compression algorithm typically with a 32KB sliding window. Not surprisingly, images saved as PNGs are typically 10% to 30% smaller than GIFs, although in rare cases they can be larger (5,6). PNG Features PNG has a number of features that make it appealing to the medical and graphics industries. "The place PNG is most commonly used for 24-bit RGB (even final versions) is rendered images such as ray-traced scenes (with minimal use of textures) or mathematical objects; they have artificially smooth color transitions that work well with PNG's filters. For web use, the PNG8 (8-bit) is the form of PNGs that designers use to replace GIFs.

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. 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.” Of course, when I was coding the site, I didn’t have the luxury of writing a diatribe on the evils of fixed-width design. As it turns out, it’s simply a matter of context. Do I really have to thank IE for this? With ems, it’s easily done.

How To Design a Website – The Steps to Designing a Website As with most design projects, the first step when creating a website is to perform research. Some of this research will be done with the client to get an understanding of their needs, and other research will be done to learn more about a specific industry. When meeting with your client, you’ll be looking to discover as much as possible to help you develop an outline for the site and eventually design it. This includes asking about their target audience, goals, creative direction and other variables that may affect what you can offer the client, such as budget and deadline. What to Ask Clients

Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. Becoming responsive#section2 Recently, an emergent discipline called “ responsive architecture .

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. 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. As always if you prefer to skip the explanations below and jump right to the code you can view the demo layouts here. The HTML You can alternately use the body tag as the container. The CSS

Related: