Web Typography Showcase: Joomla K2 component & JA Blog Explained

Example: 615x200 image. Width must be 615px. Height is your choice!

What you can learn from this post:

• As a webmaster/designer, you have to provide a good guideline for your different editors. Give them a complete presentation of all kinds of content types that the writer might need.
• Looking professional means not only to approve the copy, but also make sure things look well structured and consistent.
• Content is king right?! And strong kings must look sovereign! Why? How can he lead if he looks like any dude. Good writing can contain great information, but if is supported by great typo, it makes it more striking and absorbing.

I recently asked our lead designer Hieu Nguyen (the guy actively contributing to Purity, Teline Series, ... and our T3 Framework) to help with revitalizing the style of our blog posts as more writers jump on the ship and everyone might use his own way to show off content. The result is this sample blog post, that every JA writer can refer as orientation making our pieces simply looks great.

Here are the guidelines we shall follow:

Every intro paragraph should be displayed here! Users usually ignore this as they may find the content clickable just by looking at our blog title and the image. So, try to make it short & informative as much as you can. Do not place Headings here! NEVER!

Notice Do not place Headings in the intro paragraph. Use messages' styles if you want to catch user attention.

Choose the best CMS, pick the right CCK

Web Typography does not rely on any CMS or CCK (Content Construction Kit). However, if your website is built upon on an excellent CMS (like Joomla), you can easily find one powerful CCK and start fine-tuning the Kits of information, layouts, extra fields, for all of the content types that you have on your website. JoomlArt is powered by Joomla and our blog markup is constructed based on the great K2. Thanks Fotis and and JoomlaWorks team! Tom Ly will come back with an indepth post about Joomla CCK in coming days, for now, let's get back to the topic.

Some notices in your mark up.

By writing semantic (x)HTML MarkUp, you not only make blog posts look beautiful but also much easier to read. I believe that all our JA's writer have knowledge about (x)HTML :). So all you need to do is just a little patience and carefulness when composing a post, and yes, follow the example styles below.

Use the right Headings.

Use H2 to divide your post into separate parts. Use H3 to divide your blog's parts into smaller parts. Use H4 to divide your blog's smaller parts into more smaller parts. And so on! I guess we do not write whole books here so more than H5 is not needed.

Sample Headings structure.

Your Part 1 Heading
02.Your content goes here
    
Your Part 1.1 Heading
    Your content goes here
    
Your Part 1.2 Heading
    Your content goes here
        
Your Part 1.2.1 Heading
        Your content goes here
        
Your Part 1.2.2 Heading
        Your content goes here
    
Your Part 1.3 Heading
    Your content goes here

Inserting images

Besides the image used in the intro, you will use others in the main post content for better explanation, illustration or imagination. Image should have a small caption. Sample code as below:

Sample code of an image with caption

<div class="img-caption">
<img src="images/stories/joomlart/blog/example_img.jpg" alt="Image Description" title="Image Description" />
<p>An example caption.</p>
</div>

In case you don't feel the need of an description for that image, just eliminate <p> .

Sample code of an image without caption

<div class="img-caption">
<img src="images/stories/joomlart/blog/example_img.jpg" alt="Image Description" title="Image Description" />
</div>

In case you need to border the image, just add an addition class has-border.

<div class="img-caption has-border">
<img src="images/stories/joomlart/blog/example_img.jpg" alt="Image Description" title="Image Description" />
</div>

Tip 1 Add an additional class "left" or "right" into the "img-caption" to align your images. Ex: <div class="img-caption left">

Tip 2 Name and Alt tag of your image should relate to the post title or post heading for improved Image Search.

Additional Typo and Message Styles

Below are additional typo and some message styles you may use to compose your post. Find the one you need and see the code below to insert. Enjoy!

Quotations

Content is king right?! And strong kings must look sovereign! Why? How can he lead if he looks like any dude.

Tags / Indicators

C P M T
J! 1.5 J! 1.6 Drupal Magento

Additional Typo

Notice Sample notice message.

<p class="ja-msg msg-notice"><strong class="ja-msg-tag smg-tag-notice">Notice</strong> Sample notice message.</p>

Tip Sample tip message.

<p class="ja-msg msg-tip"><strong class="ja-msg-tag msg-tag-tip">Tip</strong> Sample tip message.</p>

Info Sample info message

<p class="ja-msg msg-info"><strong class="ja-msg-tag msg-tag-info">Info</strong> Sample info message.</p>

Msg Tag Sample default message

<p class="ja-msg"><strong class="ja-msg-tag">Msg Tag</strong> Sample default message</p>

