Responsive Web Design Flashcards
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.
D
Media queries.
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 relative unit of measurement used to define font size in type.
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.
D
Mobile devices do not have mice or a hover state to use on drop-down menus.
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.
B
21.
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.
B
Laptops, desktops, and large tablets.
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.
D
The details tag and the summary tag.
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.
B
The HTML5 < picture > element.
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.
B
SVG is the only vector graphics format supported in browsers.
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.
C
Entering keyboard data can be a hassle for mobile users.
Which of the following is essential when using Bootstrap components (widgets)? A Carousels. B Bootstrap's JavaScript files. C Bootstrap templates. D Bootstrap themes.
B
Bootstrap’s JavaScript files.
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.
D
Web apps run in a browser; native apps do not.
Which of the following is a frequently used navigation system for Web apps? A Bootstrap. B jQuery Mobile. C Media queries. D A listview.
D
A listview.
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 wide range of external lighting environments.
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
Fluid design is part of responsive Web design.
What programming language do designers use to write native apps? A Media queries. B HTML5. C JavaScript. D Objective C.
D
Objective C.
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.
C
The number of columns used to lay out the page.
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.
C
Responsive Web design takes substantially less investment in content and skill set than native apps.
Which of the following is an absolute unit of measurement in Web design? A Percent. B Multiple. C Meters. D Inches.
D
Inches.
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.
D
Rems make it easier to control the size of the list elements.
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
Define a width of 80%; modern browsers will do the rest.
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.
B
Pixels.
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.
D
Define a max-width parameter for the image style definition.
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.
B
Printer.
Which of the following is a valid parameter for a media query? A Volume. B Brightness (backlighting intensity). C Ambient lighting. D Width.
D
Width.
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 (<a>) element. B The <li> element. C The element. D jQuery Mobile.</li></a>
B
The <li> element.</li>
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 <ul> element. B A heading element (like h2 or h3). C An <li> list element. D An <a> link element.</a></li></ul>
B
A heading element (like h2 or h3).
