Progressively Enhanced PNG8 image
Jan/100
What is a Progressively Enhanced PNG8 image?
As against the popular belief that PNG8 images can only offer GIF like transparency i.e. pixels are either solid or completely transparent and never partially see-through… PNG8 images can be semi-transparent when saved as progressively enhanced. This has some great benefits:
- File size is much smaller in comparison to PNG24
- No ugly CSS or JS hacks are required to maintain image transparency
- Site maintenance cost is lower as there are no hacks or double images involved to maintain the layout
The only trade-off is that users with browser versions IE6 and below will see a slightly different version of the image… which in most cases would not be even noticeable or pretty acceptable.
How is it displayed in different browsers?
Similar to PNG24 in modern browsers like Firefox, Chrome, IE7 etc. Images with semi-transparent pixels will be displayed transparent in browser versions IE6 and below.
Below is a screenshot of how different PNG versions are displayed in IE6.
How to create a Progressively Enhanced PNG8 image?
Unfortunately this cannot be done in Photoshop but it is easy to create one in Adobe Fireworks. Here are the steps:
- Open your PNG24 image in Adobe fireworks (or create one in it)
- Select Optimize palette change the image type to PNG8 and select the transparency to Alpha Transparency
- Click Rebuild
- Export and save the image (File->Export)
- Done!!
References:
Margin: 0 auto does not works in IE6
Jan/100
Few days back while working on a project I created a simple <div> statement and gave it a class name which had margin:0 auto applied to it. As expected the div was centered in Firefox (my favorite developer browser… thanks to great add-ons like web developer and many more)… and with my usual tendency of checking the page in IE6 the div was aligned all the way to the left causing the whole layout to be f$#%$@ up!!
After spending at-least half ‘n hour tearing down the whole layout upside down thinking that there is some other element which is interfering with the layout I had no success and for another nth time I said to myself “I hate IE6″.
Long story short… it turns out that the solution for my problem was very simple. I was missing the <doctype> which resulted IE6 to go in quirks mode.
Further readings:
Who are usability’s cousins
Jan/100
Ever wondered what is the difference between these similar terms: Usability, User Experience (UX), User-Centric Design (UCD), Human Factors, Human Computer Interaction, Accessibility and Information Architecture. The video by Dr. Pete on usereffect.com explains these terms.
Usability is the science of making technology work for people. Usability helps make interface between people and technology seamless.
Usability’s Cousins
1. User Experience (UX) – same as usability
2. User-Centric Design (UCD) – focuses on building usability into the early stages of development process (even before the website is created)
3. Human Factors / Ergonomics – comes from engineering and is concerned with usability of machines
4. Human-Computer Interaction – comes from computer science and is human factors applied to computer hardware and software
5. Accessibility – related to usability but focuses on making things usable for people with special needs
6. Information Architecture (IA) – focuses on organizing information in building software and websites that are constructed in logical way