Fluid Design

Kat Giles & Tammy Gray

Quick Overview:

What is XHTML?

• eXtensible HyperText Markup Language
• XHTML is the successor to HTML 4
• It is a mixture of HTML and XML
• It encourages good structure and legacy support in the future

Quick Overview:

What is CSS?

• Cascading Style Sheets
• Describes the presentation of data
• CSS can define almost all aspects of presentation, such as colors, fonts, and positioning

Quick Overview:

Separation of Style & Content

• Increased accessibility
• Promotes usability across different devices
• Ease of maintenance
• Data presentation can be changed quickly
• Example: http://csszengarden.com/
• Plain HTML: http://csszengarden.com/zengarden-sample.html

Design Styles Overview

Static Design

• Also referred to as "fixed", or "ice" design
• Site layout does not change regardless of browser size
• Example

Design Styles Overview

Fluid Design

• Also referred to as "flexible", "scalable", "elastic", or "liquid" design
• Size of site is determined by several factors
  • Dimensions of browser
  • Screen resolution of user
  • Size of content (such as images)
  • Content font size as determined by the user
• Example

Fluid Design Overview

Why is Fluid Design important?

• Sites can adjust in size for a variety of different sized content
• Users can adjust the text size without breaking the site design

Fluid Design Overview

When should you use fluid design?

• Personal preference
• Accessibility & Usability is priority: Adaptable!
  • Browsers have new capabilities for users

Designing Fluid Sites

Screen resolution

• What are pixels?
• Resolution standards
  • 1024x768 vs 800x600
  • Example: Comparison of resolutions → 800x600 1024x768
  • Chart showing browser usage: w3schools
  • Actual viewable area in the browser is smaller than the resolution

Designing Fluid Sites

DIVS

• DIVs are divisions of the content in HTML
• They are used to create structure within the content
• DIVs should be given a unique ID
• Example: Box Model → http://www.redmelon.net/tstme/box_model/

Designing Fluid Sites

Units of measurement

• Percentages
  • Relative to the size of the container
• Pixels
  • Exact measurement

Designing Fluid Sites

Units of measurement

• Em
  • Originally used in typography to measure horizontal widths
  • Used in CSS for vertical and horizontal widths
  • Relative unit that responds to users' text-size preferences.

Designing Fluid Sites

Images

• Not scalable
• Always a set pixel size
• Image backgrounds should tile seamlessly or must be set to no-repeat

Step by Step

• #container
  • Change width: 702px; to width: 90%;
  • Remove height: 402px;
  • Remove background-image, background-position, and background-repeat
  • Add background-color: #8ccce6;
  • border: 1px solid #000;

Step by Step

• #content
  • Change width: 682px; to width: 90%;
  • Remove height: 388px;
• #leftcontent
  • width: 184px; to width: 23%;
• #rightcontent
  • width: 470px; to width: 72%;

Step by Step

• #menu ul li a
  • Remove height: 30px;
  • Remove background-image, background-position, and background-repeat
  • Add background-color: #D95E60;
  • Add border: 1px solid #000;

Step by Step

• #body
  • Change font-size: 14px; to font-size: .9em;
• #h2
  • Change font-size: 20px; to font-size: 1.3em;
• #title
  • Change font-size: 32px; to font-size: 2.4em;

Sliding Doors

A web design technique that applies principles of fluid design to the use of images on a site.

Sliding Doors

Introduction

Currently, CSS only allows one background image to be applied to each HTML element. This is a cause for designers to use static images for site design. Sliding doors utilizes the aspect of CSS that allows layers to "slide" over each other allowing images to be fluid.

Sliding Doors

Benefits

• Allows a designer to use images in a fluid design
• Can prevent a site from breaking when text size is increased

Sliding Doors

How it is a part of fluid design

Fluid design already causes layers to expand and collapse. Sliding Doors is an application of fluidity to images.

Sliding Doors - How to:

Going back to the static site, we have images for our menu and border, but in our fluid site, we have CSS styled tabs and border. In order for us to use an image menu or border on our fluid site, we will need to cut up the image and use sliding doors.

Sliding Doors - How to:

So, the first step would be to cut up your images for the new design. We've already taken care of that for you, so we can move to the actual coding.

We'll work on the menu first then we'll work on the border.

Sliding Doors - How to: Menu

For the menu, we will not have to edit the HTML, only the CSS.

We're going to float our menu list items and add a background that's attached to the top right of the li element.

Sliding Doors - How to: Menu

Sliding Doors - How to: Menu

Sliding Doors - How to: Menu

Sliding Doors - How to: Menu

Sliding Doors - How to: Menu

Now, we're going to go ahead and change the a element to contain the left part of the image. We'll also float these left, add display, and change the padding a little.

Sliding Doors - How to: Menu

Sliding Doors - How to: Menu

Sliding Doors - How to: Border

For our border to work, we need a div for each of the 8 image slices. We'll put one of these slices on the container div, but the rest will have their own. So, we have left, right, bottom for the sides (top is the container div). Then we have topleft, topright, bottomleft, and bottomright for the corners. The corners come after the sides so they will slide over the lower layers and be positioned properly.

Sliding Doors - How to: Border

After the line that says <div id="container"> and before <div id="content">, we are going to add these lines:

Sliding Doors - How to: Border

So, we'll have this:

Sliding Doors - How to: Border

Then, after

And before

Sliding Doors - How to: Border

We will add:

</div></div></div></div>
</div></div></div>

Sliding Doors - How to: Border

So, we'll have this:

Sliding Doors - How to: Border

For the CSS, all we need to do is add one line for each div: a background element, but we are going to change some padding to make it look nice.

To the container div we will add:
background-image: url(../images/border_top.gif);
background-position: top left;
background-repeat: repeat-x;
and remove the border.

Sliding Doors - How to: Border

Sliding Doors - How to: Border

Now, content's left margin will change from 10px to 20px:

Sliding Doors - How to: Border

Also, footer's padding will change from 5px to 7px:

Sliding Doors - How to: Border

Now, we'll just add the new divs that we created in our HTML and add a background property with the corresponding image.

Sliding Doors - How to: Border

#right {
background-image: url(../images/border_right.gif);
background-position: top right;
background-repeat: repeat-y;
}
#left {
background-image: url(../images/border_left.gif);
background-position: top left;
background-repeat: repeat-y;
}

Sliding Doors - How to: Border

#bottom {
background-image: url(../images/border_bottom.gif);
background-position: bottom left;
background-repeat: repeat-x;
}

Sliding Doors - How to: Border

#topright {
background-image: url(../images/topright.gif);
background-position: top right;
background-repeat: no-repeat;
}
#topleft {
background-image: url(../images/topleft.gif);
background-position: top left;
background-repeat: no-repeat;
}

Sliding Doors - How to: Border

#bottomleft {
background-image: url(../images/bottomleft.gif);
background-position: bottom left;
background-repeat: no-repeat;
}
#bottomright {
background-image: url(../images/bottomright.gif);
background-position: bottom right;
background-repeat: no-repeat;
}