From a design standpoint, what makes a good website is often a matter of personal taste more than anything else. Often the decision will be made to attempt appealing to the widest audience possible; other times you’ll be going for a niche look. With traditional web design you have a lot of room to experiment with visual elements, layout, color and such, once the initial design direction is decided. With the iPhone, the decision process is critically different.
If you’d like to illicit any sort of positive reaction out of your visitors, your UI choices are fairly limited. While desktop users have grown accustomed to navigation being down the left or on the top of a site, web designers often place navigation elements in a variety of non-traditional places.
With an iPhone user interface, the ability to present navigation elements is greatly reduced. Consequently, you should consider maximizing screen real estate by creating your design with the utmost consideration to usability. Often this is solved in a similar fashion to native apps, with a title bar, or chrome, which allows level based navigation via toggle buttons in the content area and a back button in the menu bar.
SVG
Apple’s iPhone supports SVG specification with version 2.1 of their software. Being Vector, SVC images are scalable, allowing them to take full use of the 163 pixel-per-inch iPhone display. More on SVG to can be found on via this link. http://www.w3.org/TR/SVG/
Gif
Gif animation is unsupported at this time, with gif’s displaying the first frame from the animation as a still image. You may consider CSS transitions if you are interested in creating basic animations for pages viewed using the MobileSafari browser.
Native app integration
The ability to have your website interact with the native applications on a smartphone opens up a whole world of new marketing and presentation capabilities. From ecommerce to geolocation, the iPhone provides a unique platform from which to sell and market your goods or services.
In chapter 10 we’ll provide example code to show you exactly how to tap into these powerful interactive capabilities, explain the purpose of interacting with each supported application, and show you examples of how to use these techniques to increase customer response for your mobile visitors.
Code Optimization
When creating web content for mobile, every kilobyte of file size adds to the initial download time. Due to the fact that the connection speed on a mobile phone is so much slower than traditional broadband connections, it is even more critical to ensure your files, images and other media are optimized for optimal display on this platform.
Code comments and white space, for example, lend to the readability of your code and make it easier to update. The downside is that these extra characters take up unnecessary space in the file.
Consider Minifying or compressing your CSS and JavaScript using an online tool such as CSS Drive Gallery compressor, which can often reduce the size of files by as much as 30-50%. Typically, I save uncompressed copies of my file structure and use this for updates. I’ll then re-compress any files I’ve updated prior to updating the dev or live server. In this way, I retain code readability; yet at the same time deliver the smallest possible file to the client.
Another option worth consideration is using gzip compression on the server side.
Finally, be sure to remove any references to legacy files and delete unnecessary code from your final framework.
Cached Files
You may consider separating your CSS, JavaScript and HTML into separate files to improve performance. MobileSafari will cache the files (provided the user has not disabled caching) and use these cached files on subsequent requests, as opposed to requesting fresh copies of the unchanged files. This consideration should be balanced against the server request recommendations that follow. Each developer will need to find the proper combination of cached files and optimum load balancing which ensure the quickest page load possible.
Cutting Down Server Requests
MobileSafari is only capable of making two HTTP requests at a time, with subsequent requests being queued up until a previous request is completed. This can result in increased load times, particularly if you have a lot of external files referenced in your HTML.
To minimize load time, consider moving your JavaScript requests to the bottom of the page. If they are not needed to initially render the page, it may be beneficial to load the HTML content first, then the JavaScript functionality once the user has received the content. This will provide an opportunity for the rest of the files to load after the user has received the page.
File Name Optimization
One final point on optimization is that shorter image names will cut down on memory. This can be significant if you use a lot of images on your site. Take care that your naming conventions are such that you are able to identify the image at a later time. Names like a1.jpg may give no indication of what the file name is, unless you declared a convention where the “a” stood for “About” and that was the first image on that particular page.
Debugging Your Mobile Website
When creating web projects of any type, it’s advisable to test and debug your program or site to ensure the desired usability on your intended platforms. Anyone who has created a production-ready website is likely familiar with the debugging and hacking process needed to ensure compatibility with Microsoft’s Internet Explorer browser. For those people, I bear good news. You are essentially developing for a single browser!
MobileSafari is built on the WebKit engine, and provides a fairly robust feature set. Recently, other browsers have begun appearing in the App Store, but for the foreseeable future it’s fairly safe to assume that MobileSafari is the de-facto standard for iPhone browsing.
MobileSafari provides an integrated debugger, which you can activate in the Settings -> Safari -> Developer -> Debug Console. When this tool is active, MobileSafari will return information in the viewport as pages are loaded. This is useful in tracking down JavaScript or other rendering errors.
Another useful tool is Joe Hewitt’s Firebug. This client-side Firefox plug-in provides a robust toolkit for analyzing your pages for load time, errors, and may provide indication on ways you can more effectively optimize your presentation. More information on Firebug can be found at http://getfirebug.com. You may also look into Firebug for iPhone. http://www.joehewitt.com/blog/firebug_for_iph.php
Shaun, great points! I’m getting ready to redesign our mobile site and I’m glad I read your article.