Deck 5: Responsive Design Part 1 Designing for Mobile Devices

Question 1

The _____ viewport element provides the browser with information about the page's dimensions and how to adjust scaling on the webpage. 

A) span
B) meta
C) length
D) label

Answer 1

B

Question 2

_____ provide statistics on how many people visit a website as well as what browsers and devices were used and what choices the user made while at a website.

A) Web proxies
B) Web synchronizers
C) Web crawlers
D) Web analytics

Answer 2

D

Question 3

A(n) _____ is considered by some to be a more productive and effective way to build a website from scratch because it forces a web developer to focus on the core, essential content first for the smallest viewport.

A) app-first strategy
B) mobile-first strategy
C) view-first strategy
D) information-first strategy

Answer 3

B

Question 4

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

A) Adaptive design
B) Meta design
C) Hotspot design
D) Responsive design

Question 5

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

A) Open layouts
B) Liquid layouts
C) Fixed layouts
D) Fluid layouts

Question 6

Identify the meta tag that must be added to the head section of each responsive webpage to ensure that the page initially loads in a layout width that matches the viewport of the device.

A) content="width=device-width, initial-scale=1">
B) page="width=device-width, initial-scale=1">
C) width="width=device-width, initial-scale=1">
D) view="width=device-width, initial-scale=1">

Question 7

The CSS property to round corners is ______. 

A) list-style-type
B) border-radius
C) border-style-type
D) list-radius

Question 8

_____ is the study of how users interact with a website.

A) Web analytics
B) Web synchronization
C) Web scutter
D) Web proxy

Question 9

Displaying desktop content in a mobile viewport can be prevented by setting the value of the display property to _____.

A) none
B) only_mobile
C) no_desk
D) hide

Question 10

Developers use _____ to measure the widths of the wireframe elements and flexible images. 

A) percentages
B) points
C) picas
D) pixels

Question 11

_____ possess the same width even if the size of the viewport changes.

A) Fixed layouts
B) Fluid layouts
C) Liquid layouts
D) Adaptive layouts

Question 12

You implement fluid layouts by measuring the widths of the wireframe elements and content in relative units such as percentages and _____. 

A) ems
B) pts
C) cms
D) pcs

Question 13

The term _____ refers to the ever-expanding number of devices that connect to the Internet to share information.

A) Cloud Computing
B) Internet of Things (IoT)
C) Big Data
D) Mobile-to-Mail (M2M)

Question 14

_____ seeks to optimize the viewing experience for a wide range of devices using one website.

A) Responsive design
B) Hotspot design
C) Indexed design
D) Coordinated design

Question 15

One _____ is equal to one dot on a display screen.

A) pixel
B) pica
C) em
D) rem

Question 16

Many mobile viewport designs use a _____ button or icon to display or toggle a navigation system. 

A) favicon
B) logo
C) hamburger
D) cart

Question 17

To create a(n) _____ grid, you design a webpage that uses a grid or columns.

A) fluid
B) indexed
C) coded
D) cast

Question 18

Responsive designs are based on _____.

A) fixed layouts
B) fluid layouts
C) closed layouts
D) static layouts

Question 19

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

A) hotspot layout
B) fluid layout
C) fixed layout
D) grid layout

Question 20

Hiding nonessential content in the mobile viewport minimizes _____.

A) scrolling
B) clicking
C) hashing
D) indexing

Question 21

A website developed with responsive design principles from the very beginning is more work to maintain down the road.

Question 22

_____ is an effective troubleshooting tool during the development process and adds a valuable level of professionalism to one's work.

A) Stacking
B) Validation
C) Synchronization
D) Indexing

Question 23

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

A) viewport
B) viewbox
C) hotspot
D) slide

Question 24

When creating styles that include units of measurement, do not put a space between the value and the unit of measure.

Question 25

On a traditional Windows desktop computer, a viewport is usually the window itself.

Question 26

By applying adaptive design principles, a webpage and its content respond to the screen size of a user's device to minimize unnecessary scrolling and zooming.

Question 27

The mobile website approach means that developers revamp an existing website to suit small mobile viewports instead of building a new and parallel website from scratch.

Question 28

A device _____ is used to test a mobile application on a mobile device.

A) modulator
B) emulator
C) adapter
D) synchronizer

Question 29

A mobile-first strategy employs responsive design principles.

Question 30

Responsive designs are based on fluid layouts.

Question 31

Fixed images do not have height and width attributes or values in a Hypertext Markup Language (HTML) document.

Question 32

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.

Question 33

The explosive growth of mobile browsers, including those on phones and tablets, quickly created serious problems for webpage developers because smaller viewports often required excessive  _____.

