1. Quantcast

Quantcast is one of the 3 major websites dedicated to website traffic and audience. Quantcast provides publishers, marketers and agencies unmatched capabilities to measure, organize, discover and transact based on directly-measured traffic and inferred audience data.

2. Compete

Compete is a site similar to Quantcast. Compete’s ranking is based on the stats of +2.000.000 US citizens – this means that Compete is not so accurate outside of US. Anyway – check out Compete for your ranking and compare your results with your competitors’.

3. Alexa

Alexa is one of the first ranking websites with advanced data regarding target population, country rank and others. The problem with these statistics is that they are provided based on Alexa Toolbar. Again, this fact makes Alexa’s data inaccurate.

4. BuiltWith

This tools is quite complex – it shows you various information about your site or any particular site (technologies used, seo) and it helps you optimize your site. Very useful when you don’t know much about SEO. It has a paid version as well that has a lot more tips and info.

5. Dataopedia

Dataopedia.com is a web service that provides comprehensive information (50 different sources) about websites available on the Internet.

6. BizShark

BizShark is a direct competitor to Dataopedia. Both sites share the same concept and have similar information. You will have to decide which one suits you.

7. Quarkbase

Quarkbase is another site that gathers its info from multiple sources, but here is their definition: Quarkbase is the best way to find website information contributed by website owner, lover and the Internet Community.

8. Website Grader

From my point, this is one of the most useful analysis site. It has a great composition of information: social, seo, general info. It even gives you hints and a grade – to compare and further optimize your site.

9. Popuri.us

This tools is a lightweight tool that gives you the most common ranks available on the web: Google Page Rank, Alexa Rank, Compete Rank, Technorati Rank etc.

10. Feedcompare

This website is useful when you want to compare your number of feed subscribers with the number of subscribers. For this you must have a FeedBurner account.

11. XinuReturns

XinuReturns is a tool that shows you pretty much everything – Google Page Rank, Yahoo Links, FeedBurner subscribers,Technorati, DMOZ etc. It is perfect for a fast small popularity analysis.

There are other sites as well with interesting results, but I think these ones are the most important. Cheers!

Kyan

“We are a creative web design & development agency with a passion for web standards” – Kyan Media

I really think that this site has it all, from the visual side to the performance side, KyanMedia.com is one great design inspiration.

It has a simple yet good navigation, interesting colors and a pleasant way to display content. Also, another thing that you can benefit from this site is the portfolio. In this section you will find a lot of great samples for inspiration.

Dedicated to the blogoshpere, Quartz Icon Pack has numerous types of icons: files, folders, charts, books, boxes, social networking sites, email etc. All icons are free to use for personal and commercial projects. Here is a preview of the entire pack.

Please feel free to send me samples of your work where you used Quartz. Also, if you like the pack, please follow my Twitter account:
@andygongea
I hope this will be helpful in your projects. Cheers!

1. Write Quality Posts

The first rule is this: In order to promote it, your post should be valuable for a certain target. So, the first thing is to make sure that you have a potential target and that some users will benefit from the post. This is a crucial thing, because the users that are happy with your content, will help you spread it across the web. You can’t promote posts that are useless and unattractive.

2. Use Catchy Title Posts

The title post is the first point of interaction between the reader and the blog post. So, in order to make the user read your article, your blog posts should: describe the content, use of common words, have an appropriate length. For advanced tips please read the following article: The Importance of Blog Posts Titles

3. Write Effective Posts

These days, the most effective blog posts are lists. Their big advantages are: they are easy to write and they are very important for the readers. That is because a list has diverse information compared to a personal blog post. So, an effective post could be a list, a good review, a new product launch etc. All you have to do is to cover well any of these topics.

4. Create and Distribute Freebies

Freebies are one of the most certain way of promoting a blog. Again, you need to make sure that you offer quality stuff. Things that have a great rate of success are icon packs, cms themes, photos etc. Analyze the market, check for competitors and make the best offer.

5. Use Twitter

Twitter is now the new traffic tool. And who knows to manage and work with this tool will get a lot of coverage and traffic at no cost. For example, Twitter is now the 3rd traffic provider for Techcrunch with a 9.7%. Think about it, around 200.000 unique visitors for Techrunch from tweets.

6. Use Social News Sites

This is very handy since sites like Digg can generate a lot of traffic. Depending on your post, you can submit your it on sites like Mixx, Yahoo! Buzz, Reddit and Digg in order to ger more visitors.

7. Boost Your Blog with Tools

The last thing you will have to do in order to get better stats is to take advantage of the RSS and posts sharing widgets. With the help of ShareThis or AddThis a happy visitor has a greater possibility to share your blog post with a friend. It is not necessary to use these 2 services. You can create your own based on your needs.

Any Suggestions…

I would like to hear from your experience. What is the best approach to spread a blog post? Please share with us. Cheers!

Same desktop structure for years

The thing that bothers me the most is the fact that the desktop has the same structure. Let’s take a look and analyze the desktop user interface in Windows 95 and the desktop from Windows … 7.

As you can see, back in 1995 we had the icons, taskbar, start button and the systray. This was pretty much the desktop and it was more than enough. At that time all tasks were easily achieved with that structure.

Now, I think we have different needs. The time spent in front of a computer means in most cases – surfing the web and interacting with web applications. From this perspective I believe that many things must be changed.

Don’t get me wrong, I really enjoy the new user experience from Windows 7. Compared to Windows Vista, the upcoming Windows installment has a bunch of improvements when it comes to user interface and user experience. The new taskbar, the minimal interface and the visual feedback are great new features. Still, I’m not sure we’re on the right track.

Surface Computing…

We’ve seen in the last years multiple samples of interacting with the interface by using your hand. For example you can think of the Surface Computing from Microsoft. It is a nice thing and really great, but when can we promote that concept for the masses? Probably never, first of all because the touch screen technology has to become pretty mainstream. The second drawback to this approach is that some things are better achieved through a device like a mouse combined with a keyboard. I mean, I know I would like to open Photoshop and use only my hands but who am I kidding.

ASUS Seamless Experience

Another example which is similar to Microsoft’s Surface Computing is Seamless Experience from ASUS. Based on the same concept – direct interaction – a dedicated surface shows you properties and information related to some devices placed on the surface. Here is a video with a demo of Seamless Experience:

As good as the demo looks, I will take us many years to achieve seamless experience. As concepts, Surface Computing and Seamless Experience are quite nice. As standards, they fail.

Jolicloud

Based on the huge growth and market potential, a new operating system was developed for netbooks. The system is called Jolicloud and it has a different approach compared to the more famous OS like Windows, Linux or Mac OS. According to their website, Jolicloud is: an Internet operating system. It combines the two driving forces of the modern computing industry: the open source and the open web.

As you can see from the description, from the capabilities perspective, we have some drawbacks. The interesting part comes from the UI/UX side. Jolicloud has a different structure – dashboard like structure. I really enjoy that and I also like the fact that a search box is part of the interface, since searching is one of the most common activities online.

Impressive 3D User Interface

An interesting 3D user interface was developed for Nvidia Tegra based notebooks. The user is pleased with very impressive 3D effects for a user interface. Not sure this is the way to go, but definitely a great user interface must have nice graphics too. Here is a demo:

And the winner is …

I really don’t know which is the best solution. I do know that it has to optimize our time, it has to be balanced from the visual and performance perspective, it has to be intuitive, it has to be web oriented, it has to be easily customizable.

Cheers!

1. Captain Planet

Captain Planet was one of the first animated cartoon that I remember. It had nice graphics and great lessons in each episodes. I even remember the song… Captain Planet, he’s our hero / Gonna take pollution down to zero. One of my favorite cartoons of all times.

2. Teenage Mutant Ninja Turtles

Michelangelo, Donatello, Raphael and Leonardo and their Master Splinter against Shredder. I remember that this series was quite long and I enjoyed every single episode.

3. Blackstar

John Blackstar, astronaut, is swept through a black hole, into an ancient alien universe. Trapped on the planet Sagar, Blackstar is rescued by the tiny Trobbit people. In turn he joins their fight for freedom against the cruel Overlord who rules by the might of the Powerstar. – This was so cool.

4. He-Man and the Masters of the Universe

Prince Adam possesses the Power Sword, and when he holds it aloft and says the magic words “By the Power of Grayskull! I have the Power!” he is transformed into He-Man, the most powerful man in the universe. Sword, magic power and freak friends … perfect.

5. Bananaman

