In developing the new site for Island Design Center of Maui this fall I had completed the entire site of 46 pages with approximately 160+ presentable items cleanly, programmatically and efficiently. It was easy to add plenty of new items to the site within the very precise footprint.
I was quite pleased with my work as I had indeed created the exact presentation as required by the designer Susan Byrne, (who for 20 years served fortune 500 companies in New York City with her own design firm. You can see her biography on the site.)
I felt I did so elegantly with as little code, http requests and ease of updating and changing code for unforeseeable future issues. Indeed a complete resize and some functional redesign was made with little additional cost because of the programmatic methods I used.
The things about the site I’d like to note before discussing my IPAD, iOS viewport and PNG issues and how I solved them are that:
- The site is entirely in images with no literal text at all.
- It has an exact pixel dimension and all elements also have exact placement and dimensions.
- The main site code consists of one HTML/CSS/PHP/JAVASCRIPT file.
- There are some 4 files with titles of projects which I could have included in the main file but felt it would be easier for anyone to edit them separate from the main file. (thus less typo potential accidents when editing).
- The images are all background images consisting of one large sprite file for the whole site, one file for the thumbnails, one file for the large images and a PNG file for crisp clean text covers.
This kind of work is my favorite. It gives me great pleasure to devise as simple and efficient a solution as possible.
When I originally created the site, I had made all text PNG cover files into one large file as well, to make for even less http requests. The first visit to the page would cache almost the entire site which realizes fast load times from caching. Each page with over 60 graphic elements is loaded in 5 http requests. This is all done programmatically with PHP in the main file, using simple arrays to position and reposition background elements inside
and block containers.
Once I completed the site, we found out the IPAD and IPAD2 offered some challenges.
The first challenge is that the viewport was showing a cut off version of the site. I fixed this on IPAD by adding . Problem solved.
Not so fast! IPAD2 had another opinion, namely telling me Thous Shalt not Pass! I scoured the internet for solutions and finally after reading the Apple IOS dev site, obtaining an IPAD2 for a day and testing testing testing – got the answer I needed fairly quickly. Eventually I found a solution that provides correct dimensions for the site on IPAD1 and IPAD2 in both Landscape and Portrait orientation.
Yeah! But this broke the site in other tablets… sigh. So a little php to only serve the extra tag to devices using iOS. Letting Android do it’s own thing.
if(preg_match('/(iphone|ipad|ipaq|ipod)/i', $_SERVER['HTTP_USER_AGENT']))
{print("n");}
The next challenge was harder to determine.
The PNG backgrounds used for project covers were not showing up on either IPAD version.
I scoured the web to no avail until I found.. in the dark heart of Apple’s iOS dev site a little snippet of information:
On iOS devices “The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.”
What this meant is that by caching PNG’s and reducing http requests I was also violating Apple Devs decision on how to limit the size of viewable images according to the limits of their devices. Ok, I can live with that. I split up my PNG covers into smaller chunks… one per page an extra http request on each page but still only 5 per page. My large 5 image size jpegs still load in one request because jpegs are compressed further than PNG’s essentially. (I hope this helps you if you have the missing PNG on iPAD, iOS devices.)
So now the site works in a larger and more popular array of devices.
Check it out and tell me what you think: