Resize Graphics and Photos for iPad and iPhone
Don’t Clutter the Screen with Navigation Options
Create a Web Clip Icon for iPhones

Keep File Sizes Small for iPhone and iPad

When you design websites for the iPhone and iPad, you need to adjust images to have the best quality while occupying the smallest possible file size. These qualifications ensure that images download as efficiently as possible.

After you know how to optimize PNG and JPEG images and can appreciate the goal of making them as small as possible, you may ask, “How small is small enough?”

Mobile web designers obsess over ways to make their page sizes smaller, without crossing the invisible line between “It loads too slowly” and “It looks junky.” Although it’s a mostly subjective judgment call, the following points are good to remember:

  • The larger the graphics files, the longer people have to wait for them to download before they can see them. You may have the most beautiful picture of Mount Fuji on the front page of your website, but if it takes forever to download, most people aren’t patient enough to wait to see it.

  • When you build pages with multiple graphics, consider the cumulative download time of all graphics on the page. Even if each image has a small file size, their total size can add up. Smaller is definitely better on the mobile web.

  • Most web pros consider 75K (kilobytes) to 150K to be a good maximum cumulative size for all elements on a desktop web page. If your page is viewed over a 3G network, and you’ve limited the total size to no more than 150K most visitors will find the download time acceptable. If you expect many visitors on slower connection speeds, however, consider reducing the size.

    In the past, because the 2.5G data connections on the original iPhone delivered data from about 80 to 100 Kbps, a 150K desktop page in this size range took as much as 20 seconds to transmit. Most mobile users get frustrated and abandon a page that takes that long.

    The 3G and 4G networks promise data speeds that range from 500 Kbps to 1 Gbps, although the actual speed delivered to customers is the subject of rather fierce debate. Even so, if you keep your home page relatively small, your users are much more likely to stick around — and to click through to your interior pages, where you can experiment with bigger, more eye-catching designs and multimedia features.

    If your page is meant to be used by people at home or in offices where they have access to Wi-Fi connections, you can assume that the page will load on an iPad or iPhone almost as fast as it would on a desktop or laptop. Always remember to experiment when you’re pushing the limits in this way.

blog comments powered by Disqus
Create Specific Web Designs for iPhone and iPad
Resources and Software for Creating Wireframes
Assess Your Current Web Presence
Choose Image Resolution for iPad and iPhone
Enhance Your Site with Custom Fonts
Advertisement

Inside Dummies.com