Modern Web Design Articles and Tutorials » CSS

Google Unveils the Google Font Directory and API

Devin Walker — Thu, 20 May 2010 02:30:29 +0000

Google is looking to help all of us web and graphic designers out there who have been trying to break free of the CSS font-family limitations. How are they doing this? Today Google released the Google Font Directory and Google Font API in attempts to bring a selectable and dynamic font solution to the web. I'm expecting the directory in the future this solution will grow to become the web's leading robust and scalable font library and API.

The good things about this web font solution is that it is very easy to implement and the text is completely selectable (for copy-and-paste purposes). The downsides (both will eventually become irrelevant) are that not every browser will support it... mostly the old school ones that no one should care about anymore, and that it in it's current state the Google Font Directory is limited to a about 20+ fonts (of which you'd probably use about 10). As the web continues to evolve both of these 'downsides' will no longer be relevant.

Google Web Fonts
Using the Google Font API and Directory

Google's Font API

Google's font API is a part of Google Labs and is an easy to use application programmable interface (API) that allows you to select a font from Google's font directory and use it on any website of your choosing... for free! Applying a font from Google's Font Directory is a breeze, simply add a stylesheet link to your site's head and then use the font you selected from the directory in a CSS style. Bingo, bango, bongo.

Usage and Implementation

Here's a Google Font usage example:

First add our stylesheet to the head of your website.

[inline]

[/inline]

Next, let's apply the font we chose from the Google Font Directory it to a class on our site! We can do this in our master CSS stylesheet or in your head also (I'd recommend keeping your styles in the mastersheet).

[inline]

[/inline]

Now with this implemented properly using the quick example shown above you will see some sweet Google font below this paragraph that's selectable and easy to implement.

Check me out! This text is selectable and super easy to implement. Thanks Google!

Still Confused? One More Time

Often times, things explained the first time don't make sense. If you're still confused here's the jist

Step 1: Add a stylesheet link requesting the fonts from Google to your website (preferably in the head).

[inline]

[/inline]

Step 2: Style an element with the font you just requested in step 1. By element I mean any CSS class or ID.

[inline]

CSS selector {
  font-family: 'Font Name', serif;
}

[/inline]

Step 3: There is no step 3! Just repeat step 2 by styling elements you have already on your website.

Google's Font Directory

Google's font directory, though still in beta and limited to about 20+ fonts, is going to be widely adopted by web designers in the near future. Why? Because Google has made a very intuitive, free, and simple to implement solution. The fonts are free to use on any commercial and non-commercial web projects.

Comparable Web Font Solutions

Google isn't the first to come out with an entirely open source font library. Typekit and Fontdeck are doing the same thing: providing their users with a library of fonts that can be embedded on their websites. The difference is these companies don't have the muscle of Google, are many times more difficult to implement, and may cost money (not open source).

Google Font Solution Final Thoughts

What is FTP CHMOD/chmod/Change Mode?!

Devin Walker — Thu, 08 Apr 2010 15:41:23 +0000

Has someone asked you to chmod a directory or file to 666 or 664 (three-digit octal) and you have no clue what this means? Well, take a second to read this post and I'll explain a bit of what I know about Change Mode, Chmod and CHMOD (for your information these are all the same thing).

To begin, let me say that this article will be discussing Change Mode in terms of file and directory permissions using file transfer protocol programs. Personally, I use FireFTP and Core FTP as my File Transfer Protocol Systems. Both make is very easy to connect and chmod any file or directory. FireFTP is built-in to Firefox, as an added extra benefit.

CHMOD in terms of FTP

So I don't claim to be any genius with FTP, so I'm speaking here in terms of my own experience with Change Mode. I'm a web designer and my experience with Change Mode has been through FTP programs. Have you noticed when using your ftp program that each file/directory have multiple permission values. This is because there are multiple ways to set permissions.

File and Directory Permissions Symbolic Notation

R: Changes the modes of directories and files recursively
V: Verbose mode; lists all files as they are being processed

