I am intrigued with the new page-layout that the New York Times has started using as seen here…
http://www.nytimes.com/interactive/2014/04/12/world/americas/grand-visions-fizzle-in-brazil.html
If you were going to code that webpage from scratch, what approach would you take? (No JavaScript please!!)
Currently my articles are single column with a min-max width.
Sincerely,
Debbie
Sounds like you are dipping your fishing line into the water to see what you might catch. Why not take a look at their code and see how they did it? If you like their method, you could do the same. Or you could try something different.
That’s what I would do.
What’s your aim? Are you having a problem with something?
I assume the narrow column text is to satisfy line readability lengths as lines that are to long or too short are difficult to scan.
Coding the page is pretty straight forward as you just set a max-width on your text and use auto margins to center it while images can go full width with perhaps a max-width of 100% so that they can scale as the page gets smaller.
Not sure what that means. I’m just intrigued by their minimalistic design.
Because the NY Times is one of the worst programmed websites around! (That, and trying to read their code is like reading ancient Egyptian hieroglyphs!!)
I figured I’d ask the pros and see how you guys would build such a design.
No, I just find that type of layout “bold” and “different” and it reminds me of when media was good like Life magazine…
Sincerely,
Debbie
Hi Paul.
No, you are missing my question.
I already have articles which are “skinny” like that - I did that years ago.
What I find interesting is two things…
First, when you go to an article, your entire screen is filled with the “opening” photo.
Secondly, I like how as you read the article, you go from a long block of skinny text to - BAM - a photo that is the entire width of your screen - although not very high.
It hard to show here, but something like this visually…
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
PHOTO-HERE PHOTO-HERE PHOTO-HERE PHOTO-HERE
PHOTO-HERE PHOTO-HERE PHOTO-HERE PHOTO-HERE
PHOTO-HERE PHOTO-HERE PHOTO-HERE PHOTO-HERE
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
PHOTO-HERE PHOTO-HERE PHOTO-HERE PHOTO-HERE
PHOTO-HERE PHOTO-HERE PHOTO-HERE PHOTO-HERE
PHOTO-HERE PHOTO-HERE PHOTO-HERE PHOTO-HERE
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
PHOTO-HERE PHOTO-HERE PHOTO-HERE PHOTO-HERE
PHOTO-HERE PHOTO-HERE PHOTO-HERE PHOTO-HERE
PHOTO-HERE PHOTO-HERE PHOTO-HERE PHOTO-HERE
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
(If you grab your browser window handle and drag, you’ll see that the photos are also basically “min-max” in nature. Very cool!!)
Follow me?
Sincerely,
Debbie
We’re just taking fairly basic HTML and CSS here, though, which you can view nicely with your browser’s dev tools. That’s the easiest way to see how they do that layout.
Apparently you haven’t looked at the source code… 
Care to explain this…
<div id="item-1"
data-presentation-type="wide"
class="item photoslide row-1 presentation-wide ">
<div class="item-container">
<div class="media-outerContainer">
<div class="media-innerContainer">
<div class="media">
<img class="g-lazy"
src='http://graphics8.nytimes.com/packages/images/multimedia/bundles/projects/2013/Westminster/transparent.gif'
data-pattern='http://graphics8.nytimes.com/images/2014/04/10/world/americas/20140413BRAZIL-slide-7POM/20140413BRAZIL-slide-7POM-{{size}}.jpg'
data-widths='[{"slug":"master180","size":180},{"slug":"blog225","size":225},{"slug":"tmagSF","size":362},{"slug":"blog427","size":427},{"slug":"blog480","size":480},{"slug":"master495","size":495},{"slug":"blog533","size":533},{"slug":"tmagArticle","size":592},{"slug":"slide","size":600},{"slug":"articleLarge","size":600},{"slug":"popup","size":650},{"slug":"master675","size":675},{"slug":"jumbo","size":1024},{"slug":"master1050","size":1050},{"slug":"superJumbo","size":2048}]'
data-height-multiplier='0.6666666666666666'
data-slug='20140413BRAZIL-slide-7POM'
data-item-id='item-1'
data-presentation-type="wide">
</div>
</div>
<div class="caption caption-style-long">
<span class="caption-text">Brazilians headed home past the abandoned station for a cable car meant to go to their hilltop favela in Rio de Janeiro. The mayor rode in the $32 million cable car in 2012, but it hasn’t functioned since.</span>
<span class="credit visually-hidden" itemprop="copyrightHolder"><span class="visually-hidden">Credit</span> Daniel Berehulak for The New York Times</span>
</div>
</div>
<div class="item-textContainer">
<h2></h2>
<div class="item-text">
<p>“The fiascos are multiplying, revealing disarray that is regrettably systemic,” said Gil Castello Branco, director of <a title="Website (in Portuguese)." href="http://www.contasabertas.com.br/website/" target="_blank">Contas Abertas,</a> a Brazilian watchdog group that scrutinizes public budgets. “We’re waking up to the reality that immense resources have been wasted on extravagant projects when our public schools are still a mess and raw sewage is still in our streets.”</p>
<p>The growing list of troubled development projects includes a $3.4 billion network of concrete canals in the drought-plagued hinterland of northeast Brazil — which was supposed to be finished in 2010 — as well as dozens of new wind farms idled by a lack of transmission lines and unfinished luxury hotels blighting Rio de Janeiro’s skyline.</p>
<p>Economists surveyed by the nation’s central bank see Brazil’s economy growing just 1.63 percent this year, down from 7.5 percent in 2010, making 2014 the fourth straight year of slow growth. While an economic crisis here still seems like a remote possibility, investors have grown increasingly pessimistic. Standard & Poor’s cut Brazil’s credit rating last month, saying it expected slow growth to persist for several years.</p>
</div>
</div>
</div>
</div>
…and how they make it so the images scale as you increase/decrease the browser window? :-/
Sincerely,
Debbie
If you open the native page inspector, or Firebug etc., you see the document tree (the divs, paras etc.), and as you hover over or click on them, you see the CSS that applies. Very easy and straightforward. It makes it really simple to see how this layout works. You see the widths on the divs, the margins on the paras etc. I know you know about Firebug, so not sure why you are avoiding it. :-/ It’s much easier to understand the layout this way that by trying to read about it—at least in my experience.
You’re killing me, Ralph!
Because I am using FireBug right now, and when I hover over one of the images, I see this HTML…
<img data-presentation-type="wide" data-item-id="item-1" data-slug="20140413BRAZIL-slide-7POM" data-height-multiplier="0.6666666666666666" data-widths="[{"slug":"master180","size":180},{"slug":"blog225","size":225},{"slug":"tmagSF","size":362},{"slug":"blog427","size":427},{"slug":"blog480","size":480},{"slug":"master495","size":495},{"slug":"blog533","size":533},{"slug":"tmagArticle","size":592},{"slug":"slide","size":600},{"slug":"articleLarge","size":600},{"slug":"popup","size":650},{"slug":"master675","size":675},{"slug":"jumbo","size":1024},{"slug":"master1050","size":1050},{"slug":"superJumbo","size":2048}]" data-pattern="http://graphics8.nytimes.com/images/2014/04/10/world/americas/20140413BRAZIL-slide-7POM/20140413BRAZIL-slide-7POM-{{size}}.jpg" src="http://graphics8.nytimes.com/images/2014/04/10/world/americas/20140413BRAZIL-slide-7POM/20140413BRAZIL-slide-7POM-jumbo.jpg" class="g-lazy" style="height: 753px;">
(For those who don’t like scrolling to the right forever…)
<img data-presentation-type=“wide” data-item-id=“item-1” data-slug=“20140413BRAZIL-slide-7POM” data-height-multiplier=“0.6666666666666666” data-widths=“[{"slug":"master180","size":180},{"slug":"blog225","size":225},{"slug":"tmagSF","size":362},{"slug":"blog427","size":427},{"slug":"blog480","size":480},{"slug":"master495","size":495},{"slug":"blog533","size":533},{"slug":"tmagArticle","size":592},{"slug":"slide","size":600},{"slug":"articleLarge","size":600},{"slug":"popup","size":650},{"slug":"master675","size":675},{"slug":"jumbo","size":1024},{"slug":"master1050","size":1050},{"slug":"superJumbo","size":2048}]” data-pattern=“http://graphics8.nytimes.com/images/2014/04/10/world/americas/20140413BRAZIL-slide-7POM/20140413BRAZIL-slide-7POM-{{size}}.jpg” src=“http://graphics8.nytimes.com/images/2014/04/10/world/americas/20140413BRAZIL-slide-7POM/20140413BRAZIL-slide-7POM-jumbo.jpg” class=“g-lazy” style=“height: 753px;”>
I have NO CLUE of how that works?! 
Sincerely,
Debbie
That’s a bit of a red herring. It’s stuff that JavaScript can target, but doesn’t affect the page layout, which is pretty straight forward. Personally, I’d use a background image to get that full width image effect, but I guess they have other objectives. It’s common these days to have a full width div with a large background image set to background-size: cover.
Hi, DD.
Take a look at this post and see if it offers anything helpful:
You’re still not discussing what I found most interesting…
On the original link I provided, as you adjust the size of your browser window, the images resize.
It is almost like the images resize as a paragraph column would resize in a min-max fluid design.
Not sure if you can do that with just HTML and CSS, or if that requires JavaScript too?
Sincerely,
Debbie
The initial 100% high image is easy as you just use a div set to 100% high (or min-height:100% if not using display:table) and use background-size:cover on a background image and it will cover (IE9+ although there are fixes for older browsers if you need it using a foreground image).
The wide images that follow have their ratio controlled by the 16:9 technique of using percentage padding on a div to create a canvas to paint the image on using absolute positioning.This ensures the aspect ratio of the image is related to the width available (note that this works best for images created with the 16 : 9 ratio to start with).
It’s pretty basic css for the rest and you can see a demo here:
Nice demo, Paul. And that text is like way out there, man. Seriously deep, and blowing my mind. 
Hi Paul.
Okay.
That link talks about video… :-/
This demo appears to do the same thing as the NY Times link in my original post, but when I looked at the code, I was lost.
What was I supposed to be looking at?
It seems like most of the code deals with an option group?
Sincerely,
Debbie
P.S. What in God’s name is that prose you have posted on that sample webpage?!
Ralph, what happened to you?
You’re starting to sound like an American?! (Even worse, a “Baby Boomer American”!!) 
Did you hit your head?
Debbie
It’s not very intuitive, but that demo is posted on a code posting site called CodePen. To see the simple HTML and CSS behind the actual demo (as opposed to the site it’s sitting on), click the “Edit this Pen” code in the bottom left corner. Then you’ll see how simple the code for that header actually is. 
Or just click this link instead: http://codepen.io/paulobrien/pen/uBoha
I see…
So here is the HTML…
<div class="intro">
<div class="inner">
<div class="content">
<h1>Full page image</h1>
<p>Galaxies shores of the cosmic ocean, rogue from which we spring, dispassionate extraterrestrial observer. White dwarf. Globular star cluster Rig Veda, made in the interiors of collapsing stars emerged into consciousness Drake Equation</p>
</div>
</div>
</div>
<div class="page">
<div class="inner">
<p>Dream of the mind's eye gathered by gravity, decipherment globular star cluster brain is the seed of intelligence! Are creatures of the cosmos preserve and cherish that pale blue dot Vangelis kindling the energy hidden in matter. Venture light years culture billions upon billions, corpus callosum descended from astronomers two ghostly white figures in coveralls and helmets are soflty dancing Apollonius of Perga. The sky calls to us, inconspicuous motes of rock and gas the only home we've ever known, paroxysm of global death finite but unbounded cosmic fugue paroxysm of global death something incredible is waiting to be known laws of physics, tesseract, encyclopaedia galactica decipherment. Stirred by starlight. Great turbulent clouds decipherment!</p>
</div>
<div class="media"><img class="" src="http://www.pmob.co.uk/mobile/images/a1.jpg"></div>
<div class="inner">
<p>Rogue colonies rogue, Vangelis the only home we've ever known cosmic ocean, ship of the imagination. Rig Veda, the ash of stellar alchemy. Citizens of distant epochs shores of the cosmic ocean Orion's sword. Rich in mystery! Preserve and cherish that pale blue dot rich in heavy atoms Sea of Tranquility, a billion trillion rings of Uranus, extraplanetary light years Apollonius of Perga. Consciousness concept of the number one emerged into consciousness preserve and cherish that pale blue dot, take root and flourish. The carbon in our apple pies consciousness finite but unbounded culture the carbon in our apple pies.</p>
</div>
<div class="media"><img class="" src="http://www.pmob.co.uk/mobile/images/a1.jpg"></div>
</div>
And here is the CSS…
html, body {
margin:0;
padding:0;
height:100%
}
body { font-family:Georgia, "Times New Roman", Times, serif }
h1, p { margin:0 0 2em; }
h1 { text-align:center; }
.intro {
display:table;
height:100%;
width:100%;
margin:auto;
background:url(http://www.pmob.co.uk/mobile/images/a1.jpg) no-repeat 50% 50%;
background-size:cover;
}
.intro .inner {
display:table-cell;
vertical-align:middle;
width:100%;
max-width:none;
}
.content {
padding:10px;
background:rgba(255,255,255,0.4);
max-width:600px;
margin:auto;
}
.inner {
max-width:600px;
margin:auto;
font-size:140%;
line-height:1.6;
padding:10px
}
.page {
width:80%;
margin:auto;
}
.page .inner p { padding:2em 0 0 }
.media {
width:100%;
padding-top:56.2%;
position:relative;
background:red
}
.media img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
I guess I am most interested in the image here…
<div class="media"><img class="" src="http://www.pmob.co.uk/mobile/images/a1.jpg"></div>
Still not sure I understand what is happening?! (Sorry, I haven’t been doing CSS in ages!)
1.) So does .media create a “containing block”?
2.) I don’t see the red background.
3.) What is the height of .media?
4.) It looks like .media img would fill up the entire screen, yet in the demo, the second image fills the screen horizontally, but not vertically.
5.) And what makes it so the image resizes as you adjust the browser window size?
Sincerely,
Debbie
Yes it provides a containing block for the image.
2.) I don’t see the red background.
No you won’t see it because the image sits on top of it completely. I left the background in place so that you could remove the image and then see how that element scales up and down with the width of the browser and creates the canvas that we hang the image on.
3.) What is the height of .media?
As I mentioned above the height of media is controlled by its percentage padding.
Padding (and margin) percentages always refer to the width of the element not the height so a padding-top of 56.2% will create a ratio between the width and height that is always the same aspect ratio (16:9). The link I posted above explains the technique and although it mentions videos the same is try for elements like image and indeed iframes if need be.
The technique above creates an element that will resize but maintain an aspect ratio bewteen its width and height that is constant and therefore perfect for images (or videos) that need to maintain the same aspect ratio.
The image is absolutely placed on this element and we tie its dimensions to that element and therefore scales nicely as the page is resized.
Okay, I’ll have to take a deeper look at that earlier link.
So all of the NY Times article was done using just HTML and CSS, huh? (Complicated to me, but easy once you understand it.)
Also, how well would this technique work on the layout you helped me with long ago? That is, I have 3-column layout with fixed-width outside columns and a fluid center using min-max.
Could I apply this technique to my center, fluid, min-max column where my articles usually go?
And could I make I make it so the images “spill over” the left and right fixed-width columns thus making the images appear to cover the entire browser window, or would I need to drop the outside columns if I wanted to do that?
(Just brain-storming at this point… Maybe I’m trying to get too fancy?!) :-/
Sincerely,
Debbie