20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

I hope you have heard a little about CSS3 and HTML5. And I’m sure you’ve used at least one of the cool features they offer. But now it is time to use them at their full (or almost full) power.
You may be asking yourself “It is time to change? Should I forget everything I know and dive into this new world?”. Well dear padawan, you don’t need to do so. We have a lot of tools that make our transition to new and better technologies safer (ultimately we can’t just crash our customer’s website, we have bills to pay :D).
Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.
This time we will talk a little about frameworks and other tools, like generators and templates.
So, let’s rock.

HTML5 Boilerplate – Templating that fits all needs

This is the most useful for me. I usually have jobs that need easy setup, but a lot of optimizations tools (minifiers and more) and, at the same time, I’m quite familiar with CSS, so too much preset CSS is a waste of time to me (since I spend a few hours coding CSS, but much more to understand and re-utilize framework’s code).
Cool features:

• Constantly improving – Last update says that they reduced the overall size of the published boilerplate by 50%
• Build script – .js and .css minify, image optimization, html optimization, server configurations for caching…
• Custom install setup – So you can choose what you want in “your” boilerplate
• Cross-Browser compatible
• HTML5 Ready
• Print stylesheet ready to use

52framework – Supports almost anything

I am amazed by all the things you can do with this framework. It has a lot of resources that I thought would never work on IE. This is a good option when you want a somewhat styled template and  are planning to use almost all power of HTML5.
What do I like:

• Almost anything you want with HTML – Local Storage, video player, canvas, forms…
• A lot of CSS3 proprieties – As you can see in CSS demo, it has a good CSS3 support
• Video Tutorials – Yeah, it makes even easier to understand 52′s workflow

G5 Framework – Good tools collection

Actually Greg Babula says that it meant to be just a personal project. But it is much powerful than he thinks.
As it was made from personal experience, it has a lot of tools that we already know how to use (Modernizr, CSS Reset, jQuery, Orbit Image Slider…), thus we don’t waste too much time learning.

Perkins – Lighweight and LESS

I must admit that I should use LESS much more than I do. If you think this way, Perkins may be a good option for you. It comes with a set of LESS stylesheets and mixins for common tasks such as creating navigation, rounded corners, gradients and much more.

Sprites.js – Animation framework (HTML5 support, of course)

Yeah, sometimes our customer wants some animations on their site. Why should you use flash when (almost every time) you can use HTML5?
Sprite.js provides a simple integration for canvas and HTML animations so you can do easily some animations, with maximum performance.

Lime.js – Gaming framework

Just take a look at the demo games, and tell me if it isn’t amazing.
Some features (HTML5) that you can use on it:

• Optional install – For mobile users it is really good, just bookmark your game and you’re done
• KeyFrame animations
• Full support of sprite sheets
• Stroke support – So you can draw a stroke around shapes
• Good documentation – Just take a look at all classes you can use with it, pretty cool :D

HTML5 multimedia framework for WordPress

If you are a WordPress person, you will find it useful. With this plugin, you just have to add a shortcode and you have a HTML5 media player in your site.
The framework currently supports:

• mp4 (h.264,aac)
• ogg (theora,vorbis)
• mp3 (audio only)
• webm (vp8,vorbis).
• wmv (via MediaElement.js)
• flv (via MediaElement.js)
• wma (via MediaElement.js)

Modernizr – HTML5 & CSS3 with fallbacks

Modernizr helps us to implement HTML5 and CSS3 for browsers that don’t natively support it. Actually many of the tools mentioned above use it.
Want to know more about its amazing features? Just read The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks.
It is really simple to use, when modernizr detects your browser’s features, it adds classes to you HTML, so you can easily switch to a valid fallback. Try to run the demo and see its results for a better comprehension.

Select[ivizr] – CSS3 Selectors for IE