Here are some common Symbolic notation:

0 --- no permission
1 --x execute
2 -w- write
3 -wx write and execute
4 r-- read
5 r-x read and execute
6 rw- read and write
7 rwx read, write and execute
-rwxr-xr-x is 755. -rw-rw-r-- equal 664 in three-digit octal. -r-x------ is represented as 500

Octal numbers

CHMOD octal numbers are from what I understand another way of setting read/write/execute permissions on a file or directory. I have seen them in both 3 and 4 digits.

CHMOD a File or Directory

Now that you have read my brief description into changing the permission of files using Change Mode (or CHMOD) it's time to fire up your favorite FTP program and try for yourself.

To view this for yourself:

1. Open your favorite File Transfer Protocol Program

2. Connect to a web server

3. Right-click on a document or directory that isn't important if you play around with the permissions (like a image)

4. You will see numbers similar to the images below...

CHMOD 664

-rw-r-r-

CHMOD 755

-rwxr-xr-x-

CHMOD 666

-rw-rw-rw-

WordPress Lavalamp Navigation Tutorial

Devin Walker — Wed, 10 Mar 2010 20:11:51 +0000

Lavalamp is an awesome jQuery plug-in that makes really cool effects for WordPress-based menus and navigation links, and as a bonus it is very lightweight. It can be a bit tricky to implement in WordPress, but after you read this tutorial hopefully you'll be implementing it with ease. Follow along and let's get your site's navigation using the jQuery lavalamp effect (super cool)!

jQuery, Lavalamp, Easing and WordPress

Ok so if you haven't yet you're going to need to download all the appropriate scripts to make this work and have a WordPress site ready to work with. I've provided download links at the bottom of this post for you or also you can get them here: jQuery 1.4.1 min, jQuery Lavalamp Plug-in, and jQuery Easing Plug-in.

Why Use Lavalamp jQuery Navigation?

Because it's cool and increases user experience while still being very SEO friendly and lightweight. I personally use the lavalamp navigation on my portfolio website: Lavalamp Example 1. Also, I recently implemented it on another website I built and recently launched: Lavalamp Example 2. As you can see the effect works well and is very user friendly. Now, let's look in to how to make it work.

Here's the official website for the jQuery plug-in here: jQuery Lavalamp Plugin Page

To get started you must have WordPress installed on a web server and some knowledge of web development, HTML, and jQuery. Ok, still ready? Now download the jQuery Easing Plug-in here: jQuery Easing Plug-in and also download the jQuery Lavalamp Plug-in Here (min version): jQuery Lavalamp Plug-in

Insert the following between the header tags

Please note that my syntax highlighter has added some extra characters in the links. You will want to change these links to either Google or your own hosted scripts anyways...

[inline]

[/inline]

First, you will need to change in header the src='path/to' to a link to the appropriate path . The WordPress file to put this code in is title header.php and can typically be found in this location: mydomain/wp-content/themes/mytheme/header.php.

Further explanation: the second script after calling on jQuery is the Easing plug-in that makes this effect real smooth. The last script initiates the lavalamp function. You will need to change the '#nav' to your unordered list's ID if you are not using the same naming convention as I am.

Connecting to the WordPress Navigation

[inline]


	 Home                
         About
         Hire Me

[/inline]

Connecting this effect to a WordPress dynamic navigation is easy. Simply go into the header.php file and provide your navigational unordered list the appropriate class="LavaLampBottomStyle" naming and you're all set after you call on the appropriate scripts as mentioned above. Just an FYI, if you have a lot of other jQuery effects on page it could cause some problems with them... just experiment around with it. I've experienced minor issues, but nothing that's too hard to figure out (no roadblocks).

[inline]

Example Menu

Below is an example of how this effect can be used anywhere on a site. Here you can see I've implemented it directly into a WordPress page using inline code. The links don't go anywhere for a reason, but they can easily be made to go anywhere you'd like.

[/inline]

