CSS Layout Techniques

CSS Layout Techniques
Current practices of web page
layout development
http://definitelysimple.com 1

Goals
• Understand different layout terminology
• Differentiate various overlapping terms
– Layout vs. design
– Implementation vs. approach
• Glance at CSS3 specification
• Choosing appropriate layout strategy

About
• DS – Definitely Simple
– Articles and case studies
– Everyday subjects
• Computers, economics, politics, sociology
– Goal of simplicity and elegance
• Visit at
– http://definitelysimple.com

Web page layouts
• Need
– Web evolved from simple text-based
document serving to complex image and
other multimedia serving sites
– Web transitioned from web sites to web apps

Complexity
Time1990 2013
HTML serving
pages with
only text
Images are
served along
with text
Multimedia
support &
plugins
Websites
turning web
apps
For each feature added to
HTML, the layout complexity
goes up exponentially

Early efforts
• No CSS to manage complexity
• Multicolumn layouts with Tables
– HTML <table> tag with border=“0”
<tr><td>col 1 row 1</td> <td>col 2 row 1</td></tr>
<tr><td>col 1 row 2</td></tr>

Problems with <table>
• Semantic violations
– Mixing markup with presentation
• Hard to maintain
• Screen reader issues
• Performance problem
– <table> needs more browser reflows

Rise of CSS
• Separate markup (HTML) from
presentation (styling)
– CSS float and clear
– CSS display: block, inline, inline-block
• Solved problems of <table> tag

CSS Evolution
• Evolved from simple styling to medium for
laying out complex web page layouts
• Different approaches and philosophies
emerged for CSS layouts

CSS
Layouts

Classic Modern
CSS
Layouts

Classic Modern
Absolute
Fixed
width
CSS
Layouts

Absolute layout
• Very first layouts
– Developer moved from print media to web
– Units of measurement (inch and cm)
– Very rigid and inflexible
– Rarely used for web design
– Useful for creating printer-friendly style sheets

Classic Modern
Absolute
Fixed
width
CSS
Layouts

Fixed width layout
• Popular and very widely used
– Width of overall layout is set to standard
number like 980px, 960px or 760px;
– Fit in the middle when viewed on larger screen
– Horizontal scroll bar when viewed on smaller
screen
– Uses CSS unit of pixels (px)

Fixed width layout
Equal margin
on both sides
when viewed
on larger
screen

Fixed width layout
No margin;
Content fits
perfectly on the
screen when
resolution of page
matches with that
of screen

Fixed width layout
Horizontal scroll bar
when page is viewed
on smaller
resolution screen
than that of web
page

Fixed width layout
Possible to create
extremely complex
design layouts

Fixed width layout
• Advantages
– Pixel perfection (create very complex layouts)
– Easier to develop and test
• Disadvantages
– Very annoying/little usability on small devices
– Zoom & text resize not handled property
– World is migrating towards mobile

Classic Modern
Absolute ElasticFluid
Fixed
width
Adaptive
Responsi
ve
CSS
Layouts

Modern layouts
• Also known as “Relative layouts”
– No fixed width for elements
– Works on both large and small screen devices
– Use relative CSS units
• Rem, ems, percentages, max/min values
– Recent layouts use CSS3 media queries

Classic Modern
Fixed
width
Adaptive
Responsi
ve
CSS
Layouts

Fluid layout
• Same as “liquid layout”
– Percentage based layouts – Size of element is
based on % of its container’s size
– Elements always occupy same space
regardless of screen size
– Better use of screen estate
• Foundation for other modern layouts

Fluid layout
Notice the relative
proportions
between various
column

Fluid layout
On smaller
resolutions
proportions have
reduced

Fluid layout
• Advantages
– Better at handling white spaces
– Easier than other modern layouts
• Disadvantage
– Hampered usability at very low & high
resolutions; needs to set limit with max/min
– Provides only size experience to users; no real
shift in user experience

Classic Modern
Fixed
width
Adaptive
Responsi
ve
CSS
Layouts

Elastic layout
• Uses CSS “em” unit for measurement
– Layout adjusts itself depending upon the
content’s need
– Width is determined by size of the text set in
user’s browser
– Not widely used as compared to others
– Ideal for text-heavy (content) web pages

Elastic layout
Notice the font/text
size when elastic
layout is viewed on
large screen

Elastic layout
The text size
automatically adjusts
to best possible
reading experience
when viewed on
smaller resolution
screen

Elastic layout
• Advantages
– Highest content accessibility
– Better typographic control
– Renders good on small and big screen
• Disadvantages
– Little use beyond text-heavy web
– More difficult to develop & maintain

Classic Modern
Fixed
width
Adaptive
Responsi
ve
CSS
Layouts

Adaptive layout
• Targets specific screen resolutions
– Selecting most common resolutions
• Uses either fluid or fixed layout
– Also uses CSS3 media queries if required
• Device is served the layout with the closest
possible match

Responsive layout
• One step beyond adaptive layout
– No specific screen resolution
– Entire page is free to flow and consume space
– Mostly uses fluid layouts ideology
• Wherever page layout break
– Uses CSS3 media queries to solve the problem
– Uses flexible images

