CSS Layout Techniques
-
Upload
harshal-patil -
Category
Design
-
view
4.387 -
download
2
description
Transcript of CSS Layout Techniques
http://definitelysimple.com
CSS Layout Techniques
Current practices of web page
layout development
1
http://definitelysimple.com
Goals
• Understand different layout
terminology
• Differentiate various overlapping
terms
– Layout vs. design
– Implementation vs. approach
• Glance at CSS3 specification
• Choosing appropriate layout strategy 2
http://definitelysimple.com
About
• DS – Definitely Simple
– Articles and case studies
– Everyday subjects• Computers, economics, politics, sociology
– Goal of simplicity and elegance
• Visit at
– http://definitelysimple.com
3
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
4
Text only websites
5
Websites with images
6
Multimedia & web apps
7
http://definitelysimple.com 8
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
http://definitelysimple.com
Early efforts
• No CSS to manage complexity
• Multicolumn layouts with Tables
– HTML <table> tag with border=“0”
9
<tr><td>col 1 row 1</td> <td>col 2 row 1</td></tr>
<tr><td>col 1 row 2</td></tr>
http://definitelysimple.com
Problems with <table>
• Semantic violations
–Mixing markup with presentation
• Hard to maintain
• Screen reader issues
• Performance problem
–<table> needs more browser reflows
10
http://definitelysimple.com
Rise of CSS
• Separate markup (HTML) from
presentation (styling)
– CSS float and clear
– CSS display: block, inline, inline-block
• Solved problems of <table> tag
11
http://definitelysimple.com
CSS Evolution
• Evolved from simple styling to
medium for laying out complex web
page layouts
• Different approaches and
philosophies emerged for CSS
layouts
12
http://definitelysimple.com 13
CSS Layout
s
http://definitelysimple.com 14
Classic Modern
CSS Layout
s
http://definitelysimple.com 15
Classic Modern
Absolute
Fixed width
CSS Layout
s
http://definitelysimple.com 16
Classic Modern
Absolute
Fixed width
CSS Layout
s
http://definitelysimple.com
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
sheets17
http://definitelysimple.com 18
Classic Modern
Absolute
Fixed width
CSS Layout
s
http://definitelysimple.com
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)19
http://definitelysimple.com
Fixed width layout
20
Equal margin on both sides
when viewed on
larger screen
http://definitelysimple.com
Fixed width layout
21
No margin; Content fits
perfectly on the screen when resolution of
page matches with that of
screen
http://definitelysimple.com
Fixed width layout
22
Horizontal scroll bar when page is viewed on smaller resolution screen than that of web
page
http://definitelysimple.com
Fixed width layout
23
Possible to create extremely complex design
layouts
http://definitelysimple.com
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 mobile24
http://definitelysimple.com 25
Classic Modern
Absolute
ElasticFluid
Fixed width
Adaptive
Responsive
CSS Layout
s
http://definitelysimple.com
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
26
http://definitelysimple.com 27
Classic Modern
Absolute
ElasticFluid
Fixed width
Adaptive
Responsive
CSS Layout
s
http://definitelysimple.com
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 layouts28
http://definitelysimple.com
Fluid layout
29
Notice the relative
proportions between various
column
http://definitelysimple.com
Fluid layout
30
On smaller resolutions
proportions have reduced
http://definitelysimple.com
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
31
http://definitelysimple.com 32
Classic Modern
Absolute
ElasticFluid
Fixed width
Adaptive
Responsive
CSS Layout
s
http://definitelysimple.com
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
33
http://definitelysimple.com
Elastic layout
34
Notice the font/text size when elastic
layout is viewed on large screen
http://definitelysimple.com
Elastic layout
35
The text size automatically adjusts to best
possible reading experience when viewed on smaller resolution screen
http://definitelysimple.com
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
36
http://definitelysimple.com 37
Classic Modern
Absolute
ElasticFluid
Fixed width
Adaptive
Responsive
CSS Layout
s
http://definitelysimple.com
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
38
http://definitelysimple.com
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 images39
http://definitelysimple.com
Adaptive vs. responsive layoutAdaptive• 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
efforts40
http://definitelysimple.com
Adaptive/responsive example
41
Breakpoint 1:
Responsive layout when viewed on
large screen (1200px)
http://definitelysimple.com
Adaptive/responsive example
42
Breakpoint 2:Responsive layout when viewed on normal screen
(960px)
http://definitelysimple.com
Adaptive/responsive example
43
Breakpoint 3:
Responsive layout when viewed on
tablet screen (870px)
Breakpoint 4:
Responsive layout when viewed on
mobile screen (360px)
http://definitelysimple.com 44
Classic Modern
Absolute
ElasticFluid
Fixed width
Adaptive
Responsive
CSS Layout
s
http://definitelysimple.com
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
45
http://definitelysimple.com
Modern layout – retrospective• 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 experience46
http://definitelysimple.com
Modern layout – retrospective• 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
47
http://definitelysimple.com
Modern layout – retrospective• 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.
48
http://definitelysimple.com
MOVING TO A BIGGER WORLD
Layouts are just one part of yet another bigger universe
called as “design philosophy”
49
http://definitelysimple.com
Layout is not design
• Adaptive layout is not Adaptive Web
Design (AWD)
• Responsive layout is not Responsive
Web Design (RWD)
• Layout is not design
50
http://definitelysimple.com
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
51
http://definitelysimple.com
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 computer52
http://definitelysimple.com
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)
53
http://definitelysimple.com
AWD – Adaptive web design
• 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
54
http://definitelysimple.com
AWD – Adaptive web design
• 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
issues55
http://definitelysimple.com
Points to notes
• Four terms
– Adaptive layout
– Responsive layout
– Responsive web design
– Adaptive web design
• All four are different terms & should
not be confused.
56
http://definitelysimple.com
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 IXD57
http://definitelysimple.com
Adaptive design as umbrella
58
*Source: http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
http://definitelysimple.com
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
59
http://definitelysimple.com
But what matters is the end result;
And…
60
http://definitelysimple.com
End justifies means
• Both AWD and RWD strive for one
ultimate goal:
One Web
61
http://definitelysimple.com
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…62
http://definitelysimple.com
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 module63
http://definitelysimple.com
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
64
http://definitelysimple.com 65
Harshal Patil
@softHarsh
http://definitelysimple.com
http://
www.linkedin.com/in/hapatil
Author:
http://definitelysimple.com
Further reading & references• Books
– Flexible web design• By Zoe Gillenwater
– Adaptive web design• Aaron Gustafson
– Responsive web design• Ethan Marcotte
66
http://definitelysimple.com
Further reading & references• http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-v
s-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
/
67