As you can see this effect works well for site navigation, but can be used to create some other cool effects. Please let me know if you have trouble with this tutorial, I've tried to explain everything to the best of my ability. Leave a comment and subscribe to the RSS!

Resources for jQuery Scripts

Download: jQuery 1.4.1 min

Download: jQuery Lavalamp Plug-in

Download: jQuery Easing Plug-in

Download: jQuery Lavalamp Plug-in

15 High School Websites with Nice Designs

Devin Walker — Tue, 16 Feb 2010 08:07:48 +0000

Hey there everyone, I love looking at lists of nice websites and realized that I never have written an article on that exact topic. So I decided to rate some High School websites since it's a niche and perhaps could inspire some younger web designers. Do you think your high school's website should be included on this list? Contact me and be sure to include a hyperlink!M

Trust me, finding website for this list wasn't that easy... if you've looked at many high school websites you'll know what I mean. They all seem to have been made in 1995, except the ones below (plus many more, I'm sure). Also, I notice many private school's websites tend to be nicer since they are actually marketing the schools. I thought about excluding those websites but decided not to.

Red Lion Christian Academy

This School's website shows a nice example of how to use navigational elements properly and I'm impressed they have a favicon. Don't disregard the favicon! I love those things :] Anyways, they mix serif and sans-serif font typography which is a no no in my book, but the site still looks pretty sweet compared to the rest of the high school websites I've been looking at.

Cathedral High School - Indianapolis

The textures used on this high school's website layout is what caught my eye. The navigation and shadows look great and the rotating images keep the site interesting.

Howe Military School

They used Georgia? Oh wow, this get's put in my showcase... I love Georgia font if you can't tell. Besides that, the website looks great and not to mention they are running on WordPress it looks like... I <3 wordpress.

DeMatha Catholic High School

Wow, this site is great looking. It's got a more modern layout and the look-and-feel of the website flows when you actually get in and click around. They offer a search option, which many of these other sites do not. Search is good.

Albuquerque Academy

I love the background of this website. Maybe it's just me, but any website with a nice scenic background, perhaps of the sky or mountains like this one... seems to create a nice calming feeling that makes me want to dive deeper into the website.

Adlai E. Steverson High School

This website has a nice jQuery slide show featured on the front page with captions. The background has nice gradients and the navigation is very user-friendly.

St. Andrews Episcopal School

Nice red color scheme with cool logo integration and professional look-and-feel. Very clear navigation probably makes it easy for parents and students to get to the information their looking for... and nice rollover effects make it that much more appealing.

Baltimore Lutheran School

This website's nice Flash Accordion as the main emphasis of work well and the gradient background is a good subtle backdrop. The website is designed nicely and the navigational elements are in the expected places.

North High School | The Saxons

This site is built on a Joomla platform, and more power to them. Looks like they heavily customized the theme, I can see places where the layout needs some work... but overall it looks pretty cool. Props for using a jQuery slider.

Rancho Bernardo High School

Ok, I admit. I am a bit biased when I post this website, because indeed it isn't the nicest site of the bunch... but this is the very first website I worked on as a student at RB. Back then it was a table-based layout and there was no Flash on the site. Now I can see they are using a Flash header, and to tell you the truth I'm not a fan. First, it takes too long to load and I'm just moving away from using Flash as a designer.

Mt. Carmel High School

Mount Carmel has a nice site and the color scheme suits their mascot, the sun devils. They have Flash elements, nice textured content background, decent looking footer, and a user friendly layout.

Morris Knolls High School

I included this website because I like it's simple layout. Although not beautiful per say, it is a nice efficient layout and deserves it's place among this list.

Hell Gate High School

This website has a nice color scheme and the header features a decent enough graphic of some mountains with trees and the school in the middle. Now, while it's nothing to go nuts about... it's subtle, efficient, positioned properly on the site.

Hawthorn Public Schools

The lesson of the day is: Joomla Site's work for schools. As long as they are aware that they must keep on top of security updates and new releases. Joomla allows schools like Hawthorn and others in this showcase to create very attractive and accessible websites in less time than other solutions.

Olathe Northwest High School

Olathe proves that some high school can and do use Flash properly in their websites. Not to overuse it, but to incorporate it elegantly for it's purpose into the website's design. I like how you rollover the navigation on the left the images turn from black-and-white to color... I've always been a fan of that and for that they win points and a spot on this showcase.

Please note: I did not include school websites that use third party solutions.

High School Website Directory: http://highschoolhomepages.student.com/

Top-10 Websites to Go To for Web Design Inspiration

Devin Walker — Fri, 05 Feb 2010 08:37:55 +0000

As web designers, we often seek inspiration from what others have done before us. Not to leech too much off their design, but to inspire our work and get us started on the right path. Here I will share with you my top go to websites for beautiful website listings with great showcases and more. If you want to take your inspiration to the next level, look at the source code! I like to go further into websites using Firebug to see just how a designer coded the site. It's a useful tool for any web designer. Enjoy the list!

CSS Line

Recently I stumbled across this site and what a gold mine of inspiration it is! I like how when you scroll down the page it just keeps loading new websites for you to look at. Also, it allows you to submit your own website to be rated. My only request is that for the ability to search the sites and if there was better categorization.

Smashing Magazine

Smashing Magazine is a very popular website for web designers. Here is their Inpiration category that provides some very good web design lists. On a side note, I ordered their book... "The Smashing Book" and was super hyped for it to come in the mail. It contains some very good information, but it's kind of short and I thought the general size of the book itself would be twice as large for the $30 dollars you have to pay for it. Still, it's not a bad book... it's a valiant first installment of many to come I'm sure.

Six Revisions

Six Revisions is part of the Smashing Network and like the others, provides excellent lists for inspiration. Here's a particular excellent post on Six Revisions entitled "Inspirational Tips and Tools from a Designer" that will give you an idea of how well the Six Revisions' authors can write.

Hong Kiat

I'm not sure what "Hong Kiat" means, whether it's a proper name or company, but who cares? It's a great site with a ton of resources! Hong Kiat's Inspiration Category provides some of the most unique web and graphic showcases on the Internet. The site is definitely worth checking out.

Vandelay Design

Vandelay Design blog is packed to the brim with website showcases. For example, there are multiple installments for each showcase such as: Minimalistic Web Design I Minimalistic Web Design II and Minimalistic Web Design III George Costanza: [George rushes into Jerry's apartment] Did anybody call here asking for Vandelay Industries? Jerry: No, what happened to you? George Costanza: All right, listen closely, I was at the unemployment office and I told them I was very close to getting a job with Vandelay Industries, and I gave them your phone number. So now, when the phone rings, you have to answer "Vandelay Industries". Jerry: I'm Vandelay Industries? George Costanza: Right. Sorry I couldn't resist, I love Seinfeld and that's what I think of every time I type in the URL. :]

Noupe

Wow, this site's design is great. I drew my inspiration from the way the transparency looks... but Noupe's content is excellent also. Their authors are very talented and distinguished on the Interwebs. Check em' out.

24 Ways

24-Ways is a funny website because it only posts 24 articles every December. While these are great articles how about 24-articles every month?! Is this asking too much? Well, I included this site anyways because the Authors page links you to excellent 24-Ways' excellent developers and designers' websites.

CSS Tricks

Chris Coyier is a well known web designer, speaker, blogger and internet entrepreneur. His website is awesome and I draw a lot of the inspiration on DLOCC from this website. He has a ton of Freebies, not so many top-sites but his sense of style is excellent. Looking at the way he designed his site is truly inspiring. He uses one PNG for all the buttons and I think this is just a great idea.

Specky Boy

I just recently took a more in depth look at Specky Boy the other day and I must say... it looks like Facebook doesn't it? Well, we are really analyzing the content and whether it can inspire us or not. So, upon further investigation I realized this too was another worthy site of my collection. For instance, Specky Boy's Inspiration Category provides weekly installment's of the popular "Weekly Web Design and Development Inspiration" Post.

Web Designer Depot

To finish off our list we have the Web Designer Depot. Here we find ourselves at yet another Smashing Network website, but of course this is not a bad thing. I just not realized I should have provided some more non-Smashing websites. Hmm, sounds like a good upcoming post. Anyways, to wrap it up the Web Designer Depot is, like the others, an excellent source of inspiration for starting any new design project. Here's a post I like: Minimalist Web Design - When Loss is More If you like this post, check out the Smashing Network... they're great. Hopefully one day this website will appear on there! :]

Modern CSS Typography and Font Styling Examples

Devin Walker — Tue, 19 Jan 2010 00:35:27 +0000

CSS& Design

Check out my new article Modern Web Forn Options for Web Designers for my latest rundown of web font solutions

Attractive CSS typography and styled fonts can add a lot to a user's experience on your website. Think of your website's typography as the foundation upon which your design is built. Typically, users will look at your headings first and actually read and interpret the text. Please enjoy these examples of how CSS typography can be used effectively on your website, blog or project.

Note: Best viewed in FireFox 3.5+

1 Mozilla.org, You're Lookin' Good!

We believe

that the internet should be public, open and accessible.

Mozilla makes some great software, and they can design a mean website too. Check out this site where I got this typography from: http://www.mozilla.org. It's pretty cool looking I'd say. Here's the link to the full background image: HERE.

HTML [inline]


We believethat the internet should be public, open and accessible.

[/inline] CSS [inline]

#container {
     background:url(http://www.dlocc.com/articles/wp-content/uploads/2010/01/Mozilla-Background.png) no-repeat top left;    
}

h1 {
     font-family:Georgia,serif;
     color:#666666;
     font-size:30px;
     line-height:1em; 
     margin:0 0 0 60px;
}

h1 strong{
     color:#A80C1E;
     display:block;
     font-size:85px;
     font-weight:normal;
     letter-spacing:-3.5px;
     line-height:1em;
}

[/inline]

2 Elegant use of Uppercase letters

Introducing

Modern Style

We know CSS & Practice Modern Web Design Since 1997

The example above shows how to effectively use CSS to create a large heading with an elegant italic subheading. The fonts used are Baskerville, Helvetica, and Georgia as you can see once the syntax is expanded below.

HTML [inline]

Introducting
Modern Web Design
We know CSS & Practice Modern Web Design Since 2001

[/inline] CSS [inline]

h1 {  
	font-family:Baskerville,Times,'Times New Roman',serif;
	font-size:75px; 
	color:#589017;
	font-variant:small-caps;
	text-align:center;
	font-weight:bold;
	padding:15px 0px 15px 0px; /* Tweak this to your liking */
}

h2 {
	font-family:georgia,serif;font-size:18px;
	font-style:italic;
	color:#3E2F2F;
	letter-spacing:0;
	line-height:1.429em;
	padding:0;
	text-align:center;
}

h2 span {
	font-family:baskerville,'palatino linotype',georgia,serif;
        font-size:25px;
	font-weight:100;


}

.introduction {
	font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;
	font-weight:bold;
	margin:10px 0px 10px 20px; /* Tweak this to your liking (also add padding) */
	letter-spacing:3px;
}

[/inline]

3 Make your blog postings shine with CSS

The Man, The Myth, The Legend

By: Devin Walker | Posted: April 20th, 2010

Ever want to create an amazing blog that makes your visitors drop their jaw in awe? Well with a little bit of CSS magic this can become a reality. Getting visitors is another thing, you'll figure that part out... just keep posting good content!

Is your wordpress blog in need of some sprucing up? Here we have an example of how we can make blog postings look that much better all thanks to cascading style sheets. Remember, these are links so they will require different syntax for styling links and hovers. Check out what I mean by viewing the code below.

HTML

[inline]

The Man, The Myth, The Legend

By: Devin Walker | Posted: April 20th, 2010

[/inline] CSS [inline]

