bjelline/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Responsive Web Design - originally from Wikipedia, the free encyclopedia</title>
  <link href="style.css" rel="stylesheet" />
  <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>

  <div class="content">

    <h1>Responsive Web Design</h1>

    <p class="illustration"><img
    src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Responsive_Web_Design.png"></p>

    <p class="intro">
    Responsive Web Design (RWD) essentially indicates that a web site is crafted
    to use Cascading Style Sheets 3 media queries, an extension of the @media
    rule, with fluid proportion-based grids (which use percentages and
    EMs instead of pixels), to adapt the layout to the viewing environment, and
    probably also use flexible images. As a result, users across a
    broad range of devices and browsers will have access to a single source of
    content, laid out so as to be easy to read and navigate with a minimum of
    resizing, panning, and scrolling.</p>


   <p class="concepts">
    "Mobile First" and "Progressive Enhancement/Unobtrusive JavaScript"
    (strategies for when a new site design is being considered) are related
    concepts that predated RWD: browsers of basic mobile phones do not understand
    media queries or Javascript, and it is wise to create a basic web site then
    enhance it for smart phones and PCs — rather than attempt "graceful
    degradation" to try to degrade a complex, image-heavy site to work on the most
    basic mobile phones. Browser detection and mobile device
    detection are two ways of deducing if Javascript and certain HTML and CSS
    features are supported, however Javascript libraries like Modernizr, jQuery,
    and jQuery Mobile that directly test for features/user agents are also
    popular.</p>

    <p class="luke">
    Luke Wroblewski has summarized some of the RWD and mobile design challenges,
    and created a catalog of multi-device layout patterns. He
    suggests that, compared with a simple RWD approach, Device Experience or RESS
    approaches can provide a user experience that is better optimized for mobile
    devices. Server-side implementation of dynamic stylesheet languages like
    Sass can be part of such an approach.</p>

   <p class="critique">
    One problem for RWD is that advertisements are not fluid. But search
    advertising and display advertising support specific device platform targeting
    and different advertisement size formats for desktop, smartphone, and basic
    mobile devices, and different landing page URLs can be used for different
    platforms. So this can be part of a solution. It seems wise to compare
    "one-site RWD", "same site, with separate mobile URL", and "separate mobile
    site" approaches. Polyfills can be used to enhance HTML5 support on
    Internet Explorer, allowing one URL to serve both smartphones and desktop
    clients, if a separate URL or separate site is used for basic mobile
    devices.</p>

    <p class="history">
    Ethan Marcotte coined the term Responsive Web Design (RWD) in his article in A
    List Apart. He describes the theory and practice of responsive web
    design in his brief 2011 book on the subject.  .net Magazine chose
    Responsive Design as #2 on its list of Top Web Design Trends for 2012
    (Progressive Enhancement was #1).</p>

    </div>

    </body>
  </html>


## style.css
/* switch to new box-sizing http://css-tricks.com/box-sizing/  */


* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
       -moz-box-sizing: border-box;    /* Firefox, other Gecko */
            box-sizing: border-box;         /* Opera/IE 8+ */
}

/* basic formatting, you don't need to change that. */

body {
  background-color: #ddd;
  font-family: Ubuntu, sans-serif;
  line-height: 150%;
}
h1 { font-size: 300%; text-align: center; }
.intro { background-color: #FF1960 ; }
.concepts  { background-color: #FFBBED  ; }
.luke    { background-color: #FFED7A; }
.critique { background-color: #77EEEE; }
.history { background-color: #7FFF91; }

p {  margin: 0px; padding: 10px; }


/* layout for desktop computers: 920px size assumed */

.content {
  margin-left: auto;
  margin-right: auto;
  width: 920px;
}

.illustration {
  float: left;
  width: 50%;
}
.intro {
  float: left;
  width: 50%;
}

.concepts {
  clear: left;
  float: right;
  width: 20%;
}

.luke {
  clear: left;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Responsive Web Design - originally from Wikipedia, the free encyclopedia</title>
	<link href="style.css" rel="stylesheet" />
	<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
	</head>
	<body>

	<div class="content">

	<h1>Responsive Web Design</h1>

	<p class="illustration"><img
	src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Responsive_Web_Design.png"></p>

	<p class="intro">
	Responsive Web Design (RWD) essentially indicates that a web site is crafted
	to use Cascading Style Sheets 3 media queries, an extension of the @media
	rule, with fluid proportion-based grids (which use percentages and
	EMs instead of pixels), to adapt the layout to the viewing environment, and
	probably also use flexible images. As a result, users across a
	broad range of devices and browsers will have access to a single source of
	content, laid out so as to be easy to read and navigate with a minimum of
	resizing, panning, and scrolling.</p>


	<p class="concepts">
	"Mobile First" and "Progressive Enhancement/Unobtrusive JavaScript"
	(strategies for when a new site design is being considered) are related
	concepts that predated RWD: browsers of basic mobile phones do not understand
	media queries or Javascript, and it is wise to create a basic web site then
	enhance it for smart phones and PCs — rather than attempt "graceful
	degradation" to try to degrade a complex, image-heavy site to work on the most
	basic mobile phones. Browser detection and mobile device
	detection are two ways of deducing if Javascript and certain HTML and CSS
	features are supported, however Javascript libraries like Modernizr, jQuery,
	and jQuery Mobile that directly test for features/user agents are also
	popular.</p>

	<p class="luke">
	Luke Wroblewski has summarized some of the RWD and mobile design challenges,
	and created a catalog of multi-device layout patterns. He
	suggests that, compared with a simple RWD approach, Device Experience or RESS
	approaches can provide a user experience that is better optimized for mobile
	devices. Server-side implementation of dynamic stylesheet languages like
	Sass can be part of such an approach.</p>

	<p class="critique">
	One problem for RWD is that advertisements are not fluid. But search
	advertising and display advertising support specific device platform targeting
	and different advertisement size formats for desktop, smartphone, and basic
	mobile devices, and different landing page URLs can be used for different
	platforms. So this can be part of a solution. It seems wise to compare
	"one-site RWD", "same site, with separate mobile URL", and "separate mobile
	site" approaches. Polyfills can be used to enhance HTML5 support on
	Internet Explorer, allowing one URL to serve both smartphones and desktop
	clients, if a separate URL or separate site is used for basic mobile
	devices.</p>

	<p class="history">
	Ethan Marcotte coined the term Responsive Web Design (RWD) in his article in A
	List Apart. He describes the theory and practice of responsive web
	design in his brief 2011 book on the subject. .net Magazine chose
	Responsive Design as #2 on its list of Top Web Design Trends for 2012
	(Progressive Enhancement was #1).</p>

	</div>

	</body>
	</html>
	/* switch to new box-sizing http://css-tricks.com/box-sizing/ */


	* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */
	}

	/* basic formatting, you don't need to change that. */

	body {
	background-color: #ddd;
	font-family: Ubuntu, sans-serif;
	line-height: 150%;
	}
	h1 { font-size: 300%; text-align: center; }
	.intro { background-color: #FF1960 ; }
	.concepts { background-color: #FFBBED ; }
	.luke { background-color: #FFED7A; }
	.critique { background-color: #77EEEE; }
	.history { background-color: #7FFF91; }

	p { margin: 0px; padding: 10px; }


	/* layout for desktop computers: 920px size assumed */

	.content {
	margin-left: auto;
	margin-right: auto;
	width: 920px;
	}

	.illustration {
	float: left;
	width: 50%;
	}
	.intro {
	float: left;
	width: 50%;
	}

	.concepts {
	clear: left;
	float: right;
	width: 20%;
	}

	.luke {
	clear: left;
	}