CHS Web Design Track

Tutorial 5 Designing for the Mobile Web

Chapter Reinforcement

MULTIPLE CHOICE

  1. While designing websites for mobile devices, _____ colors should be used so that pages are easily visible in outdoor lighting.
    1. contrasting
    2. red and blue
    3. darker
    4. lighter
  2. 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.
    1. contrasting colors
    2. responsive images
    3. flexible layout
    4. media queries
  3. _____ are used to associate a style sheet or style rule with a specific device or list of device features.
    1. Flexible layouts
    2. Responsive images
    3. Viewports
    4. Media queries
  4. Identify the link element that accesses a style sheet file named output.css only when the device is a printer or a projection device.
    1. <*link href="output.css" media="print&&projection" />
    2. <link *href="&output.css" ="print, projection" />
    3. <link href="output.css" media="print, projection" />
    4. <link href="output.css" ="*print, *projection" />
  5. The _____ is a possible media type value for the media attribute.
    1. flexi
    2. embossed
    3. lnk
    4. view
  6. The _____ media type value for the media attribute is used for paged Braille printers.
    1. braille
    2. embossed
    3. handheld
    4. screen
  7. 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.
    1. #media devices {
          style rules
      }
    2. &media devices {
          style rules
      }
    3. @media devices {
          style rules
      }
    4. *media devices {
          style rules
      }
  8. Identify the Cascading Style Sheet (CSS) rule that imports a file named screen.css only when a screen or projection device is being used.
    1. @import url("screen.css") screen, projection;
    2. #import url("screen.css") screen, projection;
    3. @import url("screen.css") screen&&projection;
    4. @import url("screen.css") *screen, *projection;
  9. To target a device based on its features, identify the syntax used to add a feature and its value to the media attribute.
    1. @media="devices and|or (feature:value)"
    2. media="devices and|or (feature:value)"
    3. media="devices and&&or (feature:value)"
    4. media="devices and|or (*feature:value)"
  10. The _____ is a device feature that gives the ratio of the width of the display area to its height.
    1. index-ratio
    2. display-ratio
    3. aspect-ratio
    4. orientation-ratio
  11. Identify the media query that applies style rules only to screens that are at least 300 pixels wide.
    1. @media screen and (min-width: 300px) {
          style rules
      }
    2. media screen and (@min-width: 300px) {
          style rules
      }
    3. media screen and (least-width: 300px) {
          style rules
      }
    4. @media screen and (@minwidth: 300px) {
          style rules
      }
  12. Multiple media features can be combined using _____.
    1. real-time operators
    2. logical operators
    3. relational operators
    4. dimensional operators
  13. Identify the query that matches any screen device that also supports color.
    1. @media screen and color {
          style rules
      }
    2. media (@screen) and (@color) {
          style rules
      }
    3. @media screen and @(color) {
          style rules
      }
    4. @media screen and (color) {
          style rules
      }
  14. For older browsers that do not support media queries, Cascading Style Sheets (CSS) 3 provides the _____ keyword to hide style sheets from those browsers.
    1. initial
    2. none
    3. only
    4. auto
  15. Web pages are seen within a window called the _____.
    1. wireframe
    2. navigator
    3. prototype
    4. viewport
  16. Mobile devices have a _____ containing the entire content of the page, some of which may be hidden from a user.
    1. layout viewport
    2. navigating viewport
    3. wireframe viewport
    4. contextual viewport
  17. 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 _____.
    1. pulldown menus
    2. navigation viewports
    3. horizontal wireframes
    4. contextual data
  18. 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.
    1. a.submenuTitle:hover+ul.submenu, hover: ul.submenu
    2. a.submenuTitle:hover+ul.submenu, ul.submenu:hover
    3. a.submenuTitle:hover+ul.submenu, *ul.submenu:&hover
    4. a.submenuTitle:hover+ul.submenu, ul.submenu:@hover
  19. A mobile browser will interpret a _____ event as a tap event in which a user taps a page object.
    1. block
    2. compilation
    3. selection
    4. hover
  20. When a hover event is used to hide an object or display it, mobile browsers employ a _____ event.
    1. double-tap
    2. compilation
    3. selection
    4. highlight-text
  21. 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.
    1. first tap
    2. second tap
    3. title toolbar
    4. texting event
  22. An alternative to direct testing of mobile interfaces on all mobile devices is the use of _____.
    1. mobile device spurs
    2. mobile device synchronizers
    3. mobile device emulators
    4. mobile device initiators
  23. 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 _____.
    1. display the submenus one after the other
    2. float the submenus side-by-side
    3. reduce the width of the submenu display bars
    4. partially overlap the submenu titles
  24. To make the submenus in a tablet device overlay the page content, the submenus should be placed with _____.
    1. relative positioning
    2. z-index positioning
    3. incremental positioning
    4. absolute positioning
  25. 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 _____.
    1. relative
    2. actual
    3. logical
    4. absolute
  26. 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.
    1. relative element
    2. drop shadow
    3. logical tag
    4. absolute position
  27. _____ can be used to have a single specification that automatically adapts itself to the screen width without requiring a new layout design.
    1. Flexible boxes
    2. Drop shadows
    3. Logical tags
    4. Absolute positioning
  28. Items within a flexbox are laid out along a _____, which can point in either the horizontal or vertical direction.
    1. void axis
    2. main axis
    3. sub axis
    4. cross axis
  29. 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.
    1. flow axis
    2. logic axis
    3. void axis
    4. cross axis
  30. Identify the flex-direction property that is used to change the orientation of a flexbox.
    1. flex-direction: orient_direction;
    2. flex-direction: direction;
    3. @flex-direction: direction;
    4. flex-direction: *direction;
  31. 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.
    1. flex-wrap: type<flexbox>;
    2. flex-wrap: @type;
    3. @flex-wrap: type;
    4. flex-wrap: type;
  32. Identify the correct flex-flow style that combines both the flex-direction and flex-wrap properties.
    1. flex-flow: direction wrap;
    2. flex-flow: direction||wrap;
    3. flex-flow: direction&&wrap;
    4. flex-flow: flex-direction, flex-wrap;
  33. 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.
    1. flex: 0 1 initial;
    2. flex: 0 1 none;
    3. flex: 0 1 inherit;
    4. flex: 0 1 auto;
  34. In Cascading Style Sheets (CSS) every printed page is defined as a _____.
    1. boxed element
    2. boxed schema
    3. page schema
    4. page box
  35. A page box is composed of a _____, which contains the content of a document.
    1. page element
    2. page schema
    3. page area
    4. page layout
  36. Identify the page rule using which styles are applied to a page box.
    1. #page {
          style rules
      }
    2. @page {
          style rules
      }
    3. *page {
          style rules
      }
    4. <page> {
          style rules
      }
  37. Identify the correct format to set the size of a page margin to 0.5 inches.
    1. @page {
          *margin: 0.5in
      }
    2. @page {
          margin: 0.5in;
      }
    3. @page {
          <margin>: 0.5in;
      }
    4. @page {
          margin: (0.5in);
      }
  38. Identify the format for manually inserting a page break directly before an element.
    1. before(page-break): type;
    2. page-break-before: type;
    3. <page-break/>before: type;
    4. page-break: *before-type;
  39. 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.
    1. h1 {
          page-break-before: always;
      }
    2. h1 {
          page-break-before: auto;
      }
    3. h1 {
          page-break-before: inherit;
      }
    4. h1 {
          page-break-before: content;
      }
  40. 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.
    1. hide
    2. stop
    3. avoid
    4. block
  41. Identify the page-break-inside property that prevents printers from inserting a page break.
    1. page-break-inside: always;
    2. page-break-inside: type;
    3. page-break-insert: avoid;
    4. page-break-insert: type;
  42. Page breaks within block elements can often leave behind _____, which is a fragment of text left dangling at the top of page.
    1. lags
    2. orphans
    3. widows
    4. gaps
  43. Page breaks within block elements can often leave behind _____, which is a text fragment left at the bottom of a page.
    1. lags
    2. orphans
    3. widows
    4. gaps
    44. Case-Based Critical Thinking Questions

    Case 5-1 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.

  44. 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?
    1. Pop-up links
    2. Header links
    3. Navigator menus
    4. Pulldown menus
  45. 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.
    1. set the width of the layout viewport to the width of the nested lists
    2. put each of the nested lists within a class
    3. nsert the structure of the nested list within a specific style sheet structure
    4. use the only keyword to hide the list items
  46. 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?
    1. *submenuTitle:hover+<ul>submenu
    2. submenuTitle:@hover+ul.submenu
    3. a.submenuTitle:hover+ul.submenu
    4. a.submenuTitle: ul.submenu+hover
    47. Case-Based Critical Thinking Questions

    Case 5-2 Lara is the chief editor of "Laughter and Life," an online magazine. Lara has assigned Jenny the task of redesigning the magazine's website. Lara has supplied Jenny with all the necessary documents and images that are essential to enhance the look of the website. Lara's requirements necessitate the use of flexboxes to redesign the website.

  47. 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?
    1. align: value;
    2. order: value;
    3. justify: value;
    4. content: value;
  48. 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?
    1. align-content
    2. order-content
    3. justify-content
    4. organize-content
  49. 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.
    1. space-between
    2. space-around
    3. space-under
    4. space-above

