A Beautiful Blog » Tutorials

Convert Word (and other) Documents to PDF for the Web

Cory LaViska — Fri, 24 Jul 2009 23:52:14 +0000

As a developer in the content management industry, I see people uploading Word documents and other proprietary formats to the web all the time. This is especially true with smaller, homegrown websites that make brochures, newsletters, and forms that they want visitors to print out. The problem is that these formats aren’t very web-friendly — and they’re also very tacky.

A much better practice is to offer your visitors printable media in PDF format. Why? Because PDF files are portable, meaning they work just about anywhere. Most Windows users have Adobe Reader installed (a free download, if they don’t have it). Mac and Linux users have software that can read PDFs which comes with their operating system. Google Docs (and thus, Gmail) has a built in PDF viewer. Even my iPhone can read PDF files!

Try doing that with a Word document, a Visio flowchart, or an AutoCAD drawing.

The important thing to realize is that you don’t have to buy any expensive software to create PDF files. If you’re on a Mac or a popular Linux distribution, you can usually select File > Print and choose the PDF option. Windows users can download a free application that will give you the exact same functionality.

Once installed, CutePDF Writer will appear in your list of printers so you can quickly and easily convert any document into PDF format, which is much more reliable for the web. Using PDF files in lieu of proprietary formats will ensure that your visitors will be able to view your documents the way you intended them to — and it will give your website a more professional touch.

What Happens if IE8 “Breaks” My Website?

Cory LaViska — Sat, 27 Jun 2009 16:42:12 +0000

Last year all of the hype was about IE8 and Microsoft’s decision to default the browsers version targeting to “quirks mode” rather than standards mode. This essentially meant that developers would have to opt-in to IE8′s standards mode using a proprietary tag that tells the browser which mode you want it to render your website in.

Needless to say, this was a very frustrating proposal for developers worldwide. At the same time, Microsoft’s obligation to not “break” the web was very understandable. It was a catch 22 for the company, but the issue had to be tended to promptly. After much discussion and some encouragement from the community, Microsoft officially reversed their decision to handle version targeting this way.

Now that IE8 has been officially released, one problem still remains for many legacy sites. What if IE8 “breaks” your website? The short-term solution is actually very simple:

Windows Internet Explorer 8 introduces document compatibility modes that allow Web developers to tell the browser to render their pages in the same way as older versions would, thereby allowing the developer to choose when to update.

In short, add this tag inside the of each of your webpages and call it a day:

Wait! Don’t actually call it a day and forget about it! Although I’m sure a lot of folks will do just that, the fact is that you really should treat this as the temporary fix that it is and make an honest effort to get those legacy websites and applications up to date. The reality is, however, that many developers will be confronted with compatibility issues as IE8 gets pushed out to millions of users via Windows Automatic Update. Of course, many won’t have the time or resources it takes to redevelop or modify all those old sites so, in a pinch, you can at least get by.

What Are Favicons?

Cory LaViska — Fri, 11 May 2007 01:01:48 +0000

What is a favicon?

A favicon (pronounced “fave-icon”) is typically a small, iconic image that represents your website. Favicons are most often found in the address bar of your web browser, but they can also be used in lists of bookmarks in web browsers and feed aggregators. Well-designed favicons are styled to match the logo or theme of your website, that way users have a quick and easy way to recognize your website at a glance.

A Beautiful Site's favicon in the Firefox address bar.

What type of image is a favicon?

Although most modern browsers will recognize PNG, GIF, and JPG formats for favicons, Internet Explorer currently does not. It is recommended to use the Microsoft ICO format, which works in all browsers.

What size should my favicon be?

Another good reason to use the ICO format is because it can contain multiple favicons of different sizes in one ICO file. It is best to have, at minimum, a 16×16 pixel version. I usually include 32×32 and 48×48 versions as well. That way, if users drag the bookmark to their desktop they will see a nicely scaled version of the icon instead of the 16×16 version stretched out. To learn how to create a favicon with multiple sizes, see How to create a favicon below.

16x16, 32x32, and 48x48 versions of A Beautiful Site's favicon. Each image is embedded in one favicon.ico file.

The most common sizes for favicons are:

16×16
32×32
48×48
64×64
128×128

How to create a favicon

Although there are many ways to create favicons, the easiest is to use an online tool. We happen to have a favicon generator that’s entirely free. It’s called Favikon. To create your favicon using Favikon, simply upload an image, crop it, and then download the resulting icon.

How to link to your favicon

Now that you’ve created a nice little favicon, you need to tell web browsers and other applications where to find it. Adding this line to the section of your HTML will ensure that your favicon will be found:

The location of the favicon isn’t really important, as long as the href attribute is accurate. Most favicons, however, are placed in the root directory (the directory that contains the homepage). Keep in mind that it is not necessary to have multiple instances of the same favicon on one website.

If you add a favicon without linking to it within your HTML, you may notice that some browsers will still find and display it. This only occurs if the favicon is in the root directory. It isn’t good to rely on this method, so if you want to make sure that applications will see your favicon, to it!

GIF, JPEG or PNG? Using Images on the Web

Cory LaViska — Sun, 29 Apr 2007 04:11:28 +0000

This article aims to describe the difference between the three most popular types of images used on the Web, and how to use them effectively in your websites.

JPEG

JPEG files are compressed images that maintain a balance of size versus quality. For example: More compression = less image quality = smaller file size. In contrast, less compression = more image quality = larger file size. Since JPEG files do not maintain 100% of the original image’s pixel data, it is not considered a lossless image format.

Usage

Due to this sensitive balance, JPEGs are best suited for photographs where slightly depreciated quality is not very noticeable. JPEG is not typically a good format for logos, icons, and other simple images.

GIF

The GIF format was developed by CompuServe specifically for use online. GIF, sometimes pronounced “GIFF”, is a lossless, 8-bit image format. Lossless means that 100% of the original pixel data is maintained. The term 8-bit refers to color depth — an 8-bit image can only have up to 256 colors.

Usage

Because of these limitations, GIFs should not be used for photographic images. Instead, use them for things like:

Logos
Icons
Layout images (such as corners, borders, etc.)
Any other small, simple image with only a few colors

Transparency

GIF supports basic transparency, which means that certain pixels in the image can be “invisible”, so you can see whatever lies behind them. This is especially useful for making icons that are intended to sit on top of a varying background.

Compression

The GIF format uses the LZW compression algorithm, which is patented by Unisys. For a time, this meant that the authors of image-editing programs were forced to pay Unisys for the rights to include GIF support in their programs. The patent, however, expired on June 20, 2003 in the United States.

Interlacing

GIF also supports interlacing, which makes the image appear to load faster in web browsers. This could be helpful for people browsing your site on a slow dial-up connection.

Animated GIFs

An animated GIF is a single file that contains multiple variations (frames) of an image. These frames are drawn over and over again to create the illusion of animation. When used appropriately, animated GIFs can be catchy and impressive. Unfortunately, many people tend to overuse them on the web, creating a very annoying experience for their users.

PNG

PNG files, pronounced “PING”, were developed as a freeware alternative to GIF files which, at the time, used a patented compression algorithm. The PNG format is also lossless but, unlike GIF, PNG can support 8-bit and 24-bit images.

8-bit PNGs

An 8-bit PNG can have up to 256-colors with basic transparency. This format is very similar to that of GIFs, except for the compression method.

Usage

8-bit PNGs should be used the same way as GIFs:

Logos
Icons
Layout images (such as corners, borders, etc.)
Any other small, simple image with only a few colors

24-bit PNGs

24-bit PNGs can have up to 16 million colors and can support alpha-transparency. This means that a partially transparent image with anti-aliasing can blend smoothly into the background.

PNG Support

PNG support is becoming more widespread as browser developers become more conscious of Web Standards. Fortunately, PNGs are currently supported by all popular web browsers including, IE*, Firefox, Safari, Opera, and Konqueror.

*Unfortunately, IE6 screws up alpha-transparency in 24-bit PNGs and displays a grayish-blue background color instead. IE6 has also been known to render some 8-bit PNG colors slightly off hue (a gamma correction error). Although the alpha-transparency issue has been resolved in IE7 beta 2, Microsoft hasn’t addressed gamma correction yet.