h3 {  
	font-family: georgia,serif; 
	color: #755c44; 
	font-size: 20px; 
	letter-spacing: 0.1em; 
	line-height: 1.5em; 
	text-transform: uppercase; 
	margin: 10px;
}

h3 em{
	color:#8F7C47;
	letter-spacing:0.05em;
	text-transform:none;
	font-size:20px;
}

.authorDate {
	border-color:#695C44;
	border-bottom:1px dashed;
	margin:0px 10px 0px 10px;
	padding-left:5px;
	color:#666666;
	font-family:Tahoma;
	font-size:10px;
	font-variant:normal;
	font-weight:lighter;
	letter-spacing:3px;
	text-transform:uppercase;
}

.content {
	font-family: georgia,serif;
	font-size: 12px; 
	line-height: 20px; 
	letter-spacing:1px;
}

[/inline]

4 CNN-style typography

Upcoming IE9 Incompatible with CSS3

January 4, 2010 2:29 p.m. EST

Houston, Texas -- Love or hate Microsoft, it seems the newly release beta version of IE9 will not be compatible with the latest version of CSS. Web designers are scrambling to gather enough eggs to cover the entire Microsoft headquarters.

CNN is the go to website for millions of people. They must be doing something right as far as typography is concerned. The designers have used Arial at various pixel sizes.

HTML

[inline]

Upcoming IE9 Incompatible with CSS3
January 4, 2010 2:29 p.m. EST
Houston, Texas -- Love or hate Microsoft, it seems the newly release beta version of IE9 will not be compatible with the latest version of CSS. Web designers are scrambling to gather enough eggs to cover the entire Microsoft headquarters.

[/inline] CSS [inline]

h1 {
     font-family:arial;
     color:#000;
     font-size:14px;
     font-size-adjust:none;
     font-stretch:normal;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;  
     line-height:19px;
     margin-bottom:7px;
}  

.dateTime {
     font-family:arial;
     font-size:11px;
     font-size-adjust:none;
     font-stretch:normal;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;
     line-height:14px;
     padding:1px 0px 1px 15px;
}

.content {
     font-family:arial;
     color:#000;
     font-size:14px;
     font-size-adjust:none;
     font-stretch:normal;
     font-style:normal;
     font-variant:normal;
     font-weight:normal;
     line-height:19px;
     margin-bottom:7px;
     padding:0px 15px 0px 15px;
}

[/inline]

5 Nice Top-10 Lists with CSS Box Shadows

Top-10 Web Tools

Adobe Dreamweaver CS4

As a web designer you'll need a good editor, I prefer Dreamweaver CS4. I think it could start up a bit faster, but other than that it's great!

Adobe Photoshop CS4

While many may not consider this a web tool, I do. Why? Because without graphics, you don't have much of a website. All good web designers should have at least some skills with Photoshop.

Core FTP

This is the best FTP tool IMO! Learn it, use it, abuse it. I <3 Core FTP because it is free and very reliable. Do you?

Top-10 lists are very popular and are very enjoyable to write IMO. Site visitors want to see lists with images that stand out and are unique. Bland lists are boring. Style your top lists using something similar to the above example using the code below. Check out my post on using a box shadow hover effect for Mozilla firefox using CSS! Coming soon.

HTML

[inline]

Top-10 Web Tools of 2009

Adobe Dreamweaver CS4
I think Dreamweaver is cool because blah blah blah...
1

[/inline]

CSS

[inline]

.top10 {
      background-color:#FFF7EF;
      border:7px solid #FEE8D1;
      color:#666666;
      margin:10px 0 20px; /*may change */
      padding:5px 10px 30px;  /*may change */
      position:relative;
}

.top10 h2{
     color:#333333;
     font-family:Georgia,serif;
     font-size:25.5px;
     font-style:italic;
     margin:10px 0px 5px 0px;
}

.top10 p {
     color:#666666;
     font-family:Georgia,serif;
     font-size:14.5px;
     padding:10px 0;
}

