Archive for the ‘Web Design’ Category

Getting Around Onload in Flash

Friday, March 5th, 2010

I’ve been doing some Flash work recently and ran into a conundrum. You can’t create an empty movie clip, load a movie in it, and do a movie.onload=function(){...}. There are lots of work arounds, but here’s the one I just came up with that I liked.

function loadMyMovie(clipName, depth, loadInClip, funcbefore, funcafter) {
	var watchLoad = function() {
		if(_root[clipName].getBytesLoaded() == _root[clipName].getBytesTotal() && _root[clipName].getBytesTotal() > 0) {
			funcafter.call();
		} else {
			setTimeout(watchLoad,1);
		}
	};
	_root.createEmptyMovieClip(clipName, depth);
	_root[clipName].loadMovie(loadInClip);
	funcbefore.call();
	watchLoad();
}

funcbefore and funcafter should be the functions that show and hide your loading message.

I haven’t tested this exact bit of code, but that’s the basic principle.

Site Specific Hacks

Wednesday, April 8th, 2009

The other day, I finally got curious about the Site Specific Hacks option in the Develop menu of Safari. It turns out that browsers do their own hacks to certain known problem sites to make them work. Safari allows developers to turn off these hacks in the event that the developer is fixing a site that has hacks in Safari.

Opera, on the other hand, has a very advanced method for dealing with site specific hacks. It’s worth a read just so to know what kind of stuff goes on in the browser that most people, including developers, never think about. They also link to how other browsers deal with the problem.

Triangles in CSS

Wednesday, March 25th, 2009

I was reading Image-free CSS Tooltip Pointers and realized the trick of triangles in CSS. These odd little polygonal things have been around for awhile, but I just now figured out how the triangle works.

Basically, where two borders meet (e.g. border-top and border-left), a diagonal line is drawn where they meet, making a neat bezel effect, rather than having the top border sit above the left border. For example:

On the div above, you can see the diagonal lines where the borders meet.

1
<div style="margin: auto; border: 10px solid red; border-left-color: blue; border-right-color: green; border-bottom-color: yellow; height: 20px; width: 20px; background: gray;"></div>

Taking advantage of this, it’s easy to set the color of some borders to transparent and end up with a polygon.

1
<div style="margin: auto; border: 10px solid red; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; height: 20px; width: 20px;"></div>

Take that principle and mess around with it, and you can make triangles. For example:

Above, you have north, south, east, west, northeast, northwest, southeast, and southwest (in no particular order).

1
2
3
4
5
6
7
8
9
10
 <div style="position: relative; width: 100px; height: 100px; margin: auto;">
  <div style="width:0; height:0; border-left: 5px solid transparent;  border-right: 5px solid transparent; border-top: 5px solid blue; border-bottom: 0; position: absolute; bottom: 0px; left: 50%;"></div> 
  <div style="width:0; height:0; border-left: 5px solid transparent;  border-right: 5px solid transparent; border-bottom: 5px solid blue; border-top: 0; position: absolute; top: 0px; left: 50%;"></div> 
  <div style="width:0; height:0; border-top: 5px solid transparent;  border-bottom: 5px solid transparent; border-right: 5px solid blue; border-left: 0; position: absolute; top: 50%; left: 0px;"></div> 
  <div style="width:0; height:0; border-top: 5px solid transparent;  border-bottom: 5px solid transparent; border-left: 5px solid blue; border-right: 0; position: absolute; top: 50%; right: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid blue;  border-right: 7px solid transparent; border-top: 7px solid transparent; border-bottom: 0; position: absolute; bottom: 0px; left: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid blue;  border-right: 7px solid transparent; border-bottom: 7px solid transparent; border-top: 0; position: absolute; top: 0px; left: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid transparent;  border-right: 7px solid blue; border-bottom: 7px solid transparent; border-top: 0; position: absolute; top: 0px; right: 0px;""></div> 
  <div style="width:0; height:0; border-left: 7px solid transparent;  border-right: 7px solid blue; border-top: 7px solid transparent; border-bottom: 0; position: absolute; bottom: 0px; right: 0px;""></div> 
 </div>

So, as you can see, it’s pretty easy to make a triangle. Adjust the border widths to make them bigger.

Internet Explorer 8 Released

Thursday, March 19th, 2009

If you didn’t already hear (and I bet you already did), Internet Explorer 8 has been released. For several months, I’ve been using the release candidates with the Internet Explorer 7 Compatibility Mode to test sites in IE7 and IE8. So far, IE8 seems like a pretty good release. I haven’t had a chance to update yet, but I’m hoping hard that things have only gotten better.

