HTML Flashcards

1
Q

Which responsive design technique adapts an image’s size to the device’s screen size by specifying a percentage for each dimension?

A

Fluid Image

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

What do we call an application designed for a specific mobile operating system?

A

Mobile App

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

What do we call a web site designed specifically for viewing on mobile device browsers?

A

Mobile Web Site

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

What do we call a web site designed to adapt to many different devices?

A

Responsive Web Design (RWD)

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

What are three Responsive Web Design techniques use to adjusts gracefully for desktop, tablet and smartphone browsers?

A
  • Grid-based layouts
  • Resizable images
  • Media queries
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is an adaptive grid that uses percentage-based dimensions?

A

Fluid-grid

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

What uses invisible guidelines to help you place page elements to accommodate various screen sizes?

A

Grid-based layouts

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

What tools, templates or boiler-plates provide the basic foundation for responsive design?

A

Frameworks

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

What is one of the most popular frameworks that provides a collection of HTML- and CSS-based design templates for typography, buttons, navigation, forms and other interface components?

A

Bootstrap

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

What technique creates a link to dial a phone number?

A

Click-to-call

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

How do you implement the protocol that creates a link to dial a phone number?

A

<a>
Call Now!
</a>

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

How do you implement the protocol that creates a link to draft an email?

A

<a href=”mailto:(email)>
Email
</a>

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

How do you implement the protocol that creates a link to send a text message?

A

<a>
Text
</a>

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

What CSS3 technique checks a client device and then targets styles based on the device’s properties?

A

Media Queries

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

What navigation techniques should you employ for mobile devices?

A
  • Placement of navigation elements.
  • Text-based hyperlinks.
  • Access to the full version of the site.
  • Limited links.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What process ensures that your code complies with standards?

A

Validation

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

What process shows you how your pages will render and perform on various platforms doing various tasks?

A

Testing

18
Q

Mobile Web sites are easier to develop because they are written with which language?

A

HTML

19
Q

What techniques should you use to maximize usability of a mobile site design?

A
  • Page layout for mobile devices.
  • Hyperlinks and navigation on mobile devices.
  • Images for mobile devices.
  • Mobile Web page validation and testing.
20
Q

When designing mobile Web sites, which of the following should you do to simplify the site design?

A

Minimize the number of links needed to navigate the site.

21
Q

Because mobile device users must type on a small touchscreen you should do what?

A

Require less text entry.

22
Q

Where on the a mobile web page should you position a search field for quick access?

A

Top of the page.

23
Q

What techniques will make your content easier to view and use on mobile devices?

A
  • Simplify the design.
  • Divide pages into smaller portions.
  • Require less text entry.
  • Avoid pop-ups.
24
Q

What are absolute length units that are fixed and will appear as exactly that size?

A
  • cm (centimeters)
  • mm (millimeters)
  • in (inches)
  • px (pixels)
  • pt (points)
  • pc (picas)
25
Q

What are relative length units that specify a length relative to another length property?

A

em (relative to the font-size)
ex (relative to the x-height of the current font)
rem (relative to font-size of the root element)
vw (relative to 1% of the width of the viewport)
vh (relative to 1% of the height of the viewport)
% (relative to the parent element)

26
Q

What tool is used to test sites for cross-browser compatibility?

A

Emulator

27
Q

How can you design your site so that various mobile devices can easily accommodate it?

A

Create flexible-sized elements using percentages instead of pixels.

28
Q

Which technique should you use to make your hyperlinks easier to find and click on mobile devices?

A

Pad the clickable area around your links.

29
Q

What challenges should you consider when including images in your mobile design?

A
  • File sizes/memory
  • Size constraints
30
Q

Using radio buttons, check boxes and drop-down lists instead of text boxes helps what?

A

Mobile users

31
Q

Is a mobile website easier or more difficult to maintain than a responsive website?

A

More difficult.

32
Q

Which type of web content naturally performs better in searches and SEO?

A

Responsive Web Sites

33
Q

What are the benefits of mobile apps?

A
  • Uses all device capabilities (GPS, camera, voice, RFID, address book, calendar, etc.)
  • High performance as the code is local to the device.
34
Q

What are the benefits of mobile web sites?

A
  • Designed to require less bandwidth
    all users see the latest updates
35
Q

What are the benefits of responsive web sites?

A
  • Easiest to support and maintain.
  • Most forward-compatibility.
  • Lowest cost to develop.
36
Q

What defines the user’s visible area of a web page and varies with the device?

A

Viewport

37
Q

How do you give the browser instructions on how to control the page’s dimensions and scaling?

A

<meta></meta>

38
Q

How do you define CSS rules that only apply if a device’s screen size is 600px or smaller?

A

@media only screen and (max-width: 600px) {}

39
Q

How do you define CSS rules that only apply if a device’s screen size is 600px or larger?

A

@media only screen and (min-width: 600px) {}

40
Q

What does responsive web design aim to implement throughout the design?

A

Dynamic element adjustments.