Eric Wimp, an ordinary schoolboy, eats a banana to transform into Bananaman, an adult superhero, sporting a distinctive cowled blue and yellow outfit complete with a yellow two-tailed cape resembling a banana skin. This is so funny even after all this time.

6. Transformers

What can I say?… I liked the cartoons but I love the movie. The standard plot: bad guys versus good guys. And keeping the path of an educative story – the good guys are always the winners.

7. The Centurions

The Centurions are a team of men dressed in specially created exo-frames that allow them (upon shouting “Power Extreme”) to fuse with ‘incredible’ assault weapon systems, becoming what the show calls man and machine, Power Xtreme! Those were good costumes for picking chicks

8. Voltron

This animated cartoon featured a team of five young pilots commanding five robot lions, which could be combined to form Voltron. I think this style is the one I like the most – robots and evil creatures fighting.

9. Saber Rider and the Star Sheriffs

There was a guy on a horse and he had 3 other friends. And from time to time Nemesis wanted to play with them by sending some Outriders. Of course that in the end it was all about a giant robot.

10. The Raccoons

The series features the adventures in the Evergreen Forest of Bert Raccoon and his friends Ralph and Melissa, particularly in their attempts to thwart the industrialist actions of pink aardvark Cyril Sneer and his trio of pig henchmen.

11. Johnny Quest

This was another successful cartoon that made me a fan of Cartoon Network. I remember Johnny and Hadgi (of course this is not Hagi the greatest Romanian soccer player) and their weird dog being in some kind of trouble all the time.

12. Johnny Bravo

I honestly think this one is a masterpiece and that it is not for kids – this is a cartoon for teenagers and “mature” people. Here is one stupid yet hilarious quote by Johnny Bravo: “I bet your name’s Mickey, ’cause you’re so fine. You’re so fine you… ”

…Pure Awesomeness…

It is really hard to remember all the cartoons because I saw many of them back when I was just a kid. But, after all these years, Captain Planet still has me as a fan. Cheers for great moments in life and for the creators of some of the most mindblowing animated cartoons ever!

Being a base for numerous items, categorized by different criteria, Mozilla Addons site has always had some drawbacks when it comes to user interface and user experience. But, let’s leave the past and analyze the present.

Findability 4.5 out of 5 stars

One of the things that I like at the new version of this site is how easy it is to find what you want. You have the main sidebar which shows the main categories along with the number of addons for each category. Also you can narrow further your results with the help of a search box and its advanced searching options. With these options I’m sure you will find everything you want … of course, it has to be developed first.

User Interface 4.5 out of 5 stars

The redesign follows the same pattern that other Mozilla sections have. Since Mozilla’s activity domain is web – it is natural for the main color to be blue. The great thing is that this new design has a “fresh air” and it still looks like it is a part of the Mozilla sites. The elements are not crowded and the icons have a perfect size in order to balance the layouts.

Social Features 3 out of 5 stars

A great thing that I noticed with this redesign are some social features. One of them is the ability to create collections and to subscribe to them. Some interesting collections are already on the site: Web Developer’s Toolbox or Reference Desk. This feature is very important for newbies with no knowledge in Firefox addons.

Site Performance 2 out of 5 stars

The main drawback on this site remains the speed. I know that the site is visited and generates heavy traffic daily, but I also know that Mozilla should improve the speed of the site. This is the major drawback in their user experience, because having a slow site means fewer downloads. So, please Mozilla, FIX THIS PROBLEM.

Overall 4 out of 5 stars

From the visual perspective, which somehow is the subject of this post, I’m very pleased with the redesign. Clean and catchy, this revamped Mozilla Addons site will satisfy all users’ needs – except the need for speed. A great redesign overall.

Cheers!

Sponsors:
- WPBest – The Best Premium Wordpress Themes, Pugins and More
- CSS Slicers – PSD to HTML Service
- Glitzy Bingo – Online Bingo Directory

The image search engine that I will cover in this article is EveryStockPhoto. Hopefully this will be better than the same old: LARGE, MEDIUM, SMALL options which seems to define an image search engine.

User Interface

This site is different from all the other regular image search engines. That is because being a dedicated image search engine, the developers and designers did their best in creating a great user interface. And from the visual point of view and also from the ease of use’s perspective, EveryStockPhoto represents a good product.

I really like the design and the overall look of this site. The logo looks good and the different elements of the interface are very well connected visually. Even form’s elements were customized so that the application would look homogeneous. Congratulations for all these things.

User Experience

Following the high standards set on the UI level, the user experience lives up to the visual interface. The screens are optimized and have all the information needed in this type of environment. You can search for a particular image, you can see the most popular tags or searches, and you can even see suggestions from Fotolia.

The search filter is quite simple to use and it has some pretty useful features. You can select the proportion: landscape, portrait and square. This thing is very important when you know that only a certain type of image will fit in your design. Sadly this feature is somehow missed by many stock websites and poorly implemented by others.

Since it is a search engine, EveryStockPhoto has the option to search only images with a particular licence type or from a specific site (this is a list with the sites where EveryStockPhoto has access), but it also has other features.

Performance

Being a relative small site, the application works but it doesn’t have awesome speed. That is somehow OK since it handles pictures and not text.

But, the user interface should be a little bit optimized because in this way the users would receive the feedback faster and the number of queries will increase. At this moment the front page “only” performs about 100 HTTP Requests which is a lot even for a image based site.

EveryStockPhoto Features

- Searching from multiple free sources
- Huge number of indexed pictures – 4,458,956
- Suggesting commercial alternatives
- Good filtering options
- Possibility to create collections and save them

Conclusion

Free images will always be an important topic to cover since there are many consumers. I really like this site and I think it is useful for many users. With a little performance improvements and some marketing, EveryStockPhoto will become the standard in free image searching.

Simple and effective. Different sections of the website are sustained not only by creative 3d animations but also from graphic elements and strong colors. Another thing that I like is how the information is structured and displayed. You will not see tons of details on this site, instead you will see dedicated sections and lot of space – which is a good thing.

Conclusion. Overall, I’m very impressed by this site and I really recommend it as an inspiration source for dynamic websites. Even the 3d animators can learn some tricks from this site. All they have to do is check some of the 3d animations.

2010 Ford Fusion and Fusion Hybrid

Technology: Adobe Flash
Characteristics: Dynamic, Clean, Great User Experience, Perspective

Overview
We will first make a pattern that will draw diagonal lines. After that we will apply a couple of filters and apply the pattern for 2 layers and that’s it.

Step 1 – Create a pattern that will draw diagonal lines

The first step is to create the pattern. We will do that by creating a new 5×5 pixels document with transparent background.
After creating the document, we will select the diagonal pixels and color them in a solid color.

After the diagonal was created and filled, go to the Edit Menu and select Define Pattern

Step 2 – Create the blue noisy texture

Now we will create a new document of 620×240px. I picked this size because of the width of the blog post. You can choose your own size. Then, pick a color and fill the document with that color. In our case it should be a blue color that is common to jeans.

After the color is applied, we have to add some noise to the image to simulate the jeans texture.
For this we will go to Filters » Noise » Add Noise and choose the following settings: Amount-6%, Distribution-uniform and monochromatic.

Step 3 – Add diagonal lines

Now that the texture is set, let’s add the characteristic of the jeans texture – diagonal lines.
Remember that we already have a pattern that creates oblique lines. Let’s apply it and color the lines in white. First create a new layer to apply the pattern, then – press Shift+F5 and a new window will appear.
Choose Pattern from the Fill Window, choose our pattern, press OK and we have a new layer with diagonal lines.

Now we will have to color the lines in white. You can do that in several ways:

Ctrl+Click – on the layer with oblique lines
Shift+F5 and select to fill with White color.

or

Click on the layer and select Lock Transparent Pixel from the Layers Window
Choose the white color as the foreground color
Alt+Backspace

After this task is done, reduce the opacity of the lines to 20%

It looks quite OK, but we still have to add a little detail for a realistic texture.
Since we have the white lines, now all we need are black lines. We will use them to create a 3d effect for the texture. So, the next step is to duplicate the lines layer (Ctrl+J when the lines layer is selected) and press Ctrl+I in order to invert the white color to black. Now we have to raise the opacity back to 100% and move the layer 1 pixel to the right.

The Result

Of course you can add additional levels of details, like more noise, some luminosity. This is just the base for a denim texture. The rest is up to you. I hope you like the technique and good luck on your designs.
Cheers!

1. We will start with basic information. Please tell us your background, details from the early days of Michael Leigeber.
I always had a knack for technology and started really getting into the Internet around 2000 when I built my first website. I started doing some freelance design work around 2001 and have been with a number of tech companies both large and small and even a couple startups since. I have done design and development work for mom and pops, multi-billion dollar corporations, and many in between.

2. For now let’s skip the development side. Tell us about your hobbies outside of the office.
When I am not developing, which isn’t as often as I would like, I enjoy spending time at the gym, a game of tennis, winter sports, and weekend projects around the house.

3. Who is Michael Leigeber now? … the web developer.
I am still trying to identify who I want to be in this industry. I have a wide range of technical skills. I currently spend a couple days a week providing onsite hardware and software support to a client and the rest doing web design, custom application development, SharePoint development, and occasional marketing material design.

4. Many of your scripts are used on many sites and are easy to implement by Javascript newbies. What is the general feedback from Leigeber.com community?
I have gotten quite a bit of positive feedback. My blog reaches around 100,000 unique visitors monthly so I get a lot of emails. Unfortunately I cannot answer all of them, especially those looking for free services and support. I do get many requests for better documentation which will be coming soon.

5. Speaking of scripts, what is the most popular Javascript example from your site?
The slideshow continues to bring in the most traffic each month. A close second would be the dropdown menu.

6. Have you ever wanted to create your own Javascript library? I’m asking you this because you have great examples that can be wrapped into a Javascript library.
I get asked that quite a bit and am currently working on a library of sorts. It is not nearly as comprehensive as the top current libraries but is lightweight and facilitates quite a few common DOM interactions. It will be an everlasting work in progress. It primarily is being created to serve as a basis for many of the scripts I will be offering at Scriptiny, a new site that will be the repository of my scripts.

7. The readers of Leigeber.com are very anxious for new content. What do you have for them in the near future?
I have a lot of really great things planned. Each of my current scripts all will continue to see updates as time allows. I hope to open up time to really develop my Scriptiny library that I plan to launch soon. One script that is almost ready for release is TinyBox which is similar to Lightbox with a few interesting variations. I am also developing TinyScroll, TinySlide, and an update to TinyTable.

8. Now I will ask you a few short questions. Favorite web browser?
Firefox for development along with the Web Developer and Firebug addons.

9. Favorite Javascript library?
jQuery. They have done a great job at keeping things fast and relatively lightweight.

10. Favorite web development book?
Doing a lot of object oriented programming I am a big fan of Code Complete, which is a staple in many developer’s bookcases.

11. Mac or PC?
PC, although I do try and keep a Mac handy for testing.

12. Plans for the future…
I have a couple web applications in the works I am very excited about. I have also begun work on a blog redesign and of course Scriptiny, which will also include a support forum. I will be shifting my personal blog away from posting only scripts and begin publishing a wide range of development related articles. I would also love to do some training and speaking engagements in the future.

13. Thank you and good luck on your projects.
Thanks Andy, I appreciate you taking the time to dig into my world.

You are not a Web Designer IF:

1. you don’t know what a PIXEL is
2. you don’t know what a mockup is
3. you don’t know what RGB or CMYK is and stands for
4. you don’t know what screen real estate is
5. you only design and never code
6. you don’t know the difference between vector and raster
7. you have only heard about Photoshop
8. you can’t name an alternative to Photoshop
9. you know some cool Photoshop filters
10. you know only a way of selection in Photoshop
11. you don’t know what DPI stands for
12. you don’t know what image formats are
13. you know only JPG and GIF
14. you know some cool effects in Front Page
15. you don’t know what a DTD is
16. you use only HTML Transitional DTD
17. you don’t know the difference between HTML and XHTML
18. you don’t know what CSS is
19. you are inclined of using inline CSS
20. you don’t know anything about typography
21. you don’t know what a serif is
22. you’ve never heard about W3C
23. you know to code only in Dreamweaver
24. you test your web pages only in Internet Explorer
25. you don’t read web design blogs
26. you don’t use wireframes
27. you have a Mac. ( you are not necessarily a designer if you own a mac )
28. you have no knowledge of design history ( although this is something that can be learned between projects )

Are you?

My reason for this post was to better define the thin line between a web designer wannabe (newbie) and a mature web designer. Please share your ideas, things that I forgot to put on this list.

Cheers!

