With the imminent death of IE6, the use of creative new webpage layouts has steadily increased. Many of these layouts use complicated nested structures + css2/3 styling. These newer layouts have also led to the increased use of the transparent png-24 image format and the widespread use of dynamic and gradient filled background images. This has led almost all web-developers to ask themselves the following questions. How much time should be taken to support IE6? Should we drive the final nail into the IE6 coffin? Increasingly designers and programmers are choosing the latter. If you visit this website with an older browser you will be greeted with a message to upgrade your browser and offered a choice of the most popular options. So IE6 is dead, everything is easy now right? Not really. Mobile platforms have their own quirks, one of which I will touch on below.
One of the most common problems I used to face with clients was the use of a sweeping gradient or patterned background with drop shadows cast over the background to provide a sense of depth to page elements. In order to attain this effect it’s necessary to employ transparent images. The problem is that IE6 fills transparent sections of a png-24 with a shade of gray. So then why not provide a neutral matte color/fill to the image and avoid using a transparency? If matte color is applied then the shadow suffers undesired effects like a “halo” or the lack of blending with the background. There are many ways to apply a drop shadow while maintaining IE6 compatibility however none work over a gradient background. Two years ago I would have addressed the issue by directing the graphic designers to modify the design — removing the need for a gradient background, or removing the drop shadow over areas of the gradient where a “neutral” matte color was insufficient. Now, with the imminent death of IE6, I use png-24 transparent images to create the necessary effect, keeping the designers happy and ultimately simplifying the page structure. Awesome – problem solved! Or is it?
In order to account for varying content area sizes while maintaining freedom for layouts these transparent images often have very large dimensions to prevent content from “breaking” the layout. As I started to test page builds on new platforms such as the iPhone an interesting issue appeared. Many of the background images — even those with very small file sizes (30-100KB) — were not loading. My first thought was that the mobile version of safari was having trouble rendering complex nested structures but after resorting to simpler layouts it quickly became apparent that the complexity of a layout wasn’t the issue. Something about the images themselves was causing them not to load. After an extensive search I found the following information in the apple knowledge base.
Your webpage performing well on the desktop is no guarantee that it will perform well on iPhone OS. Keep in mind that iPhone OS uses EDGE (lower bandwidth, higher latency), 3G (higher bandwidth, higher latency), and Wi-Fi (higher bandwidth, lower latency) to connect to the Internet. Therefore, you need to minimize the size of your webpage. Including unused or unnecessary images, CSS, and JavaScript in your webpages adversely affects your site’s performance on iPhone OS.
Because of the memory available on iPhone OS, there are limits on the number of resources it can process:
Even though the actual file size of the images in question were small, they exceeded the resource limitations of the iPhone by being larger than 3MP. I have been able to address the issue by shrinking the dimensions of the images without an impact on the design or the layout’s structure. Of course some layouts may require more work to accomplish the same look with smaller images.
«2010 NYC Five Boro Bike Tour - Pre Tour Woot.com 1/28/2010 Bag of Crap »
*Really* good to know! Thanks!