.top10 span {
     bottom:25px;
     color:#DEDEDE;
     font-size:55px;
     position:absolute;
     right:0;
}

.top10 img{
     float:right;
     margin:10px;
}

h1 {
     font-family: Georgia, serif;
     font-size: 30px;
     font-style: normal;
     font-weight: normal;
     text-transform: uppercase;
     letter-spacing: 2.5px;
}

[/inline]

6 I <3 Mozilla + Georgia is Beautiful

CSS Typography is Fun!

If you enjoy building web pages and graphic design test your creativity with CSS typography! It's can help you refine your css skills and make web pages look great. It's definitely worth the time and effort.

Mozilla is awesome. Check out their beautiful and elegant typography HERE. Georgia is one of my favorite fonts to use because it renders nicely when used in large sizes and looks pretty slick. It's a serif font, meaning it naturally has more detail than sans-serif fonts. I believe this gives more character to the typography. What do you think?

HTML - (Download the background HERE)

[inline]


CSS Typography is Fun!
Why is it fun? Because it is!

[/inline]

CSS

[inline]

#container  {
     font-family:georgia,serif;
     color:#FFFFFF; 
     margin:10px; /*Customize */
     padding:10px; /*Customize */
}

#container h1 {
     font-size:75px;
     margin:10px 0px 10px 0px; /*Customize */
     padding:0px; /*Customize */

}

#container p{
     color:#4B4742;
     font-size:24px;
     line-height:30px;
     margin:10px; /*Customize */
}

[/inline]

Please let me know what you think. If you enjoyed this post be sure to subscribe to our RSS feed. Are you looking to publish your articles online? Contact DLOCC! Also, peep us out on Twitter! Ok, that's it for now. Pz!

CSS Vertical Centering Text, Images and other Elements

Devin Walker — Thu, 10 Dec 2009 06:02:33 +0000

Cascading style sheets make is very easy to center objects vertically. This may be an image or some text that you wish to align properly for whatever reason. For this tutorial we will demonstrate how to vertically align some text then an image using an easy and W3C compliant method. Then I will show you how to place text or images in the absolute middle or center.

Vertically Align Text:

1. Create a new HTML file in your favorite editor and let's begin by creating a container for our object that we want vertically centered:

[inline lang="HTML"]

[/inline]

Next, add some text in a paragraph tag in between the div tags.

[inline]


I am text, look at me!

[/inline]

2. Apply the following CSS to the container div:

#container {
      display:table-cell;
      height:120px;
      vertical-align:middle;
}

Result:

This is my text, hello look at me! I'm vertically centered and I can keep on being centered no matter how long my text continues on for... see the light-yellow background? That's my container

Vertically Align an Image:

1. Now let's create another div container for our image we want vertically centered:

[/inline]

Next, add an image in between the div tags.

[inline]

[/inline]

2. Again, apply the following CSS to the container_image div:

#container_image {
      display:table-cell;
      height:120px;
      vertical-align:middle;
}

Result:

Horizontally and Vertically Align an Image:

1. For our last example, create yet another div container for our image:

[/inline]

Next, add the image again in between the div tags.

[inline]

[/inline]

2. Once more, apply the following CSS to the container_image div:

#container_image {
      display:table-cell;
      height:120px;
      vertical-align:middle;
}

#container img {
      margin:0 auto;
}

Result:

Top-10 Free Website SEO Analysis Tools of 2009

Devin Walker — Wed, 02 Dec 2009 00:40:47 +0000

There are many useful website graders available for free on the web. You don't have to pay for quality tools, you just need to know where to look. I've used plenty of SEO tools on my website, the key is to review the results objectively and compare the reports with one another.

Some tools didn't make the top-10 list and I've provided an explanation as to why not below each. Please enjoy my top-10 list of website SEO analysis tools for 2009! Hope you enjoy... please leave a comment.

1. Google Analytics

Review: Every website should utilize Google Analytics to track visitors, review keywords, track adsense profits and more. This tool is hands down the best out there and it's free. Simply include a tracking script on your pages provided to you once you sign up and you're set. Don't forget to filter out your own IP addresses for accurate reporting!

