Overview + review

Question 1

Draw out a sketch of a standard desktop website. Medium i-pad and small I-phone.

Answer 1

Question 2

Where do you and your containers for iPhone, iPad or desktop?

Answer 2

Inside the BODY you can start ARTICLE and list it as DIV CLASS = PROMO

Question 3

What should the order of your containers be?

Answer 3

HTML

< HEAD> META TITLE w NAME

/HEAD

BODY DIV CLASS PAGE

HEADER A CLASS

ARTICLE

DIV CLASS PROMO x 3

NAV

A HREF=# About, service, portfolio, contact

FOOTER

©

/FOOTER

Question 4

What goes inside an ARTICLE tag inside?

Answer 4

1. New in HTML5, not supported in IE8 earlier
2. Can access by getElementById():
3. The tag specifies independent, self-contained content
4. Article should make sense on it’s own and should be possible to distribute independently from site
5. Potential sources: forum post, blog post, news story and comment

Question 5

Why do we use CONTENT BLOCKS in responsive web design?

Answer 5

When you focus on one block at a time, you can style content appropriately one block at a time.

Question 6

How can 1 team ork on the header while another team on side bar or main content area?

Answer 6

With style + code guidelines established using content blocks

Question 7

Why is content blocks so important in responsive web design?

Answer 7

Information can be reorganized, moved around or repeated to fit around content.

Once you see as modules, they become interchangable.

Website = BLOCKS PUT TOGETHER

Question 8

Can we define 4 interactive elements + progressive enhancements of the website?

Answer 8

The interactive elements are 4 layers on top of one another:

1. Interactive layer (Javascript)
2. Style layer (CSS)
3. Element Layer (images, frame)
4. Markup layer (foundation)

Question 9

Can you name 2 schools of thought on web design?

Answer 9

1. Graceful degradation: older browsers display reduced-quality but still work, may bugs / functionality
2. Progressive Enhancement: All browsers display full-featured baseline experience