What makes a good blog post?

As your e-Comm teachers have gotten used to blogging and having students blog, we've also been analyzing, discussing and refining what we think are the elements of a good blog post.

Tips from the blogosphere

This is not new ground, of course. Over in the right sidebar, you'll find links to sites that have specific tips for blogging. So far, they are:

• The Ultimate Guide to Starting a Design Blog
• 25 Blogging Tips for Newbies and Veterans
• The Ultimate Blogger Writing Guide

Let us know when you happen upon more helpful sites that we should list!

e-Communication's big three

Your e-Comm teachers have decided to evaluate your blog posts on three main things. We'll also be teaching each of these things more intentionally next semester:

• Content
• Writing Style (Voice)
• Presentation

Content:

This will vary, depending on the type of blog post you are doing -- from blogging about a current event to describing the process behind one of your projects. You will be informed of the expectations for each, as they come up. For example, if your blog post was about one of your projects, your content should successfully communicate the extent of the project, how it was done, what was learned, reflection and conclusions. You should also make links to relevant sites, and include graphics and video where appropriate.  If you don't have meaningful content, there's no point in anyone reading what you have to say!

Writing Style (voice):

Grammar and spelling matter. (Blogger has a spell-checker!) Use appropriate vocabulary (jargon or industry terminology appropriate to your focus area). Some of our posts in e-Comm will be rather technical. Others will be more abstract. So, the tone you take in your posts may depend a little on the nature of the content, and also on the preferences of your current teachers. But, by and large, your post should not read like a classroom assignment. Speak to your audience as a budding “creative” sharing your experience. “Blogging style” is a balance between conversational and professional. It isn't strict technical writing or research paper writing -- but, it isn't as casual as writing a letter to a friend. It's professional, yet engaging and personal enough to draw your reader in. 

Presentation:

Presentation is how your blog post looks. Use headings and sub-headings. Write your ideas in concise paragraphs, and include multi-media and links as evidence, appropriately placed and formatted. The typeface, size, and color of text should combine to make your text easy to read. Remember the design principles of CARP -- Contrast, Alignment, Repetition, Proximity (grouping). A great presentation is not only attractive -- it also makes your content easier to read and understand.

Content + Writing Style + Presentation

When you convey good content in an effective writing style and a well-designed presentation, you've created the perfect storm - a combustible mixture of elements that elevate your blogging to a new level. Your posts will earn higher grades, but much more importantly, your followers will want to read what you have to say, and you'll be honing those communication skills that will serve you well in your future endeavors!

One space or two between sentences?

On Blogger it's ONE.

Cutting to the chase...

