2. 1 INTRODUCTION
2 HTML
3 TABLES
4 FORMS
5 HTTP
6 CSS
7 CSS FRAMEWORKS
8 DIGITAL MEDIA
2 9 USABILITY
3. The Problem with CSS
Most web design is based around two-dimensional
(2D) grids.
Unfortunately, CSS was not designed to describe 2D
grids.
Rather, CSS assumes that every page will be made up
of a vertical stack of blocks, piled one on top of
another.
Rachek Andrew & Kevin Yank, Everything you know about CSS is wrong (Sitepoint, 2008).
4. 1D 2D
1-D vs 2-D Layouts
Rachek Andrew & Kevin Yank, Everything you know about CSS is wrong (Sitepoint, 2008).
5. CSS Layout Techniques
In d t
I order to coerce a vertical stack of block elements into a
ti l t k f bl k l t i t
grid-like layout, designers have used absolute positioning or
floating to force blocks to sit alongside each other.
Problems
Complex!!
Browser compatibility
B ibili
Clearing floats
Footers
Faux columns required
Nesting columns is very tricky
Source order
S d
In other words, CSS layouts are a total hack!
6. Layout Using Tables
That is why HTML tables seem to be such a
“natural” way of doing layout.
It is similar to the way traditional print design works
(i.e., using grids)
http://www.savorthesuccess.com
http://www.ideabook.com/tutorials/
7. CSS Table Layout Mode
We can achieve 2D layouts without the complexity
of positioning and floats using CSS Table Layout
Mode.
Only works in modern browsers that support CSS 2.1
(IE8, FF 3, Safari 4, Chrome).
9. Aren t
Aren’t Tables for Layout Pure Evil?
Using HTML tables for layout is wrong
Here we are using CSS table display mode to
g p y
describe how to display/present content.
Using CSS to describe presentation is pure goodness!
10. Why aren’t we using this?
aren t
Still too many people using IE7 and below.
Perhaps by 2013 we will all be able to use CSS table
layout.
http://stats.wikimedia.org/wikimedia/squids/SquidReportClients.htm
11. CSS 3 Grids
CSS 3 h another table-less solution to grid layout
has h bl l l i id l
called grid positioning that will be even more
p
powerful.
Currently only support in FF 3.5, Safari 4, Chrome
body {
grid‐columns: 10em,1em,10em,1em,10em,1em,10em,1em,10em,1em,10em, 1em,10em;
}
#promo {
position: absolute;
left: 1gr;
width: 4gr;
width: 4gr;
}
Rachek Andrew & Kevin Yank, Everything you know about CSS is wrong (Sitepoint, 2008).
12. Why Grids?
Closer in approach to print-design.
Grids are an easy way of achieving design
y y g g
consistency.
15. CSS Frameworks to the Rescue
While IE 6+7 still has a non-trivial marketshare, we
can use CSS Frameworks as a way to more easily
create complex CSS-based layouts.
Still
use the hacks of floats and positioning, but
someone else has done all the hard work for you.
16. Common CSS Frameworks
960 G id System
Grid S t
Developers construct layouts using a grid system based on a fixed width
of 960 pixels.
There are two variants: 12 and 16 columns.
6
Blueprint
Originally a Google project.
g y g p j
Uses a grid of 24 columns, 950px fixed width.
YUI Grids
A Y h project. D
Yahoo j t Doesn’t use grid metaphor.
’t id t h
Supports fluid-width (100%) layouts as well as preset fixed-width
layouts at 750px, 950px, and 974px.
Six
S preset templates, and the ability to stack and nest subdivided
l d h bl k d bd d d
regions of two, three, or four columns.
There are dozens of others.
17. Drawbacks to CSS Frameworks
Typically limited to fixed sizes provided by
framework.
Ultimately, you are adding presentation back into
y
your markup.p
E.g.,if fixed width of 960 pixels and you have the
following markup: <div class span 4 then really
div class=“span-4”>
not much difference from the old table layout (except
p)
less markup).
18. Why 950px, 960px, or 974px?
960 is evenly divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30,
32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480.
(i.e.,
(i e many grid possibilities)
possibilities).
http://www.subtraction.com/pics/0703/grids_are_good.pdf
25. Examples
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/text.css" /> 960 Grid CSS files http://960.gs/
<link rel="stylesheet" href="css/960.css" />
<div class="container_12"> Indicates 12 column grid
<div class="grid_12"><p>940px</p></div> First row will span 12 grids
<div class="clear"></div> Each row must be terminated with this clear !!
<div class="grid_6"><p>460px</p></div> Second row contains 2 divs that each span 6 grids
<div class="grid_6"><p>460px</p></div>
<div class="clear"></div> Each row must be terminated with this clear !!
</div>