Responsive Web Design Flashcards by Brittney Pham

Which of the following is an essential element of responsive Web design?
A
Native apps.
B
Java coding.
C
Objective C coding.
D
Media queries.

Media queries.

How well did you know this?

Not at all

Perfectly

What is a rem in responsive Web design?
A
A relative unit of measurement used to define font size in type.
B
A measure of how quickly a screen refreshes.
C
A relative em.
D
A responsive em.

A relative unit of measurement used to define font size in type.

How well did you know this?

Not at all

Perfectly

Which of the following is a major challenge when designing responsive navigation menus?
A
Mobile devices do not generally support text links.
B
Drop-down menus require JavaScript, which is not supported in many mobile devices.
C
Mobile devices cannot open links in a new browser window or tab.
D
Mobile devices do not have mice or a hover state to use on drop-down menus.

Mobile devices do not have mice or a hover state to use on drop-down menus.

How well did you know this?

Not at all

Perfectly

Which of the following color contrast ratios provides the most accessible text in mobile devices?
A
5.
B
21.
C
8.1.
D
3.4.

21.

How well did you know this?

Not at all

Perfectly

Three-column page designs work best in which of the following environments?
A
Older smartphones.
B
Laptops, desktops, and large tablets.
C
Older iOS devices with viewports of 480 pixels or less.
D
Android smartphones with viewports smaller than 480 pixels.

Laptops, desktops, and large tablets.

How well did you know this?

Not at all

Perfectly

Which of the following HTML tags can you use to create content that collapses and expands? (tags have arrows)
A
The  show tag and the   hide tag.
B
The  expand  and  collapse tags.
C
The  expand  tag and the nest  tag.
D
The  details  tag and the  summary tag.

The details tag and the summary tag.

How well did you know this?

Not at all

Perfectly

Which of the following techniques supplies entirely different images in different user viewports?
A
Relative scaling.
B
The HTML5 < picture > element.
C
Applying a width property in CSS.
D
The HTML5  < responsive > element.

The HTML5 < picture > element.

How well did you know this?

Not at all

Perfectly

What is the distinguishing feature of the SVG image format?
A
The SVG format is the least supported image format in modern and older browsers.
B
SVG is the only vector graphics format supported in browsers.
C
The SVG format is the best way to present photos online.
D
The SVG format is the only image format supported in mobile devices.

SVG is the only vector graphics format supported in browsers.

How well did you know this?

Not at all

Perfectly

Which of the following presents a serious challenge for responsive form design?
A
Mobile forms cannot be linked to ASP scripts.
B
Mobile forms cannot be linked to PHP scripts.
C
Entering keyboard data can be a hassle for mobile users.
D
Mobile forms cannot be linked to Python scripts.

Entering keyboard data can be a hassle for mobile users.

How well did you know this?

Not at all

Perfectly

Which of the following is essential when using Bootstrap components (widgets)?
A
Carousels.
B
Bootstrap's JavaScript files.
C
Bootstrap templates.
D
Bootstrap themes.

Bootstrap’s JavaScript files.

How well did you know this?

Not at all

Perfectly

Which of the following distinguishes Web apps from native apps?
A
Web apps do not require a browser.
B
Native apps run only in a browser.
C
Native apps run only in laptops and desktops.
D
Web apps run in a browser; native apps do not.

Web apps run in a browser; native apps do not.

How well did you know this?

Not at all

Perfectly

Which of the following is a frequently used navigation system for Web apps?
A
Bootstrap.
B
jQuery Mobile.
C
Media queries.
D
A listview.

A listview.

How well did you know this?

Not at all

Perfectly

Which of the following challenges is unique to mobile Web browsing?
A
A wide range of external lighting environments.
B
The use of video.
C
Providing links.
D
Presenting images.

A wide range of external lighting environments.

How well did you know this?

Not at all

Perfectly

What is the relationship between fluid design and responsive Web design?
A
Fluid design is part of responsive Web design.
B
Fluid design and responsive Web design are the same thing.
C
Responsive Web design is part of fluid design.
D
Fluid design applies only to mobile devices.

Fluid design is part of responsive Web design.

How well did you know this?

Not at all

Perfectly

What programming language do designers use to write native apps?
A
Media queries.
B
HTML5.
C
JavaScript.
D
Objective C.

Objective C.

How well did you know this?

Not at all

Perfectly

Which design elements often change radically in different viewports when we apply responsive design?
A
The page title.
B
The URL for the page.
C
The number of columns used to lay out the page.
D
The basic page content.

The number of columns used to lay out the page.