Tip In case you need to insert the tag into the middle of your paragraph. Use only <strong class="ja-msg-tag ja-msg-xxx">Tag here</strong>. See example here!

List Styles

General List - [Bullet] style

• This is an example list item.
• This is an example list item.
• This is an example list item.
• This is an example list item.
• This is an example list item.

<ul>
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
</ul>

General List - [Check List] style

• This is an example list item.
• This is an example list item.
• This is an example list item. [Done]
• This is an example list item.
• This is an example list item.

<ul class="ja-ctlist ctlist-checklist">
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
  <li class="checklist-done">This is an example list item. [Done]</li>
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
</ul>

Speciall List - [Menu] style

• This is an example list item.
• This is an example list item.
• This is an example list item.
• This is an example list item.
• This is an example list item.

<ul class="ja-ctlist ctlist-menu">
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
  <li>This is an example list item.</li>
</ul>

Message Styles

Box style

<div class="ja-msg-box">
<div class="ja-msg-box-ct">
<p>This is an example content box.</p>
</div>
</div>

<div class="ja-msg-box">
<div class="ja-msg-box-ct">
<p>This is an example content box with <strong>CTA area</strong>. Useful if you want to make a paragraph look different from the rest. Use it wisely to transfer your information!</p>
</div>
<div class="ja-msg-box-actions">
<p>What to do after reading this box?</p>
<a href="#" title="Action 1">Action 1</a> - 
<a href="#" title="Action 2">Action 2</a> - 
<a href="#" title="Action 3">Action 3</a>
or
<a href="#" title="Action 4">Action 4</a>
</div>
</div>

<div class="ja-msg-box msg-box-notice">
<div class="ja-msg-box-ct">
<p><strong>This is an example notice box. </strong></p>
</div>
</div>

<div class="ja-msg-box msg-box-notice">
<div class="ja-msg-box-ct">
<p>This is an example content box with <strong>CTA area</strong>.</p>
</div>
<div class="ja-msg-box-actions">
<p>What to do after reading this box?</p>
<a href="#" title="Action 1">Action 1</a> - 
<a href="#" title="Action 2">Action 2</a> - 
<a href="#" title="Action 3">Action 3</a>
or
<a href="#" title="Action 4">Action 4</a>
</div>
</div>

Banner Styles

<div class="ja-msg-banner">
<div class="ja-msg-banner-ct">
<p><strong>This is an example content banner!</strong></p>
</div>
</div>

<div class="ja-msg-banner">
<div class="ja-msg-banner-ct">
<p>This is an example content  banner with <strong>CTA area</strong>.</p>
</div>
<div class="ja-msg-banner-actions">
<a href="#" title="Action 1">Action 1</a> - 
<a href="#" title="Action 2">Action 2</a> - 
<a href="#" title="Action 3">Action 3</a>
or
<a href="#" title="Action 4">Action 4</a>
</div>
</div>

<div class="ja-msg-banner msg-banner-notice">
<div class="ja-msg-banner-ct">
<p><strong>This is an example notice banner!</strong></p>
</div>
</div>

<div class="ja-msg-banner msg-banner-notice">
<div class="ja-msg-banner-ct">
<p>This is an example notice banner with <strong>CTA area</strong>.</p>
</div>
<div class="ja-msg-banner-actions">
<a href="#" title="Action 1">Action 1</a> - 
<a href="#" title="Action 2">Action 2</a> - 
<a href="#" title="Action 3">Action 3</a>
or
<a href="#" title="Action 4">Action 4</a>
</div>
</div>

Foot Message

<div class="ja-msg-foot clearfix">
  <h2>This is a sample footer box - [Suggestion] style.</h2>
<ul>
  <li>Do you have some ideas for us to improve legibility?</li>
  <li>Do you like our footer box? </li>
  <li>Does it draw your attention at the end?</li>
</ul>
</div>

<div class="ja-msg-foot msg-foot-question clearfix">
  <h2>This is a sample footer box - [Question] style.</h2>
<ul>
  <li>Do you have some ideas for us to improve legibility?</li>
  <li>Do you like our footer box? </li>
  <li>Does it draw your attention at the end?</li>
</ul>
</div>

<div class="ja-msg-foot msg-foot-info clearfix">
  <h2>This is a sample footer box - [Info] style.</h2>
<ul>
  <li>Do you have some ideas for us to improve legibility?</li>
  <li>Do you like our footer box? </li>
  <li>Does it draw your attention at the end?</li>
</ul>
</div>