Web Design Chapter 5

Responsive Design

A website development strategy that strives to provide an optimal user experience of a website regardless of the device or browser used

Fluid Layout

applies proportional size measurements to a webpage wireframe and content so that

the content stretches, shrinks, and grows as the size of the viewport changes.

viewport

the viewing area for the webpage, which is much smaller on a phone than on a traditional desktop.

media queries

Allow the webpage developer to detect the approximate pixel size of the current viewport

fixed layouts

do not change in width based on the size of the viewport

emulator

hardware or software that enables one computer system to behave like another computer system

Internet of Things

the number of devices connected to the internet

flexible images

shrink and grow based on the size of the viewport.

resizes itself to accommodate the size of the viewport

Em

historically based on the height of capital letter M of the default font

typically larger on a desktop browser than on a table browser.

Pixel

equal to one dot on the screen

different screens have different pixel densities

display

determines how a browser displays an element

Span

allows you to use CSS to format a span of text separately from its surrounding text

fluid and liquid

A web page with a _____ layout changes in width based on the size of a view port. (2 answers)

height and width

To create flexible images, the ____ attribute value for the img tags in a HTML file must be deleted. (2 answers)

load times minimal and layout must be simple

Which of the following best practices must be considered when designing a website for mobile viewports? (2 answers)

faster and less expensive

Emulators make the testing process of web pages _____ than publishing the pages to a web server and accessing them from all of the configurations needed to test. (2 answers)

viewport

The term ___ is preferred over "window" because windows are generally not displayed in the browsers of mobile devices

mobile

A completely separate, parallel website optimized for mobile users is called a(n) _____ website

fluid

A(n) _____ layout applies proportional size measurements to a webpage wireframe and content so that the content stretches, shrinks, grows as the size of the viewport changes.

mobile application

A ____ is an application accessed through a smartphone browser

mobile-first

The ______ strategy makes the most sense when mobile users are a very high priority for a website and when there is luxury of building the website from scratch.

scrolling

Fixed layouts can involve a tremendous amount of horizontal _____ and require much zooming on small viewports.

fixed

_____ layouts use static measurement units such as pixels to define the width of the areas of a wireframe that set the width of the content regardless of the size of the viewport

hybrid

_____ layouts combine aspects of fixed and fluid layouts

fixed

_____ layouts do not work well for smaller viewports

print

Points are used to measure font and line sizes in _____ media

pixel

The ____ measurement should not be used for width measurements, as this creates fixed, unresponsive layout

content placeholder

In a fluid layout, no matter how small a browser becomes, the ______ boxes on a webpage shrink and grow in response to the size of a viewport.

box

Coding links in a navigation system as an unordered list provides the ____ around each link, which is required to style the links for different viewport sizes later.

flexible

If the width of a browser window is reduced, the images in a webpage cut off because they do not resize with respect to the viewport. This problem can be tackled by adding _____ images to the webpage design.

img

The height and width attribute values for the ____ tags in HTML flies should be deleted to create a flexible image.

flexible

_____ images shrink and grow in proportion to a viewport, providing a better viewing experience across multiple devices.

mobile

An ideal webpage in a ____ viewport requires little or no scrolling

unordered

The default marker for each

item in a(n) _____ list is a bullet

bullets

The list-style-type property specifies the type of ____ to use in an ordered list

validator

Every time a new webpage is created, it must be run through W3C's ____ to check the document for errors