Style & Presentation — Mobile 1st Blogger Template Approach

This post we will guide you on the basic to advance fundamentals of mobile first designs for a web/blog page, then apply it to your Blogger blog templates, of course with Accelerated Mobile Pages AMP HTML & components.

What you will achieve will be a fluid & responsive design web/blog layout, consistent web page text display, easy-to-refer page styling references, which will make your themes tidier & neat, while looking awesome in any device screen sizes.

In this tutorial, we assume that you have some basic knowledge of CSS (cascading stylesheets) & HTML. But if you don't, this tutorial will be a good reference to learn-while-doing method when customizing your blog/web pages/template. Below screenshot is what you will achieve after this exercise.

If you have not setup a clean Blogger template with AMP components, we have the full tutorial guide here http://blogr-amp.blogspot.com/2016/11/getting-started-create-your-1st-amp.html .

If you require to add more Blogger section layout with AMP HTML fundamentals, you can find the full tutorial here http://blogr-amp.blogspot.com/2016/11/add-layout-blogger-sections-widgets.html .

We will start our guide where we have left off from the previous tutorial.

Blogger Template Style & Presentation

In our previous tutorial Getting Started — Create Your 1st AMP Blogger Blog Pages, we have included some web browser resets, which will be applied to all available web elements used on your Blogger page.

This CSS style reset will make sure your Blogger pages will look consistent on most modern web browsers available in the market.

Using the assigned HTML5 elements that was applied in previous tutorial, here we will create a standard blog page layout, with a page header, a navigation (nav), a left main content display(article), a right sidebar & a footer.

Since this blog page build would be a mobile 1st approach, we will start your web page view (on your screen) to target mobile views first before we further style the layout using @media queries for larger screen sizes.

Referencing Your Blog Pages Styles

We have already assigned HTML5 elements in your blog template (in previous tutorial), which we will use the element name to reference with & style it accordingly. This will give you a general idea how to style your blog/web pages & also use other element attributes by its class name references.

Add a container wrapper

This is not a specific webpage requirement & depends on your design workflow. Doing this step will help you to style your webpages layout. It will make your page designing easier & manage able for future tweaks/changes.

Find your HTML5 page elements (header, article, aside, footer) & wrap the inner (or outer) element with a <div class='container">...</div> for referencing. Below is an example:-

<header>
  <div class='container'>
    ...{{ your blogger sections & widgets }}..
  </div>
</header>

<div class='container'>
  <article>
    ...{{ your blogger sections & widgets }}...
  </articel>

  <aside>
    ...{{ your blogger sections & widgets }}..
  </aside>
</div>

<footer>
  <div class='container'>
    ...{{ your blogger sections & widgets }}..
  </div>
</footer>

Save your template.

This will set the classname .container element to wrap your Blogger widgets & sections so it will be easier for you to detail out your element placement in later tutorial. This is how it will look like in your template:-

Add Page Layout Styles

Add below CSS inside your <style amp-custom='amp-custom'> tag before the ending /*]]>*/</style> tag. Some basic styling have been assigned with.

ul, ol {
  padding-left: 30px;
}

.container {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center; /* align your text with left/center/right/justify */
  overflow: hidden; /* helps to clear floats */
  margin: 0 auto;
}

header {
  padding: 20px 0;
  background-color: lightgray;
}

article {
  padding: 20px 0;
  background-color: silver;
  text-align:left;
}

aside {
  padding: 20px 0;
  background-color: silver;
  text-align:left;
}

footer {
  padding: 20px 0;
  background-color: lightgray;
}

Here we have added some padding, align texts, background-colors to show you what the codes are doing. You can change to your own styling accordingly.

When page refreshed, you will see that the .container added some padding to the left and right of your screen and your text will fill the entire screen. Since that we are doing a mobile 1st approach, you can check how it looks by re-sizing your window tab to simulate for smaller screen sizes.

Or you can use your web browser console by right click select Inspect Element & clicking on the mobile icon to resize your browser view. You can also choose the type of mobile devices from browser dropdown view (if available) to simulate the selected device views.