IE (6-8 mainly) is surely the greatest barrier to CSS3 spread. CSS3 selectors are almost forgotten for some developers, that just know they exist because can use them with jQuery.
You just need one of the 7 supported JavaScript libraries and you are ready to install it (via conditional comments, so just IE will see it). And then you’re done, just write you pretty CSS3 selectors as you aways wanted.

CSS3 button framework

With this framework you have easily a lot of good buttons options. It is specially useful for back-end developers, that aways need some pretty buttons, but don’t have time (or budget) to do so.
They are all CSS3 ready, and can be easily customized.

Templates – General HTML5 and CSS3 samples

Coming Soon Template

Design Company

Real State

Free HTML5 & CSS3 theme

Create An Elegant Website With HTML 5 And CSS3

Starter Pack

Much more inspiration at HTML5 Gallery

Some useful tools

CSS3 Button Maker

CSS Transforms code generator

CSS3 Gradient generator

CSS3 Drop Shadow Generator

CSS Generator for radius, shadows, rgba, @font-face, columns and more

The best @font-face generator I’ve ever seen

HTML5 Visual Cheat Sheet

Ready to start experimenting with HTML5?

You may notice that I didn’t even mention any mobile frameworks. It is because they are so cool that they deserve a dedicated post.
I certainly have missed some other good resources. Why don’t you comment and share what you know?

Do’s and Don’ts of Writing Better CSS and HTML

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 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:

1	<div id="block">

2	<div id="btn">div>

3	<div id="btn">div>

4

div>

How you should do it:

1	<div id="block">

2	<div class="btn">div>

3	<div class="btn">div>

4

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:

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

How you should do it:

1	<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:

1	<div id="navigation">

2

<ul>

3	<li class="left">li>

4	<li class="left">li>

5	<li class="left">li>

6

ul>

7

div>

How you should do it

1	<ul id="navigation">

2

<li>li>

3

<li>li>

4

<li>li>

5

ul>

And in your stylesheet

1	#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 (

) or paragraphs (). An inline element is displayed with no line breaks meaning that it starts on the same line, taking only his own width, like span () or image (). 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

1	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

is closing.
How you should do it

1

2	<div id="header">

3

4

div>

Stylesheet:

1	/* --------------------------------------------------------------

2

Header

3	-------------------------------------------------------------- */

4	#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

1	#firstblock { background: #000; float: left; }