How well did you know this?

Not at all

Perfectly

Compared to developing native apps, what kind of investment in content and skill set is required to build a responsive Web page?
A
Responsive Web design and native apps involve about the same amount of investment in content and skill set.
B
Native apps take much less investment in content and skill set than responsive design.
C
Responsive Web design takes substantially less investment in content and skill set than native apps.
D
Responsive Web design involves more investment in content but less investment in skill set than native apps.

Responsive Web design takes substantially less investment in content and skill set than native apps.

How well did you know this?

Not at all

Perfectly

Which of the following is an absolute unit of measurement in Web design?
A
Percent.
B
Multiple.
C
Meters.
D
Inches.

Inches.

How well did you know this?

Not at all

Perfectly

Which of the following is a good reason to use rems instead of ems?
A
Ems are an absolute unit of measurement and thus inappropriate for responsive Web design.
B
Rems are more complicated to apply than ems.
C
Ems are not supported in Firefox.
D
Rems make it easier to control the size of the list elements.

Rems make it easier to control the size of the list elements.

How well did you know this?

Not at all

Perfectly

If you want to define an image to display at 80% of its size without distorting the height-to-width ratio, which of the following is the simplest effective solution?
A
Define a width of 80%; modern browsers will do the rest.
B
You must calculate what 80% of the width of the image is, and enter that as a value in pixels.
C
You must define a width of 80% and a height of 80%, or the height-to-width ratio of the image will distort.
D
You must define a width of 80% and a height of “auto,” or the height-to-width ratio of the image will distort.

Define a width of 80%; modern browsers will do the rest.

How well did you know this?

Not at all

Perfectly

Which of the following units of measurement do designers usually use to create artwork in programs like Adobe Illustrator?
A
Inches.
B
Pixels.
C
Points.
D
Centimeters.

Pixels.

How well did you know this?

Not at all

Perfectly

If you want to define the maximum width at which a relatively sized image will display, you could use which of the following techniques?
A
Define a width parameter for the image style definition.
B
Size the image in percent.
C
Size the image in pixels.
D
Define a max-width parameter for the image style definition.

Define a max-width parameter for the image style definition.

How well did you know this?

Not at all

Perfectly

Which of the following is an example of a media type that might be detected by a media query?
A
Video file.
B
Printer.
C
JavaScript.
D
Image file.

Printer.

How well did you know this?

Not at all

Perfectly

Which of the following is a valid parameter for a media query?
A
Volume.
B
Brightness (backlighting intensity).
C
Ambient lighting.
D
Width.

Width.

How well did you know this?

Not at all

Perfectly

Which of the following is a frequently used and effective technique for building responsive menus? A Create the menu options as an HTML list. B Define the menu option content in a CSS style sheet file. C Create the menu content as a single image with clickable hotspots. D Create the menu options as an HTML table.

A | Create the menu options as an HTML list.

Which approach is often appropriate in translating a drop-down menu into a navigation menu useful in a mobile device? A Providing the same drop-down menu for mobile devices that you provide for laptops and desktops. B Listing fewer navigation options for mobile users. C Avoiding links altogether in mobile devices. D Using much smaller font sizes for mobile navigation elements.

B | Listing fewer navigation options for mobile users.

In a media query, what does device-width measure? A The height of the physical device screen. B Browser width or device width, whichever is greater. C The width of the physical device screen. D The width of a user's browser window.

C | The width of the physical device screen.

What's the fastest way to calculate color contrast values? A Use an online resource. B Validate your CSS with an online code validator. C Simply subtract one hexadecimal color value from another. D Simply add one hexadecimal color value to another.

A | Use an online resource.

What rule applies when creating color schemes for mobile devices versus desktops or laptops? A Color contrast should be lower in mobile devices. B Color contrast should not be applied in mobile device design. C Color contrast should be higher in mobile devices. D Color contrast should not exceed a value of 2.0 in mobile devices.

C | Color contrast should be higher in mobile devices.

``` Which of the following would be an optimal color scheme for a mobile device from an accessibility standpoint? A Red text on a green background. B Black text on a white background. C Light gray text on a dark gray background. D Light beige text on a brown background. ```

B | Black text on a white background.

``` To ensure that the fonts you choose for your mobile site will work on most mobile devices, what source should you use? A Windows fonts. B Macintosh fonts. C Google Fonts. D Serif fonts. ```

C | Google Fonts.

``` Which of the following technologies is required to link to and apply a custom font? A Only HTML. B Only CSS code. C HTML and CSS code. D Only PHP. ```

