Thought on modern webpage layouts + iPhone OS Resource limits

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.

Know iPhone OS Resource Limits

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:

  • The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels. That is, ensure that width * height * 1024 * 1024. Note that the decoded size is far larger than the encoded size of an image.
  • The maximum decoded image size for JPEG is 32 megapixels using subsampling.
    JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled, that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
  • The maximum size for a canvas element is 3 megapixels. The height and width of a canvas object is 150 x 300 pixels if not specified.
  • Individual resource files must be less than 10 MB.
  • This limit applies to HTML, CSS, JavaScript, or nonstreamed media. JavaScript execution time is limited to 10 seconds for each top-level entry point. If your script executes for more than 10 seconds, Safari on iPhone OS stops executing the script at a random place in your code, so unintended consequences may result. This limit is imposed because JavaScript execution may cause the main thread to block, so when scripts are running, the user is not able to interact with the webpage. Read “Debugging” for how to debug JavaScript on iPhone OS.
  • The maximum number of documents that can be open at once is eight.

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 »

Leave a Reply

Your email address will not be published.

One Response to Thought on modern webpage layouts + iPhone OS Resource limits