Advanced CSS : Layout
BY SYEDA ROSHNI AHMED
Outline
•Approaches to CSS Layout
•Responsive Design
•CSS Frameworks
Approaches to CSS Layout
•One of the main problems faced by web designers
is that the size of the screen used to view the page
can vary quite a bit.
• 21-inch wide screen monitor that can display 1920
x 1080 pixels
• older iPhone with a 3.5 screen and a resolution
of 320x480 px
•Satisfying both users can be difficult; the approach
to take for one type of site content might not work
Approaches to CSS Layout
•Most designers take one of two basic
approaches to dealing with the problems of
screen size.
•Fixed Layout
•Liquid Layout
•Hybrid Layout
Fixed Layout
•In a fixed layout, the basic width of the design is
set by the designer, typically corresponding to an
“ideal” width based on a “typical” monitor
resolution
•The advantage of a fixed layout is that it is easier
to produce and generally has a predictable visual
result.
Fixed Layout
•Fixed layouts have drawbacks.
•For larger screens, there may be an
excessive amount of blank space to the
left and/or right of the content.
•It is also optimized for typical desktop
monitors;however, as more and more user
visits are happening via smaller mobile
devices
Fixed Layout
Problem with fixed layouts
Liquid Layout
•In a liquid layout (also called a fluid
layout) widths are not
•specified using pixels, but percentage values.
•Advantage:
•adapts to different browser sizes
Liquid Layout
•Disadvantages:
•Liquid layouts can be more difficult to
create because some elements, such as
images, have fixed pixel sizes
•the line length (which is an important
contributing factor to readability) may
become too long or too short
Liquid Layout
Hybrid Layout
•A hybrid layout combines pixel and percentage
measurements.
• Fixed pixel measurements might make sense for a
sidebar column containing mainly graphic
advertising images that must always be displayed
and which always are the same width.
• percentages would make more sense for the main
content or navigation areas, with perhaps min
and max size limits in pixels set for the
navigation areas time
Responsive design
•In a responsive design, the page “responds” to
changes in the browser size that go beyond the
width scaling of a liquid layout
•We had problems with liquid layout for images
•Images will be scaled down
• Navigation elements will be replaced as the
Responsive Design
•4 important key components to make responsive
design work
1. Liquid layouts.
2. Scaling images to viewport size.
3. Setting viewports via the <meta> tag
4. Customizing the css for different viewports using
media queries.
• Elements width specified in percentage.
Setting Viewport
•Surprised to see how the web page was scaled to fit
into the small screen of the browser.
•The way this works is the mobile browser renders
the page on a canvas called the viewport.
•On iphones,- the viewport width is 980 px
•Viewport is scaled to fit the current width of the any
Setting Viewport
Setting Veiwpoint
•The mobile safari browser introduced the viewport
meta tag as a way for developers to control the size
of that initial viewport.
•<head><meta name=“viewport”
content=“width-device-width”/>(Setting the
viewport)
•No need of any scaling and it makes the viewport
as many pixels wide as device screen width.
Viewpoint
•The viewport(figure- shrank) but still
cropped the content
•The viewport is only one step in creating a
responsive design
•There needs to be a way to transform the look
of the site for the smaller screen of the mobile
device, which can be done by using media
queries.
Media Queries
•The other key component of responsive
design is CSS media queries
•A media query is a way to apply style rules
based on the medium that is displaying the
file
•Syntax of media queries
Media Queries
Media Expression
•These queries are Boolean expressions and
can be added to your css file or to the link
element to conditionally use a different
external CSS file based .
•Below table shows the list of features you can
use with media queries.
Media Expression
