How to get CSS3 working in older version of Internet Explorer:

Download CSS3 PIE here ->

The following instructions should get you up and running with PIE in most circumstances. If you run into problems along the way, consult our known issues page, or ask for help in the forums.

Step 1: Download it

Download the PIE distribution and unzip it somewhere.

Step 2: Upload it

Inside the unzipped directory, you will find a file named PIE.htc. This is the behavior file for IE, and is what does all the magic. Upload this file to the server where you’re going to serve pages using CSS3. It doesn’t matter where exactly, as long as you know where it is.



Step 3: Write some CSS3

Assuming you already have a HTML document, let’s say you want to give one of its elements rounded corners. Create a CSS rule for that element and give it a border-radius style like so:

#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
(Note the -webkit- and -moz- prefixed versions; these are necessary to make the rounded corners work in WebKit and Mozilla-based browsers.)



Step 4: Apply PIE

In that same CSS rule, add the following style line:

behavior: url(path/to/PIE.htc);
Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.

Step 5: View it in IE

If all went well, at this point you should be able to load the page in IE and see the CSS3 rounded corners rendered just like other browsers. Now you can play around with some of the other supported CSS3 decorations like box-shadow. See the documentation on supported CSS3 features to see exactly what PIE can do. Have fun!

Many site designs will feature varying types of image “hover” states, where an image or background image changes when you move your mouse cursor into that area of the page. Traditionally, this change in image is handled via JavaScript. It’s fairly easy to write a small script that swaps out images on mouseover, but there are a number of disadvantages to this approach that have pushed many web developers toward using a CSS-only method of achieving this exact same effect. This tutorial describes exactly how to implement a pure CSS image hover effect.

The Image

The biggest difference between a traditional JavaScript image hover and a pure CSS image hover is the image, itself. When using CSS to achieve this effect, the static image and the hover image are actually contained within the same image file. Basically, we’re displaying the image and cropping it so that only one image state is displayed at one time. In order to do this, we’ll omit the <img> tag and display the image as a the background-image of an <a/> (anchor) tag instead.

Let’s look at an image that could be used as a CSS hover image.

Simplistic Markup

As you can see, both static and hover images are contained within the same file. In order to display only half of the image at one time, we’ll apply it as a background color to an HTML block element. Here is the HTML for this example:

<a href="#LinkURL">Leaf</a>

The CSS

As you can see, the HTML is extremely simple. We’re doing everything in CSS, so this is where the real magic happens:

.myButtonLink {
        display: block;
        width: 100px;
        height: 100px;
        background: url('/path/to/myImage.png') bottom;
        text-indent: -99999px;
}
.myButtonLink:hover {
        background-position: 0 0;
}

We’re using the CSS psuedo-element hover to apply the mouseover image effect. When your mouse pointer moves over the “myButtonLink” element, our CSS slides the background image (using the background-position property) appropriately, giving us our mouseover image. This is simple, fast, and efficient! You’ll use less files and space on your server, clients will have to download less data, and older computers will render your content much faster.

The Result

Move your mouse over the image to see the hover in action.

Leaf

And there you have it, a pure CSS approach to image hovers. You can apply this method to links, <div/> tags, and just about anything else you can imagine in your site’s design. Happy styling!

Creating valid HTML email newsletters and announcements with a canonical link element may help marketers boost search engine optimization.

The canonical link element, which is often referred to as rel=”canonical,” (pronounced rel canonical, no “equals”) is a way of describing the preferred URL for some particular web page. Search engines, including Google, Bing, and Yahoo!, all respect this element and will typically favor the specified canonical link in search results. Since December 2009, most search engines have allowed the canonical link to point across domains, so that a page on example.com could point to — and therefore transfer any SEO benefits to — a page on sample.com.

For the most part, the canonical link element has been used to avoid confusing search engines with duplicate content within a domain or on related sites. A search engine like Google would see www.example.com, example.com, example.com/, and example.com/index.html as four separate pages even though the web server points each to the same content.

During a recent episode of the respected Marketing Over Coffee podcast, Christopher Penn suggested using rel=”canonical” in HTML email newsletters or announcements because of the popularity of “view in browser” links that open an email’s content as a web page on the email service provider’s site.

Penn is vice president of strategy and innovation at Blue Sky Factory, an email and social marketing firm, the author of the book Marketing White Belt: Basics for the Digital Marketer, and one of the foremost experts on email marketing.

Adding a Canonical Link

Adding a canonical link to an HTML email, requires that the email include common HTML structures like a document type declaration, and a <head> tag. Within the head tag, the marketer should add a link like the one below.

With this link in place when a subscriber clicks on a “view in browser” link and is taken to a page on the email service provider’s site, any SEO benefit is forwarded to the URL specified in the href attribute of the canonical link element. The technique really is that easy.

Underlying Assumptions

Penn’s suggestion makes at least three underlying assumptions.

First, it assumes that using a complete and valid HTML document for HTML emails is a good idea. This assumption runs counter to the opinion of some email service providers, which claim that HTML meta data, including the contents of a <head> tag, is a form of content spam. Penn obviously disagrees.

“Most spam checking things are worthless…most spam stuff that is being done today is at the domain level, at the IP level, at the reputation level. Content filtering with the exception of a few corporate systems…really doesn’t apply anymore,” Penn said.

