Deck 5: Designing for the Mobile Web

Question 1

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

Answer 1

False

Question 2

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.

Answer 2

True

Question 3

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

Answer 3

False

Question 4

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.

Question 5

Order values for flexboxes cannot be negative.

Question 6

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

Question 7

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

Question 8

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

Question 9

Different items within a flexbox can have different growth rates.

Question 10

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

Question 11

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

Question 12

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

Question 13

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

Question 14

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

Question 15

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

Question 16

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

Question 17

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.

Question 18

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

Question 19

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.

Question 20

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

Question 21

By default,flexbox items are arranged vertically.

Question 22

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

Question 23

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

A) ​contrasting
B) ​red and blue
C) ​darker
D) ​lighter

Question 24

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" / >

Question 25

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

Question 26

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

Question 27

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.

Question 28

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

Question 29

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.

Question 30

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.

Question 31

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.

Question 32

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

Question 33

The @media and @import rules employ similar syntax.

Question 34

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

Question 35

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

Question 36

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.

Question 37

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

A) ​Flexible layouts
B) ​Responsive images
C) ​Viewports
D) ​Media queries

Question 38

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.

A) ​contrasting colors
B) ​responsive images
C) ​flexible layout
D) ​media queries

Question 39

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

A) ​flexi
B) ​embossed
C) ​lnk
D) ​view

Question 40

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

Question 41

Multiple media features can be combined using _____.

A) ​real-time operators
B) ​logical operators
C) ​relational operators
D) ​dimensional operators

Question 42

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
}

Question 43

Web pages are seen within a window called the _____.

A) ​wireframe
B) ​navigator
C) ​prototype
D) ​viewport

Question 44

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

A) ​relative positioning
B) ​z-index positioning
C) ​incremental positioning
D) ​absolute positioning

Question 45

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 _____.

A) ​pulldown menus
B) ​navigation viewports
C) ​horizontal wireframes
D) ​contextual data

Question 46

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

A) ​index-ratio
B) ​display-ratio
C) ​aspect-ratio
D) ​orientation-ratio

Question 47

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

A) ​double-tap
B) ​compilation
C) ​selection
D) ​highlight-text

Question 48

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;

Question 49

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)"

Question 50

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 _____.

A) ​display the submenus one after the other
B) ​float the submenus side-by-side
C) ​reduce the width of the submenu display bars
D) ​partially overlap the submenu titles

Question 51

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.

A) ​first tap
B) ​second tap
C) ​title toolbar
D) ​texting event

Question 52

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

A) ​braille
B) ​embossed
C) ​handheld
D) ​screen

Question 53

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

A) ​layout viewport
B) ​navigating viewport
C) ​wireframe viewport
D) ​contextual viewport

Question 54

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
}

Question 55

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

A) ​block
B) ​compilation
C) ​selection
D) ​hover

Question 56

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 _____.

A) ​relative
B) ​actual
C) ​logical
D) ​absolute

Question 57

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
}

Question 58

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

A) ​initial
B) ​none
C) ​only
D) ​auto

Question 59

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

A) ​mobile device spurs
B) ​mobile device synchronizers
C) ​mobile device emulators
D) ​mobile device initiators

Question 60

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

Question 61

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

A) ​boxed element
B) ​boxed schema
C) ​page schema
D) ​page box

Question 62

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;

Question 63

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

A) ​Flexible boxes
B) ​Drop shadows
C) ​Logical tags
D) ​Absolute positioning

Question 64

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.

A) ​hide
B) ​stop
C) ​avoid
D) ​block

Question 65

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;

Question 66

Alex, a web designer, is assigned the task of creating a mobile-device-friendly website for a leading fashion outlet called AllStyles. A desktop version of AllStyles's website already exists. Alex can refer to this desktop version of the website to create the mobile website design.

-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.

A) set the width of the layout viewport to the width of the nested lists
B) put each of the nested lists within a class
C) insert the structure of the nested list within a specific style sheet structure
D) use the only keyword to hide the list items

Question 67

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
}

Question 68

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;

Question 69

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;

Question 70

Alex, a web designer, is assigned the task of creating a mobile-device-friendly website for a leading fashion outlet called AllStyles. A desktop version of AllStyles's website already exists. Alex can refer to this desktop version of the website to create the mobile website design.

-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?

A) Pop-up links
B) Header links
C) Navigator menus
D) Pulldown menus

Question 71

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) ;
}

Question 72

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;
}

Question 73

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.

A) ​relative element
B) ​drop shadow
C) ​logical tag
D) ​absolute position

Question 74

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.

A) ​flow axis
B) ​logic axis
C) ​void axis
D) ​cross axis

Question 75

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;

Question 76

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

A) ​page element
B) ​page schema
C) ​page area
D) ​page layout

Question 77

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;

Question 78

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

A) ​lags
B) ​orphans
C) ​windows
D) ​gaps

Question 79

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

A) ​lags
B) ​orphans
C) ​widows
D) ​gaps

Question 80

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

A) ​void axis
B) ​main axis
C) ​sub axis
D) ​cross axis