2	.genblock { background: #006699; float: left; }

HTML

1	<div id="firstblock"

2	<div class="genblock">div>

How you should do it
Stylesheet

1	.left { float: left; }

2	#firstblock { background: #000; }

3	.genblock { background: #006699; }

HTML

1	<div id="firstblock" class="left">div>

2

3	<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:

1	#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:

1	#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:

1	<h6>Post titleh6>

2

3	<h1>Text contenth1>

How you should do it:

1	<h2>Post titleh2>

2	<p>Text contentp>

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:

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

How you should do it:

1	@font-face {

2

3	font-family: 'AurulentSansRegular';

4

5	src: url('AurulentSans-Regular-webfont.ttf') format('truetype');

6

7

}

8

9	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!

In Search For Ultimate Blogging Tools: Writing Simplified Now!

Why should you use desktop blogging editors? Well, have you ever lost a post because of your internet connection? Maybe you accidentally closed the browser you were using and all your work just disappeared? Even with autosave options and occasional prompts before closing windows, occasionally content gets lost. For me the only option to avoid this is to use a desktop blogging editor. Using a desktop editor greatly reduces the chance that you will lose your work. However in this article I will showcase everything – not only desktop blogging software, but also online websites, innovative curation/blogging solutions and simplified apps for distraction free writing.


Google Docs could be a great online alternative and you don’t have to worry about any loss of content because of its regular autosave feature, but if you want any more advanced features since Google Docs is merely a text editor, then you’ll want to consider other options. The major drawback besides a lack of customization is that you don’t have access to your documents if you don’t have an internet connection. If you want to share documents between several users however then Google Docs is great. See this intro video for more information about how to use it:
Before I start my review and share the experiences I’ve had with these editors. Keep in mind that I am a full-time blogger and looking for the most efficient blogging possible. I crop and create images on my own, if I need to do some code editing I do it manually, I enjoy fast writing and WYSIWYG possibilities to create a finished article as quickly as possible. The articles I write are usually quite long and in depth. If your blog is just going to be a place where you share pictures, quick updates about your life and things you find interesting online, your preferences might look much different than mine. However I tried to be as objective as possible and picked out a few blogging editors to feature here which I think are worth taking a look at. Enjoy!

Blogo (Mac)

Price: $25 ( has 21-day trial)

Easily publish text, images, videos, slideshows and more. With a simple, intuitive interface and support for WordPress, Blogger, Typepad, Typo, Drupal, Joomla, and Expression Engine, Blogo is the best way to maintain your blog and spread the word with Twitter, Ping.fm and other supported services.
I tried to blog through Blogo for a while, there are definitely some pros, but also several cons which made writing not as efficient. It’s easy and fast to set up and get going with, just add your blog address, login, password and you’re set. Recommended customization is image size, just head to the preferences and add max image width and height limit.
Image Editing and uploading – Blogo has a built-in image editor which let’s you crop and resize images so you save yourself the hassle of finding another image editor. If your needs are basic, then this editor will be more than enough.Uploading images is very easy, when you’re finished just click a button to upload images automatically to your server, which is a great time saver in comparison to always doing it manually through your blogs dashboard.

What I liked:

• Option to enter full screen mode to avoid distractions
• Easy image, video,audio and quote add an upload
• Live preview screen to see how post would look like published
• Handy web browser bookmarklet
• Intelligent microblogging – you can follow your friends, search on Twitter and share posts with Ping.fm
• Word and character count
• If you need to copy and use some text from other sites, there is a good option to Remove Formatting, handy.

What I disliked:

• Limited advanced customization options
• For me the screen size for body text was too small, but I had no resizing modification options
• Blogo assumed I needed my images aligned with text,which would be handy if I would used small images. Since I used pretty big images this auto feature created more problems for me than it was helpful, but maybe that’s just me
• I didn’t like the default CSS styling Blogo had, but there is no option to change font size, background color and line heights.

Summary

I liked the main window of the Blogo post editor, where all the main features are just a click away. The big downside was the tiny body text field and not being able to customize anything. For the people who want a smart desktop blog editor that does most of the hard work for you, Blogo is a good pick. However if you are picky and really want control over the entire blogging process maybe you need to look for something else.

MarsEdit (Mac)

Price: $39.95 (has 30 day trial)

MarsEdit is a really powerful and feature rich editor, which works with WordPress, Blogger, Tumblr, Squarespace, TypePad, Movable Type and dozens more through standard MetaWeblog and AtomPub interfaces. If you use iPhoto, Aperture, Lightroom or Flickr libraries, you’ll love MarsEdit, because you’ll be able to insert images into blog post with the click of a button!
If you use any coding editor, then you’ll also enjoy MarsEdit’s integration with BBEdit, SubEthaEdit, TextMate, TextWrangler, and any editor that supports that ODBEditor suite.
While writing a blog post I enjoyed it’s clean layout, though sometimes I missed having some of the one click features you get with a WYSIWYG editor. To keep things minimal and clean MarsEdit put all the formatting options in a dropdown menu. I think it depends on your taste – if you want a very clean interface and do not mind few extra clicks,you’ll enjoy MarsEdit.
Comparing with Blogo MarsEdit has some more text styling customization options – I could change the default font in Rich and HTML editor views and I was able to change background color in HTML view (strangely I couldn’t change the background in the rich editor view which I prefer using). But you can still use WriteRoom there (WriteRoom’s full screen writing environment gets your computer out of the way so that you can focus on your work. The result is a subtle clearing of the mind that helps you write better.)
I found this video showing how to use MarsEdit and some of its great features, check it out:

What I liked:

• Bookmarklet which allows you to blog whatever page you’ve surfed to in your browser—it sends the page to MarsEdit, which opens a new post window with the title, link, and any selected text.
• Clean interface
• Coding editor integration
• Integration with iPhoto, Aperture and Flickr
• Spelling and grammar check

What I disliked:
Really I found just one, but big, drawback for me. MarsEdit features are hidden, making article editing a little bit slower than I would want. For example Rich/HTML view switching can be done with a keyboard shortcut or two clicks Post->Edit Rich Text. While this may sound minor, if you’re not good with remembering or using keyboard shortcuts, the time that it takes you to click every time will slowly add up.

Summary

Well, minimalism lovers will love MarsEdit, because it’s extremely clean and still very powerful. If you’re focusing on images you’ll enjoy different software integration and if you’re an information junkie then the bookmarklet will be very handy for you.
However if you want to make your writing process as efficient as possible you’ll need to remember all the shortcuts MarsEdit has and spend some serious time learning how to use it in a more advanced way.

Ecto (Mac)

Price: $19.95
With ecto you can write and manage entries for your weblog(s). You can compose entries offline and use the extra features ecto offers, such as spellcheck, creating links, attachments, and much more. Ecto is a native Mac OS X application, and offers you a more powerful and easier to use editing interface than your blog’s built in control panel.

Ecto has been the most customizable of all, though it hasn’t got some of the newest, fancy features the other blog editors might have. Most of the features that Ecto doesn’t have aren’t missed, at least by me. I am looking for an editor which does it’s best to aid just the writing process and nothing else and that’s why I think Ecto is the best one for the job.
Watch this video I found on Youtube to learn more, the author is showing some of the best features in action.
http://www.youtube.com/watch?v=WYEXGe0z4N0

What I liked:

• Support for multiple blogs, able to easily switch and browse through them.
• Able to set custom tags for more personalized and native usage to editor
• Clean interface with all the main features right in front of you
• Able to set up fully custom CSS, font, background color to editor you use, if you’re a typography geek like I am, you’ll enjoy full control to customize whatever you like both for Rich and HTML view editors.

What I disliked:

• When I try to insert image in post I always got a popup window with a lot of image customization options. This started to bother me after a while since I don’t need to style the image. I wasn’t able to get rid of it with a “Remember my choice” checkbox somewhere, because there isn’t one.
• Slightly outdated design. While I don’t care a lot about design if there is great functionality, Blogo and MarsEdit had much better interface design than Ecto did. The design isn’t bad, but I would like to see a better one
• Seems to me Ecto hasn’t been updated for a while which might mean that support isn’t really available and you won’t be able to expect any future updates. Just a guess though, but I couldn’t find Ecto on AppStore and their support forum is full of spam.

Summary

There isn’t one ultimate blogging editor for everybody, I just hope after these reviews you’ll have a good insight what’s possible with each one, as for me, Ecto turned out to be the most suitable editor for now, it’s powerful, clean and efficient. In the near future I’d like to see other editors improving with greater customization tools and feature. Everybody has their own expectations and needs from a desktop blog editor and I am sure many of you will be satisfied with one of these picks!

Windows Blogging Editors

Blogjet

Price: $39.95 (has free trial)

The most advanced Windows blog editor and manager. Get the convenience and speed of a native application, and the ability to write posts offline.
When I was previously using Windows, Blogjet was my favorite blogging editor because of it’s clean interface and powerful features. It really has  what any advanced blogger would need. However it’s not free.
See Blogjet’s features in this video. The version that is available is an update of the one in the video. See official tutorial videos on CodingRobots Youtube page.

Some of Blogjet coolest features:

• Auto replace – If you are tired of writing the same thing over and over again, create an Auto Replace rule for it. For example, when you type Scoble, BlogJet can replace it with a link to Robert’s blog.
• Integration with Feed Readers – BlogJet integrates with FeedDemon, RSS Bandit, NewsGator and others for you to be able to blog about something in just a few clicks.
• Flickr and YouTube Support – Your photos on Flickr and videos on YouTube will complement your blog – and now it’s easy to insert them in your posts, as BlogJet supports these services natively.
• Modern Interface – The easy-to-use graphical user interface in BlogJet looks native on Vista and Windows 7. Maybe not a functional feature, but interface matters and in Blogjet you get a beautiful interface.

Windows Live Writer

Price: Free
Windows Live Writer makes it easy for anyone to write articles like a professional blogger. You can create beautiful blog posts, and see what they’ll look like online before you publish them to your blog. Plus, you can publish your posts to any of your favorite blog service providers.

This is the best alternative if you are looking for a free and quality editor, for me it still felt a little bit too feature rich and clumsy, but it’s still a very good choice and it will be easy to learn if you’re used to Windows Office products. I didn’t enjoy all the default fancy effects this editor has. You need to spend some time customizing things right from the beginning.

ScribeFire (Web Browser Extension)

Price: Free
Can be used both on Mac and PC since it’s a browser extension.

ScribeFire is an extension for the Mozilla Firefox Web browser, Google Chrome Web browser, Opera Web Browser, and Apple Safari Web browser that allows you to easily post to all of your blogs.
ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to all of your blogs.
You can post to WordPress, Blogger, TypePad, Windows Live Spaces, Tumblr, Posterous, Xanga, LiveJournal, or any other blog that supports the MetaWeblog or MovableType APIs.
As for me, I didn’t find it too useful just because I only have one WordPress blog and  the ScribeFire environment is pretty similar to WP. I see great use for ScribeFire if you have several different blogs and you need one management system for all of them. This extension makes it easy to switch between these blogs and lets you to do everything in a single environment. For example if you have blogs on WordPress,Blogger and Tumblr it may become challenging to write in all of them and be familiar with each of their interfaces. ScribeFire solves this problem and is a good option if you enjoy a web browser type blogging editor. Ah, and did I mention they added support for Zemanta, a plugin for easily adding related links to an article too?
Check this video showing how to use ScribeFire effectively with Zemanta. For me the problem was that the results it returned weren’t always that relevant to the topic, because I needed good images and very similar articles from my own article base. While Zemanta does a good job, I just still prefer doing it manually so I can be assured of better quality. But hey, I am a huge geek, don’t listen to me.

Innovative writing tools and interesting solutions

While I was searching for different blogging clients I also found a lot of different applications and websites which were dedicated to the writing process. There were also curation/blogging tools that assist you greatly while you write, but let’s start one by one.

Qrait

A realtime curation platform designed to fulfill the needs of content curators and reduce information overload for the rest of us.
Well, Qrait isn’t out yet, but I like where it’s going, especially the content suggestion option. Basically I would use it for my drafting process mainly, letting me easily add videos, related tweets and any other information I would like to collect before I actually started writing. I see it as a management system, with it’s pros and cons. Maybe for you it would be handy just to share some content and be able to create it easily.

Curate.Us

Curate.Us allows you to make both visual clips and formatted quotes from web content that you can post on your blog or web site. Clips are screenshots that provide both back links and trackbacks to the original source. Quotes made with Curate.Us extract relevant passages from any web content, format them, and also provide both back links and trackbacks to the original source. Curate.Us also creates short links that are easy to tweet and email.
Go through it’s self-guided tour of features to learn more about this service:

Features I found interesting:

• Add “clip this story” button to your web site enabling your readers to easily clip and quote your work.
• Curate.Us analytics, you can track where your content is going and how much traffic is returned to your site.
• Curate.Us-enable Your Site – Once you have registered for an account on Curate.Us, you can easily Curate.Us-enable your site. Doing so gives your readers the ability to share your content across the web while giving you the ability to see how and where your content is used.
• You can clip quotes and screenshots with ease now!

Interesting service definitely!

Repost.Us

This service is created by the same people, who created Repost.Us.

Repost.Us is a frictionless instant syndication platform where any publisher’s content can be instantly syndicated to another publisher, blogger, or website with a few clicks and no prior business relationship—24 hours a day, 7 days a week. Repost.Us automates content syndication, opening up monetized content exchange to the entire web. Repost.Us guarantees the integrity and security of the story being syndicated. Repost.Us is also search-engine friendly. Because search engines only see content on the original publisher’s site, syndicated copies are seen by search engines crawlers as a link back to the original.
Repost.Us supports four monetization models, and publishers can mix and match to find the exact formula that’s best for them. Publishers can choose from two ad-supported models, paid fee syndication with tiered pricing, or free syndication to increase reach.
I am not sure if this new approach will go wide, but I think this is a legal way to farm content and it doesn’t violate with Google as well! See how it works page, to learn more.

SimpleNote

SimpleNote is an easy way to keep notes, lists, ideas, and more. I included it because of the importance of taking notes, jotting down ideas wherever you go and being able to sync them. There is a lot of third party software that allows you to use this application on iPhone, iPad &iPod touch, Mac OS X, Windows, Android, Palm OS and much more. Read all available options here.

Few of SimpleNote coolest features:

• Sharing and publishing – Keep a shared grocery list with your family or housemates. Or publish some notes from your class or meeting.
• Use a growing variety of extras – Simplenote is an open platform. People are building lots of cool things you can use to extend your experience.
• Instantly search your notes – Type whatever you’re looking for, and your list updates instantly. You’ll never misplace an important thought again.

OmmWriter ( PC and Mac)

Remember in the previous article where I wrote how to set the mood? Well, OmmWriter does a lot to help in this process, forget about everything and just write, even some audio is included! Look at their video for better insight:
OmmWriter Dana is a humble attempt to recapture what technology has snatched away from us today: our capacity to concentrate.
OmmWriter is a simple text processor that firmly believes in making writing a pleasure once again, vindicating the close relationship between writer and paper. The more intimate the relation, the smoother the flow of inspiration.
If you are a scriptwriter, blogger, journalist, copywriter, poet or just someone who enjoys writing, welcome back to concentrating.

ByWord ($4.99) Mac

If you’re Mac user however my favorite simple writing editor is ByWord with its beautiful default CSS styling, super sleek interface and handy full screen mode. It’s not free however, but for me it was worth the price.
ByWord will be handy if you’re writing a book or a lot of plain text, for bloggers who need to add a lot of links, images and video – you won’t be able to do any of this with ByWord. This software is kind of like what the iPad is to the Amazon Kindle in regards to books – you can read books on the iPad, but you’ll have a much better experience using the Kindle just because you’re not able to do anything…just read.
As for Byword – just write, no fancy options to distract you.

One more site to check out if you own a  Mac, iPad or iPhone is HogbaySoftware.
They have several great apps for the writing process and keeping you organized:

• PlainText – Dropbox text editing for iPad & iPhone
• TaskPaper – Simple to-do lists for Mac & iPhone.
• WriteRoom – Distraction free writing for Mac & iPhone.
• QuickCursor – Your text editor anywhere for Mac.
• SimpleText – Your text synced online for Mac, iPhone, & Web.

Writer For iPad ($0.99)

Have an iPad and want to enjoy a great writing experience? No problem, check this advanced software for Information Architects.
The key to good writing is not that magical glass of Bordeaux, the right kind of tobacco or that groovy background music. The key is focus. What you need to write well is a setting that allows you to fully concentrate on your text and nothing but your text. Many professional writers use SimpleText or Textedit because these are the only writing programs that are totally distraction free. But text editors are not perfect. That’s what Writer is for.

Conclusion

What about you? Which blogging editor do you prefer to use? Maybe you’re using a blogging editor I didn’t showcase here but you feel it’s better than the ones I included? I am open to any suggestions, though I really went through a lot of editors to save time for you and show the best players on the market!
What do you think about some of the simple blogging editors and some of the more innovative solutions showcased here?