Overall Rating: 10/10

2. Hubspot's Website Grader

Review: Hubspot generates comprehensive reports that weigh a variety of factors in calculating the final grade. The factors include Google Page Rank, website directory listings (DMOZ, Yahoo!), domain age, etc.

My Site's Result:

[inline] [/inline]

Overall Rating: 9/10

3. Alexa

Review: Provides more of a high-level overview of your site's rank against their top-ranked sites. If you're in the top 100,000 that's good news and you'll have more to view. For me, perhaps one day I will be up there but for now it seems I've got to climb a few million. Check them out, not sure they deserve the 2-rank, but the site is valuable.

My Site's Result:

[inline] [/inline]

Overall Rating: 8.5/10

4. Site Report Card

Review: Compete is a very popular tool for webmasters and reminds me of Google Analytics. You can view a lot of information without signing up, which is always a plus. Although, if you want to embed a cool graph like you see below (only cool if you have a lot of visitors... unlike me) then you must register with the website.

My Site's Analytics Graph:

Overall Rating: 8/10

5. Quantcast

Review: Quantcast is an uncoming competitor to Alexa and provides good information about higher traffic sites. Analysis includes traffic estimates, audience location and demographic as well as lifestyle. Interesting analysis compared to some of the others.

Overall Rating: 7.5/10

6. BuiltWith

Review: BuildWith is becoming one of the more popular free analysis tools on the web. Visitors can look up any site they wish and see detailed traffic, visitor and SEO analysis. I like how they have a "Technology Profile" that shows your server info, tracking system, and frameworks used. They don't give you the whole shebang for free, but you get to see quiet a lot of what BuiltWith has to offer.

Overall Rating: 7/10

7. Site Report Card

Review: Site Report Card is a legitimate tool that helps analyze links, meta tags, spelling, keywords and html. Very in depth reports help you resolve the issues it finds. Search engine analysis provides thorough link popularity reporting and search url index totals.

Overall Rating: 6.5/10

8. Xinu Returns

Review: Xinu Returns is appealing because of its simplicity. All the analysis info is right there for you once you enter your website's URL: the categories include backlinks, syndication, validations, and more. Points off for an annoying pop-up and old look-and-feel.

Overall Rating: 6.5/10

9. Review My Web

Review: Reviewmyweb.com is a website review tool that ranks your website against competitors and popular search engines. Unlike hubspot's website grader tool the email field is not opinional (the only way to receive a report is via email). Not sure if they agree not to sell your email address afterwards... hopefully not.

Note: It does take awhile to receive the email containing a link to your website's report. I thought mine never came, but I checked an hour or so after submitting my analysis and it was in my inbox. Once I reviewed the report it was pretty slim but included some helpful information.

Overall Rating:5/10

10. Submit Express Link Popularity

Review: The last and final SEO tool to make this year's list is Submit Express' link popularity checker. This tool is free and will analyze your website's popularity (links) on several indexes and social networks. The report is very basic, but it returns extremely quick results and compares your website's rank to a wide spectrum of results. Worth a check if you feel the need.

Overall Rating: 4/10

Do you have a tool you'd like to share? Please leave a comment below and let others know! You can also contact me and tell me why it should be included. Oh yes, and subscribe to my RSS feed :]

SharePoint Color Coated Calendars

Devin Walker — Wed, 04 Nov 2009 04:12:18 +0000

I found a particularly good blog about how to color your Calendar lists similar to the way Outlook's are formatted using the Content Editor Web Part and some nifty Javascript HERE. This particularly valuable post comes to you from PlanetWilson SharePoint Blog, a particularly good source of information for MOSS solution. There is a packaged solution file (which I have yet to try because I hear it lacks the incoming e-mail feature of WSS 3.0 calendars) and a nice walkthrough demonstrating how to setup your "coloured" calendars. I used it and it works great, here is a image of what I was able to create in about 30 minutes.