Mobile First

Question 1

Why is mobile design important?

Answer 1

1. Devices are getting cheaper
2. Improved experience
3. More and more people are using mobile to access internet
4. Technology gap is decreasing

Question 2

Mobile myths are decreasing. What were the myths?

Answer 2

1. Only business man use cell phones
2. People using mobile devices are doing it in a rush
3. Only used outside of the home
4. People who use mobile don’t use desktops

Question 3

What are the disadvantages of having two different sized websites?

Answer 3

1. Expensive to keep two
2. Timing waster
3. SEO
4. Link sharing

Question 4

What is device agnostic?

Answer 4

Working sit regardless of what device they’re actually in.

Question 5

Limitations of mobile devices

Answer 5

1. Size
2. Processor is slower
3. At the mercy of broadband or data
4. No mouse or trackpad
5. Light and sounds
6. Distractions such as notifications
7. Do not have full access of hands (accessibility can be an issue)

Question 6

Advantages of mobile devices?

Answer 6

1. Geo location
2. Accelerometer - is a sensor that adjusts orientation of screen to provide comfortable viewing.
3. Gestures

Question 7

What does the term future friendly mean?

Answer 7

A site that will work no matter what; past present and future.

Question 8

What is progressive enhancement?

Answer 8

Making things better over time. Start building using the simplest form and enhancing overtime.

Question 9

What steps should you take within progressive enhancement

Answer 9

1. Content must be first
2. Semantic HTML
3. CSS2, 3 enhancement
4. JavaScript

Question 10

What is Graceful Degradation?

Answer 10

Designing for the best browser then going back. Does not work as you lock people out of your content

Question 11

What is the benefit to progressive enhancement?

Answer 11

Everyone can access content

Question 12

The progressive enhancement model consists of what two concepts?

Answer 12

1. Responsive Design

2. Mobile First

Question 13

Who created the term Responsive Design?

Answer 13

Ethan Marcotte

Question 14

What 4 components do you need to become responsive?

Answer 14

1. Flexible Layouts
2. Flexible Media (images and videos etc)
3. Media Queries
4. Fault Tolerance

Question 15

How do you accomplish flexible layouts?

Answer 15

Replace pixel use with em or rems and use percentages.

Use the viewport meta tag.

Question 16

What is the difference between ems and rems

Answer 16

Ems are relative to the parent

Rems are relative to the root

Question 17

How do you calculate ems or rems?

Answer 17

Target / context = Result

Question 18

What does the viewport meta tag do?

Answer 18

It does not shrink sites to the device. Keeps the sites full width of the viewport.
You should ALWAYS add this to your HTML.

Question 19

What does Fault Tolerance mean?

Answer 19

Property of an object to keep working after encountering an unexpected error.
If there is something wrong with HTML or CSS browser will ignore it.

Question 20

Why is mobile first so important?

Answer 20

Due to progressive enhancement