TRUE FALSE

  1. 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.
  2. While designing web pages for mobile devices, the overall file size should be kept small.
  3. Viewing a web page on a mobile device gives the same experience as viewing the same web page on a desktop computer.
  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.
  5. When no media attribute is used, a style sheet is assumed to apply to all devices accessing the web page.
  6. 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.
  7. The media feature orientation accepts min- and max- prefixes.
  8. With responsive design, it is easier to replace styles than to add new styles.
  9. Desktop computers have two types of viewports: a visual viewport and a layout viewport.
  10. 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.
  11. One of the key components while creating a mobile website design is to have the most important information up-front and easily i>
  12. An individual cannot use only the ul.submenu:hover selector because one cannot hover over the submenu until it is visible.
  13. A flexbox is a box containing items whose sizes are fixed.
  14. Different items within a flexbox can have different growth rates.
  15. Order values for flexboxes cannot be negative.
  16. The align-items property is only impactful when there are multiple lines of flex items.
  17. The default style of browsers to format the print versions of the web pages they encounter always result in the best printouts.
  18. The styles applied to a page box using the @page rule are limited to defining the page size and the page margin.
  19. By default, the @page rule is applied only to the first page of the printed output.
  20. A page name should be created to define styles for the first, left, and right pages.

SHORT ANSWER

  1. _________ images, a primary component of responsive design theory, rescale based on the size of a viewing device.
  2. The _________ media type is used for fixed-width devices such as teletype machines and terminals.
  3. Media devices can be specified when importing one style sheet into another by adding the media type to the _________ rule.
  4. The _________ operator negates any feature found in an expression.
  5. Mobile devices have a _________ viewport that displays a web page content that fits within a mobile screen.
  6. While creating a website for tablet design, objects placed with _________ positioning are removed from the document flow.
  7. A(n) _________ is a box containing items whose sizes can shrink or grow to match the boundaries of the box.
  8. 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.
  9. 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.
  10. 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.
  11. A page box is composed of the _________, which contains the space between the printed content and the edges of the page.
  12. 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.
  13. 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.

Check Your Answers