 |
 |
IE6 and PNG TransparencyThursday, April 17. 2008Almost seven years after its release, it's rather amazing that developers still need to support IE6. According to w3schools, IE6 currently accounts for roughly 30% of web traffic, so support it we must -- at least for now. The limitations of IE6 are well known, but one of the more irritating of its failures is the lack of support for PNG transparency. Of course, it does support GIF transparency... but GIFs don't support alpha transparency, only giving you completely transparent or completely opaque states for any given pixel. Hence those ugly halo effects around poorly created GIFs or when a transparent GIF is moved onto a different background color than it was originally matted for. PNGs give you alpha transparency, allowing smooth edges and variations in transparency, opening up far greater design options. Fortunately there is a way to overcome most aspects of this limitation of IE6, allowing the use of PNGs. Better yet, it requires no changes to your HTML and involves adding only a single line to your CSS. The version I currently use was created by twinhelix.com and can be downloaded here. Alternately, there is also a jquery version that appears to work in much the same manner. Below is an example from a site we recently worked on. The design called for a 3D bar graph to float on top of an auto-rotating slideshow. On the left, you can see what the bar graph image looks like in IE6 without the PNG fix. On the right is how it looks in modern browers... as well as how it looks in IE6 once the fix is in place. To see how the PNG interacts with the slideshow, please see the live site at www.usip.org/building/. 
The fix does not create full PNG support, so it's not perfect. Most notably, transparent PNGs can be used as background images, but they cannot be tiled (i.e., repeat-x or repeat-y). In other cases you may need to specify a height or width other than 'auto' to get a particular image to display correctly. However, for the most part it works beautifully and allows the use of far more elegant design solutions in IE6 at very little cost. Browser trends: IE7 way up, IE6 down, Safari & Firefox gainingTuesday, January 2. 2007 Nothing like opening the year with browser stats. Net Applications, a company in the business of selling website stats monitoring widgets has its most current browser usage stats online. I'm always a little weary about the reliability of browser usage stats. I am even more weary about how people interpret them. If Safari has 4.24% marketshare does that mean we can forget about it, and only make sure webpages works in IE6/7? I think it's more important to see where things are going. It seem Firefox and Safari are gaining whereas IE is losing ground (although it still commands a whopping 85%).  Another question I find myself asking is, why should we care? Shouldn't all browser work off the same web standards and render each page the same? Just like all cars work off the same gas, have standard tires, and take the same oil? Hopefully with the seemingly rapid adoption of better-standards-compliant IE7 those concern would be better addressed, and we are a little closer to living in a world with clean rendering on all browsers. All we have to choose then is whether to have leather seats or mag wheels. It's hard to know how true these stats are, but I am so ready to believe the combined marketshare of IE5.0/5.5 is less than 1%. Convenient Screen Capture toolThursday, November 30. 2006 Paparazzi is a Mac-only (sorry PC users) screen capture app that lets you take capture of the browser-length or full page-length of a webpage. No more Shift+Cmd+4 and pasting in Photoshop. The best part is, it's free. what i'm reading...Friday, September 8. 2006
designing for IE -- you're probably doing it backwards
the difference between outlines and borders
where am i?
ClearType now a browser-specific feature in IE7
ClearType tuner
rev2.org
colorzilla
just things i've run acrossMonday, July 31. 2006Firefox ExtensionsMonday, July 17. 2006 If you're reading this, it more than likely means you're rather intelligent. Which would also mean that you're not using Internet Explorer. If so... then this is for you. The following is a list of Firefox extensions that I frequently use. Some just make browsing easier in general... but many make graphic design, coding and getting things to work in IE much easier. In particular, the first two are must-haves. Feel free to mention your own useful extensions or add-ons in the comments section. Colorzilla gives you an eyedropper and other tools to gather color information. incredibly useful. Web Developer adds a menu and toolbar with various web developer tools (outline elements, view source, validation, element size and order, color eyedropper, etc.). IE Tab enables you to use the IE engine within a firefox tab. TabPreview get a thumbnail view of a page when you hover over its tab. NukeAnything remove any element on a page via the context menu. Duplicate Tab allows you to duplicate tabs or merge windows. Tabbrowser Preferences enhances control over tabbed browsing. Bookmarks Synchronizer connect to a server and synch your bookmarks across multiple computers. also recommended is FoxMarks, which will keep your bookmarks on their server instead of needing your own. Plain Text Links treat selected plain text urls as links, right click to open. Linky open/download/validate multiple links and pictures in tabs or windows. TabFX more nifty tab browsing enhancements. Open link in... adds more opening options to the context menu for links and images. Browser usage statsWednesday, July 12. 2006 |
QuicksearchAbout This BlogThe User Experience & Design Blog covers issues that affect the web user's experience, which include information architecture, usability, accessibility, web development and latest trends. It is authored by the User Experience & Design Team at Forum One Communications, a web strategy/technology firm in the Washington DC area. CategoriesSyndicate This BlogForum One Blogs |
Comments
Sat, 21.06.2008 14:10
very nice
Tue, 03.06.2008 05:13
Hi, Regarding Method #3: You can get rid of the long dashed focus border that shows in Firefox by adding 'overflow: [...]
Tue, 29.04.2008 17:45
Thank you for the assistance. It worked perfectly.
Mon, 31.03.2008 09:38
Ditto what Anna said. Each time a Project Mgr or a biz owner asks me, "when are we doing user testing"? They are [...]
Thu, 27.03.2008 16:35
Your points on the idea that you're testing a site, not the user, are well taken. But I think "user testing" can be [...]
Thu, 27.03.2008 13:18
Thanks for the great stencil. Could I talk you into applying a license to the stencil like from Creative Commons or [...]
Tue, 25.03.2008 22:08
Dave, you actually raise a good point that I think gets overlooked very often. Laptop/touch pad users tend to get [...]
Tue, 25.03.2008 14:58
To add to the semantic mix-ups, there's also User Acceptance Testing (UAT) which usually consists of testing the site or [...]