Make Images Responsive

Add below CSS codes to help your image to display proportion on any screen sizes.

img {
  max-width: 100%;
  height: auto;
}

Presenting Header Logo

Since that Blogger templates uses the .header attribute class, we will reference this to style your header logo widget. Add below CSS inside your amp-custom component:-

/* header logo */
.header .title {
  font-size: 32px;
  color: red;
}

.header .description {
  font-size: 18px;
  color: red;
}

Save your Blogger template.

Here we are styling your header logo font size & adding some color. You can change to your preferred font size or color accordingly.

Presenting Navigation

We have assigned a Blogger section with a class reference of .navbar, so we will use this reference to style the navigation. Add below CSS inside your amp-custom component:-

/* navbar */
.navbar ul {
  list-style: none; /* removing unordered list styles */
  display: block;
  text-align:center;
  padding-left: 0; /* remove reset padding */
}

.navbar li {
  display: inline-block;
  margin:0 auto;
}

.navbar li>a {
  display:block;
  padding: 6px 12px; /* added padding to links */
}

Save your Blogger template.

We removed the default un-ordered list style & added some text alignment. We also added padding to links so it can be easily tapped/clicked on any screen sizes.

Presenting Article aka Posts

Blogger assigned post section with attribute class name main, For brevity & easy referencing, below CSS will target most used & common Blogger class names used on a blog post :-

/* articles/posts */
.date-header {
  font-size: 14px;  
}

.date-header a {
  color: inherit;
}

.post-title {
  font-size: 42px;
}

.post-title, .post-title a {
  color: black;
}

.post-body {
  margin-bottom:20px;
}

.post-footer {
  padding: 20px;
  background-color: gray;
}

Save your Blogger template.

The class name attributes is self-explanatory on where it is applied to at your posts. Change/update the styles to your own preference.

Presenting Sidebar

In your blogger template, you will be adding widgets to your <aside> section. We will use Blogger class name .sidebar attribute to reference with. This will allow styling to be targeted for this section only.

Add below CSS to target the most used & common class names used for a Blogger widget:-

/* sidebar */
.sidebar .widget {
  margin-bottom:20px;
}

.sidebar .widget h2 {
  font-size: 18px;
}

.sidebar .widget-content {
  margin-bottom:10px;
}

Save your Blogger Template

Presenting Footer

In your blogger template, you will be adding widgets to your <footer> section too. Add below CSS to target most common class names used for a Blogger widget located at the page footer. We will reference .footer as it is the class name attributes assigned in previous tutorial.

/* footer */
.footer .widget {
  margin-bottom:20px;
}

.footer .widget h2 {
  font-size: 18px;
}

.footer .widget-content {
  margin-bottom: 10px;
}

.footer ul, .footer ol {
  list-style: none; /* remove unordered list dots */
  padding-left: 0; /* remove browser reset padding for unordered list */
}

Save your Blogger Template.

Wow! This is too many codes & too much to digest! How can I know which one do what?

It's easy! Just by looking at it. Here's how easy to identify how you are customizing your Blogger pages/template:-

• Reading from top to bottom -  Shows how your CSS styles is laid with reference to the elements structure in your blog template. For instance, if you want to custom set your header, then scroll to the top of your CSS styles (header is of course at the top of your page/template). Vice versa you want to custom set your posts/articles, then scroll to the middle & search (where article/post located in the middle of your page/template).
• Indicators included - For each section in your page the /* ... */ indicator is included too. For example if the indicator states /* footer */ then the class styles after it would be referencing the footer section of your page. This will give you a good idea what the codes after this indicator is doing.
• "Meaningful" class name attributes - Using or assigning class names which you can easily understand & relate to helps you to identify where the reference is placed & what will it be doing.
• Line separation & indentation - Easy to read and target the location of your custom styles.

Most of the fonts styles, text alignment, page layout styles has been already assigned by the browser reset, typography & page layout CSS styles. This will help you from preventing duplicate styles when you start to define individually your page elements for your design.