A) stacking
B) indexing
C) clicking
D) zooming

Question 34

Webpages that require users to zoom and scroll to read and navigate the website attract more visitors.

Question 35

The data from web analytics helps a web developer design a site to meet the needs of their desired audience.

Question 36

If a document has any errors, _____ gives one a chance to identify and correct them.

A) validating
B) hyperlinking
C) emulating
D) viewporting

Question 37

Bootstrap queries allow a webpage developer to selectively apply Cascading Style Sheet (CSS) rules that work best for a given viewport size.

Question 38

A _____ refers to the portion of a webpage that a user sees at any one time, regardless of device, browser, screen size, screen resolution, window size, or orientation.

A) wireframe
B) viewport
C) slide
D) hotspot

Question 39

Following a mobile-first strategy, a web developer designs the flexible wireframe and essential content for the largest viewport first.

Question 40

Fluid layouts can involve a tremendous amount of horizontal scrolling and require a lot of zooming on small viewports.

Question 41

_____ shrink and grow based on the size of a viewport.

A) Flexible images
B) Stable images
C) Closed images
D) Indexed images

Question 42

The appropriate meta viewport element helps the webpage initially load in a size that matches the viewport size . 

Question 43

Fixed layouts do not work well for smaller viewports.

Question 44

Responsive sites use pc as their unit of measurement.

Question 45

A top property can never have a value of zero. 

Question 46

Developers use percentages to measure the widths of the wireframe elements and flexible images. 

Question 47

A media query detects the media type and capabilities of the device that a browser is running on.

Question 48

When following a mobile-first strategy, a mobile user must be presented with desktop content also.

Question 49

Displaying what mobile device users need and want on a single screen with extensive scrolling and zooming creates a more enjoyable experience.

Question 50

If you already have page content, you may need to hide some content for a mobile viewport. 

Question 51

Validating a Hypertext Markup Language document will check the document for any errors.

Question 52

It is a best practice to use a three-column layout for a mobile display, as this prevents scrolling horizontally.

Question 53

On a traditional Windows desktop computer, the _____ is usually the window itself.

A) dongle
B) hotspot
C) viewport
D) slide

Question 54

Styling content for mobile devices is the same as styling content for a desktop display.

Question 55

_____ allow a webpage developer to detect the approximate pixel size of the current viewport.

A) Media hotspots
B) System viewports
C) Media queries
D) Meta ports

Question 56

Traditionally, for a browser to use a specified font, it had to be stored on the local client machine.

Question 57

The  viewport refers to the area of the webpage that a user sees at any one time, regardless of device, browser, screen size, screen resolution, window size, or orientation.

Question 58

By default, element borders use a 90-degree angle at each corner. 

Question 59

Fixed layouts are appropriate for webpages used in controlled environments such as those created for a specific purpose within an internal company intranet.

Question 60

Load times may be enhanced by adding bandwidth-intensive content.

Question 61

Identify a mobile website from the given Uniform Resource Locators (URLs).

A) http://phsc.edu.mo/
B) http://m.phsc.edu/
C) http://im.phsc.edu/
D) http://phsc.edu.mobi/

Question 63

Explain in one's own words the best practices to be considered when designing for mobile viewports.

Question 64

Discuss responsive design. Include the terms fluid layout, media queries, and responsive images in your response.

Question 65

Describe in detail the mobile-first strategy.

Question 66

Identify the cascading Style Sheet (CSS) unit Aslina should use to measure the width of the wireframe elements in her website.

A) %
B) px
C) pc
D) in

Question 67

_____ use Cascading Style Sheet (CSS) rules to resize an image relative to the wireframe and viewport.

A) Closed images
B) Stable images
C) Indexed images
D) Flexible images

Question 68

Zach wants to present his content in such a way that the site content shrinks and expands according to the type of device used to access the site. Which of the following layouts should Zach use for this purpose?

A) static layout
B) fluid layout
C) fixed layout
D) grid layout

Question 69

Zach wants to detect the approximate pixel size of the current viewport so that it will help him selectively apply Cascading Style Sheet (CSS) rules that work best for that viewport size. Identify the concept of responsive design will help Zach get the required information.

A) media hotspots
B) system viewports
C) media queries
D) meta ports

Question 70

While developing her  website, she wants to  follow a mobile-first strategy. What viewport should she focus on first? 

A) hybrid
B) smallest
C) laptop
D) desktop

Question 71

Mobile websites are often identified with a(n) _____ prefix in the Uniform Resource Locator (URL).

A) m.obi.
B) e.m.
C) cell.
D) m.