C | HTML and CSS code.

``` Which of the following CSS properties is used to define multicolumn page layouts? A float. B div tags. C text-align. D h3 tags. h3/div ```

A | float.

``` Which of the following is used to create a media query that works in tablet viewports larger than 480 pixels but narrower than 960 pixels? A A class style. B A div tag. C An ID style. D A logical operator.div ```

D | A logical operator.

``` Which of the following HTML elements works best to define responsive columns for a media query? A The < p > element. B Width. C A < section > element. D An < p >< h1 > element. < h1 > ```

C | A < section > element.

``` Which of the following is a logical operator? A TABLET. B WIDTH. C AND. D BECAUSE. ```

C | AND.

``` Which of the following CSS properties might be used to define a column's location in responsive page design? A background-color. B float. C A link (< a >) tag. D border. a > ```

B | float.

When you combine a < details > and < summary > element, which element comes first in the syntax? A The < summary >element always comes before a element. B The < details >element always comes first. C Neither one—the and elements cannot be used in the same document. D Either one—the element can be a child of the element, and vice versa.

B | The < details >element always comes first.

Which of the following is a valid reason for designing with < details > and < summary >elements? A The < details > and < summary > elements speed up downloading of video over slow Internet connections. B You can make a lot of content available in a small space in smartphones. C The < details > and < summary > elements speed up downloading of images over slow Internet connections. D The < details > and < summary > elements work best in very old versions of Internet Explorer.

B | You can make a lot of content available in a small space in smartphones.

``` Which CSS parameter below can you use to hide content in a media query? A < hidden > B display:none;. C < summary > D < details > ```

B | display:none;.

``` What HTML attribute can you use with the element to show summary details by default when a user opens a page? A < summary open > B < details open > C < open > D details:open;. ```

B | < details open >

``` Which of the following CSS properties displays a cursor as a link-type pointer? A < a href="" >. B a > < a >. C cursor:pointer;. D < link > a > ```

C | cursor:pointer;.

``` What technique can you use to reduce image file size and speed up download times in mobile devices? A Compress images. B Use the < Img > tag. C Applying relative sizing to images. D Use only JPEG images. ```

A | Compress images.

``` Which of the following techniques can be easily implemented now by designers without back-end coding to display different images depending on the size of a user's viewport? A Include an "alt" parameter. B Use very high-resolution images. C Create a back-end database that streams images. D Use the < picture > element. ```

D | Use the < picture > element.

When you compress an image file, what are you aiming to achieve? A To reduce the height and width dimensions of an image. B Faster downloading. C To force browsers to hide images until a user scrolls down the page. D Higher image quality.

B | Faster downloading.

``` If you want to provide multiple image sources and sizes for a single image, which of these techniques could you use? A A JPEG image. B Image size and srcset parameters. C Image compression. D A PNG image. ```

B | Image size and srcset parameters.

Which of these techniques speeds up the display of images? A Increasing the file size of images so that they download faster into a user's device. B Letting a browser download only the largest image that actually works in a user's viewport. C Applying relative sizing to images depending on the viewport. D Increase the number of images on a page.

B | Letting a browser download only the largest image that actually works in a user's viewport.

``` Which of the following is a vector image file format? A PNG. B GIF. C JPEG. D SVG. ```

D | SVG.

Which of the following is a distinct and unique advantage of the SVG format in responsive Web design? A SVG format is better for presenting photos. B SVG images rescale without distortion. C It's far easier to find free SVG images online than it is to find JPEG or PNG images. D SVG images have transparent backgrounds.

B | SVG images rescale without distortion.

``` The coding used to create SVG image files is derived from which language? A Objective C and other high-end programming languages. B JavaScript. C XML. D HTML. ```

C | XML.

``` SVG images are supported in which of the following browsing environments? A Any environment except new versions of Internet Explorer (9 and above). B Only in mobile devices. C Only in laptop/desktop environments. D All browsing environments. ```

D | All browsing environments.

Which of the following is a potential source of SVG artwork? A Most scanners output to SVG format. B Commercial (fee-based) online distributors have easily accessible libraries of SVG artwork. C Most online clip art and photos are in SVG format, and you can easily find SVG artwork using Google Images. D Any program that can create JPEG images from photos can create SVG artwork.

B | Commercial (fee-based) online distributors have easily accessible libraries of SVG artwork.

Which of the following is an advantage of using a tel input type in a form? A Mobile users can automatically dial a phone number. B Mobile users can easily enter phone numbers using a phone-type keypad. C Full-sized (laptop/desktop) users can enter data using their smartphones. D Users can pick a color from a graphical color-picker palette.

