Goal

The goal of this exer­cise is to tai­lor design solu­tions to the appro­pri­ate media con­ven­tions and the widest range of deliv­ery devices.

Objective

The objec­tive of this exer­cise is to use a sin­gle con­tent file, mul­ti­ple style sheets and CSS prin­ci­ples to pro­gres­sively enhance the user experience.

Reading

• http://​www​.alistapart​.com/​a​r​t​i​c​l​e​s​/​r​e​s​p​o​n​s​i​v​e​-​w​e​b​-​d​e​s​i​gn/
• http://alistapart.com/article/a‑simpler-page
• http://​craig​mod​.com/​b​i​b​l​i​o​t​y​pe/
• http://​respon​sive​.vic​tor​coulon​.fr
• http://​get​boot​strap​.com

Exercise

Using media queries sup­plied with the CSS and HTML of Boot­strap, refor­mat the sup­plied con­tent to fit mul­ti­ple screen sizes. Use the pro­vided con­tent, along with @media CSS to develop appro­pri­ate design spec­i­fi­ca­tions for each of the com­mon screen res­o­lu­tions and sizes. Use each dif­fer­ent device and/or case use as a start­ing point.

Part One

Cre­ate and link a new style sheet called mediaqueries.css. Use the sup­plied code to Change back­ground color of each break­point to pro­vide evi­dence of a change of state when the view­port changes. Take a screen shot of each and sub­mit to the dropbox.

body {
}
.container {
}

/*Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap

Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}

Sample Layout

• The fol­low­ing rubric posted on D2L will deter­mine exer­cise score: Exer­cise Grading

Techniques

Mark up, tags, val­ida­tor, break­points, link­ing, media queries

Materials

com­puter, web browser, Dreamweaver, content