Posts Tagged ‘Web Development’

The img Element Vs. the CSS background-image Property

Friday, February 13th, 2009

Don’t know when to use the img element or when to use the CSS background-image property? Don’t fret; there is hope. Read further and all shall be revealed.

The img element is best used for pictures that are completely unrelated to the stylesheet. That is, pictures that would need to display no matter how much the look of the site changes. These would be pictures related to a news article or photos in a gallery.

The CSS background-image property is for images that make up the appearance of the stylesheet. These pictures on one stylesheet would be different or just completely absent on another stylesheet. They don’t add to the content of the page in any way and are only there to give the page its “look”. These image files would be stored in the stylesheet’s images folder. (See my last post for more on this.)

Just another tip from your uncle Kyle!

—Kyle Blizzard

Tags: , , ,
Posted in Web Design, Web Standards | No Comments »

Organizing Your CSS Files

Friday, February 13th, 2009

When I create a web site, I like to organize my stylesheets and images into a specific folder structure. It keeps things tidy and separates presentation files (stylesheets and images) from content files (pages and images related to the content). It also leaves room for additional stylesheet “themes” for your site.

Here is an example of this folder structure:

/styles/
/styles/default/
/styles/default/images/

Default in this example would be the name of the “theme”. The sites I develop typically do not have multiple themes for the user to pick, so I don’t usually take the time to give them fancy names. However, if your site utilizes multiple stylesheets that the user could choose from (such as at the CSS Zen Garden), creative names would be helpful.

All stylesheets for the Default theme would be placed in the /styles/default/ folder. Likewise, images used by those stylesheets would go in the /styles/default/images/ folder.

This method keeps your styles consolidated and makes it easy to use them across multiple sites. All you need to do is copy the folder to the other site; you don’t need to pick through the images folder and figure out which ones are used by the stylesheet and which ones aren’t.

Technically, you wouldn’t even need to copy anything to another site. You could just specify the full URL in the link element or @import rule on the page, but I urge you not to do this. Your visitors may be using security software that sees cross-site references as malicious, thus blocking the stylesheet from downloading or, worse, blocking the entire page.

—Kyle Blizzard

Tags: , , ,
Posted in Web Design | No Comments »

Writing Great Web Content

Monday, December 15th, 2008

Every web site owner wants more traffic and one of the methods that has been proven to be beneficial in obtaining higher organic search engine rankings is content optimization. In the world search engines, content is king! But what does it mean to have “good” content on your site? Does it mean that it has to have the breadth and depth of the Encyclopedia Britannica? Not at all. The old saying that sometimes less is more applies to creating content for the web. You  can have good content without rewriting War and Peace. One of the most important hallmarks of superior web content is focus. Noted editorial strategist Erin Kissane says, “Copy needs specific goals to accomplish.” Simply staying focused on a topic, while using correct punctuation, grammar, and spelling, can go a long way in increasing the quality of your copy and, consequently, your search engine rankings by feeding the the crawlers what they want: high quality content.

First, have a plan. Sit down, take a deep breath, and  figure out exactly who is your audience. What do you want them to know and then what do you want them to do? A typical web visitor is looking for something and your site may be one of many competing for their attention. Well organized content that is easy to read and think through will help Then, organize those thoughts  while asking yourself questions:

Do I have a main idea that is the focus of this single web page? Is that focus clear in the page’s description and title? Can I expand on this main idea and provide support for it? Does this thought belong with other like ideas in this page or is this idea so dissimilar that it belongs on another page?

So now look at what you have and pick out your topic sentences and calls to action. If these items were taken in isolation could you figure out exactly what the message was and what you should be compelled to do? If not, then keep at it until there is a clear relationship between your ideas and the knowledge you want the visitor to have and the action you want them to take.

A terrific resource for all web content authors is Janice Redish’s Letting Go of the Words: Writing Web Content that Works which can be found at Amazon.com.

Good luck!

—Alan

Tags: , ,
Posted in Internet Marketing, SEO, Web Design | No Comments »