Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

RWD > Responsive Web Design > Flashcards

Responsive Web Design Flashcards

1
Q 
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.
A

D

Media queries.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q 
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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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.

A

D

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q 
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.
A

B

21.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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.

A

B

Laptops, desktops, and large tablets.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q 
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.
A

D

The details tag and the summary tag.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q 
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.
A

B

The HTML5 < picture > element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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.

A

B

SVG is the only vector graphics format supported in browsers.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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.

A

C

Entering keyboard data can be a hassle for mobile users.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q 
Which of the following is essential when using Bootstrap components (widgets)?
A
Carousels.
B
Bootstrap's JavaScript files.
C
Bootstrap templates.
D
Bootstrap themes.
A

B

Bootstrap’s JavaScript files.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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.

A

D

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q 
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

D

A listview.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q 
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

A

A wide range of external lighting environments.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

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.

A

A

Fluid design is part of responsive Web design.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q 
What programming language do designers use to write native apps?
A
Media queries.
B
HTML5.
C
JavaScript.
D
Objective C.
A

D

Objective C.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q 
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.
A

C

The number of columns used to lay out the page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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.

A

C

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q 
Which of the following is an absolute unit of measurement in Web design?
A
Percent.
B
Multiple.
C
Meters.
D
Inches.
A

D

Inches.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

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.

A

D

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

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.

A

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q 
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.
A

B

Pixels.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

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.

A

D

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q 
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.
A

B

Printer.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q 
Which of the following is a valid parameter for a media query?
A
Volume.
B
Brightness (backlighting intensity).
C
Ambient lighting.
D
Width.
A

D

Width.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

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

A

Create the menu options as an HTML list.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

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.

A

B

Listing fewer navigation options for mobile users.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

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.

A

C

The width of the physical device screen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

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

A

Use an online resource.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

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.

A

C

Color contrast should be higher in mobile devices.

30
Q 
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.
A

B

Black text on a white background.

31
Q 
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.
A

C

Google Fonts.

32
Q 
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.
A

C

HTML and CSS code.

33
Q 
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

A

float.

34
Q 
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
A

D

A logical operator.

35
Q 
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 >
A

C

A < section > element.

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

C

AND.

37
Q 
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 >
A

B

float.

38
Q

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.

A

B

The < details >element always comes first.

39
Q

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.

A

B

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

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

B

display:none;.

41
Q 
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;.
A

B

< details open >

42
Q 
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 >
A

C

cursor:pointer;.

43
Q 
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

A

Compress images.

44
Q 
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.
A

D

Use the < picture > element.

45
Q

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.

A

B

Faster downloading.

46
Q 
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.
A

B

Image size and srcset parameters.

47
Q

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.

A

B

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

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

D

SVG.

49
Q

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.

A

B

SVG images rescale without distortion.

50
Q 
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.
A

C

XML.

51
Q 
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.
A

D

All browsing environments.

52
Q

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.

A

B

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

53
Q

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.

A

B

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

54
Q

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.

A

B

You must define a element.

55
Q

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

A

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

56
Q

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.

A

B

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

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

D

Placeholder text.

58
Q 
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.
A

B

They are responsive.

59
Q 
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.
A

D

They are all frameworks.

60
Q

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.

A

D

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

61
Q

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.

A

D

Edit HTML5 code.

62
Q 
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.
A

B

CSS.

63
Q

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.

A

D

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

64
Q

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.

A

D

Web apps are built with HTML.

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

B

Button.

66
Q 
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.
A

B

jQuery Mobile ThemeRoller.

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

B

Global style elements.

68
Q 
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

A

Media queries.

69
Q

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

A

Listviews provide app-style navigation for mobile users.

70
Q 
What HTML5 element is used to define items in a listview?
A
The link (<a>) element.
B
The <li> element.
C
The  element.
D
jQuery Mobile.</li></a>
A

B

The <li> element.</li>

71
Q

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.

A

B

A desktop viewport.

72
Q 
What element is used to define a title in a two-line listview link?
A
An unordered list <ul> element.
B
A heading element (like h2 or h3).
C
An <li> list element.
D
An <a> link element.</a></li></ul>
A

B

A heading element (like h2 or h3).

RWD (1 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions