Finally we’re at the stage where we can use some of our design skills! In the next few articles we will look at how to make our content easy to read and scan; in the next post we’ll work on grabbing attention with good headlines! Your content won’t be read if you don’t add kick ass headlines! And your content won’t be read if it isn’t formatted to be easy, pleasant and quick to read! Many bloggers do not consider just how important these points are in the beginning, I didn’t either, but after being online so long, I really appreciate good formatting and yes, catchy headlines work on me as well as they work on anyone else!

So what exactly is good formatting and how do you give you visitors a better reading experience?

Text Formatting

Choose The Right Font

Pick the right font for headlines and content ( paragraphs) – what’s right depends on personal taste and the site topic you’re writing about of course, but take a look at this article – How to Safely Match Web Design and Typography for a more in depth explanation. Never underestimate the power of proper typography, it can be the difference between whether or not people read your articles.

Some of our readers have already noticed we use a serif typeface for headlines, which according to some theories, isn’t the best style of font to use for headlines. Well, I am writing this guide to remind myself how important it is to have really good and thought through typography and will change the CSS styling to 1WD shortly after publishing this article. How about that – case study in action!

Tip: Just to be clear, don’t use more than 2 fonts on your site! It’s ok to use different fonts for headlines and content, but if you use too many fonts your site will probably look very unprofessional. There are some exceptions for quotes, logo, just don’t get crazy, play with different CSS styles not fonts!

Importance of Typography

Still not convinced typography is important? Ok, then I suggest you read this article – What’s Left? The author removes all the content from blogs to show what happens when you a blog is stripped of everything but the design. While the article is about needless website redesigns, I enjoyed this simple test to see why “content is king” – for blogs content actually is everything!

If you would like to see what happens when you strip a site of it’s design, check MIN. MIN is a bookmarklet that will strip any decoration from a site. All color, borders and backgrounds are removed instantly, helping you identify the successful and unsuccessful uses of typography and layout.

Related reading for better typography tools – Ultimate List of 32 Font And Typography Tools.

Paragraphs

Text Size

This is a tricky point too, because you can increase text size in a browser with a few clicks, but still wouldn’t it be better if we could read content right away when we visit a site? I think different formatting and distractions are the main reasons why feed readers, Zite, FlipBoard and Readability are so popular! Many blogs have strange text formatting, too many ads and social media which distract from the content itself! If you can’t remove ads or social buttons, take the time and care to create a great reading experience! How big should your text size be? Again it depends on your audience, but I think 14px is a good starting point – not too small, not too big.

Use Sans-Serif Typeface For Content

Use sans-serif font for content, it’s easier to read letters without serifs (I know, I know Times New Roman is serif and it’s a common typeface that people use when using Word, but online, sans-serif fonts seem to work much better, they also make big chunks of text much easier and faster to scan).

Separate big chunks of information

Paragraphs should not be more than 3-4 sentences. Imagine how hard it would be for you to read text without any formatting? Just one huge pile of words and sentences with no visual difference or hierarchy between the different topics, paragraphs and headings! Imagine yourself sitting at a desk full of different papers, notes, tools – how do you feel? Overwhelmed? There’s a good reason minimalism is so popular in web design! Put clear separation in your content as well!

Headings

Headings are both for clear content separation and search engines! You should use a lot of headings for the same reason you need to separate paragraphs clearly. With these headings you can grab reader’s attention or lose it! If there are no headings at all – you’ve already lost!

While H1 always will be your blog content headline, make use of H2 and H3 stylings as well. I don’t recommend using H5,H6 – it will just create confusion.

• H2: use it to describe the main article topics, usually you’ll have 3-5 major points in an average article
• H3: goes to explain some lesser points, Notice how I formatted this article? There was a paragraph section (H2) and since I was explaining a lot of different sub-topics (H3) there, I dropped it down for much easier reading!

Just go with H2 and H3 and you’ll do great! If you need to separate your content even more I would suggest using bullet points or numbered lists, but more about them later.

Here are some fonts for you to pick from which will help your headlines get noticed – 40 Awesome Free Fonts for Big Headlines

Bullet points, numbered lists

Use bullet points or numbered lists whenever you’re listing something. See how I did it with headings description? Readers will easily recognize that I have created a list and explained similar points and list points are easy to scan and read. No wonder list posts have been so popular, for most readers, the only way they read a post is by quickly scanning it, bookmarking it and then they go on to the next site.

Images

I work hard to find the right images, because I believe visual memory is the strongest one! If you read a post and want to go back again you may not remember site names or web addresses, but you will definitely remember a well designed, visually appealing site! How about using screenshots from a website or product you’re featuring?

However if your article isn’t about websites or online tools, it’s still a good idea to find the RIGHT images which visually convey your opinion or stand. Many bloggers don’t take this point serious though they should! Visual presentation is so powerful! I bet most of you reading this article right now always start with wire-framing or sketching your design to get an idea of how it will look! We make notes on paper because it’s a way for our thoughts to become real, isn’t it smart to get visual in blog posts too? If you’re writing about fear – show a desperate man in a picture, if you talk about power – show skyscrapers, freedom – sky, clouds! Help your readers get their imagination working!

Quotes

Do you remember writing essays and quoting very well known authors to lend a certain auhtority to your work? Great, relevant quotes will make you look more professional – good, relevant quotes show you know what you’re talking about and who the pioneers or leaders in your industry are. This is a great way to add some smart content to your article. You can use quotes to support your opinion, and then explain how they relate to the article topic.

To be honest I don’t do this often yet, just because I forget the sources to those great quotes and end up writing them in my own words, but when I am reading books, a great quote can be a powerful thing.!

Some people just can say something in a few words which we cannot!

Quote the most attention grabbing content in article! I’ve seen this a lot in newspapers, it’s a great way to get scanners to read your article just because they want to find where that quote has been used in context!

Using bold, italic

Bolding is used to emphasize just a few words or a sentence in the article. The previous sentence is an example of how I emphasized just those words which are crucial to explain how to use bold.

Italic is used differently, I usually use it for tips, comments I might have which seem little bit out of context. Basically italic is similar to bold, but draws less attention.

Interlinking

Oh, this is not directly related with blog post formatting, but I wanted to include it, because it will help you in the writing process! Once you feel you’re writing an article which has some points that you’ve already coveredt, link to that article! If you have any related resources to the post, let people know about them!

And yes, if you’ve found some great thought provoking article which could help your readers understand some points better – link to it! Yes, you’re linking outside, but because of valuable content people come back to you! With Twitter you don’t just link to your own articles all the time, you retweet (RT), it’s a great way to share some exceptional articles or tools you’ve discovered! You provide value – do it with your own articles too and your readers will appreciate you by doing so!

Typography Tools And CSS Frameworks With Typography In Mind

Here I found several tools to help you get started to improve your typography in web designs.

Awesome FontStacks

Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code! This website will help you to remove the pain from guessing what kind of fonts you should use together! It will do the hardest part for you, you just have to choose which font stacks you want to use – sans-serif, serif, monospaced fonts. Fontstacks will automatically match fonts based on typographical metrics, optimize the font bundles for their intended purpose, and deliver rock solid CSS for those fonts and their fallbacks to copy & paste.

Type-A-File

A really awesome way to get your site up to typographic snuff. It uses traditional semantic HTML tags along with some additional semantic classes named after commonly occurring elements in print design to create a solid typographic toolkit for your website, whoever you are.

Pick from several different stylings and sizes..and then download your css file immediately!

FontSquirel : FontFace

Download hundreds of prepackaged @font-face kits which include multiple font formats, CSS and HTML code. This site is similar to FontStacks but it offers a much better variety of fonts.

Better Web Readability Project – CSS Library

The main purpose of this project is to contribute to better reading experience on the screen by using CSS typography library. View typography demo

The Golden Grid

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites. While this framework’s main intention is for grids, it has Typographic style too. View Typography demo

PX To Em

With a very simple function – convert, get CSS, learn, it’s all what this site does, but does its job well! Use Em’s because in that way when you zoom your browser, all other font elements will scale accordingly.

BluePrintCSS

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. View typography demo

BaseLine

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser's default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using "real" baseline grid as its foundation.View Typography demo

Atatonic CSS Framework

The Atatonic CSS Framework is a basic set-up of typography and grid tools. Atatonic is meant to make your web—life easier and is created to provide a stable grid and solid typography. View demo

InuitCSS

This framework does a lot of things, but we are looking at typography. inuit.css has some little typographical niceties built into it from the start. It also has a typographical scale and a (loose) baseline to get you well on your way.

Emastic

Emastic is a CSS Framework, it’s continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before. View typography demo & handy blog template.

BlueTrip CSS Framework

BlueTrip gives you a sensible set of styles and a common way to build a website so that you can skip past the grunt work and get right to designing. Download the package, include the images and stylesheets in your site structure, and get going!View demo

Advertise here with BSA

Agile Carousel is a jQuery plugin that allows us to create flexible (both in function and design) slideshows.

The plugin uses JSON for the data format of the slides. So, they can easily be provided remotely and integration with any other system (like CMSs) will be easier.

You can select between "fade" or "slide" as the transition effect, duration of the transitions and intervals between each slide can all be defined.

Slides can be set to be displayed with an "infinite scrolling" interface, navigation can be accomplished by "numbered buttons", "prev-next buttons" or any custom control.

With a simple function, it is also possible to get the total number of slides and the "current" slide displayed which would be handy when customizing it.

P.S. The plugin was previously shared at WRD, however, this is a totally re-written version and the old URLs are no longer available.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

CSS and HTML are key languages to begin with, when you decide to invest your time in web design and development. They are powerful languages and most of the time may seem simple to work with.

However, every single one of us, beginners, or advanced developers, have committed basic or major mistakes working with both these languages. With this in mind, I believe it is extremely important and always welcome to learn some good tips and practices which I hope will help you improve your skills and experience.

 

Some of you may be thinking that since you don’t see anything out of place when viewing your web page, you have your HTML and CSS documents built correctly, but you may be wrong. The truth is that you should not trust everything you code. Using the same ID more than once on the same page won’t result in wrong alignments or retrieve any error (unless you try to validate), but it is in fact bad markup and a major flaw in your code.

Doctype

Not so long ago, we had to use those really long Doctypes that were almost impossible to remember. Now, since you just need to use <!DOCTYPE html> on the top of your document, we have a much cleaner and better solution. Nevertheless, some people still forgets to specify it. This is mandatory for a validated and organized HTML document.

How you should do it

Never forget your DOCTYPE.

ID vs Classes

An ID is a unique identifier which allows us to target a specific element on the page and, since it is unique, it can only be used once in a page. On the other hand, we have classes which allow us to do exactly the opposite. Classes are used when you have the same element more than once on a page.

How not to do it:

 <div id="block">    <div id="btn"></div>    <div id="btn"></div> </div> 

How you should do it:

 <div id="block">    <div class="btn"></div>    <div class="btn"></div> </div> 

Say no to inline styling

Inline styling is unfortunately a pretty common practice and at the same time a bad one. It has nothing to do with invalid code or bad markup, but with organized code and structure. Imagine you have 30 pages and you need to remove an inline style you have applied to the same div on every single page, it would take you forever and steal precious time.

How not to do it:

 <div style="width: 100%; background: #fff;"></div> 

How you should do it:

 <div id="wrap"></div> 

Ove use of divs and CSS Classes

So you started your own project, you know how to use divs, ids, and classes. Inline styling is not your thing (fortunately), and you love to create styles and apply them everywhere. That’s great, but don’t write more than you have to. Having a div with an unordered list inside and a class applied to each li element is unnecessary.

How not to do it:

 <div id="navigation">    <ul>       <li class="left"></li>       <li class="left"></li>       <li class="left"></li>    </ul> </div> 

How you should do it

 <ul id="navigation">    <li></li>    <li></li>    <li></li> </ul> 

And in your stylesheet

 #navigation li { float: left; } 

Browser Resolution

According to the W3c’s latest statistics (January 2011), 13.8% of internet users have a 1024×768 screen resolution, and 85.1% use a bigger screen resolution. So the question is “What resolution I should design for?” I personally use a maximum width of 960 or 980 pixels for a vertical layout and between 550 and 640 pixels in case of a horizontal layout. Besides, though 13.8% seems to be a fairly low number, it still represents millions of internet users.

How you should do it

Consider everyone’s needs, and especially your target audience.

Block vs Inline elements

Differentiating block from inline elements can be a a delicate matter for beginners. A block element is displayed on a new line taking by default 100% width of the containing element, like divs (<div>) or paragraphs (<p>). An inline element is displayed with no line breaks meaning that it starts on the same line, taking only his own width, like span (<span>) or image (<img>). You can also change the way an element is displayed, this means that you can change an inline element to be display as a block and vice versa.

How you should do it

  span { display: block; } 

Use comments to organize your code

When I start a project, I try to organize it through commenting as much as possible and you should do the same. This is something purely optional but I highly recommend its use. It not only helps you find the section or element your are looking for, but also makes your life easier when you need to know which div your </div> is closing.

How you should do it

 <!-- Begin #header --> <div id="header"> <!-- End #header --> </div> 

Stylesheet:

 /* -------------------------------------------------------------- Header -------------------------------------------------------------- */ #header { background: #fff; } 

Cross-Browser Compatibility

