HTML Flashcards
Which responsive design technique adapts an image’s size to the device’s screen size by specifying a percentage for each dimension?
Fluid Image
What do we call an application designed for a specific mobile operating system?
Mobile App
What do we call a web site designed specifically for viewing on mobile device browsers?
Mobile Web Site
What do we call a web site designed to adapt to many different devices?
Responsive Web Design (RWD)
What are three Responsive Web Design techniques use to adjusts gracefully for desktop, tablet and smartphone browsers?
- Grid-based layouts
- Resizable images
- Media queries
What is an adaptive grid that uses percentage-based dimensions?
Fluid-grid
What uses invisible guidelines to help you place page elements to accommodate various screen sizes?
Grid-based layouts
What tools, templates or boiler-plates provide the basic foundation for responsive design?
Frameworks
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?
Bootstrap
What technique creates a link to dial a phone number?
Click-to-call
How do you implement the protocol that creates a link to dial a phone number?
<a>
Call Now!
</a>
How do you implement the protocol that creates a link to draft an email?
<a href=”mailto:(email)>
Email
</a>
How do you implement the protocol that creates a link to send a text message?
<a>
Text
</a>
What CSS3 technique checks a client device and then targets styles based on the device’s properties?
Media Queries
What navigation techniques should you employ for mobile devices?
- Placement of navigation elements.
- Text-based hyperlinks.
- Access to the full version of the site.
- Limited links.
What process ensures that your code complies with standards?
Validation
What process shows you how your pages will render and perform on various platforms doing various tasks?
Testing
Mobile Web sites are easier to develop because they are written with which language?
HTML
What techniques should you use to maximize usability of a mobile site design?
- Page layout for mobile devices.
- Hyperlinks and navigation on mobile devices.
- Images for mobile devices.
- Mobile Web page validation and testing.
When designing mobile Web sites, which of the following should you do to simplify the site design?
Minimize the number of links needed to navigate the site.
Because mobile device users must type on a small touchscreen you should do what?
Require less text entry.
Where on the a mobile web page should you position a search field for quick access?
Top of the page.
What techniques will make your content easier to view and use on mobile devices?
- Simplify the design.
- Divide pages into smaller portions.
- Require less text entry.
- Avoid pop-ups.
What are absolute length units that are fixed and will appear as exactly that size?
- cm (centimeters)
- mm (millimeters)
- in (inches)
- px (pixels)
- pt (points)
- pc (picas)
What are relative length units that specify a length relative to another length property?
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)
What tool is used to test sites for cross-browser compatibility?
Emulator
How can you design your site so that various mobile devices can easily accommodate it?
Create flexible-sized elements using percentages instead of pixels.
Which technique should you use to make your hyperlinks easier to find and click on mobile devices?
Pad the clickable area around your links.
What challenges should you consider when including images in your mobile design?
- File sizes/memory
- Size constraints
Using radio buttons, check boxes and drop-down lists instead of text boxes helps what?
Mobile users
Is a mobile website easier or more difficult to maintain than a responsive website?
More difficult.
Which type of web content naturally performs better in searches and SEO?
Responsive Web Sites
What are the benefits of mobile apps?
- Uses all device capabilities (GPS, camera, voice, RFID, address book, calendar, etc.)
- High performance as the code is local to the device.
What are the benefits of mobile web sites?
- Designed to require less bandwidth
all users see the latest updates
What are the benefits of responsive web sites?
- Easiest to support and maintain.
- Most forward-compatibility.
- Lowest cost to develop.
What defines the user’s visible area of a web page and varies with the device?
Viewport
How do you give the browser instructions on how to control the page’s dimensions and scaling?
<meta></meta>
How do you define CSS rules that only apply if a device’s screen size is 600px or smaller?
@media only screen and (max-width: 600px) {}
How do you define CSS rules that only apply if a device’s screen size is 600px or larger?
@media only screen and (min-width: 600px) {}
What does responsive web design aim to implement throughout the design?
Dynamic element adjustments.
