Coding a Magazine-Style Blog Post Layout with CSS3 Effects




Average weblogs have slowly been transformed into content-packed online magazines. Over the past 5 years I have noticed a rise in digital magazines curating their posts online instead of print. One early example would be Mashable but today there are hundreds of different sites.

For this tutorial I’d like to demonstrate how to build a simple HTML5/CSS3 magazine blog layout. This is focused around a single page using 2 columns with a wide header. It’s also responsive to handle mobile devices like smartphones and tablets. Take a look at my live preview demo from the link below.

html5 css3 tutorial blog post magazine layout screenshot

Live DemoDownload Source Code

Getting Started

I started from the goal to build a responsive layout that could run without JavaScript. My demo has no references to any jQuery files, but you might use this for sidebar widgets or similar purposes. Either way the document starts out with an HTML5 doctype only referencing an external stylesheet.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Magazine/Blog Post Layout - SpyreStudios Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico">
  <link rel="icon" href="http://spyrestudios.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
</head>

This layout is broken down into 2 separate pieces for the header and page body. They both span 100% of the page width, yet the content is fixed to a centered inner container. This can be done using a repeatable class .container which is applied to the top navbar and the body contents.

<header id="top">
  <div class="container">
    <div id="navwrap" class="clearfix">
      <div id="logo">MyMagazine Logo</div>
    
      <nav id="navigation">
        <ul>
          <li><a href="javascript:void(0)">News</a></li>
          <li><a href="javascript:void(0)">Culture</a></li>
          <li><a href="javascript:void(0)">Business</a></li>
          <li><a href="javascript:void(0)">Tech</a></li>
          <li><a href="javascript:void(0)">Offbeat</a></li>
        </ul>
      </nav><!-- @end #navigation -->
    </div><!-- @end .clearfix -->
  </div><!-- @end .container -->
</header><!-- @end #top -->

The reason I have another div #navwrap is to use a clearfix on the floated logo & navigation. Since the container is using margin: 0 auto it cannot also have a clearfix, or else the effect doesn’t work. This is a small workaround to keep all the elements in proper order.

When resizing the page this top navigation will eventually bump into the logo text. At this breakpoint I’m hiding the top nav to instead reveal a footer navigation menu. It’s one of the simplest choices, but this shouldn’t stop you from creating a more traditional dropdown or hidden sidebar menu for mobile devices.

Structuring the Page

You should notice the whole page uses a very light tan/grey background color. The inner page body is contained within a separate article element using the ID #content.

<div class="container">
  <article id="content" class="clearfix">
    <h1>The hottest new web design tips & tricks for captivating your visitors</h1>
    <p class="byline">Written by <a href="javascript:void(0)">Jake Rocheleau</a> on January 15, 2014 <span class="twitter"><a href="javascript:void(0)">@jakerocheleau</a></span></p>
    <div id="post-container">
      <section id="post">
        <figure id="featuredimg">
          <img src="img/featured.png" alt="">
          <figcaption><a href="http://www.flickr.com/photos/flysi/104526773/">photo credit</a></figcaption>
        </figure>

At the very top of each article the headline and byline should span 100% of the page width. Then underneath is where the content and sidebar should be split in two. Using the #post-container div I’ve appended a negative margin which is then replaced on the #post div itself. The sidebar is floated left alongside the post, so this negative margin allows for a fixed-width sidebar keeping the inner content fluid.

You might also notice the featured image is wrapped inside a figure element. This is perfect for any large magazine because you can write small captions or even reference the photo source with a link.

<aside id="sidebar">
  <h3>Advertisers</h3>
  <div class="adblock"><img src="img/ad01.png" alt="mailgun advertisement"></div>
  
  <div class="adblock"><img src="img/ad02.png" alt="twiends advertisement"></div>
  
  <br class="spacer">
          
  <h3>Recent Posts</h3>
  <ul id="recent-posts">
    <li><a href="javascript:void(0)" class="clearfix"><img src="http://placehold.it/70x40"><h4>Popular tools for cloud-based IDEs</h4></a></li>
    <li><a href="javascript:void(0)" class="clearfix"><img src="http://placehold.it/70x40"><h4>30 free PSDs released in 2014</h4></a></li>
    <li><a href="javascript:void(0)" class="clearfix"><img src="http://placehold.it/70x40"><h4>How to break into freelance web design</h4></a></li>
    <li><a href="javascript:void(0)" class="clearfix"><img src="http://placehold.it/70x40"><h4>Best free open source jQuery plugins</h4></a></li>
  </ul>
