Archive for March, 2008

CSS Media Equals Print

Wednesday, March 12th, 2008

Lots of web pages have a link to a print-friendly version. What many of them don’t realise is that there’s no need because you can set up a second CSS document to be called up when a user prints the page.So, your page header should contains links to two CSS documents, one for the screen, and one for printing:
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen”/>

<link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print”/>

The first line of code calls up the CSS for the screen (notice the inclusion of media=”screen”) and the second line calls up the CSS for the printable version (using media=”print”).

to test the printstyle.css document, open a blank document and save it as printstyletest.css. Next, point the screen CSS command to this document so that the command reads: <link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”screen”/>.

Now just keep entering CSS commands until the display on the screen matches how you want the printed version to look. You’ll certainly want to make use of the display: no command for navigation, decorative images and non-essential items.

XHTML Sitemap

Wednesday, March 12th, 2008

In its Webmaster Guidelines, Google touts the merits of adding a sitemap to your site.

  • Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.
  • Offer a site map to your users with links that point to the important parts of your site.

I’d like to add that I’ve always looked at sitemaps as a helpful tool for the user. Some sites have confusing (read: poor) architectures, and oftentimes, it’s just easier to hit the sitemap and find what you need from there.

Bottom line — including a sitemap is easy, it’ll help your users, and it’s a great way to ensure that all the pages of your site are interlinked.
—————-
Listening to: Chevelle - Antisaint
via FoxyTunes

Replace font with Image

Tuesday, March 11th, 2008

if you’ve absolutely got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you’ve got no choice but to use an image.

Say you wanted the top heading of each page to have an obscure font that your site visitors are unlikely to have on their computers , and you’d like to be found for this phrase in the search engines. You’re pretty set on it being the obscure font so you need to use an image:

<h1><img src=”image.gif” alt=”Your Heading” /></h1>

This is OK but there’s strong evidence to suggest that search engines don’t assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be:

<h1>Buy widgets</h1>With these commands in your CSS document:

h1
{
background: url(image.gif) no-repeat;
height: image height
text-indent: -2000px
}

Also try text opacity to make the text “disappear”, but you’ll have to put the image into it’s own div.

opacity: .00;

Little Larger Please

Tuesday, March 11th, 2008

Working on sites, I tend to make font sizes just a little larger than the norm just because of people I know that have difficulty reading due to eyesight problems. Even I have a few irks against the tiny font that is generated normally. If I can make a site less annoying for someone with eyesight problems, perhaps it’ll encourage them to go further. While working on a site for Las Vegas, NV homes for sale I bumped the font size up to 14px in the content to help those of hard eyesight actually read into the site and then decide if they want to move on.

Use the Correct Methodology

Monday, March 10th, 2008

Whether you’re conducting a basic or advanced Google search, there is a certain methodology you should employ. Follow the proper method and you’ll get very targeted results; ignore this advice and you’ll either get a ton of irrelevant results or a dearth of relevant ones.

1. Start by thinking about what you want to find. What words best describe the information or concept you’re looking for? What alternate words might you use instead? Are there any words that can be excluded from your search to better define your query?

2. Construct your query. Use as many keywords as you need; the more the better. If at all possible, try to refine your search with the appropriate search operators—or, if your prefer, with the Advanced Search page.

3. Click the Search button to perform the search.

4. Evaluate the matches on the Search Results page. If the initial results are not to your liking, refine your query and search again—or refine your search by switching to a more appropriate search site.

5. Select those matching pages that you wish to view and begin clicking through to those pages.

6. Save the information that best meets your needs.

—————-
Listening to: Chevelle - Emotional Drought
via FoxyTunes

Class vs. ID

Friday, March 7th, 2008

If you want to become a master, or just capable, of building and/or styling web sites with CSS then you must first learn the difference when using the selectors Class and ID. It’s simply really, an ID is a unique identifier. You should always use ID selectors first when creating your web page, and you can only use an ID name once within a document. For example:

<div id=”header”></div>

<div id=”header”></div>

is not allowed. Something along these lines are though:

<div id=”header”></div>

<div id=”topNav”></div>

Class selectors can be used to designate several identical objects. Kinda like this:

<div class=”menu”></div> <div class=”menu”></div>

This one could be designating say, the top menu and the bottom menu. This is useful in such events as changing the background color of all the menus on the page with one CSS command.

Ctrl + Alt + Prt Scr

Thursday, March 6th, 2008

When completely out of ideas for a header image for a site, you can always just get ideas from their original site to help you out. Sometimes the client has a flash header and you won’t be able to just do a simple drag and drop like you would on a jpg image. Or alternately, it could be something comprised of many images. This is where our friend Ctrl + Alt + Print Screen comes in handy. Make sure you’re in the correct window before doing so though, don’t wanna capture something you have no business capturing.

Afterwards, just bring it into a image editing program like photoshop and Ctrl + V (paste) it into the block. While working on a Las Vegas wedding planning site, I was lucky to have it as one image not in the form of a flash, but other situations require different touches.

CSS Layouts by Little Boxes

Thursday, March 6th, 2008

When designing a site the layout has a big part in what the site will actually look like. If you are having trouble deciding which layout would be best there is a website called Little Boxes. Little Boxes gives you 16 different design schemes and the css so you can start building your site. So if you get stuck when deciding for a layout goto Little Boxes and get help.

—————-
Listening to: Seether - Gasoline
via FoxyTunes

Using Image Links, Good for SEO??

Wednesday, March 5th, 2008

I found this article on http://www.successful-sites.com/articles/promotion-claiborne-image-links.php

I was wondering all day about using images as link on an SEO site and also how effective it would be, I want to start to use a new creative designs for my sites and this was something I was actually working on….interesting, copied and pasted some of the article if you want to read more click here

Image Links, SEO and Usability

How Image Links Can Help Build a Better User and Search Experience

By Scottie Claiborne© 2005

There are webmasters out there who believe that good design, usability, and SEO can’t co-exist in the same site; that effective SEO will ruin usability or design elements. While there are plenty of examples that seem to prove this point, it doesn’t have to be that way.

Ask for advice on building a search-friendly website, and one of the tips you will often recieve is to use text links throughout your site. Text links are read by search engine spiders and render the same regardless of the type of browser being used. They are accessible by screen readers and can be easily identified as links using CSS rollover properties. It’s great advice and you can’t go wrong using text links.

However, sometimes the most relevant phrase for a page is just too long to use in your primary navigation without looking awkward or simply including too much information for the typical site user. That’s when image links may be a better choice.

Image Links VS Text Links for SEO

Text that makes up a link is referred to as anchor text and it can be a powerful tool for search engine optimization. The text in the link tells the search engine what that page is about, and it is so powerful that pages can rank well for terms found only in links to the page and not on the page itself. (Type “miserable failure” into a Google search for an example.)

Customized text links are highly prized for their ability to improve rankings for specific search terms and it makes sense to use them on your internal pages, since those pages “count” when the engines look at links and relevance.

Image links are followed and counted as well, and the text in the alt attribute for the image serves the same function as anchor text. General theory holds that alt text isn’t as “powerful” as link text, and for good reason. Webmasters who try to “game the system” stuff zillions of phrases into their image alts in an attempt to rank better for those terms. Because it isn’t an element that is likely to be seen by users (unless they hover over an image), it can be more easily abused. In general, search engines prefer to give more weight to elements that users can see.

While it’s difficult to prove that alt text on image links is “less important” than text links, it does seem to make sense that text links have a little more “weight” than image links.

Image links can be used throughout the site for sites with awkward keyword phrases, or be used selectively for pages like “Home”, “Contact Us”, “About Us”, and other key pages that are best identified with short phrases, but can be described better using an alt attribute such as “Contact the Digital Camera Repair Service Center”.

It’s Not a Question of “Better” or “Worse”

Text and image links both serve a function and you can build a site using exclusively one or the other, and it will be fine. However, when you consider the terms that you want to rank well with and the need to balance simplicity with specific words, image links offer an alternative to wordy text links that don’t integrate into your navigation very well.

Getting a mild boost for your desired keyword phrase in an alt attribute is STILL better than getting “full” credit for “About Us”. It just makes sense to use those internal links to help identify the full topic of the page. Just remember not to go overboard when adding your alt text- only use the phrase that best describes the page.

CSS positioning

Wednesday, March 5th, 2008

CSS rocks when it comes to positioning an object, you can place it anywhere you’d like.  Let’s say you wanted to place an object somewhere relative to a container, you can use the following CSS rule:

#container
{
position: relative
}Now any element within this container will be positioned relative to it. So if you had this HTML structure:

<div id=”container”><div id=”navigation”>…</div></div>To position the navigation exactly 45px from the left and 20px from the top of the container box, you could use these CSS commands:

#navigation
{
position: absolute;
left: 45px;
top:20px
}Rock on with your CSS-ing self!