B | Mobile users can easily enter phone numbers using a phone-type keypad.

Which of the following is essential when designing responsive forms? A You must use ems as a unit of measurement. B You must define a element. C You must include a time input type. D You must use rems as a unit of measurement.

B | You must define a element.

Which of the following is an advantage of using the time input element in a responsive form? A The time input element makes it easy for mobile users to pick a time from a scrolling slider. B The time input element automatically timestamps forms. C The time input element automatically converts time from a user's location to Greenwich Mean Time (GMT). D The time input element records the amount of time a user takes to fill out a form.

A | The time input element makes it easy for mobile users to pick a time from a scrolling slider.

What does the email input type do in a responsive form? A It submits form data by email. B It makes it easy for users to begin entering their email addresses with a lowercase letter. C It automatically emails a confirmation to a user. D It automatically detects a user's email address.

B | It makes it easy for users to begin entering their email addresses with a lowercase letter.

``` Which of the following is an alternative to input field labels? A HTML5 validation. B Input field types. C Media queries. D Placeholder text. ```

D | Placeholder text.

``` Which of the following is true about nearly all Bootstrap widgets (components)? A They work only in full-sized browsers. B They are responsive. C They are based on PHP. D They only work in mobile-sized viewports. ```

B | They are responsive.

``` What do Bootstrap, jQuery Mobile, and WordPress have in common? A They are all widgets. B They require skill with PHP back-end coding to fully customize. C They are all very expensive to license. D They are all frameworks. ```

D | They are all frameworks.

What is the role of the Bootstrap CDN? A It provides HTML code validation for developers. B It provides CSS code validation for developers. C It provides licensing for use of Bootstrap in Canada. D It provides the JavaScript and CSS required to make Bootstrap widgets work.

D | It provides the JavaScript and CSS required to make Bootstrap widgets work.

Which of the following is the most flexible way to customize Bootstrap widgets? A Edit the back-end PHP code behind a Bootstrap page. B Purchase themes. C Edit the JavaScript that makes the widget work. D Edit HTML5 code.

D | Edit HTML5 code.

``` Which of the following coding skills is most valuable in customizing Bootstrap widgets? A JavaScript. B CSS. C PHP. D Bootstrap's proprietary CDN code. ```

B | CSS.

What is jQuery Mobile? A A scripting language used to create native apps for mobile devices. B A subset of JavaScript for coders developing apps on iPads. C A provider of widgets that must be edited in JavaScript. D A framework that allows designers to implement JavaScript widgets without coding.

D | A framework that allows designers to implement JavaScript widgets without coding.

What's a key difference between Web apps and native apps? A With native apps, it's easy to use the same HTML for different devices. B All things considered, native apps require far fewer technical and personnel resources than Web apps. C With native apps, it's easy to edit the styling if you know CSS. D Web apps are built with HTML.

D | Web apps are built with HTML.

``` Which of the following is a jQuery Mobile widget? A CSS. B Button. C Links. D HTML. ```

B | Button.

``` Which of the following is used to create custom styling for jQuery Mobile widgets? A jQuery Mobile Objective-C. B jQuery Mobile ThemeRoller. C Web apps. D Native apps. ```

B | jQuery Mobile ThemeRoller.

``` Which of the following defines fonts generated by ThemeRoller? A Swatch style elements. B Global style elements. C Objective-C. D HTML. ```

B | Global style elements.

``` What technique makes it easy to apply radically different formatting to mobile and desktop-sized viewports? A Media queries. B jQuery Mobile. C HTML5. D Listviews. ```

A | Media queries.

What is an advantage of using listviews? A Listviews provide app-style navigation for mobile users. B They provide an optimal experience for desktop users, especially those with very wide viewport screens. C They work well, even when designers do not link pages to the jQuery Mobile framework. D Listviews are generated automatically, the same way links and navigation elements are generated automatically in WordPress blogs.

A | Listviews provide app-style navigation for mobile users.

``` What HTML5 element is used to define items in a listview? A The link () element. B The

element. C The element. D jQuery Mobile.

```

B | The

element.

A horizontal navigation bar works best in which of the following viewports? A A smartphone with a viewport wider than 320 pixels but narrower than 480 pixels. B A desktop viewport. C A smartphone with a width of 320 pixels or less. D Smartphone viewports on newer, high-resolution mobile devices.

B | A desktop viewport.

``` What element is used to define a title in a two-line listview link? A An unordered list

list element. D An link element.

```

B | A heading element (like h2 or h3).