Tutorial 05: Designing for the Mobile Web

To create a media query within a Hypertext Markup Language (HTML) file, the style attribute should be added to the link element in the document head.

False

Order values for flexboxes cannot be negative.

False

The growth value of flex items defines the initial size of an item before a browser attempts to fit it to the flexbox.

False - basis size

A flex item cannot itself be a flexbox for its child elements.

False - can

By default, the @page rule is applied only to the first page of the printed output.

False

Desktop computers have two types of viewports: a visual viewport and a layout viewport.

False

The align-items property is only impactful when there are multiple lines of flex items.

False

The default style of browsers to format the print versions of the web pages they encounter always result in the best printouts.

False

The media feature orientation accepts min- and max- prefixes.

False

Viewing a web page on a mobile device gives the same experience as viewing the same web page on a desktop computer.

False

While designing web pages for mobiles, the page content should be extensive such that the readers get the opportunity to explore all facets of the topic.

False

With responsive design, it is easier to replace styles than to add new styles.

False

A user can manually zoom into a page to make it readable within the visual viewport, but it is done at the expense of hiding content.

True

A mobile browser will interpret a _____ event as a tap event in which a user taps a page object.

hover

Jenny needs to change the existing layout where the flex items are laid down at the start of the main axis. Which of the following properties should Jenny use to specify a different placement for the flex items?

justify-content

This property has no impact when items are flexed to fill the entire given space.

justify-content

Mobile devices have a _____ containing the entire content of the page, some of which may be hidden from a user.

layout viewport

Multiple media features can be combined using _____.

logical operators

Items within a flexbox are laid out along a _____, which can point in either the horizontal or vertical direction.

main axis

A page box is composed of the _________, which contains the space between the printed content and the edges of the page.

margin area

To apply a print style sheet, one must use the _________ attribute with the link elements to target style sheets to either screen devices or print devices.

media

An alternative to direct testing of mobile interfaces on all mobile devices is the use of _____.

mobile device emulators

A common technique for mobile websites is to hide navigation menus but to indicate their presence with a(n) _________, which is a symbol usually represented as three horizontal lines.

navicon

An individual cannot use only the ul.submenu:hover selector because one cannot hover over the submenu until it is visible.

True

Different items within a flexbox can have different growth rates.

True

If a flexbox doesn't wrap to a new line as it is resized, then the flex items will continue to shrink, still sharing the same row or column.

True

One of the key components while creating a mobile website design is to have the most important information up-front and easily accessible.

True

The @media and @import rules employ similar syntax.

True

It is used to create an inflexible item that will not grow or shrink.

none

The _________ operator negates any feature found in an expression.

not

This operator negates any features found in an expression.

not

For older browsers that do not support media queries, Cascading Style Sheets (CSS) 3 provides the _____ keyword to hide style sheets from those browsers.

only

The problem wherein the user needs to scroll vertically down the web page to view information on a mobile device can be resolved by using _____.

pulldown menus

For the AllStyles's main web page, Alex creates a navigation bar that includes topical areas named Clothing, Accessories, and About Us. Alex wants to create nested lists within each of these topical areas that would contain links to specific pages on the AllStyles website. In order to do so, Alex must _____ while writing the HTML code.

put each of the nested lists within a class

Page breaks within block elements can often leave behind _____, which is a fragment of text left dangling at the top of page.

widows

In flex-wrap: type;, the type should be _________ to wrap flex items to a new line starting in the opposite direction from the current line.

wrap-reverse

When a hover event is used to hide an object or display it, mobile browsers employ a _____ event.

double-tap

When submenus overlay page content, a(n) _____ should be added so that when a submenu is opened, it will stand out more from the page content.

drop shadow

Jenny wants to distribute the flex items in the magazine's website evenly with the first and last items aligned with the start and end of the main axis. Identify the keyword Jenny must assign to value in the align-content: value; property.

space-between

Media devices can be specified when importing one style sheet into another by adding the media type to the _________ rule.

@import

Briefly explain the procedure followed for setting the page size.

As printed media can vary in size and orientation, the following size property allows web authors to define the dimensions of a printed page: size: width height; where width and height are the width and height of the page. Thus, to define a page that is 8.5 inches wide by 11 inches tall with a 1-inch margin, one should apply the following style rule: @page { size: 8.5in 11in; margin: 11n; } Once can replace the width and height values with the keyword auto (to let browsers determine the page dimensions) or inherit (to inherit the page size from the parent element). If a page does not fit into the dimensions specified in the @page rule, browsers will either rotate the page or rescale it to fit within the defined page size.

A flexbox is a box containing items whose sizes are fixed.

False

A page name should be created to define styles for the first, left, and right pages.

False

In the context of designing websites for mobile devices, to give a comfortable page layout user experience, the content should be laid out within a single column with no vertical scrolling.

False - horizontal

By default, flexbox items are arranged vertically.

False - horizontally

Widths in media queries are based on the width of the visual viewport.

False - layout

In the context of the application of the word-wrap property to a Uniform Resource Locator (URL) text, a value of break-word to the type attribute breaks a text string only at common break points.

False - normal

The most appropriate sizing unit for television devices is the use of points.

False - print, printing

When the hover event is used to hide an object or display it, mobile browsers employ a double-tap event in which the first tap activates any hypertext links associated with a page object.

False - second

Both the align-content and align-items properties have a default value of center.

False - stretch

The tty media type is used for television-type devices with low resolution, color, and limited scrollability.

False - tv

An important aspect of mobile design is optimizing a site's performance under static network conditions.

False - varying

_____ can be used to have a single specification that automatically adapts itself to the screen width without requiring a new layout design.

Flexible boxes

This media type is used for mobile devices with small screens and limited bandwidth.

Handheld

While designing websites for mobile devices, these need to be easily accessed via a touch interface.

Links

This determines the properties of the device rendering a website page so that appropriate designs can be delivered to specific devices.

Media queries

_____ are used to associate a style sheet or style rule with a specific device or list of device features.

Media queries

The best way to test this is to view it directly on a mobile device.

Mobile interface

It formats the printed version of a web document.

Print style sheet

The desktop version of the website contains a long list of hyperlinks and this can obstruct the view of the main content when viewed from a mobile device. Which of the following should Alex use to hide this long list of hypertext links so that it appears only in response to a tap of a major heading in the navigation list?

Pulldown menus

_________ images, a primary component of responsive design theory, rescale based on the size of a viewing device.

Responsive

This is provided by mobile phone companies for developers to use to test their programs and websites.

Software development kit

Describe the process of testing a mobile website.

The best way to test a mobile interface is to view it directly on a mobile device. However, given the large number of mobile devices and device versions, it's usually not practical to do direct testing on all devices. An alternative to having the physical device is to emulate it through a software program or an online testing service. Almost every mobile phone company provides a software development kit or SDK that developers can use to test their programs and websites. Android SDK, iOS SDK, Mobile Phone Emulator, Mobile Test Me, MobiOne Studio, Opera Mobile SDK, and Windows Phone SDK are some of the popular device emulators. Browsers are also starting to include device emulators as part of their developer tools.

The device-aspect-ratio feature supported by Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) gives the ratio of the device-width value to the device-height value.

True

The styles applied to a page box using the @page rule are limited to defining the page size and the page margin.

True

When a document is sent to a printer, a browser determines the location of page breaks unless that information is included as part of the print style sheet.

True

When a user hovers or touches a navicon, the navigation menu is revealed.

True

When no media attribute is used, a style sheet is assumed to apply to all devices accessing the web page.

True

While designing web pages for mobile devices, the overall file size should be kept small.

True

Explain viewports and device width. Also, discuss setting widths in media queries.

Web pages are viewed within a window called the viewport. Mobile devices have two types of viewports: a visual viewport displaying the web page content that fits within a mobile screen and a layout viewport containing the entire content of the page, some of which may be hidden from the user. The two viewports exist in order to accommodate websites that have been written with desktop computers in mind. A mobile device will automatically zoom out of the page in order to give users the complete view of the page's content, but this often results in a view that is too small to be usable. While the user can manually zoom into the page to make it readable within the visual viewport, this is done at the expense of hiding content.

For each h1 heading to start on a new page, identify the style rule that should be used to insert a page break before each heading. a. h1 { page-break-before: always; } b. h1 { page-break-before: auto; } c. h1 { page-break-before: inherit; } d. h1 { page-break-before: content; }

a

Identify the Cascading Style Sheet (CSS) rule that imports a file named screen.css only when a screen or projection device is being used. a. @import url("screen.css") screen, projection; b. #import url("screen.css") screen, projection; c. @import url("screen.css") screen&&projection; d. @import url("screen.css") *screen, *projection;

a

Identify the correct flex-flow style that combines both the flex-direction and flex-wrap properties. a. flex-flow: direction wrap; b. flex-flow: direction||wrap; c. flex-flow: direction&&wrap; d. flex-flow: flex-direction, flex-wrap;

a

Identify the media query that applies style rules only to screens that are at least 300 pixels wide. a. @media screen and (min-width: 300px) { style rules } b. media screen and (@min-width: 300px) { style rules } c. media screen and (least-width: 300px) { style rules } d. @media screen and (@minwidth: 300px) { style rules }

a

Identify the query that matches any screen device that also supports color. a. @media screen and color { style rules } b. media (@screen) and (@color) { style rules } c. @media screen and @(color) { style rules } d. @media screen and (color) { style rules }

a

Alex has placed each of the nested lists within a class called submenu. He wants to display a nested submenu only when the user hovers the mouse pointer over its associated submenu title. Which of the following selector formats should be used by Alex to select the submenu that is immediately preceded by a hovered submenu title?

a.submenuTitle:hover+ul.submenu

While creating a website for tablet design, objects placed with _________ positioning are removed from the document flow.

absolute

To make the submenus in a tablet device overlay the page content, the submenus should be placed with _____.

absolute positioning

It arranges multiple lines of content along a flexbox's cross axis.

align-content

The _____ is a device feature that gives the ratio of the width of the display area to its height.

aspect-ratio

A page break can be prevented from being added before or after a heading by using the keyword _____ in the page-break-before or page-break-after properties.

avoid

Identify the correct format to set the size of a page margin to 0.5 inches. a. @page { *margin: 0.5in } b. @page { margin: 0.5in; } c. @page { <margin>: 0.5in; } d. @page { margin: (0.5in); }

b

Identify the flex-direction property that is used to change the orientation of a flexbox. a. flex-direction: orient_direction; b. flex-direction: direction; c. @flex-direction: direction; d. flex-direction: *direction;

b

Identify the format for manually inserting a page break directly before an element. a. before(page-break): type; b. page-break-before: type; c. <page-break/>before: type; d. page-break: *before-type;

b

Identify the page rule using which styles are applied to a page box. a. #page { style rules } b. @page { style rules } c. *page { style rules } d. <page> { style rules }

b

Identify the page-break-inside property that prevents printers from inserting a page break. a. page-break-inside: always; b. page-break-inside: type; c. page-break-insert: avoid; d. page-break-insert: type;

b

Identify the selector that should be used to let a submenu remain visible even when the pointer moves away from the title and hovers over the non-visible submenu. a. a.submenuTitle:hover+ul.submenu, hover: ul.submenu b. a.submenuTitle:hover+ul.submenu, ul.submenu:hover c. a.submenuTitle:hover+ul.submenu, *ul.submenu:&hover d. a.submenuTitle:hover+ul.submenu, ul.submenu:@hover

b

To target a device based on its features, identify the syntax used to add a feature and its value to the media attribute. a. @media="devices and|or (feature:value)" b. media="devices and|or (feature:value)" c. media="devices and&&or (feature:value)" d. media="devices and|or (*feature:value)"

b

It defines the initial size of a flex item before a browser attempts to fit it to a flexbox.

basis size

Since a Uniform Resource Locator (URL) has no common break points such as blank spaces, applying the _________ option ensures that the text string of the URL will be kept to a manageable length by breaking it as needed to fit within the page layout.

break-word

Identify the link element that accesses a style sheet file named output.css only when the device is a printer or a projection device. a. <*link href="output.css" media="print&&projection" /> b. <link *href="&output.css" media="print, projection" /> c. <link href="output.css" media="print, projection" /> d. <link href="output.css" media="*print, *projection" />

c

Identify the media rule that must be included in a Cascading Style Sheet (CSS) file so that media queries can be used to associate specific style rules with specific devices. a. #media devices { style rules } b. &media devices { style rules } c. @media devices { style rules } d. *media devices { style rules }

c

The number of colors supported by an output device.

color-index

While designing websites for mobile devices, _____ colors should be used so that pages are easily visible in outdoor lighting.

contrasting

In the context of a flexible box, perpendicular to the main axis is the _____, which is used to define the height or width of each item.

cross axis

Identify the default flex value that spontaneously sets the size of a flex item to match its content or the value of its width and height property. a. flex: 0 1 initial; b. flex: 0 1 none; c. flex: 0 1 inherit; d. flex: 0 1 auto;

d

If flex items are unable to fit within a single line, identify the flex-wrap property used to wrap those items to a new line. a. flex-wrap: type<flexbox>; b. flex-wrap: @type; c. @flex-wrap: type; d. flex-wrap: type;

d

The _____ is a possible media type value for the media attribute.

embossed

The _____ media type value for the media attribute is used for paged Braille printers.

embossed

When a hover event is used to hide an object or display it, mobile browsers employ a double-tap event in which the _____ displays the page object.

first tap

A(n) _________ is a box containing items whose sizes can shrink or grow to match the boundaries of the box.

flexible box flexbox

According to Ethan Marcotte's responsive design theory, _____ is a primary component that ensures that the page layout of websites automatically adjusts to screens of different widths.

flexible layout

While creating a website for tablet design, to display the submenus horizontally rather than vertically, a style rule needs to be added to the tablet media query to _____.

float the submenus side-by-side

To reduce the cluttered look of the web page, Jenny needs to separate the page content from page design. Which of the following properties must Jenny use to place the flex items in a desired order?

order: value;

Page breaks within block elements can often leave behind _____, which is a text fragment left at the bottom of a page.

orphans

A page box is composed of a _____, which contains the content of a document.

page area

In Cascading Style Sheets (CSS) every printed page is defined as a _____.

page box

Once a page name is defined, the content of an element will appear on its own page, with the browser automatically inserting _________ before and after the element if required.

page breaks

While creating a website for tablet design, to keep the submenus in their current position on a page, one needs to make each main list item a container for its submenu by setting its position property to _____.

relative

The _________ media type is used for fixed-width devices such as teletype machines and terminals.

tty

Web pages are seen within a window called the _____.

viewport

Mobile devices have a _________ viewport that displays a web page content that fits within a mobile screen.

visual