Upload
harshal-patil
View
4.399
Download
2
Tags:
Embed Size (px)
DESCRIPTION
This is the presentation I use during my training on web design and development. It discusses current practices of web page layout development with the help of CSS. It also describes the distinction between confusing and often overlapping terms such as adaptive & responsive layout, fluid/relative/liquid/elastic layouts.
Citation preview
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