Adaptive vs. responsive layout
Adaptive
• Predefined screen
resolution sets
• Can use both fixed/fluid
layouts internally
• Almost same end result
as responsive layout
• Less development efforts
Responsive
• No predefined screen
resolution sets
• Internally, uses fluid
layouts only
• Theoretically, better end
result than adaptive
• More development efforts

Adaptive/responsive example
Breakpoint 1:
Responsive
layout when
viewed on large
screen (1200px)

Breakpoint 2:
Responsive layout
when viewed on
normal screen
(960px)

Breakpoint 3:
Responsive
layout when
viewed on tablet
screen (870px)
Breakpoint 4:
Responsive
layout when
viewed on
mobile screen
(360px)

Classic Modern
Fixed
width
Adaptive
Responsi
ve
CSS
Layouts

Modern layout – retrospective
• Modern layout is not a formally recognized
word or layout strategy
• It is to distinguish between traditional and
newer layout techniques
• By just looking at a page, it is difficult to tell
which approach has been followed since all
the techniques try for same end result

• All of them strives for same goal
– Serving the users with quality user experience
– Serving the same webpage that can work
seamlessly & optimally across as many devices
as possible without compromising on user
experience

• Some assume fluid and elastic are base
layouts helping as a foundation for
adaptive and responsive layouts
• While others tend to keep all the terms
separate and avoid possible overlap

• However one thing governs everything
– How people are consuming content
– How rapidly technology is moving from
traditional systems to modern devices likes
mobiles, tables, glass, etc.

MOVING TO A BIGGER WORLD
Layouts are just one part of yet another bigger universe called as
“design philosophy”

Layout is not design
• Adaptive layout is not Adaptive Web
Design (AWD)
• Responsive layout is not Responsive Web
Design (RWD)
• Layout is not design

RWD – Responsive web design
• RWD is web design approach
• RWD goes beyond responsive layout
• Describes few design guidelines
• Term coined by Ethan Marcotte
• Often accompanied by Mobile-first
approach

RWD – Responsive web design
• Few possible disadvantages
– Performance issues as all devices receive all
markup which maybe unnecessary
– More development & testing effort
– No pixel perfect control over layout
– Loads all the resources by default on client
computer

AWD – Adaptive web design
• Builds on top of RWD
• Incorporate Progressive Enhancement
• Uses JavaScript to achieve the goal
• Extended into two verticals
– Client side adaptive
– Server side adaptive (often, needs to manage multiple
templates for same resource)

• On client side adaptive
– Follows streamlined, layered approach of
progressive enhancement (PE)
• 1st: PE with HTML
• 2nd: PE with CSS
• 3rd: PE with JavaScript
• 4th: PE with Accessibility

• Few possible disadvantages
– Learning curve for developers as they need to
learn JavaScript
– Maintaining each layer of functionality can be a
problem in a long run
– May or may not have pixel perfect control
depending on layout used
– Server side adaptive introduces other new issues

Points to notes
• Four terms
– Adaptive layout
– Responsive layout
– Responsive web design
– Adaptive web design
• All four are different terms & should not
be confused.

Responsive & Adaptive
Layouts
• Responsive layout is more
complex & robust than
adaptive layout
• Responsive layout targets
more wider range than
adaptive layout
• Responsive layout needs
more development effort
Web design approach
• AWD builds on top of
RWD and addresses even
more concerns
• RWD is concerned about
page design while AWD
goes beyond page design
to include best possible
UX and IXD

Adaptive design as umbrella
*Source: http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php

Possible conflicts
• There are few variations
– As opposite, some consider AWD to be a part
of RWD umbrella
– Some consider Adaptive layout and AWD as
one and the same thing
– Some consider any approach that leads to
responsive pages as RWD

But what matters is the end result;
And…

End justifies means
• Both AWD and RWD strive for one
ultimate goal:
One Web

Future of layouts
• So far
– All layouts used various means to flexibility
– Relative measurements
– Display block, inline-blocks, etc.
– CSS float property
– CSS3 media quires
• However, there is more to CSS3…

Future of layouts
• New CSS3 features to create better layouts
– Multi-column layout module
– CSS3 regions module
– Flexible box layout module
– Grid template layout module
– Box alignment module
– Exclusions and shape module

Future of layouts
• However
– All new CSS3 modules are coding techniques
to create page layouts
– Web design approach and coding techniques
are two different things
– One is theory while other is practical
– These new modules may give rise new
approaches and theories

Harshal Patil
@softHarsh
http://definitelysimple.com
http://www.linkedin.com/in/hapatil
Author:

Further reading & references
• Books
– Flexible web design
• By Zoe Gillenwater
– Adaptive web design
• Aaron Gustafson
– Responsive web design
• Ethan Marcotte

Further reading & references
• http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-
elastic-layout-whats-the-right-one-for-you/
• http://www.w3.org/TR/mobile-bp/
• http://www.netmagazine.com/features/pros-guide-css-layouts
• http://sixrevisions.com/web_design/a-guide-on-layout-types-in-web-
design/
• http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-
difference.php
• http://www.zeldman.com/2011/07/06/responsive-design-i-dont-think-
that-word-means-what-you-think-it-means/
• www.webmonkey.com/2013/05/the-two-flavors-of-a-one-web-
approach-responsive-vs-adaptive/

CSS Layout Techniques

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à CSS Layout Techniques

Similaire à CSS Layout Techniques (20)

Dernier

Dernier (20)

CSS Layout Techniques