Penn’s remarks do stand to reason, particularly with the rise of better email readers, mobile devices whose users may be more likely to view the message as a browser, and the continued drive toward email standards.

Next, Penn assumes that marketers will provide a relevant landing page worthy of the canonical link. This means that marketers will need to reproduce the email message content on their own server. One way to do this would be to have a newsletter archive section on site. Such a section is a good way to garner new subscribers and an obvious choice for a canonical link.

Third, Penn is assuming that any SEO benefit is actually worth the effort. Presumably, the SEO benefit would come from email subscribers who clicked the “view in browser” link; liked the content so well that they copy the page URL (remember this URL will probably be on the email service provider’s site); and then paste that link into a blog post, Twitter tweet, or a Google+ post.

Summing Up

I’ll summarize this article with a sample of Penn’s own words about the topic.

“I would make it a fully valid piece of HTML because what happens in a lot of cases is, especially with the bigger systems out there the more enterprise systems there is always a view in browser option…that goes to a page that then is effectively a web page. You can do one of two things with that: you can either user your own URL, which I would recommend — have it hosted on your site so you get the link juice…or at the very least use the full data structure and then put a rel=”canonical” back to your website so that your email service provider doesn’t suck up all of the SEO. But either way you need to have valid HTML in order to pull it off.”

Brian: Design and Marketing are often at odds with one another.  A great call to action can often interrupt the overall design concept.  A simple clean design (white space)  runs the risk of leaving a great impression at the expense of failing to generate a lead.  It is this back and forth that extends timelines, offends expectations, and cuts away at the bottom line success of any web, marketing, or design project.

As web designers, our role is understanding the importance of both.  We educate clients not by our words but rather the ability to execute.  Not always easy.  Clients often get in the way of their own success.  It is the responsibility of the designer to listen to the needs of the client and produce on the objective of well designed marketing.

In the end everyone needs to get paid.

It’s our job to make sure we all look good in the process.

Here is an example of success…

How simple is too simple?

By John McWade October 25, 2011

In response to our post, A little more Zen, Ed remarked: “Wow, all of this commentary over two or three elements in a ‘design.’ Is this [the Jobs' book cover] even design? Seems a little too basic . . . I’d probably even be a bit hesitant in billing somebody for this.”

Dear readers, that is the biggest misconception EVER. Whose logo is this? . . .

How long would it take to draw? Let’s say 10 seconds in InDesign to make the rectangle and 10 minutes to get the width just right. How much do you bill per hour? To make it easy, let’s say $90. By that reckoning, this is a $15 logo.

Not only that, but the yellow border is not the designer’s creation; it’s been the trademark of the client, National Geographic magazine, for a century.

Yet when he “designed” this rectangle in 2002, Tom Geismar (Chermayeff & Geismar) created one of the clearest, most identifiable, most portable images on the planet, meaning one that works beautifully in every venue regardless of size, resolution, or surrounding clutter.

That’s design.

How powerfully simple can you make your next logo?

A lot of time and energy can be consumed maintaining a blog.  Effort and attraction often mix well.  In the case of blogs, writers regularly invest in effort, spending hours creating well conceived blog content.  Attraction, on the flip,  is often set aside.  The style and design of a blog is placed into the hands of pre-built-one-size-fits-all themes. While these themes serve a purpose, they do not serve the greater good of the vessel in which a blogger’s real genius can be found: their voice.

In no way should it be implied that a great looking blog will make up for poorly constructed content.  The opposite, however, holds some validity. The lack of design can detract from what a blogger has to say.

This list is for you, the blogger/writer/photographer/business owner/farmer/astronaut/husband/wife/child/missionary/communist/tea-party member/gun lover/tree hugger/coffee drinker/stunt person/taxidermist (gross)/ gangsta rapper.

Tip # 1

Pay up.

Your voice is unique,  the platform in which your voice takes up residence should reflect that truth.

If you are using a design theme downloaded at no cost, chances are high someone else scored the same deal.  Let’s just hope you’re writing better content.  Either way, you are selling your self short.  Invest the time, research, and money into finding a company or freelancer that can understand your voice (pssst..I know a great one.. BrianAlonzo.com). Allow them the time and creativity to design a blog  that best complements your content. The truth that most people fear:

It costs money.

But not a lot.

On average the time it takes to move through the design and development stage of a blog is a few weeks, depending on the scale of what you are requesting.  Keep it simple and attractive and you could very well get a custom made theme for less than a couple hundred dollars.  I even know of a guy (BrianAlonzo.com) who cuts people deals all the time.

Tip # 2

Highlight your content!  A design that takes attention away from your pretty words defeats the purpose of all of your efforts.  A great blog theme should always set up the content to shine, not the other way around.

Tip # 3

Take risks.  There is a lot of ground breaking stuff going on in the world of web design and development.  Don’t shy away from allowing your designer to try something new.

Tip # 4

Just because everyone else is doing it doesn’t mean you should.  See the right side of this page? Yes, there is a Twitter box. Why? Good question.

Tip # 5

Keep changing.  As you grow and change as a person, so should your style.  If you still have the same design theme you had this time last year, CHANGE IT!

-1.) It keeps your site fresh.

-2.) I can charge you again for changes.

In conclusion:

The amount of intellectual investment you attribute to your blog should not be cheapened by a lack if visual appeal. Keep it real, keep it fresh, and for the love of God pay a professional.  You deserve it.