ChaseSagum.com » css

7 Visual Tips for Creating a Great Blog Post

Chase — Sat, 24 Jul 2010 20:13:59 +0000

There is much discussed on the web for how to “write” a better blog post. But often times its the visual elements of an article that make a blog post great. I’m sure you have seen examples of these visual elements throughout the Blogosphere, particularly with more popular tech blogs such as SEOMoz, Smashing Magazine, and Mashable just to name a few.

I have 10 specific tips for you to help you increase the visual appeal of your blog posts. Combine that with your stellar writing/blogging skills and you will be crashing your server with traffic in no time. Let’s take a look at these 10 elements:

1. Graphs

Showing off data that helps support the points you are making in your blog posts is one of the great ways to add some cool visual elements and increase the appeal of your posts. SEOmoz has some great examples of how to use charts and graphs within your posts.

2. Video

This one is a little more common amongst bloggers. Embedding video from YouTube, Vimeo etc. within your blog posts related to your content. Obviously creating your own video is better than embedding someone else’s video.

3. Photos and Screenshots

Photos are very common in blog articles. But high quality photos are not nearly as common. Take the time to either purchase stock photography, take your own photos, or get permission to use photos that will increase the visual appeal of your blog article.

Also, depending on the topic of your blog articles taking and using screenshots can be a powerful way of getting your point across to readers.

4. Infographics

Similar to video, it’s better to create your own Infographics than to use others. But either way these infographics do a great job of communicating tons of information in one condensed, great looking area within your blog post. These add a ton of viral ability to your blog posts and help drive much more traffic to them.

5. Diagrams

Another graphical way to express a point in your article. SEOmoz yet again is a great example of how to do this. Using diagrams have always been a form of teaching with visual elements. You don’t see this that often in blogging, but look for this to be a growing trend in blogging.

6. Illustrations

This may take some help from a graphic designer (unless you have illustration skills yourself) to create some graphic illustrations. But as you can see from this example from SEOMoz that it can be a very creative and fun way to communicate your message(s).

7. Great Headlines

Nobody explains better how to improve and perfect your headlines and sub-headlines than Brian Clark @ Copyblogger. The CSS style of your H1, H2 tags etc. play an important role in this. But even more importantly is the skill and precision behind the headlines that you write. Write things that are appealing to your potential readers but don’t over hype what you have.

I would love to see any examples that you have where you have utilized one or more of these visual elements in your blog posts. Use this as a time to share some of your work a.k.a leave some links! Cheers!

Free JQuery Image Gallery Plugin

Chase — Fri, 25 Jul 2008 13:39:49 +0000

Spacegallery is a plugin for JQuery that gives you yet another cool option for displaying your images on a website. It displays the images in a sort of cool space effect where each image comes after the next appearing right in front of you. Here’s a screenshot:

Spacegallery is free to download from the link I provided above. It’s fairly easy to implement as well. Details for finding out how to implement are made clear on the website. This could be a cool way to display a portfolio of some kind! Just an Idea!

A Slideshow Like BarackObama.com

Chase — Thu, 17 Jul 2008 19:10:31 +0000

Have you been to Barack Obama’s website and seen the cool slideshow that he has on his home page? There is actually a splash page that you have to go through first, before you get to the home page. But then you will see it. It looks like this:

Have a Slideshow on your site just like Barack’s!

Well guess what. Thanks to our friend Guillermo Rauch over at devthought.com, you can now have the same slideshow for free! Guillermo has put together a script in Mootools using a bunch of CSS to give you the same type of look and feel and cool slideshow effects that Barack has on his website. The script is fantastic looking and very lightweight so it doesn’t slow loading time up too much. See the Demo Here.

The Creation

Here is a little bit more of an explanation of the slideshow. “I took my previous class (SlideList), and made a few changes here and there. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists. I extended it and came up with a new class that receives the images and loading spinner as parameters (note: itÃ¢â‚¬â„¢s arguable whether this is the best decision OOP-wise, but due to the simplicity of this script, this was the right call)

The Code

To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used. The CSS plays a major role (as in every other animation-focused script). I suggest you analyze it carefully before implementing it in your applications or websites. YouÃ¢â‚¬â„¢ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean.

The markup is meaningful and simple. Two lists are used (one for the images and the other for the links). The loading element is included in the HTML, but itÃ¢â‚¬â„¢s probably better to inject it from the script directly. You can download the files for this slideshow at Guillermo’s Blog at devthought.com

Free CSS Menu Maker

Chase — Thu, 22 Nov 2007 04:34:13 +0000

CSS Menu Maker is a free tool that lets you download various different css menus, including drop-down menus and then customize them to your website. This is one of my favorite free tools on the Internet today! Stop making your websites with big image navigations. They take longer to load. Instead you can utilize CSS like this website to create elegant and effective navigation menus for your website. This is the Web 2.0 way of interface programming.

If anyone knows of any other cool CSS generator tools please comment back to this article. Every web designer needs to get his/her hands on this kind of information. Way too many designers and programmers are wasting their time building the same stuff over and over again.