Browsers and Form Collection

Wednesday, February 18th, 2009

I’ve been writing a new form hijacker. Since this one is a pretty big deal for me, I wanted to make sure it was properly implemented. I implemented against my interpretation of the HTML 4 specification and did a pretty good job since I’m exactly compatible with Firefox, Opera, and Internet Explorer 8. Safari, Internet Explorer 6, and Internet Explorer 7 seem to have some bugs.

Safari seems to send the values of unnameed selects, despite these elements being invalid. So, you may get a query string like text1=test&=selval if your select that contained an option="selval" doesn’t have a name.

Internet Explorer 6 and 7 both mishandle buttons. Internet Explorer 6 sends all buttons with name attributes set, even though it should only send the button if it was clicked. Internet Explorer 7 doesn’t send unclicked buttons, but any time Internet Explorer 6 or 7 sends a button it sends the button‘s innerHTML instead of the value.

So, given the deficiencies above, here’s how to compensate. If you’re using PHP, you don’t need to worry about Safari sending nameless selects as PHP seems to ignore them (or at least in parse_str). If you plan to use buttons, never give them names or values. Use radio controls if you have to do conditional actions based on what the user clicks.

I still have some other testing to do, but these findings should help you cover your bases if you’re working with forms.

Yahoo! Updates Graded Browser Support

Thursday, January 29th, 2009

Yahoo! updated it’s Graded Browser Support yesterday. The changes involved dropping support for non-Safari browsers on Mac OS X 10.4 and non-Internet Explorer browsers on Windows 2000. Support for Internet Explorer 8 was added for Windows XP and Windows Vista.

This has given clout to support Internet Explorer 8 (which is in Release Candidate version now) in addition to versions 6 and 7. Here’s hoping Microsoft forces Internet Explorer 8 upgrades now that version targeting has been implemented.

The State of Web Fonts

Thursday, January 8th, 2009

A long time ago, Microsoft started making use of @font-face (also called web fonts) in CSS. This would have been revolutionary if not for the fact that using fonts required the designer to encode them into a weak DRM file called an EOT, which stands for Embedded OpenType. Open indeed. Things are starting to look up now.

The great thing about Microsoft trying to introduce this is that it would have ended an era of Web Safe fonts and “download this font to view my page properly” messaging before Web Safe fonts were understood. Unfortunately, no other browser bothered implementing the CSS or EOT and @font-face fell into obscurity for many years, forcing web designers to use images of text. EOT’s major flaw was that it pandered to font makers and left web designers jumping through hoops to create font files.

Microsoft apparently has strong corporate ties to certain Font Industry big-wigs, and they didn’t want to upset them. Better to make life hard for your developers than help font makers come up with workable solutions for licensing web fonts (like hosting font files and checking the HTTP_REFERER for the correct domain before allowing access to the font file, which seems as good as the weak DRM of EOT files). When you are the most commonly used browser, I guess you can do stuff like that and still have your CEO chant, “Developers! Developers! Developers!” The problem is that Microsoft didn’t anticipate empowering font creation software like FontStruct that lets mere mortals create fonts under Creative Commons licenses. Frankly, it’s unfair to force me to put DRM on stuff I create if I don’t want it.

Eventually, some good people created sIFR, which allowed designers to (with great effort) cobble together a Flash file that embedded a font. Adding some JavaScript code to the page allowed designers to add fonts in a more accessible, user-friendly manner than simply using images of text. While sIFR had some problems (for example, links in headings were buggy and the text wouldn’t resize with the browser), it was a breath of fresh air. Suddenly, it was only a little work to have nice typographic options for limited use in headers and the like.

Recently, Apple (in the form of WebKit) and Opera have brought back the @font-face. Luckily, Apple and Opera didn’t bend over for the Font Industry. They boldly allowed support of plain-old TrueType fonts. With half of the major rendering engines supporting easy web fonts (and Firefox support on the way), I decided to give EOT another shot. That would allow me to have four out of five browsers (that I support) rendering my fonts out-of-the-box with sIFR as a worse-case fallback.

The results were mixed. Using @font-face is progressive enhancement with CSS and using sIFR is progressive enhancement with JavaScript and Flash. To start, I went through the lengthy and buggy trial and error process of creating an EOT with WEFT. After getting that worked out, I added the following to my screen stylesheet:

1
2
3
4
5
6
7
8
9
10
11
@font-face {
	font-family: "MyFont Sans";
	src: url("../media/myfont_sans.ttf") format("truetype");
}
 
@font-face {
	font-family: "MyFont Sans IE";
	font-style: normal;
	font-weight: normal;
	src: url("../media/MYFONTS0.eot");
}

I could then set a font by specifying font-family: MyFont Sans, MyFont Sans IE, sans-serif;. In Safari, Opera, and Internet Explorer, my site used a custom font. Other browsers fell back so a system chosen sans serif font if the font MyFont Sans was not installed on the system. That gets us half way there.

The next step is to create the sIFR and load it only if it is needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var MYSITE = {
	sifr: true,
	init: function() {
		if(window.getComputedStyle) {
			var ff = document.defaultView.getComputedStyle(h,null).getPropertyValue('font-family');
			switch(ff.toLowerCase()) {
				case 'myfont sans':
				case '"myfont sans"':
				case "'myfont sans'":
					MYSITE.sifr = false;
			}
		} else {
			MYSITE.sifr = false;
		}
		if(MYSITE.sifr) {
			MYSITE.setSifr();
		}
		return true;
	},
	setSifr: function() {
		// Code enabling sIFR
	}
};
 
if(window.addEventListener) {
	window.addEventListener('load', MYSITE.init, false);
} else if(window.attachEvent) {
	window.attachEvent('onload', MYSITE.init);
} else {
	window.onload = MYSITE.init;
}

The script runs after the page loads. Checking for window.getComputedStyle ensures that any standards compliant browser that supports web fonts will not get sIFR, since the browser will report that it is using MyFont Sans. Firefox, if I remember correctly, reports a list of fonts, but it ends up in the result of Firefox getting sIFR. Once Firefox has web fonts support, this script will need to be reevaluated. If the browser doesn’t support getComputedStyle, the browser is (probably) Internet Explorer, which supports web fonts. So, we can turn sIFR off.

Finally, any browser that needs sIFR will execute MYSITE.setSifr();, adding the custom fonts to the page.

This should provide custom font support in most major browsers. The only caveat is that a suitable fallback should be chosen (one that looks similar to the @font-face font, rather than sans-serif mentioned above), as browsers without Flash or without JavaScript will see the fallback font if the browser doesn’t support web fonts.

Since we have a suitable fallback with sIFR when web fonts aren’t available to the browser, there is a good enough methodology for implementing custom typography on live sites that don’t support web fonts. Until Firefox releases support for web fonts, it may be too much trouble to implement. However, in the spirit of progressive enhancement, one could skip the sIFR step and simply allow the installed system font fallback, as pixel-perfect cross browser support is turning into an obsolete, undesirable practice and progressive enhancement is becoming common place.

The final rub is Microsoft’s persistence in supporting EOT and not TrueType or OpenType fonts. While it is possible to get web fonts in Internet Explorer, it is a royal pain to create EOT files. If it’s too much effort, using sIFR or keeping the tenants of progressive enhancement with CSS may be a workable solution.

So, it seems web fonts have almost come of age. Once Firefox supports @font-face, web fonts can be used on a wide scale. While you may not want to jump on the bandwagon yet, it is definitely time to start looking into web fonts.

Internet Explorer Version Targeting Finally Makes Sense

Tuesday, March 4th, 2008

I kept mum about Internet Explorer 8’s version targeting to see how things played out. It looks like Microsoft did the right thing for real web developers.

Version targeting allows the web developer to pick which version of Internet Explorer’s rendering engine he or she would like to use. This is great for big sites (like banks) because they can forever have a site that works in buggy Internet Explorer 6. No more freak outs when Internet Explorer updates like there were with the update to version 7. The problem wasn’t that they were introducing a proprietary header / meta tag. The problem was that all future versions of Internet Explorer would render like version 7 unless the developer opted in for the newest rendering mode. That’s right. A large majority of people would be forever designing with Internet Explorer 7!

The solution several web celebs they would adopt would be to set the version to edge to always get the latest version in an attempt to tell Microsoft that good developers don’t want to use it. The problem is that developers had to use it to not use it.

Fortunately, Microsoft came to their senses and announced they would keep version targeting but have the default behavior use the latest rendering engine. The claim is that they are trying to support the new Interoperability Principles published in February. No doubt part of the problem was the overwhelming response against defaulting to version 7 from the web standards community. Either way, I’m glad Microsoft decided not to pander to the people causing the problem.

