Professional Documents
Culture Documents
U4 - 4 02 Outline
U4 - 4 02 Outline
02 OUTLINE
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.)
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
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/