Web Design: C5 Vocab Terms
Terms in this set (21)
a website development strategy
that strives to provide an optimal user experience of a website regardless of the device
or browser used.
applies proportional size measurements to the webpage wireframe and content so that the content stretches, shrinks, and grows as the size of the viewport changes.
the viewing area for the
web page, which is much smaller on a phone than on a traditional desktop.
allow the web page developer to detect the approximate pixel size of the current viewport. This detection allows the developer to selectively apply CSS rules that work best for that viewport size.
shrink and grow based on the size of the viewport. Flexible images do not have height and width attributes or values in the HTML document. Rather, flexible images use CSS rules to resize the image relative to the wireframe and viewport.
a completely separate, parallel website optimized for mobile users.
Mobile Web Application
use to create a mobile web application.
employs responsive design principles, but with an interesting twist. Following a mobile-first strategy, a web developer designs the flexible wireframe and essential content for the smallest viewport first, progressively adding more content as the viewport grows.
Internet of Things
refers to the ever-expanding number of devices that connect to the Internet to share information.
Fluid Layout (2nd Definition)
a webpage with a liquid layout, also called a fluid layout, changes in width based on the size of the viewport. Responsive designs are based on fluid layouts.
do not change in width based on the size of the viewport. Fixed layouts use fixed measurement units such as pixels to define the width of the areas of the wire frame that "fix" the width of the content regardless of the size of the viewport.
are measured in ems. Elastic layouts also respond to the size of the viewport.
combine aspects of fixed and fluid layouts. For example, you may want to "fix" the size of one column but allow another to be flexible.
Em may be used to scale anything related to textual content such as font size, line sizes, margins, padding. Em sizes are relative to each other. For example, 2em = twice as large as 1 em. O.5em = half as large as 1em.
Developers use % to measure the widths of the wireframe elements and flexible images. Some use % to measure textual content, too.
Pixels are commonly used for textual measurements including padding, borders, and margins. Do not use the px measurement for width measurements, as this creates a fixed, unresponsive layout.
Points are used to measure font and line sizes in print media.
cm, mm, in
These measurements are not
commonly used for webpage
pc picas (1pc = 12pt)
The pica measurement harkens back to the "pica typewriter," which produced a Courier fixed-width font, 12pts tall.
constrain the image to 100% of its actual size.