Newspapers are fascinating expressions of typography and layout. The NYTimes.com is a combination of classic typographic technique and responsive design.To teach myself Flexbox and Bootstrap's grid layout, I used the the New York Times as a starting point to design a responsive site for a fictional newspaper you might have heard of - the Daily Planet.
If you haven't heard, the Daily Planet is the newspaper where Clark Kent works as a reporter while moonlighting as Superman a.k.a. the Man of Steel, and btw, welcome to Earth, we're happy to have you here.
I was drawn to the layout of the desktop version of the New York Times, so that's where I started my design. As it turned out, that decision was my among the biggest of my mistakes in this journey. I'll tell you why later. If you are familiar with Bootstrap, then you probably already know.
I redlined a screenshot to get an understanding of the layout, then dove into VS Code. You can check out my Daily Planet repo on GitHub to see how the code evolved.
In the first version, I used Bootstrap's "container" class and "card" class in combination with Flexbox utilities.
With this incredibly useful guide, I started building. At this point, I wasn't planning on making the site responsive. I was just using the newspaper's structure to practice working with rows and columns.
As I bounced back and forth from Flexbox guide to VS Code, I was coming up with fantastical headlines for this newspaper. Headlines about space exploration and time travel, light-speed and super computers, you know the usual what-not.
It struck me: a superhero newspaper! I'm going to make the Daily Planet! And since that's such an awesome idea, I'll make it fully responsive!
Many hours later, I finished the desktop version of the first digital issue of the Daily Planet. Ecstatic, I visited the Bootstrap documentation to find out what tools there were to make the design responsive, only to realize that "responsive" isn't something added to one version of the design or another.
Responsive web design starts with the first line of code.
So I learned the hard way that one must code mobile-first. But I also reached an understanding that my canvas for these designs is dynamic, which is super-cool. To do this newly-understood super-cool kind of design properly, though, you do not design the desktop version first. Which is exactly what I had done. And that was kind of a bummer.
Back to the beginning, boy!
I spent a couple days thinking about how I might avoid starting from scratch. Unsure if they were feasible, I was certain they were messy. Moreover, Bootstrap is a tool that is meant to be used in the opposite direction that I was traveling in. It's loud and clear in the documentation: mobile-first.
Lesson learned and licking my wounds, I set out to do Metropolis right.
I coded a header and a single column of stories for screens anywhere from 0px to 768px. This includes predictably sized smart-phones, extra large smartphones like the Galaxy Note, and a selection of smaller tablets.Then, I added the code for my desktop layout and set it to display on screens 768px and above for full-sized tablets, laptop screens, and desktop computer monitors.To do this, I nested everything on the page inside of an all-encompassing row which gave me control over the order of each story and the width of any other columns I wanted to create within that larger structure.I used Bootstrap's display utilities extensively. I had a hard time with the syntax of these properties and at some point I gave myself over entirely to this chart.
When I finally had everything working between the mobile layout and the desktop layout,
I couldn't help but notice ~250px worth of untapped challenge.
For a third layout, I collapsed the two sub-columns on the far right into a single column on displays between 768px and 992px and increased the font size and thumbnail image size. Below you can see Tablet and Mobile on top and Desktop beneath them.[gallery ids="https://robotsodadesign.wpcomstaging.com/wp-content/uploads/2018/07/screen-shot-2018-07-17-at-7-24-35-pm-e1531880839853.png|Tablet Layout,https://robotsodadesign.wpcomstaging.com/wp-content/uploads/2018/07/screen-shot-2018-07-17-at-7-24-53-pm-e1531880876949.png|Mobile Layout,https://robotsodadesign.wpcomstaging.com/wp-content/uploads/2018/07/screen-shot-2018-07-17-at-7-24-17-pm.png|Desktop Layout" type="rectangular" link="none"]Check it out for yourself. Grab the edge of your browser and squeeze to watch the magic happen!