In the one versus two space debate -- practically speaking, if you use two spaces between sentences in your Blogger pages or posts, they will sometimes wrap, causing some lines of continuing text to be indented by one space. So - for Blogger anyway, only use one space between sentences. (In Web design in general, multiple spaces are condensed down to one anyway, so it doesn't matter. For some reason Blogger is different, and it inserts a code to force as many spaces as you want.)

Here's an illustration of Blogger's two-space issue in the following paragraph. The sentences are all separated by two spaces:

The beginning of the 3rd line has alignment issues, due to my 2nd space.

The Debate (Blogger aside)

Is it actually wrong to use two spaces between sentences?

Yes. And... no.

It depends on who you talk to!  And, it depends on the setting.  (Are you typing a blog post, a letter, text for a poster, etc.?)  Believe it or not, it may also depend on the image you wish to convey of yourself.

Two spaces between sentences was the convention in the days of the mechanical typewriter, which had monospaced characters. It took two spaces after a period to give enough visual breathing room before the next sentence.

In the digital era, the two-space convention has lingered, even though it is not necessary (especially with those of us old enough to have learned to type on actual typewriters).

The Two-space Haters

www.cultofpedagogy.com/two-spaces-after-period/

These days, the convention is to use one space between sentences. There are those who interpret this very strictly, and insist that using two spaces is very wrong. They have some good points.

One is Jennifer Gonzalez at Cult of Pedagogy.





Farhad Manjoo puts it this way in his essay on Slate.com (Space Invaders):

Typing two spaces after a period is totally, completely, utterly, and inarguably wrong.

The Official Word for Writers

The Chicago Manual of Style and the MLA Handbook both concur that the current convention for most situations is to use one space after a period. They do, however, leave some wiggle room (www.mlahandbook.org/fragment/faq).

Publications in the United States today usually have the same spacing after a punctuation mark as between words on the same line. Since word processors make available the same fonts used by typesetters for printed works, many writers, influenced by the look of typeset publications, now leave only one space after a concluding punctuation mark. In addition, most publishers’ guidelines for preparing electronic manuscripts ask authors to type only the spaces that are to appear in print. 

Because it is increasingly common for papers and manuscripts to be prepared with a single space after all punctuation marks, this spacing is shown in the examples in the MLA Handbook and the MLA Style Manual. As a practical matter, however, there is nothing wrong with using two spaces after concluding punctuation marks unless an instructor or editor requests that you do otherwise.

For Graphic Designers and Desktop Publishers

Some graphic designers are among the strict one-space disciples. Others will tell you that what matters is readability - and if two spaces look more readable than one in a certain situation, then use two. Here are some of the ins and outs of the issue at desktoppub.about.com, including this reasonable recommendation:

The Bottom Line: Professional typesetters, designers, desktop publishers, and anyone who truly cares about fonts and typography should use only one space after a period or other ending punctuation. However, it doesn't necessarily need to be a standard space character. Desktop Publishing software makes it easy to experiment with other space characters to achieve the best appearance on a case-by-case basis. Save the double spaces for typewriting, casual email, term papers (if prescribed by the style guide you are using), or personal correspondence. Learn how to remove extra spaces between sentences. For everyone else, do whatever makes you feel good.

Your Spaces Give You Away

One final consideration - when applying for a job with a company that is inclined to want younger folks as employees, you may want to stick with the one-space rule in your cover letter and resume. Typing two spaces between sentences identifies you as someone who probably learned typing back when the convention was two spaces.

Check these out: Double Spacing After a Period Could Reveal Your Age and Nothing Says Over 40 Like Two Spaces after a Period!

My Problem (Mr. Olson)

I think that sometimes two spaces after sentences makes text more readable. However, I do want to change over to using just one -- on Blogger, I have to. There's a slight problem though....

9th Grade Typing Class, 1976

Spacing twice after sentences is a very difficult habit to unlearn. It was drilled into us repeatedly in 9th-grade typing class. Every period I have ever typed at the end of a sentence in the 38 years since then has been followed by two spaces. It's hard-wired into my brain and my muscle memory. You'll likely see evidence of that in many of my Blogger posts!

I have to concentrate really hard to make myself hit the space bar only once after a period. So, if you see me twitching slightly or making funny faces as I'm typing, you know why!

Making Portfolio Pages

Pages?  We don't need no stinking pages!

Badges?
We don't need no stinking badges!

(Name that movie.)  Well, yes, we do need pages. So far on Blogger, you've been primarily making use of posts. Posts are the most common way to update a blog. They appear on your home blog page, and with time they get pushed down and off the main page by more current posts. Pages are more of a static entity. They stay put, and they are accessible by name from a menu on your site. You can put as much or as little on a page as you like - and you can add to them or edit them over time.

We will use pages to make sections of your blog site that function more as a portfolio than a blog. This way, no matter how many posts you make, your best work will be right there available for those who want to see it.

Reading through this entire post BEFORE starting setup of your portfolio pages will probably save you some work - a couple of different options are shown, and you can pick the ones that work best for your portfolio pages.

a blog POST about a project

A Project Blog POST

So far, you've been blogging about some of your class projects, using posts. They have looked something like this example post about a project. This happens to be a photo, but imagine your animation, video, graphic design, or website design in its place.

This is a great way to blog about a project - but if this is one of your top portfolio pieces, you really want to also have it in a more featured location, where it won't get buried over time. If you labeled this post well, someone could find it that way - but they'd still have to wade through your labels. 

A Project Blog PAGE

So, let's see a couple of other ways we can feature your best work using pages.

In your design menu, go to Pages, and then press the New page button at the top.

Name your page - Graphics, Animations, Video, Web Sites - whatever. You can always rename it later.

Make a heading on the page, and put your cursor under that and press the Insert Image button.

Choose Upload

Choose Files, and select the files you want to upload.

Then click the ones you want to put the thick blue select border around them, and then press the blue Add selected button.

Give your work a caption and float it right or left, as space permits. Make it a large enough size that it can be appreciated.

Write your page content according to the requirements given by your teacher.

Then press the Publish button.

And.... nothing happens.

That's because pages aren't blog posts - they come up by choosing them from a menu, as opposed to being displayed sequentially on your home page.



So....

Now you need to go to your Gadgets in the layout menu, and scroll down to find the Pages gadget. Click the plus to add it.

This Pages gadget is basically a Pages Menu gadget.

Page names are on the left, and will only appear in the menu if you have their boxes checked.

Once the pages are checked, you may reorder them on the right side.  By convention, you should either place the Home page first or last.

You may want to name your Pages gadget Portfolio, instead of pages. I wish I would have thought of that earlier when I was making these screen captures...

Press Save when finished.

You may either position your Pages menu in one of the sidebar gadget spots, or...

... in a gadget at the top, in which case it looks like either a menu bar or tabs.

So, here's the finished page, accessible by the Pages Menu over at the right. 

The next really amazing project to put on this page later on would either go below or above this one on the page.

One thing about that - it's going to become a long page.  This is good if it is one feature project, or maybe two - but for any more than that, you may want to try yet another option....

For multiple projects on the portfolio page, you could just give an initial summary of each project, followed by a link to see more - either in a post dedicated to that full project, or another page.

Then just put this gallery page in your menu, and take out from the menu other pages that have the details on individual projects. If they are posts, just link to them.

(You can try an example of what I mean by going to the actual Graphics Gallery page on this blog.)

Upon Further Review

Definitely name your pages menu Portfolio, or something to that effect, instead of pages.

I don't want to go back and redo all the above graphics, but doesn't this look better? -->

With links to portfolio pages featuring your best work right there at the top of your blog, your projects are more likely to be seen and appreciated over time than if they were only posted.

You can keep on posting them - but having a gallery page with an overview of each project, linking to the more detailed posts about the projects, will help focus a reader in on your best stuff.

Here's another quick reference from Blogger on some of the details of pages and the pages widget that were not covered above: Blogger Buzz

Snowy Bridge

Snowy Bridge -- 12/15/14

Purpose of the Project

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique nibh id pharetra malesuada. Morbi porttitor lacinia lobortis. Mauris fringilla eleifend enim. Vivamus tempus arcu eros, sed vehicula massa molestie a.

The Process

Aenean vitae leo ultricies, lacinia arcu vitae, tempus diam. Morbi non dignissim magna. Vivamus fermentum ac nunc nec elementum. Donec fermentum faucibus erat, nec lobortis enim semper vel. Pellentesque dictum convallis erat sed commodo.

Aliquam erat volutpat. Phasellus sed lacus vestibulum, tempor eros eu, tincidunt metus. Nam ultrices nisi ante. Etiam eu mattis magna. Integer consectetur massa diam, a dictum eros imperdiet sit amet. Ut euismod tellus eget mauris vehicula feugiat tincidunt eu libero.

I Learned New Things!

Fusce congue neque vel hendrerit porttitor. Cras ut lorem varius, venenatis lorem nec, mollis leo. Ut ut sem ultricies, bibendum nisi eget, gravida velit. Donec tristique iaculis neque et scelerisque. Donec non neque neque. Morbi lobortis nulla nec tempor feugiat.

Maecenas rhoncus lectus ut orci efficitur suscipit. Nunc id dolor mauris. Nullam vitae justo non tortor tempor aliquam a at felis. Praesent ut tempor ex, at dapibus nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Next Time?

Sed at urna id sem maximus bibendum ut in massa. Quisque malesuada vestibulum mauris. Curabitur quis ante non libero sagittis porta fermentum vel leo. Donec vestibulum at tellus id sollicitudin. Etiam varius malesuada nulla non consectetur. Mauris ex sapien, molestie vitae efficitur id, dapibus lobortis lectus. Pellentesque vitae leo mattis enim egestas malesuada.

Concluding Thoughts

ullam id dolor in quam tempor sollicitudin. Suspendisse quis scelerisque nisi, quis ullamcorper urna. Aliquam erat volutpat. Morbi dapibus diam sed hendrerit semper. Vestibulum malesuada ac dui eget porta. Ut lacus justo, consectetur et mollis vel, sagittis at leo. Vestibulum porta nisi augue, laoreet semper nisl commodo a. Nulla consectetur ac purus vel ultricies.

Customizing Your Blog With Your Own CSS

You can only do so much with the Blogger customization settings for your fonts and colors.  So it's time to...

Hack the CSS!

To make some of the changes you want, and to really implement CARP design (Contrast, Alignment, Repetition, Proximity) -- you need to be able to apply your own CSS rules to your blog.

CSS stands for Cascading Style Sheets.  The cascading part means that styles are in effect until new styles are declared that override them - which is what we will do with your blog.  We will add new style rules that override the existing rules established by the Blogger template.

How to do it - examples

Here's how I have made a couple of changes to this blog template. The ones you want to make on yours may involve different CSS rules, and may apply to different parts of your blog. This same process will apply, though. I'll also include a CSS reference for you, so you can look up how to do all the other CSS that you might need.

To do this, I usually have my blog open in 2 different browser tabs (must use either Firefox or Chrome - IE may work, I'm not sure).  In one of them I just stay on the blog, and in the other one I go to Design > Template > Customize > Advanced > Add CSS.

In the browser tab with my blog showing, I select the part of it that I want to change - in this case, the subheadings in my post.  I then right-click it and choose Inspect Element.

Down in the inspection windows now at the bottom, I notice that I have selected an h3 heading.

And, over to the right, I see the CSS rules applying to h3, and also the ones that apply to all of h1, h2, h3, and h4.

I select and right-click to copy the styles for the headings.

In the other browser tab, I choose Add CSS in the Advanced template customization.

 In the white box, I right-click and paste the code.

 It goes in looking like this.

I don't want my new CSS styles to apply to all the headings - just to h3 and h4.  What I want is a little more room under the headings, or in other words, a bigger margin.

So I remove the h1 and h2, and modify the rest like so.  Indenting between the braces makes it much more readable and easy to work with.

Now I see a little more room under my "What are we doing..." heading.

Warning: CSS is very picky about the punctuation and spelling.  The commas, braces, hyphens, colons and semi-colons all must be exactly as shown, or it won't work. 

I decided to make the bottom margin a little less - and then also give it some top margin to separate the heading of a new section from what came previously in a post.


It also turns out that my minor headings are h4, and I would like those to be a different color (in addition to being smaller) - so I typed a new rule just for h4.

Now I want to change the headings of my widgets. In the browser tab with my blog showing, I select one and right-click, inspect element. Looking at the code and the CSS rules, I can see that those are h2 headings.  I can also see that they are within a class called .widget.

To target just h2 headings that are in the .widget class, I add in a new CSS section for .widget h2. I made the bottom margin smaller, and added a border on the bottom. The problem is, it turns out that the date above the posts is also an h2 in a widget....

So, I had to further restrict the CSS to only apply to h2s inside a widget inside the .sidebar class.

Selecting and inspecting element for the entire top widget, I find it is in the .widget-content class.

I want to space apart my widgets more, so I add a 60px bottom margin for the .widget-content class.

Between the line with the widget headings, and the added space between widgets, I now have my widgets more visually separated.

This helps fulfill the P of the CARP design principles - Proximity.

Proximity means grouping logically connected things together with space between them.

Each separate widget (gadget) now has its own space.

We could also add a border around each widget or a background color for each widget to further establish proximity - as I did in my other blog.

Here's one other CSS rule I added. A lot of my screen capture images in these tutorials just have white edges - and so against my white post background they lose the definition of their edge. I added a rule for a border that only applies to images within the posts - specifically, it applies to img tags within the .post-body class.

Moving on from here

There are many other tweaks you can find to make to your CSS.  These are just examples that worked well for my blog.  Here's a great site to find the syntax for any CSS you want:  w3schools.com

3 Final Thoughts:

1. Watch your spelling, punctuation, braces, etc.  
2. Make sure any changes to the CSS help enhance your CARP design principals, giving you better contrast, alignment, repetition, or proximity.
3. It's a good idea to make a backup copy of your CSS.  Select it all and just copy it into a Word document somewhere for safe keeping.  If you change templates or reset your customizations, you will probably lose your CSS.

Now go hack those Blogger template styles!

Customizing Your Blog Template, with Blogger Template Designer

What are we doing, and why?

When you first set up your blog, you chose a template that determines how your blog looks. However, you will probably want to customize your template to make things more to your liking. This post shows how to use Blogger's built-in options to change fonts, colors, and so on -- using the "Blogger Template Designer". A subsequent post will show how to make further changes by adding in your own CSS rules.

As you will see, the Blogger Template Designer is very easy to use. You don't really need a tutorial to learn how to use it. However, what is important to your readers (and your teachers) is that you use it well - that you make good design choices so your blog is easy and pleasant to read, and projects a somewhat professional image of yourself.

So, in this tutorial, we will keep in mind the design principles of CARP - Contrast, Alignment, Repetition (unity, rhythm), and Proximity (grouping/spacing). The two main ones you can control in this tutorial are contrast and repetition.  If you don't use good contrast, parts of your blog may become unreadable, and the important parts may not stand out as they should. If you don't use repetition (for example, you choose a lot of random fonts and colors), your blog will become confusing and disjointed.

Step by Step

Here's a blog just using one of the Picture Window templates, with the default settings.

Choosing Template in the menu brings up the available Blogger templates (in some other blog platforms they are called themes).

After choosing the one to start with, click on the orange Customize button.

The first thing we can adjust is the template, just like we could at the previous page.  I just kept on using the same one.

The Background settings let you choose a different background image, as well as a different color scheme. In this example, I chose the blue texture background and changed to the blue color scheme.

The Adjust Widths settings let you change the size of the blog "container" and the sidebar.

I kept the settings as-is, but later I may come back and make my sidebar narrower if I have wider content that I need to fit in posts.

The Layout settings let you control the positioning and the number of sidebars, and the way in which those are split up into gadget areas. The footer can also be split up into separate areas.

Here in the Advanced settings we can control more specifically the fonts and colors.  This is where a little bit of restraint and evaluation is called for....

Page Text is most of the text on your page.  You can choose a font, size, and color.

Choose a color that contrasts well with the backgrounds of your posts area and sidebar.

The top few fonts are the "core web fonts" that most people already have on their computer.  These are fast loading. Georgia and Verdana were designed to look good on screen.

The Web Fonts are fonts that must be downloaded in addition to the rest of your blog.  There are nice ones, but if your blog loads too slowly, try going back to the core web fonts at the top of the list.

Do NOT use typefaces that may look cool or unique but will be difficult to read in paragraphs of your blog posts!!

Also, do NOT make all your text bold or italicized.

And, do NOT make your text too small.

Bad choices:

The font is not very readable, and doesn't look professional.

The color does not have enough contrast with either background - especially in the sidebar.

Decorative or novelty fonts have their place - usually in very small doses - maybe for a favorite quote in the sidebar, or for a comment in the footer.

Better choices:

Open Sans is a nice readable typeface.  The darker color contrasts well with the backgrounds.

The Backgrounds colors are for the header, posts, and outer areas.

Remember to keep good contrast with your text.

I changed the header background color to "Raven Blue" -- #00539f.

(#00539f is a hexadecimal color code.  The 00 is the amount of red - none.  The 53 is the amount of green - not much.  The 9f is the amount of blue - more blue.)

Links is where you choose your starting link colors, your visited link colors (links that have already been clicked), and hovered link colors (when the cursor is over them).

The main thing is to make it obvious that your links are links.  If you make the color too close to your other text color, your links are hard to distinguish.  There's that contrast again.

Blog Title is one I decided to use a different font for.  Your blog should not use more than 2 or 3 fonts all together.  But, the blog title is important and should stand out, so I'm using a different color, size, and font for contrast.

Tabs Text and Tabs Background don't apply the way I have this template set up.  If I had a menu going across the top, those would be my tabs.

Watch your color contrast.  If your tab names are long enough that fitting them in is an issue, try choosing Arial for your font.

For my Post Titles, I'm using the same font I used for the Blog Title.

The Date Header appears above posts.  Keep the color subtle so that the Post Header underneath it is what grabs attention.

The post footer color should also be low-key. It shouldn't stand out as much as the post content above it.

The border color can be whatever you want. If you don't want a border, you can pull down the color picker and choose "transparent".

Gadget titles probably need to stand out a little, so I made them a contrasting color.

Footer colors are usually also fairly low-key.

Same with footer links.

Add CSS is the last section, which we'll leave blank for now.  In the next tutorial we'll use it to add our own style rules to further customize the appearance of our blog.

Once you have previewed and adjusted everything, you must press the orange "Apply to Blog" button in the upper-right corner.

The finished result for now:

Typically, after using the blog for a while I'll think of some better colors or fonts to use in certain places, and I'll go back into the above settings to tweak them.

A CARP Checkup

We used Contrasting colors, sizes, and fonts to make the important things stand out more than the lesser things.

We used Repetition by staying with a consistent set of color and fonts (hopefully).  I'm not really satisfied with my mix of green links, white gadget headers, and blue text, so that's on my radar to fix and make more consistent looking.

None of these settings had to do with Alignment.

Proximity will figure in when we add our own custom CSS to clarify and distinguish the groupings of different page elements.

Next time - custom CSS!