This will also display a more consistent flow of font sizes & style selection, add ample padding & spacing between elements, which in most custom Blogger template available on the internet is lacking of.

The full CSS styles for your blog/web page will now look like so, inside your <style amp-custom='amp-custom'/> component in your Template HTML.

<style amp-custom='amp-custom'>
/*<![CDATA[*/
/*
@platform: Blogger
@theme_name: {{Your Theme Name}}
@created: Oct 2016
@last_mod: Oct 2016
@version: 1.0.0
*/
/* BROWSER RESETS - inspired by Eric Meyer */
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, 
hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  line-height:inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content:' ';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* TYPOGRAHY */
body {
  font: normal normal 16px Helvetica, Arial, sans-serif;
  line-height: 1.428;
  color: #3b3b3b;
}

h1, h2, h3, h4, h5, h6 {
  font: normal normal 16px Helvetica, Arial, sans-serif;
  line-height: 1.1;
  color: #333;
  margin-bottom: 10px;
}

h1 {
  font-size: 225%;
  margin-top:20px;
  margin-bottom:20px;
}

h2 {
  font-size: 200%;
  margin-top:20px;
}

h3 {
  font-size: 150%;
}

h4 {
  font-size: 125%;
  margin-top:10px;
}

h5 {
  font-size: 100%;
  margin-top:10px;
}

h6 {
  font-size: 80%;
  margin-top:10px;
}

p {
  margin-bottom: 10px;
}

a:link, a:visited {
  text-decoration: none;
  color: #06c;
}

b, strong {
  font-weight:700;
}

.small, small {
  font-size: 80%;
}

blockquote {
  font: normal normal 16px Times New Roman, serif;
}

/* PAGE STYLES */
ul, ol {
  padding-left: 30px;
}

.container {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center; /* align your text with left/center/right/justify */
  overflow: hidden; /* helps to clear floats */
}

header {
  padding: 20px 0;
  background-color: lightgray;
}

article {
  padding: 20px 0;
  background-color: white;
  text-align:left;
}

aside {
  padding: 20px 0;
  background-color: white;
  text-align:left;
}

footer {
  padding: 20px 0;
  background-color: lightgray;
}

/* header logo */
.header .title {
  font-size: 32px;
  color: red;
}

.header .description {
  font-size: 21px;
  color: red;
}

/* navbar */
.navbar ul {
  list-style: none;
  display: block;
  text-align:center;
  padding-left: 0; /* remove reset padding */
}

.navbar li {
  display: inline-block;
  margin:0 auto;
}

.navbar li>a {
  display:block;
  padding: 6px 12px;
}

/* articles/posts */
.post {
  margin-bottom: 20px;
}

.date-header {
  font-size: 14px; 
}

.date-header a {
  color: inherit;
}

.post-title {
  font-size: 42px;
}

.post-title, .post-title a {
  color: black;
}

.post-body {
  margin-bottom:20px;
}

.post-footer {
  padding: 20px;
  background-color: lightgray;
  font-size: 14px;
}

/* sidebar */
.sidebar .widget {
  margin-bottom:20px;
}

.sidebar .widget h2 {
  font-size: 18px;
}

.sidebar .widget-content {
  margin-bottom:10px;
}

/* footer */
.footer .widget {
  margin-bottom:20px;
}

.footer .widget h2 {
  font-size: 18px;
}

.footer .widget-content {
  margin-bottom:10px;
}

.footer ul, .footer ol {
  list-style: none;
  padding-left: 0;
}


/*]]>*/
</style>

Now you have set the base of your blog/web page for mobile views. In the next tutorial, we will extend this styles to display on/for larger screen sizes especially targeting tablet devices on wards.

You will also learn how to place your page elements on your blog/web pages while still using the same principle detailed out and keeping the layout responsive.

Up next: Add AMP Sidebar on Blogger Template Tutorial with Navigation Links

Previous Tutorial: Add Layout Blogger Sections & Widgets with AMP