C777 Unit 6: Designing for Mobile Devices

fluid image

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

mobile app

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

mobile Web site

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

Responsive Web Design (RWD)

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

Grid-based layouts

Resizable images

Media queries

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

fluid grid

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

Grid-based layouts

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

frameworks

What tools, templates or boilerplates provide the basic foundation for responsive design?

Bootstrap

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?

click-to-call

What technique creates a link to dial a phone number?

Click Here

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

Click Here

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

Click Here

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

media queries

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

Placement of navigation elements

Text-based hyperlinks

Access to the full version of the site

Limited links

What navigation techniques should you employ for mobile devices?

validation

What process ensures that your code complies with standards?

testing

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

HTML

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

Page layout for mobile devices

Hyperlinks and navigation on mobile devices

Images for mobile devices

Mobile Web page validation and testing

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

Minimize the number of links needed to navigate the site

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

Require less text entry

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

top of the page

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

Simplify the design

Divide pages into smaller portions

Require less text entry

Avoid pop-ups

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

cm (centimeters)

mm (millimeters)

in (inches)

px (pixels)

pt (points)

pc (picas)

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

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 are relative length units that specify a length relative to another length property?

emulator

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

Create flexible-sized elements using percentages instead of pixels.

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

pad the clickable area around your links

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

file sizes/memory

size constraints

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

mobile users

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

more difficult

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

responsive web site

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

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 apps?

designed to require less bandwidth

all users see the latest updates

What are the benefits of mobile web sites?

easiest to support and maintain

most forward-compatibility

lowest cost to develop

What are the benefits of responsive web sites?

viewport

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

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

@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 smaller?

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

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

dynamic element adjustments

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