The document discusses responsive web design and best practices for building flexible layouts. It defines fixed and fluid layouts, and explains how to design fluid layouts using percentages and ems rather than pixels. It covers principles of responsive web design like using a mobile-first approach and progressive enhancement. Key coding best practices are also outlined, such as proper doctype declaration, external CSS/JS, semantic HTML, and accessibility.

1. Richa Goel

2. Contents
• Fluid layouts
• Difference between fixed and fluid layouts
• Designing fluid layouts for different screen
resolutions
• What is responsive web design
• Principles of responsive web design
• Web page coding best practices

4. Fixed and Fluid Layouts
4

5. Fixed-width and Fluid Layouts
• Fixed-width layout: Web designer defines exact size of
every table element in absolute units such as pixels.
– Gives designer precise control over appearance, but does
not take into account the size of the browser window
• Fluid layout: one or more table elements are sized as a
percentage of the page width
– Page content flows into blank areas as the size of the
browser window increases, but sometimes results in long
lines of text
5

6. Elastic Layouts
• Some designers propose the use of elastic
layouts, in which all measurements are expressed
relative to the default font size using the em unit
• If a user or the designer increases the font
size, the width, height, and location of all of the
other page elements, including images, change to
match
New Perspectives on
HTML and CSS, 6th 6
Edition

7. Floating Elements
• Floating an element takes that element out of
the normal flow of the document and positions it
along the left or right edge of its containing
element
float: position;
7

8. Floating Elements
• Clearing a float
clear: position;
8

9. Flexible Layout: Example 1
<h1>Digital Media Showcase <a href="https://showc.org">
Read more &raquo;</a></h1>
-9 -

10. Flexible Layout: Example 1
start styling it
<style>
body { background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
slight changes:
heavy serifs; grey background
-10 -

11. Flexible Layout: Example 1
traditional styling in px:
h1 { font-size: 24px;
font-style: italic;
font-weight: normal;
}
h1 a { color: #747474;
font: bold 11px Calibri, Optima, Arial, sans-serif;
letter-spacing: 3.6px;
text-transform: uppercase;
text-decoration: none;
}
-11 -

12. Flexible Layout: Step 1
To create a flexible version, we
move to ems. (What's an em?)
The 'average' width of a character, in current default font.
originally: the width of the 'm' character
"Contextual healing":
Our 'target' font size is 24px.
Our 'context' font size is 16 px – the containing element's
default size for h1.
so let's scale h1 to result = target/context = 24/16 = 1.5em
and likewise, h1 a to 11/24 = 0.4583333333333 em
-12 -

13. Flexible Layout: Step 1
styled in ems:
h1 { font-size: 1.5em; /* 24 px/36 px */
font-style: italic;
font-weight: normal;
}
h1 a { color: #747474;
font: bold 0.458333333333em Calibri, Optima, Arial, sans-serif;
/* 11px/24px */
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
}
-13 -

14. Why 11/24 not 11/16?
The <a> is INSIDE the <h1> (see?)
<h1>Digital Media Showcase <a href="https://showc.org">
Read more &raquo;</a></h1>
and so the CONTEXT of the <a> has its default set to 24px
in the original example, or (1.5em in the relative version)
So the desired RELATIVE SIZE of the <a> is 11/24.
-14 -

15. Flexible Everything
• Fluid or Liquid Layouts
• Proportionally Scaled Images
• Media Queries

16. Flexible Everything –
Flexible Layout
• Use percents and ems
• Don’t use finite values like pixels
• How do you convert? It’s easy:
.figure {width: 20.833%; /* 200px / 960px */ }
.headerText {font-size: 0.75em; /* 12px / 16px */ }

17. Flexible Everything -
Proportionally Scaled
Images
• Hiding and Revealing Portions of Images
• Deliver different images depending on
device
• Foreground Images That Scale With the
Layout

18. Flexible Everything –
Media Queries
• They’ve been around since CSS 2.1
• You’ve already used them
<link rel="stylesheet" type="text/css" href=“screen.css"
media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"
/>
• When CSS3 came out the W3C extended media
queries

20. Who needs RWD?
You need RWD if:
• You’re starting from scratch.
• You want to keep costs low
• You want it to work even when new devices are released

21. Responsive web design is the concept of
developing a website in a way that helps the
layout adjust according to the user’s
computer screen resolution.

22. Why is it
relevant?
RWD allows us to tweak the layout and
present the relevant information first:
hours, phone number, directions and perhaps
a link to the menu.
Meanwhile back at your desk, the restaurant’s
page has all the bells and whistles you didn’t
care for while browsing on your phone.

23. Food Sense

24. Clean Air Commute Chall

25. FlexSlider

26. You get the point!

27. Responsive Web
Design
RWD is the concept of
developing a website in a
way that allows the
layout to adjust
according to the
user’s screen resolution
(view port) using media
queries

28. Responsive Web
Design
Why?
• Regular websites are almost useless on
mobile devices
• Creating 'mobile' versions of websites is
impractical
• New devices constantly appear
• Life is all about change; get with it!
-28 -

29. CSS3 & Media
Queries
In your CSS:
@media screen and (min-width: 480px) {
.content { float: left; }
.social_icons { display: none }
// and so on...
}

30. CSS3 & Media
Queries
On the header of your website:
<link rel="stylesheet" href="this.css"
media="(min-width: 960px)">

31. CSS3 & Media
Queries
By restricting CSS rules to a certain
width of the device displaying a web
page, one can tailor the page's
representation to devices with varying
screen resolution (view port).

32. Popular Viewport
Sizes

33. How do we
design for RWD
Simple:
Use the Mobile First Approach
and favor Progressive
Enhancement instead of the
traditional Graceful
Degradation

34. Graceful
Degradation
• Focuses on building the website for the most
advanced/capable browsers.
• Older browsers are expected to have a poor,
but passable experience.
• Small fixes may be made to accommodate a
particular browser ( they are not the focus )

35. Progressive
Enhancement
• Focuses on the content. ( not browsers )
• Think from the content out. ( Peanut M&M )
– Peanut: Content marked up in rich semantic (x)html
– Coated with rich creamy CSS
– Added JS as the hard candy shell

36. Progressive
Enhancement
Progressive Enhancement consists of the
following core principles:
•basic content and functionality should be accessible to all
web browsers
•semantic markup contains all content
•enhanced layout  external CSS
•enhanced behavior  external JavaScript
•end-user web browser preferences are respected

37. Progressive
Enhancement
Benefits:
•Accessibility: PE pages are by
nature more accessible.
•SEO: Since basic content is always
accessible

38. Best Coding Practices
• Always close your tags
• Declare the Correct DocType
• Never Use Inline Styles
• Place all External CSS Files Within the
Head Tag
• Consider Placing Javascript Files at the
Bottom
• Keep Your Tag Names Lowercase

39. Best Coding Practices
• Wrap Navigation with an Unordered List
• All Images Require “Alt” Attributes
• Use a CSS Reset
• If Building a Blog, Save the H1 for the
Article Title
• Work with tables intelligently