</aside><!-- @end #sidebar -->
</article><!-- @end #content -->

Using HTML5 elements may not impact Google SERPS but it doesn’t hurt to follow W3C standards. The sidebar is built with an aside element while the content itself uses a section. This could have been an article instead, but these are really just semantics. My point is that we could use divs but there are better alternatives.

Each of the featured list items will contain a placeholder image along with the article headline. I’ve chosen 70×40 but you can resize this thumbnail to fit your magazine’s featured image size(s). Each anchor link renders as a block element so the entire list item appears to be clickable.

Styling with CSS

I won’t cover everything in the stylesheet but we should go over unique properties of this layout. At the top I’ve included 2 different Google Webfonts for the logo and the heading text, respectively.

/** main content **/
#content {
  display: block;
  padding: 15px 20px;
  margin-bottom: 25px;
  background: #fff;
  -webkit-box-shadow: 1px 1px 3px #bebebe;
  -moz-box-shadow: 1px 1px 3px #bebebe;
  box-shadow: 1px 1px 3px #bebebe;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}


.byline {
 font-size: 1.4em;
 line-height: 18px;
 font-style: italic;
 color: #676767;
}
.byline .twitter {
  margin-left: 6px;
  padding-left: 18px;
  background: url('twitter.png') 0px -1px no-repeat;
}

.byline a {
 text-decoration: none;
}

#post-container {
    margin-right: -250px;
    float:left;
    width:100%;
}
#post {
  margin-right: 260px;
}

#sidebar {
  display: block;
  float: left;
  width: 250px;
}

Searching through Icon Finder I stumbled onto a beautiful Twitter icon to display on each post. Authors can fill out social media links in the WordPress admin panel, and these can be pulled out to display on each article. You might change this link to Google+, Facebook, Pinterest, or another relatable social network.

#featuredimg {
  display: block;
  position: relative;
  height: auto;
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 20px;
}
#featuredimg figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 1.2em;
  padding: 4px 7px;
  background: rgba(255,255,255,0.9);
}
#featuredimg figcaption a {
  text-decoration: none;
  font-weight: bold;
  color: #54759e;
}

In the image figure I wanted the caption to appear on top of the image. This is only because each post would be using the same text, but a different source link. If you wanted to include a customizable caption along with a source link, this could appear just underneath the photo instead. In my case absolute positioning was the easiest choice relative to the responsive layout.

Finally I’d like to go over the humble mobile responsive updates. There are only 2 breakpoints I’ve setup to handle the responsive navigation, along with resizing text and other elements. When the navigation drops into the footer I’ve also hidden the sidebar out of view. Many designers like to force the sidebar into a full 100% width dropped beneath the page content – but I feel this adds more clutter to a mobile screen.

/** media queries **/
@media screen and (max-width: 710px) {
  #logo { float: none; width: 100%; text-align: center; }
  #navigation { display: none; }
  
  #sidebar { display: none; }
  #post-container { margin-right: 0; float: none; }
  #post { margin-right: 0; }

  #mobilenav { display: block; background: #393939; }

  p { line-height: 1.7em; }
}

@media screen and (max-width: 420px) {
  #logo { font-size: 2.7em; }
  
  h1 { font-size: 3.0em; }
  .byline { font-size: 1.1em; }
}

At 710px viewport the nav menu is close to bumping down beneath the logo. The menu gets hidden and the logo is now 100% width centered in the topbar. The sidebar is also hidden, and those extra margins on the post container are removed.

At 420px or less each of the primary headers is resized a bit smaller. The top logo along with the headline and byline are fitted tighter into the page so readers don’t need to scroll far to reach the article content.

html5 css3 tutorial blog post magazine layout screenshot

Live DemoDownload Source Code

Closing

Building an entire blog template or WordPress theme is not an easy task. But when you start out coding HTML/CSS first, it becomes a lot more manageable. I hope this tutorial can provide a decent starting point for any responsive blog layouts you may wish to construct. Feel free to download a copy of my source code and try recreating your own idea for an online magazine.





About the author:

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Comments:

Scroll back to the top