PROS
- 256 number of colors
- uses lossless compression
- suitable for logos, flat areas of color with well defined regions
- suitable for icons with few colors
- support for transparency
- suitable for small animations

CONS
- the oldest format for web – 1989
- in most cases it has a bigger file size than PNG

PNG: Portable Network Graphics

PROS
- 24bit color / 8bit color(256 colors)
- uses lossless compression
- suitable for flat areas of colors, logos, transparent or semitransparent images
- suitable for icons
- in most cases PNG has a smaller file size than GIF
- it has alpha channel transparency which is more advance than GIF’s transparency
- approved as standard in 1996
- proposed as replacement of GIF by World Wide Web Consortium

CONS
- it is wise to avoid using PNG with big photos and images with details because of the big generated file size
- in different situations it has bigger file sizes than JPG

JPG: Joint Photographic Experts Group

PROS
- 24bit color
- suitable for images, high details & quality pictures
- uses lossy compression
- it is the most used graphic file format
- approved as standard in 1994
- used in design and photography industry – it is likely to see nature photos in JPG file format
- it is good when you are willing to drop quality from a picture for the sake of file size

CONS
- it does not support transparency
- it is not suitable for logos and icons because it does not have transparency and it can generate a bigger file size for small resolution images.

Regarding the content side of the website, from now on I will try harder to post quality materials more often. Here are some of the topics that will be covered in the new Graphic Rating:

1) Tutorials
– Photoshop – Wordpress – User Interface – XHTML & CSS

2) Reviews
– Websites – New Applications – Books – Logos – Wordpress Plugins – CMS – Services

3) Projects (personal tests)
– Frameworks – Browsers – Design

Apart from this, I will try to interview the most important figures in the Web Design & Development area. Hopefully the new content will be helpful like some of the actual content. I will try to write short articles that have attractive information instead of creating long and boring ones. I will also try to avoid writing articles like “10 Rare HTML Tags You Really Should Know” or “50 Excellent Image Galleries You Can Use Today”. Please punch me if I do. I also hope to create a gallery of nice images from the community. There are great designers out there with awesome portfolios that I want to showcase on Graphic Rating.

Hopefully I will finish this redesign and new structure soon.
Cheers!

You can check here the final image: Baby Grace

1. We will start with basic information. Please tell us your background, details from the early days of Guillermo Rauch.

I’m an 18-year-old guy based in Buenos Aires, Argentina. I’ve been seriously into computers for the last 8 years of my life at least. I decided what I’d be doing for the rest of my life when I successfully installed and configured my first GNU/Linux distribution, and compiled my first C program.

2. For know let’s skip the web design and development side. Tell us about your hobbies outside of the office.

