Terms in this set (68)
• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics
for the Web
• SVG defines the graphics in XML format
SVG is a W3C recommendation
When using bitmap
For modern browsers, add "max-width: 100%"
to images so they scale down to fit within
their containing element in a fluid layout
Bitmap images are composed of a fixed set
of dots, while vector images are composed of
a fixed set of shapes. Scaling a bitmap
reveals the dots while scaling a vector image
preserves the shapes.
WHY SCALABLE IMAGES
Regardless of the method used, raster images remain
inherently constrained by their bitmap resolution; they were
never meant to be infinitely scalable. This is where vector
graphics have the advantage, being a future-proof way to
"Retinize" your Web graphics.
ADVANTAGES OF USING SVG OVER OTHER
IMAGE FORMATS (LIKE JPEG AND GIF)
• SVG images can be created and edited with any
• SVG images can be searched, indexed,
scripted, and compressed
• SVG images are scalable
• SVG images can be printed with high quality at
• SVG images are zoomable (and the image can
be zoomed without degradation)
WHAT DO YOU SEE ONLINE
Most images on the Web are bitmaps;
also known as raster graphics.
• Bitmaps can be pre-scaled or resized
so an appropriate size is displayed
depending upon the viewport.
GUIDELINES FOR IMAGES
GUIDELINES FOR IMAGES
• Avoid using images with inappropriate
• Pre-scale images in various resolutions and
serve an image appropriate for the viewport.
• When images are not scaled appropriately,
they will appear blurry when scaled up
• Images that are larger than necessary waste
battery and cause longer downloads
A mobile browser, also called
a microbrowser, minibrowser, or wireless internet
browser (WIB), is a web browser designed for use on a
mobile device such as a mobile phone or PDA. Mobile
browsers are optimized so as to display Web content
most effectively for small screens on portable devices.
Mobile browser software must be small and efficient to
accommodate the low memory capacity and lowbandwidth
of wireless handheld devices.
• Not all browsers render all web content in exactly
the same way.
• Web content doesn't need to look exactly the
same across every browser and device.
• As long as it still provides a good user experience
and gives them access to the content and services
required by their current browsing experience.
Web browser rendering
• Your Web browser uses a rendering engine
• The rendering engine will start getting the
contents of the requested document from
the networking layer.
• For better user experience, the rendering
engine will try to display contents on the
screen as soon as possible.
Why don't Web pages look the
same on all Browsers?
• The screen resolution of the monitor or screen
• The operating system
• The web browser
• Individual user preferences
Web Browser Output
Web browsers do not render pages pixel by pixel. They read
the entire code and produce an output depending on your
code. There are, however, differences in the code
interpretation. Therefore you should check the way your
website looks on different browsers and operating systems.
• The viewport is the area a web browser has to
display a web page.
• The size of that area determines the layout of the
page (for example how text flows from line to
• On desktop browsers the viewport can be resized
by dragging the browser window into any size
desired. On mobile devices it is controlled using
the viewport meta tag.
• Different mobile browsers have slightly different
implementations of the viewport meta tag.
• The viewport meta tag is an HTML meta tag that
lives inside the <head> element of a web page. It
was originally created by Apple when they
released Mobile Safari for the iPhone and though
not an official standard it has since been adopted
by many other mobile browsers
Zooming & Browsers
Zooming is a common action when
users find a website too small for
comfortable viewing. Or, to put it
another way, websites that are
designed too small are very
common. There is really no
"perfect" size, because almost
everyone has at least some level of
visual impairment, since our eyes
inevitably deteriorate with age.
A word about Zooming
With the increase in touchscreen
devices, pinch-to-zoom has become
the standard way to enlarge fixedsized
content designed for larger
screens (i.e. much of the Web today).
Most websites have organized their content in multiple
columns (formatted like a magazine or newspaper).
Multiple columns are created by using <div> or <table>
Cascading Style Sheets are used to position elements, or
to create backgrounds or a colorful look for the pages.
Layouts that work on many devices
<div> layouts and CSS can create flexible layouts that
work on various screen sizes.
Responsive web design is a web design approach aimed
at crafting sites to provide an optimal viewing
experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a
wide range of devices
Devices vary in resolution and pixel density
As hardware changes, resolution and pixel density
Web layout needs to be flexible and adjust to various
mobile devices and new devices
A pixel is an abstract unit of measurement and it does
not have a single specific size.
The <div> tag defines a division or a section in an HTML
The <div> tag is used to group block-elements to format
them with CSS.
The <div> element is very often used together with CSS,
to layout a web page
The Power of <div>
id - Specifies a unique id for an element
class - Specifies one or more classnames for an element
(refers to a class in a style sheet)
style - Specifies an inline CSS style for an element
lang - Specifies the language of the element's content
These are just a few examples. It is not the complete list.
<header> <footer> <nav> are new in html5
A fairly standard
layout consists of a
banner near the top,
navigation, and your
content or display
box. These are the
backbone to any great
In HTML5 there is
a <header> element,
as well as
a <nav>, <footer> that
can replace these div
Many of existing web sites
today contains HTML code
like this: <div id="nav">, <div
class="header">, or <div
id="footer">, to indicate
navigation links, header, and
HTML5 offers new semantic
elements to clearly define
different parts of a web
page; such as <header>
The <header> tag specifies a header for a document or
section. The <header> element should be used as a
container for introductory content or set of navigational
The <footer> tag defines a footer for a document or
section. A footer typically contains the author of the
contact information, etc.
The <nav> tag defines a set of navigation links. It is only
intended for a major block of navigation links.
CSS for div
to the div id.
The id attribute
specifies a unique
Why use Fixed Layout
A fixed website layout has a wrapper that is a fixed
width, and the components inside it have either
percentage widths or fixed widths.
The important thing is that the container (wrapper)
element is set to not move. No matter what screen
resolution the visitor has, he or she will see the same
width as other visitors
Fixed Layout in Pixels
pixels is the fixed
• The container div is
• The header div is
880px plus 80 pixels
• The Content div and
sidebar div plus a
20px space equal
From Fixed to Fluid
change from pixels
Why consider Fluid Layout
In a fluid website layout, also referred to as a liquid
layout, the majority of the components have percentage
widths, and thus adjust to the user's screen resolution.
Relative layouts are accomplished by using a relative unit like
the em or the percent ("%").
The em is basically the height of the font being used on the
It is considered relative because a 16 point font has a different
height from, say, a 12 point font.
The percent has the normal meaning you are used to from
mathematics. That is, if the width of the page is set to 80%, it
means 80% of the maximum width it can have.
It's regarded as relative since the maximum width varies
depending on how big your browser window is.
The term "em" is a reference to the Letter "M" in written
"Ems" (em):The "em" is a scalable unit that is used in
web document media. An em is equal to the current fontsize,
for instance, if the font-size of the document is
12pt, 1em is equal to 12pt. Ems are scalable in nature, so
2em would equal 24pt, .5em would equal 6pt, etc. Ems
are becoming increasingly popular in web documents
due to scalability and their mobile-device-friendly
Factors to consider in Layout
Screen resolution and pixel density
Whether or not the browser is maximized
Extra toolbars open in the browser (History, Bookmarks,
The operating system and hardware
Why responsive design is needed
• Mobile browsing is expected to overtake
desktop browsing within a few years.
• Websites are viewed on a variety of
devices beyond traditional desktops--from
smartphones to tablets to game consoles
to large-screen televisions to vehicles.
• Many of these devices use touch interfaces, game
console buttons—things beyond the traditional
• These devices come in a wide variety of screen
resolutions and screen sizes.
• The size of a pixel varies according to the device.
• Mobile networks can be slower and most users
have fixed data plans (expense)
• Limited memory, processor power and battery
• A wide variety of browsers are used on mobile
Why are mobile devices popular
• Always connected
• Personal and can be
• Location awareness
• One-handed device
• Can be used as a
universal alerting device
SO HOW BIG IS A PIXEL
There are a wide variety of devices with
varying dimensions and pixel density.
• A device pixel (or physical pixel) is the
tiniest physical unit in a display.
• Screen density or pixel density refers to
the number of device pixels on a physical
surface. It is often measured in pixels per
• Resolution is a simple count of the number of pixels
across the entire width and height of a device.
• The iPhone 5 resolution is 1136 x 640. Compare that
to the original iPhone which is 480 x 320.
• Pixel density is a good indication of how clear the device
display will be.
• The higher the number, the smaller the size of the pixels,
so graphics are perceived as more crisp and less pixelated.
Viewing distance matters
• While pixel density is an important measure, it is
not the only factor in the "crispness" of a
• Viewing distance can affect the perceived pixel
size. A cell phone and a large-screen could have
the same pixel density, but the large-screen will
appear as more crisp because it is viewed from a
That leads us to Reference Pixels
• The w3c (World Wide Web Consortium)
currently defines the reference pixel as the
standard for all pixel-based measurements.
• Instead of every pixel-based measurement being
based on a hardware pixel it is based on
an optical reference unit that might be twice the
size of a hardware pixel. This new pixel should
look exactly the same in all viewing situations.
• A bitmap pixel is the smallest
unit of data in a raster image
(PNG, JPG, GIF, etc). Each pixel
contains information on how it
is to be displayed, including its
position in the image's
coordinate system and its color.
Some image formats can store
additional per-pixel data, such
as opacity (which is the alpha
Images on the Web
• Besides its raster resolution, an image on the
Web has an abstract size, defined in CSS pixels.
The browser squeezes or stretches the image
based on its CSS height or width during the
Pixels and CSS
• CSS offers a number of different units for
• Some have their history in typography, such as
point (pt) and pica (pc).
• Others are known from everyday use, such as
centimeter (cm) and inch (in).
• And there is also a "magic" unit that was invented
specifically for CSS: the px.
CSS defines that raster images (such as photos)
are, by default, displayed with one image pixel
mapping to 1px.
The CSS px is not defined as a constant length,
but as something that depends on the type of
device and its typical use.
Querying Pixel Density
• Pixel density can be queried using
• CSS Media Queries can be used to serve
up the appropriately sized assets.
Pixels impact appearance
3 tablets with very different renderings of a web
page due to pixels
• One of the first places this causes problems is in
text: More pixels in a smaller space means that
fonts sized in pixels will look correspondingly dinky
What is responsive web design
• Ethan Marcotte coined the term responsive web
design in an article published online. He took
existing techniques involving flexible grid layout,
flexible images, and media queries into a unified
approach to web design.
• Many designers have advocated an approach to
design for the smallest viewport first and then
work up towards the larger viewpoints. The
design and content can be enhanced as you
Philosophy of RWD
• Web content should be presented in the
most accessible manner for a particular
• The mobile Web experience can be a
different experience than its desktop
• The mobile user requires specific content
and functionality based upon the device in
What is needed for RWD
• An understanding of the various devices and pixel density
• How user experience and user needs are different for mobile
• How Web browsers vary in rendering Web pages
• HTML expertise
• Extensive use of CSS required
• In fixed-width layouts, the width of the site is
bound to a certain number of pixels.
• Generally, the measure chosen is 960 pixels.
• If a device is less than 960 pixels, the site will not
display properly and scrollbars will appear.
• If a device is greater than 960 pixels, large
amounts of white space will appear on the
Pros of Fixed-Width Layout
• Easier to use and easier to customize in terms of design.
• Widths are the same for every browser, so there is less hassle
with images, forms, video and other content that are fixedwidth.
• There is no need for min-width or max-width, which isn't
supported by every browser anyway.
• Even if a website is designed to be compatible with the
smallest screen resolution, 800×600, the content will still be
wide enough at a larger resolution to be easily legible.
Cons of Fixed-Width Layout
• May create excessive white space for users with larger screen
• Smaller screen resolutions may require a horizontal scroll bar,
depending on the fixed layout's width.
• Seamless textures, patterns and image continuation are
needed to accommodate those with larger resolutions.
• Fixed-width layouts may create usability issues for mobile
users and users with very large screens.
Fluid or Liquid Layouts
• Fluid or liquid layouts define dimensions in
percentages rather than pixels.
• Percentages alone will not accommodate a wide
variety of devices.
• To accommodate varying dimensions, fluid
layouts need to remain simple.
Pros of Fluid Layout
• Can be more user-friendly, because it adjusts to
the user's set up.
• The amount of extra white space is similar
between all browsers and screen resolutions,
which can be more visually appealing.
• If designed well, a fluid layout can eliminate
horizontal scroll bars in smaller screen
Cons of Fluid Layout
• Less control over what the user sees
• May overlook problems because the layout looks
fine on their specific screen resolution.
• Images, video and other types of content with
set widths may need to be set at multiple widths
to accommodate different screen resolutions.
• With incredibly large screen resolutions, a lack of
content may create excess white space that can
diminish aesthetic appeal.
Layout and containers
• The basic building block of the CSS layout is the
div tag—an HTML tag that in most cases acts as a
container for text, images, and other page
• The first div tag on a page is known as the
container div tag
How to Scale Fonts
• Pixels represent a fixed size in a font.
• Em unit and percentages permit scaling of text
• The font-size property sets the size of the text.
• Being able to manage the text size is important in
• Always use the proper HTML tags, like <h1> - <h6>
for headings and <p> for paragraphs.
• The font-size value can be an absolute or relative.
• If you do not specify a font size, the default size for
normal text, like paragraphs, is 16px (16px=1em).
• Setting the text size with pixels gives you full
control over the text size:
• The text can be resized in all browsers using the
zoom tool (however, this resizes the entire page,
not just the text).
Set Font Size with em
• To avoid the resizing problem with older versions
of Internet Explorer, many developers use em
instead of pixels.
• The em size unit is recommended by the W3C.
• 1em is equal to the current font size. The default
text size in browsers is 16px. So, the default size
of 1em is 16px.
• The size can be calculated from pixels to em
using this formula: pixels/16=em
• The main purpose of a media query is to apply
different CSS rules in order to obtain different
layouts, depending on the width of the display
window afforded to your content.
• The values in the media queries are expressed in
percentages and not pixels.
• You can write as many media queries as you like
What is an em unit
• An em is a unit of measurement in the field of
typography, equal to the currently specified point
size. The name of em is related to M. Originally
the unit was derived from the width of the
capital "M" in the given typeface.
Font Size with % and Em
• Use a Combination of Percent and Em
• The solution that works in all browsers, is to set
a default font-size in percent for the <body>
• Our code now works great! It shows the same
text size in all browsers, and allows all browsers
to zoom or resize the text!
Absolute v Relative Font Size
• Absolute size:
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers
(bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is
• Relative size:
• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers
• Pixels (px)
• Points (pt)
• Picas (pc)
• Inches (in)
• Millimeters (mm)
• Centimeters (cm
• em (font size of the
• ex (x-height of the
• % (percent)
CSS Media Query
CSS media query's can change styles to match
the device size, screen type and orientation
(portrait and landscape). This feature has given
both developers and designers a powerful tool
for creating easily accessible websites.
• These are small query's or statements with CSS
and HTML that specify when to use specific
YOU MIGHT ALSO LIKE...
Essential SAT Vocabulary | Knowsys Guide
4.02 Responsive Web Design Concepts
4.02 Responsive Web Design Concepts
Unit 4.02 Flash Cards
OTHER SETS BY THIS CREATOR