U4 4.

02 OUTLINE

1) Web page Layout considerations

a) Typical layout is organized in columns using <div>tags and Cascading Style
Sheets in order to create flexible layouts.
i) <div> tag defines a division or a section in an HTML document.
ii) <div> tag is used to group block-elements to format them with CSS.
iii) <div>tags can be nested; meaning a tag contained within a tag
iv) <table> tags should not be used for layout; tables are intended for presenting
tabular data.
b) Html5 introduced these tags: <header>, <footer>, <nav> (Note: these tags were
briefly introduced in 4.01. They have particular relevance in layout)
i) <header> tag specifies a header for a document or section
ii) <header> element should be used as a container for introductory content
iii) <footer> tag defines a footer for a document or section
iv) <footer> typically contains the author of the document, copyright information,
links to terms of use, contact information, etc.
v) <nav> tag defines a set of navigation links; only intended for a major block of
navigation links
c) Many 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
footer.
d) HTML5 offers new semantic elements to clearly define different parts of a web
page; such as <header> and <footer>.
2) Challenges of wide-ranging devices
a) Devices with Web browsers include smartphones, tablets, laptops and desktops,
televisions, wearable devices, etc
b) Mobile browsers are optimized so as to display Web content most effectively for
small screens on portable devices.

c) Variations in screen size, resolution, pixel density, pixel size present a challenge.
d) A device pixel is the smallest element on a screen; also known as physical pixel.
e) More pixels typically mean a crisper presentation.
f) Screen density or pixel density refers to the number of device pixels on a
physical surface. It is often measured in pixels per inch (PPI).
g) Resolutionis a simple count of the number of pixels across the entire width and
height of a device.
h) Viewport is the rectangular area (measured in pixels) that is viewable on a
device screen. (Some mobile devices have virtual viewports in the browser that
scale down web pages to fit the smaller display.)

3) The Mobile Web

a) Challenges
i) Screen size. Limited screen size and therefore limited content that is visible.
ii) Input. Mobile devices have limited keypads, small keys and frequently no
pointing device.
iii) Bandwidth and cost. Mobile networks can be slow compared to fixed data
connections. Mobile data transfer costs money. Large images and advertising
content cause retrieval issues.
iv) Goals. Mobile users have different interests than desktop devices. Mobile
users are typically more goal-oriented and less interested in lengthy
documents.
v) Device limitations. Mobile devices do not have the computational power of
desktops; battery consumption; exceeding memory and incomplete displays
can cause problems.
b) Advantages of Mobile Web Devices
i) More personal and can be personalized
ii) Portable.
iii) Always connected.

iv) Location awareness.

v) Offers one-handed operation.
vi) Can be a universal alerting device.
c) World Wide Web Consortium (w3c) has a mobile Web initiative
i) Mobile accessibility generally refers to making websites and applications
more accessible to people with disabilities when they are using mobile
devices. This includes interacting with phones, tablets, TVs and other
devices that use the Web.
ii) W3C has defined the reference pixel. A standard 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.
4) Responsive Web Design
a) Ethan Marcotte coined the term responsive web designin an online article.
b) RWD takes existing techniques involving flexible grid layout, flexible images, and
media and media queries creating a unified approach to web design.
c) 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 work upward.
d) What is needed for Responsive Web Design?
i) An understanding of the various devices and pixel density
ii) How user experience and user needs are different for mobile users
iii) How Web browsers vary in rendering Web pages
iv) HTML expertise
v) Extensive use of CSS required
vi) Fluid vs. Fixed Layout
5) Fixed Layout
a) Fixed-width layout has a wrapper(or container) that is a fixed width, and the
components inside it have either percentage widths or fixed widths.
i) The container (wrapper) element is fixed

ii) The width of the site is bound to a certain number of pixels

b) Advantages of Fixed-width layout
i) Easier to use and easier to customize in terms of design.
ii) Widths are the same for every browser, so there is less hassle with images,
forms, video and other content that are fixed-width.
iii) Fixed-width is predictable and has more precise control.
iv) Even if a website is designed to be compatible with the smallest screen
resolution, 800600, the content will still be wide enough at a larger resolution
to be easily legible.
c) Disadvantages of Fixed-width
i) May create excessive white space for users with larger screen resolutions
ii) Smaller screen resolutions may require a horizontal scroll bar, depending on
the fixed layouts width.
iii) Fixed-width layouts may create usability issues for mobile users and users
with very large screens.
6) Fluid Layout
a) Fluid or liquid layouts define dimensions in percentages rather than pixels.
b) Advantages
i) Can be more user-friendly, because it adjusts to the users set up.
ii) If designed properly, content will distribute evenly
iii) If designed well, a fluid layout can eliminate horizontal scroll bars in smaller
screen resolutions.
c) Disadvantages
i) Less control over what the user sees
ii) May overlook problems because the layout looks fine on their specific screen
resolution.
iii) Images, video and other types of content with set widths may need to be set
at multiple widths to accommodate different screen resolutions.

iv) With incredibly large screen resolutions, a lack of content may create excess
white space that can diminish aesthetic appeal.

7) Absolute units and Relative measurement units defined in CSS and their
recommended use (this is not an all-inclusive list):
a) Absolute units include:
i) Pixels (px)recommended for screens, occasional print
ii) Points (pt)recommended for print, not for screens
iii) Picas (pc)recommended for print
iv) Inches (in)recommended for print, not for screens
b) Relative units include:
i) em (font size of the element)recommended for screen or print
ii) % (percent)recommended for screen or print
c) Absolute units are good when the physical size of the output is defined
d) Relative units are good when the user may change size in the browser and to set
sizes relative to the surrounding elements.
e) An em is a unit of measurement in the field of typography, equal to the currently
specified point size.
i) In a Web browser an em is equal to the default size of 16px
ii) Ems are becoming increasingly popular in web documents due to scalability
and their mobile-device-friendly nature.
iii) Ems are recommended by the w3c.
f) Images and mobile devices
i) Bitmap or raster images are composed of a fixed set of pixels.
ii) Bitmap pixelis the smallest unit of data in a raster image
iii) Avoid using bitmaps with inappropriate resolutions

iv) CSS can be used to serve up an appropriately sized version of a bitmap

depending upon the screen size
v) CSS pixel is a unit of measurement.
g) SVG tag<svg> (new in HTML 5) defines vector-based graphics for the Web.
i) SVG stands for Scalable Vector Graphics
ii) SVG graphics do NOT lose any quality if they are zoomed or resized
iii) SVG is a W3C recommendation
iv) SVG can be embedded directly into HTML pages
v) SVG can be edited with a plain text editor
h) Media queries consist of a media type and expressionsthat check for the
conditions of particularmedia features
i) By using the @media rule, a website can have a different layout for screen,
print, mobile phone, tablet, etc.
ii) The @media rule allows different style rules for different media in the same
style sheet
iii) This is considered advanced CSS.

4.02 Resources
Html & CSS
reference
Article on viewports
Responsive Web
Design
W3C
Browsers
Pixels
Ems
Media Queries
SVG

http://www.w3schools.com/
http://alistapart.com/article/vexing-viewports
http://alistapart.com/article/responsive-web-design
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vselastic-layout-whats-the-right-one-for-you /
http://www.w3.org/Style/Examples/007/units.en.html
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork /
http://coding.smashingmagazine.com/2012/08/20/towards-retina-web /
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs /
http://www.w3.org/Talks/2013/0516-CSS-WWW2013/mediaqueries.html
http://www.w3.org/Graphics/SVG/