I enjoy reading articles on a wide range of topics from medicine to engineering or history. I think every little piece of knowledge you acquire, no matter how diverse the topic, can help you in your everyday professional life. Aside from that, I enjoy going to the gym, running and watching Anime (:

3. Who is Guillermo Rauch now? … the web designer/developer.

Right now I’m consolidating my experience as a JavaScript and PHP ninja. I’m exploring other horizons such as Mac desktop application programming.

4. There are some projects of yours quite known in the web design/development zone. Can you describe the most important and popular?

I’m the author of WP-o-Matic, one of the biggest and most popular Wordpress plugins. I’m close to releasing a groundbreaking new version that completely turns it into a subsystem of its own within Wordpress.
In the JavaScript field, I’m well-known for some of my plugins, including the famous Fancy Menu (now known as MorphList), and the Facebook tokenizer clone TextboxList.
These projects have gotten over 4000 comments in my blog, and hundreds of pingbacks from all over the web (I hear they are big in Japan).

5. Speaking of projects, when can we expect another great Wordpress or Mootools plugin?

Absolutely. I have a secret Wordpress project which will see light in the next few months, and right now I’m working on several MooTools/jQuery plugins to release. I have set a new goal which is trying to bring my creations to the widest possible audience, which means releasing code for many JavaScript libraries, and porting plugins from Wordpress to other famous Open Source CMS projects, like Drupal.

6. You’ve recently revamped your website – DevThought -, and you did a terrific job. Can you detail on this a little more.

Well, after almost 3 years with a borrowed and modified theme, I decided I’d come up with a new layout and platform for a better user experience. I revamped the Wordpress comment system from the grounds up so that people can exchange comments and opinions more easily.
From the design perspective, the reception was great. I was featured in several CSS galleries and showcases, and linked from everywhere. I also got a very motivating feedback from respectable colleagues and fellow developers.

7. Tell us your thoughts and perception on Twitter?

I think it’s the perfect communication tool that is less serious than a blog, but at the same time not as personal as, for example, a Facebook profile. I think it has an enormous potential to make feed readers obsolete… I just stopped using one and started following my favorite developers and websites Twitter accounts. In this respect, I hope Twitter never gets too personal or private, because it’d lose its charm.

8. Now I will ask you a few short questions. Favorite web site design?

Web Designer Wall

9. Favorite web browser?

Safari 4. Favorite engine would be Webkit.

10. Favorite designer?

Jason Santa Maria

11. Favorite CSS book?

Designing with Web Standards, by Jeffrey Zeldman was quite inspiring.

12. Mac or PC?

Mac

13. Plans for the future…

Keep working hard towards innovation.

14. Thank you for your time and good luck on your projects.

Thank you!

In this blog post we will analyze various sites and the way they display their information. To be more specific, we will analyze blogs and how blog posts components are displayed. We will see how some blogs deal with the following blog post components: title, date, comments, author and images.

For this post we’ve made a selection of about 50 blogs that are quite visible and important in the blogging area. We’ve selected blogs from the news area like Mashable, ReadWriteWeb, Gizmodo; also blogs from the design area like: Alistapart, SmashingMagazine, CSS Globe; but we’ve also selected individual blogs like Matt Mullenweg, Jeff Croft, Jason Santa Maria. As you can see we wanted to have diversity in our list of blogs so that we can see what elements are important and how to emphasize them.

1. Strong Blog Titles

Titles are mostly for describing in few words the content, but they have visual importance as well. In many cases the typographic style helps in separating one blog post from another. There are also cases where the title has less visual impact than it should. Regarding our analysis, we’ve noticed that most of the designs have big headings that are emphasized and distinctive from the rest of the article. These types of headings can be found on 85% of our blogs. There are also blog titles that have a small font-size – 15%.

2. Visible Date

The Date element can be found on 95% of our blogs list. Over 70% of the blog posts have the date element placed in the header. This is clear that the user wants to be informed from the start about the posting time.
The visual representation of the date can differ from blog to blog. Most of them have a simple text without any additional graphic elements. Still there are blogs that have emphasized the date with various element.

3. Emphasized Comments

Easy access to comments is a great feature in blogs. That’s because comments can drive traffic. Users tend to read posts that have many comments rather than fewer. In this way a community is build around that site.

Like date elements, comments are often decorated with graphic elements like balloons, speech bubbles etc. According to our analysis, 90% of the blogs have information related to comments on the first page. The major site that hasn’t this feature is Alistapart. Here are some styles for the comments info:

4. Author Name

In over 60% of our blogs the author is displayed. This percentage is somehow normal, because the blogs that are powered by one person don’t have the author displayed in most of the cases. Regarding the design, sometimes the picture of the author is attached near the article. But, most of the time a simple text is enough for the user to know who the author is.
There are also singular cases like Mashable and Creative Bits that have both the picture and the text.

5. Relevant Images

Images are very important to blogs. Images can attract the user and make him more comfortable with the article. The importance of images can be seen also in our analysis. Over 60% of the blogs have big images displayed inside posts. There are also blogs without images like CSS Globe or blogs with small images like ReadWriteWeb. In fact most of the news related sites have smaller images compared to design related ones.

To recap here is what we know about blog posts:
- 85% of the blogs have big headings
- 95% of the blogs have the date displayed
- 70% of the blogs have the date displayed in the header of the post
- 90% of the blogs have comments info displayed
- 60% of the blogs have the author displayed
- 60% of the blogs have big images

Below we will showcase some of the most interesting designs of blogs. We will display also samples of blog posts that are not part of our blog list. This is simply to show you the different ways a blog post can be stylized.

[PSGallery=1qpggjliq]

Conclusion

The bottom line is that your articles must benefit at maximum from your design. Emphasizing the most important elements like title, comments, date, images and author can help you a lot in creating a stronger image for your blog. So polish the design, emphasize these elements and write good quality posts.
Cheers!