Everyone is happy now that Internet Explorer 8 will really pass Acid 2.

  1. Jeffery Zeldman’s Post
  2. Lachlan Hunt’s Post
  3. Roger Johansson’s Post
  4. Hixie’s Blurb
  5. Web Standard Project’s Post
  6. And it even made it to Slashdot

I am thankful I don’t have to add (in addition to conditional comments) more Microsoft related junk to the head of my boilerplate.

Saving Images For The Web

Monday, February 11th, 2008

There are a lot of people creating graphics for the web. A significant portion of those people have no understanding of how to optimize images. I’ll attempt to explain it.

Typically, I’d explain when to use each format by looking at the format and exposing the flaws and virtues. Most non-geeks would get lost, though. While I will discuss file formats out of necessity, my aim is to discuss styles of graphics and how to optimize them the best way.

All the instructions are given in Gimpshop, the GIMP with modifications to make it more Photoshop-like. Typically these are similar to Photoshop. I planned to do Photoshop, but I don’t have regular access to it. I tried to note differences where I could remember. I’ll try to update this eventually with Photoshop instructions.

A Quick Note About The Scope of This Article

There are two ways to display images: vector and raster. Vector images are stored as formulas that, when combined, represent an image. Raster images are stored colors and coordinates of dots (called pixels). The web-safe raster formats (the subject of this article) are JPEG, GIF, and PNG.

Vector graphics have a very strong place in the design industry. Any serious designer making logos will be making them as vector art, for example. Vector images are infinitely scalable without quality loss and are very powerful in the right hands. The web at this time, however, is raster.

While there are vector image formats for the web (SVG and Flash are two major ones), most web graphics are raster. Vector graphic support, at the time of this writing, requires plug-ins for viewing or has limited browser support. To boot, I’m not clear how much optimization can be done to vector graphics compared to the likes of raster web formats. So, I’ll be sticking to raster images.

Three Typical Scenarios

When creating art for the web, there are three typical scenarios where images are needed:

  1. Line art and Icons
  2. Photography
  3. Design Graphics

I’ll go over each scenario and explain what it is, how it is used, and the typical way to output an attractive looking, lightweight image file.

Line Art and Icons

Line art and icons are either very simple images of varying dimensions, or very complex images at a very small dimensions. The line art moniker includes graphics like clip art, comic style art, or any graphic that has very few colors with lots of solid colors. Icons, in this instance, can be things like logos, simple graphical representations of concepts (for example, a contact us link may be represented as an icon of an envelope), or very small thumbnails (say, 50 x 50) of larger images.

What line art and icons have in common is low color depth. This makes these images ripe for indexed colors. That is, by throwing out unneeded colors, the file can be reduced in size. Likewise, changing similar colors to the same value reduces the file size. Two file formats play well with indexed color: GIF and PNG. To boot, both of these formats allow for transparency.

Before you create the file, make sure your image is 72 DPI. You can do this by opening Image > Image Size in both Gimpshop and Photoshop. The resolution should be set to 72. If you are using Gimpshop, you get the odd choice of setting independent resolutions for X and Y. Make both 72. You may have to adjust your width and height after you change the DPI.

In Gimpshop, select Image > Mode > Indexed Color…. In the Indexed Color Conversion dialog, select Generate Optimum Pallet. You will need to use trial and error to pick the maximum number of colors since GIMP provides on way to preview the image. The fewer the colors, the better, though. Once you’ve figured out the optimum number of colors, click OK. Gimpshop will then do the heavy lifting of removing extraneous colors. Then select File > Save a Copy…. In the save dialog, type in your file name with the .gif or .png extension. In either format, I suggest using interlacing (since it shows a visual progressive download). I usually disable all the other options, and set the compression level to 9 on PNG images. This will yield a similar file size for either format.

Photography

Photography is typically comprised of millions of colors and / or shades and is presented at larger dimensions than icons. Due to this, a format that can handle higher colors is needed. GIF is only good for up to 256 colors and full-color PNGs are often very large. This is where JPEG comes in. It allows you to present photography at full color while offering varying levels of compression / quality.

Determining the best quality setting is a per-photo trial-and-error process. Dark colors against light colors at lower quality settings tend to look particularly bad at the edges. So, it is important to always adjust the quality to various places to finesse the best file size / quality ratio (or bang for the buck, if you will). I’ve also found that Photoshop outputs better looking JPEGs at a given quality than Gimpshop. So, if you have the option, try Photoshop.

Before you create the file, make sure your image is 72 DPI. You can do this by opening Image > Image Size in both Gimpshop and Photoshop. The resolution should be set to 72. If you are using Gimpshop, you get the odd choice of setting independent resolutions for X and Y. Make both 72. You may have to adjust your width and height after you change the DPI.

In Gimpshop, File > Save a Copy… and enter your filename with a .jpg extension. After you click Save, you will be presented with JPEG settings. Click the Show Preview in image window checkbox. Then adjust the slider until you get the best picture at the lowest file size (shown dynamically just below the slider). Under Advanced Options, turning on the Optimize checkbox will further shrink the file size. Turning off Progressive will make the file smaller, but will also make the image not appear progressively as it loads in the web browser. If the file size is already low, you may not need progressive. If it is larger, a few extra kilobytes may be worth it to pop the image content up sooner in an attempt to grab the viewers attention and keep them on your page. You’ll want to turn off the Save Thumbnail. The other options may yield subtle changes to your photo and may change the file size a little. You probably won’t need to change these from the default. Finally, click OK.

Design Graphics

The graphics that make up the design of the site are often sort of like photography and sort of like iconography. That is, they may have far more than 256 colors, but don’t show a photo. Also, these graphics tend to have drop shadows or transparency, which makes them a little more unique.

With one exception, optimizing design graphics is a trial and error between GIF / PNG and JPEG. Sometimes indexed color works best, and sometimes JPEG’s lossy compression works best. The bonus for design graphics is that you don’t have to wrestle with bang-for-the-buck as much. Due to the way browsers work, the images are cached (stored on the user’s computer) and aren’t downloaded every time the page loads. So, you can typically have a little bit heavier file sizes to make the page look better. Just don’t forget: the user still has to download the image, and long downloads irritate people.

The one exception is transparency, and that comes in two flavors: translucency and transparency. Translucency is usually referred to as alpha transparency or just alpha.

If you need an area to be fully transparent, GIF or PNG will work in the indexed mode. Follow the directions above for line art (even if it isn’t technically line art by my definition).

Things like drop shadows or antialiased edges (rounded corners, for example), however, need to be full-color (or 24-bit) PNG in order to take advantage of alpha transparency. You’ll notice if you have antialiased edges and you use an indexed PNG or GIF, your edges will be jaggy and/or you’ll have to specify a matte color. Mattes are problematic if your background color isn’t solid, as the matte may not match the color of the background. In this case, you’ll want to use 24-bit PNG. 24-bit PNGs tend to be much bigger. You may want to manually index the image or use tools such as PNGCrush.

Saving alpha PNGs differs from saving indexed PNGs in that you simply don’t index the colors before exporting. Simply File > Save a Copy… with the .png extension. If you are using Photoshop, you must select the PNG 24 option in the Save For Web dialog. Once it’s saved, drop it on PNGCrush to remove any unneeded data.

One final note about design graphics is that PNGs can store additional information about an image to specify a color space (called gamma) that can cause the colors in the image to be different than identical color values in a browser. If you are using Gimpshop, you should be able to uncheck the Save gamma option to prevent this problem. Also, if you use PNGCrush, these values should be removed automatically. Since the gamma debacle is a big topic by itself, you can see how other people remove them or read the number one article in Google at the time of this writing.

You’re Done

That is the short version of exporting graphics for the web. If you find that clarification is needed or that I missed something, please leave a comment below or e-mail me from my contact form and I’ll do my best to answer your questions.

WYMEditor HTML Textarea Loses Focus

Thursday, January 24th, 2008

I’ve been using the WYMEditor on a little content management system I’ve been building at work. I was having a problem where I couldn’t edit in the HTML editor. Every time I clicked, the HTML textarea in WYMEditor would lose focus.

It turns out the problem was the way I used my label for the textarea that turns into the WYMEditor. There are two ways to use label. One is to tie the element to a form element via for="element-id" where element-id is the id of the form element. The other is to simply encapsulate the form element inside the label. I was doing the latter since I had written CSS to display forms.

labels focus the corresponding element when clicked (or when elements inside them are clicked). If you click the element directly, the focus doesn’t change. What I was failing to realize was that WYMEditor was putting the replacement / overlay inside the label. The visual editor itself uses an iframe, which overrides the label. The HTML Editor portion uses another textarea. In FireFox, when I clicked the textarea to edit, the focus would shift to the hidden (and first in the code) textarea.

The solution was to use the for method instead of the encapsulation method for WYMEditors and modify my CSS.