When you decide to make something, you should place yourself in the role of the end-user, and imagine that, even today, some of them still use browsers like IE6. A page in renders differently in Firefox than in Chrome or Internet Explorer. There are some useful tools you can use to check how your page renders in different browsers. Charina wrote a very complete article regarding this topic which I recommend reading – 10 Useful Tools For Cross-Browser Compatibility Check

How you should do it

Do not forget to pay attention to your layout in different browsers, systematically.

Keep it short – Generic classes, properties and CSS files

When you are coding you should always have one thing in mind, plan for the future. You are already using comments and keeping your code organized, so why stop here? The first thing I do when I’m coding CSS is to specify a section of generic classes, then on my HTML I simply use them alongside with other elements.

How not to do it:

Stylesheet

 #firstblock { background: #000; float: left; } .genblock { background: #006699; float: left; } 

HTML

 <div id="firstblock"</div> <div class="genblock"></div> 

How you should do it

Stylesheet

 .left { float: left; } #firstblock { background: #000; } .genblock { background: #006699; } 

HTML

 <div id="firstblock" class="left"></div>  <div class="genblock  left"></div> 

This is a simple way of declaring two classes. I like to find the most efficient way to do things, and as you can already guess, I really like keeping things organized, so when it comes down to properties, it’s the same thing. Why should we write the same property over and over again when we just need to write it once?

How not to do it:

 #content { margin-top: 10px; margin-right: 12px; margin-bottom: 0; margin-left: 15px; background-color: #000; background-repeat: no-repeat; } 

How you should do it:

 #content { margin: 10px 12px 0 15px; background: #000 no-repeat; } 

The ideal number of CSS files you should have in your project depends entirely on you and the way you work. I have been involved in projects where there was a “generic.css”, “main.css”, “global.css” among others, it took me forever to understand the purpose of each file. I usually have just two CSS files on my projects – style.css and reset.css.

How you should do it
You should make it simple and efficient to edit later on.

Don’t use heading tags randomly

Heading tags are not just there to make it pretty, they establish the importance of your content which makes them valuable for SEO. There are six Heading tags: h1, h2, h3, h4, h5, and h6. H1 is the most important, so you should use it for your web page or business name only. The rest of the tags should be used according to title or content importance. Also, you don’t need to have heading tags everywhere on your document.

How not to do it:

  <h6>Post title</h6>  <h1>Text content</h1> 

How you should do it:

 <h2>Post title</h2> <p>Text content</p> 

Use absolute position only when you have to

When you’re starting out, you can easily become addicted to the use of absolute positioning. This is because it is an easy way of placing elements, however, this property should not be used excessively. Since elements with absolute position lose their normal flow, it is almost impossible to align them with other sections on the page. You simply can’t tell a normal element to be on the left side of an element with absolute position.

How you should do it:

Use absolute position only when you need to, and not because it is easier.

Type fonts

So is there a font you really like and you would love to use it on your page, is it a standard font? What if not? These are are questions you need to ask before you choose your typography. When you choose a font you must always have a backup plan, this means that in case the user does not have the chosen font, the second choice (or third, etc) will appear. Examples of standard fonts are Arial, Georgia, Lucida Sans Code, Times New Roman, Verdana, Tahoma, and some more. Now let’s say you would like to use a font that is non-standard, what would you do? The most obvious answer is @font-face.

How not to do it:

 p { font-family: AurulentSansRegular, Arial, Helvetica, sans-serif; } 

How you should do it:

 @font-face {  font-family: 'AurulentSansRegular';  src: url('AurulentSans-Regular-webfont.ttf') format('truetype');  }  p { font-family: 'AurulentSansRegular', Arial, Helvetica, sans-serif; } 

Always validate

The title is pretty self-explanatory, you should always validate your CSS and HTML documents. Why? The answer is why not? You have a way to know if your code has errors and it gives you solutions to fix them, so really, why not? Add CSS Validator and HTML Validator to your favourites.

How you should do it

Validate your CSS, and after that do the same for your HTML.

Conclusion

Some may consider these tips and techniques common sense and simple to understand, others not so much, but the important thing is that every coder make mistakes, and practice makes perfect.

Hope you enjoyed the article and have some fun experimenting, but keep it organized!

Advertise here with BSA

For anyone developing Android applications and/or creating an Android-related website, using the official icons for the platform would be a time-saver.

The Android SDK includes the complete set of icons, however, they are in .PNG format and hard to resize or customize.

Olof Brickarp, who is a UI/graphics designer, has converted most of the whole official icons into vector formats which are now available in .AI, .EPS and .SVG.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)