The New York Times and Boston Globe Websites - Exercise

Contact Us or call 1-877-932-8228
The New York Times and Boston Globe Websites - Exercise

The New York Times and Boston Globe Websites

Duration: 10 to 20 minutes.

In this exercise, you will evaluate how the websites for two major American newspapers differ in responsiveness. Can you find the code behind the differences in the sites' behaviors?

Your work on this exercise - and on work throughout the course - will be easier if you use a tool like Firebug, the free Firefox plug-in that offers right-click inspection of markup and CSS elements. The Google Chrome browser has some of this functionality built in.

  1. Open the New York Times and Boston Globe websites in a browser.
  2. Drag to make your browser wider and narrower - check how each site behaves at different browser widths.
  3. Inspect the HTML and CSS elements on each site; specifically:
    1. How does the outer shell of the Boston Globe site change width as the browser resizes?
    2. Why does the outside shell of the New York Times site stay a fixed width?
    3. How is the Boston Globe site's column-layout-change (from three to two to one column, with narrowing of the browser) accomplished?

Solution:

The first thing we notice is that the Boston Globe site changes as we make the browser narrower: the width of the entire design decreases, columns slide under each other, and the nav changes. The screenshots below shows the Boston Globe home page on the same browser. The top browser is about 1500 pixels wide; the bottom is about 750 pixels wide:

Boston Globe website screenshots

The New York Times site stays the same width regardless of whether we change the width of the browser; right content gets cut off as we resize narrower and narrower. Here are two screenshots, again at 1500 and 750 pixel browser widths:

NY Times website screenshots

If we check under the hood, we see that the outermost element on the NY Times site gets a fixed CSS width:

#shell {
		margin: 0 auto;
		text-align: left;
		width: 972px;
}

The Boston Globe's outer container, on the other hand, is set to be a percentage of the browser's current width - about 94% of the total screen real estate available:

#contain {
		margin: 0 auto 10px;
		width: 93.75%;
}

On the Boston Globe site, it's not just that the columns get proportionately narrower as the screen resizes; rather, the design changes at some points - three columns become two columns become (at smallest widths) one column. How do they do this? With CSS3 media queries, setting different style rules for different media types, browser widths, and device properties. For instance, the following rule (from a stylesheet on the Boston Globe site) says "for any viewing device with a viewport of minimum width of 900 pixels, set the right and left padding on links contained within any list item inside of an element of class sections to have right and left padding of 8px":

>@media screen and (min-width: 900px){ 
		.sections li a {
			padding-right: 8px;
			padding-left: 8px;
		}
}

We will learn much more about media queries later in this course.

Next