Apple publishes ‘Optimizing Web Applications and Content for iPhone’

Apple published Guidelines for developing web content for the iPhone over at http://developer.apple.com/iphone/. It’s good to see a focus on standards based development being encouraged there, it makes sense given that the Safari browser on the iPhone has great support for XHTML and CSS, particularly CSS 3 properties – of which the iPhone makes particular use of, more of that in a moment.

Quick overview of the Guidelines…

The guidelines are split into several sections:

  • Understand User-iPhone Interaction
  • Use Standards and Tried-and-True Design Practices
  • Integrate with Phone, Mail, and Maps
  • Optimize for Page Readability
  • Ensure a Great Audio and Video Experience
  • Know What Safari Supports on iPhone
  • Connect With Web Developers

Understand User-iPhone Interaction

This section introduces you to the whole concept of interacting with the iPhone, mainly that the input device is not a mouse but your hand so it’s not as precise as a mouse so web interfaces for the iPhone need larger click targets to interact with. As has been pointed out on various blogs there is no copy and paste, but there is also no drag and drop or text selection either so this is another factor to keep in mind.

Safari on iPhone doesn’t have windows that can be moved around or have scroll bars like a conventional browser, content is resized intelligently to fit the viewing area, it is recommended to avoid wide blocks of text. Double-tapping is used to zoom in to content.

Use Standards and Tried-and-True Design Practices

This section really reinforces the use of web standards for designing pages for the iPhone. Makes the point that Safari on iPhone uses a ‘real’ browser in that it doesn’t use stylesheets targeted towards handheld devices, it’s intended to give a rich browsing experience by supporting HTML 4.01, XHTML 1.0, CSS 2.1, partial CSS 3.xx, JavaScript 1.4, DOM support, AJAX, XMLHTTPRequest.

It encourages the use of separate HTML, CSS and Javascript as well as using valid HTML, and also optimised images and script content to keep sites running smoothly.

Apple published Guidelines for developing web content for the iPhone over at http://developer.apple.com/iphone/. It’s good to see a focus on standards based development being encouraged there, it makes sense given that the Safari browser on the iPhone has great support for XHTML and CSS, particularly CSS 3 properties – of which the iPhone makes particular use of, more of that in a moment.

Quick overview of the Guidelines…

The guidelines are split into several sections:

  • Understand User-iPhone Interaction
  • Use Standards and Tried-and-True Design Practices
  • Integrate with Phone, Mail, and Maps
  • Optimize for Page Readability
  • Ensure a Great Audio and Video Experience
  • Know What Safari Supports on iPhone
  • Connect With Web Developers

Understand User-iPhone Interaction

This section introduces you to the whole concept of interacting with the iPhone, mainly that the input device is not a mouse but your hand so it’s not as precise as a mouse so web interfaces for the iPhone need larger click targets to interact with. As has been pointed out on various blogs there is no copy and paste, but there is also no drag and drop or text selection either so this is another factor to keep in mind.

Safari on iPhone doesn’t have windows that can be moved around or have scroll bars like a conventional browser, content is resized intelligently to fit the viewing area, it is recommended to avoid wide blocks of text. Double-tapping is used to zoom in to content.

Use Standards and Tried-and-True Design Practices

This section really reinforces the use of web standards for designing pages for the iPhone. Makes the point that Safari on iPhone uses a ‘real’ browser in that it doesn’t use stylesheets targeted towards handheld devices, it’s intended to give a rich browsing experience by supporting HTML 4.01, XHTML 1.0, CSS 2.1, partial CSS 3.xx, JavaScript 1.4, DOM support, AJAX, XMLHTTPRequest.

It encourages the use of separate HTML, CSS and Javascript as well as using valid HTML, and also optimised images and script content to keep sites running smoothly.

Integrate with Phone, Mail, and Maps

This section starts to get to more of the iPhone specific code examples that hook into the dedicated apps on the iPhone. You can click on Telephone numbers in Safari and the number will be automatically dialled, Safari will automatically convert numbers that look like phone numbers into telephone links. However you can format a telephone link on purpose:

<a href="tel:1-408-555-5555">1-408-555-5555</a>

Email links are in the standard format and open up Mail in order to send an email., links to Google maps take the standard link format also but these are opened up into the dedicated Google Maps application on the phone. I believe that links to YouTube movies do something similar but there is no mention of this in this section.

Optimize for Page Readability

This section gets more interesting and links back to my initial mention of CSS 3 properties. If you want to provide a particular window size for a page to be viewed on the iPhone you can set an iPhone specific stylesheet by using a CSS 3 media query like so:

<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />

There are more guidelines for laying content out for the iPhone viewport such as a recommended width of 320px so that the layout doesn’t change between portrait and landscape modes. It also details some webkit specific CSS properties to help control text sizing. Image formats supported are JPG, PNG, GIF and TIFF.

Ensure a Great Audio and Video Experience

Formats and bitrate advice is provided here to help optimise video for WIFI and EDGE network capacities. Maximum video dimensions of 480 x 360px are recommended. Formats supported are H.264, MPEG-4, AAC-LC, .mov, .mp4, .m4v, .3gp file format, video or audio that can play on an iPod.

There is advice for the server side of providing audio and video for use on the iPhone too, interestingly the RTSP protocol is not supported but apparently only video via HTTP streaming.

Know What Safari Supports on iPhone

This set of guidelines covers the resource capacity of Safari on the iPhone. Downloaded resources such as CSS, HTML, Javascript, images or other non-streamed media must be less than 10Mb. Javascript execution is limited to 5 seconds before it times out, this will really mean people having to review their use of the various javascript libraries available and make sure that only the bare essentials are present. Interesting to see how Adobe’s Spry library stands up on the iPhone.

Other information covers support for files including the various mime types, PDF is supported but not (as has been widely covered on various blogs!) Flash or Java. I think various browser testing scripts for detecting Flash will need to be updated to factor in the iPhone’s lack of flash support. I wonder how long it will be before we see Flash on the iPhone? It surely must be coming, seems like a missing piece of a puzzle to me? It also covers the Security support of Safari such as SSL and RSA.

Connect With Web Developers

It ends with some useful web development links including W3C, WHAT-WG and Web Kit project site.

There’s a real push throughout about the fact that web standards and associated best practices are an integral part of creating successful sites that work well on the iPhone safari browser.

When I’ve got a moment I’ll try out a the iPhone specific code, especially now that my friend Alyn seems to have successfully gotten his iPhone activated, more about that on his blog I’m sure.

~Rick

Nokia N95 first thoughts – my iPhone substitute!

Picture of Nokia N95I just got a Nokia N95 today, I’m pretty stoked to get this phone especially as I got it for free, although on condition of an 18 month contract with Orange. I notice that Amazon list the N95 without sim card for £459 so I’m happy with the deal I got from Orange.

iPhone substitute?

The phone is pretty slick, it’s a slider phone but it opens up both ways, one way for keyboard, the other for media player controls.

Although not quite as easy as simply rotating the device like the iPhone it is very easy to toggle from portrait to landscape view in most applications. This is especially good for web browsing I’ve found.

This is a rough list of features of the N95:

  • 5 megapixel camera, Carl Zeiss optics
  • DVD-like video, 640×480 pixel MP4/AAC
  • WIFI
  • Integral GPS & mapping functionality
  • 2.6" display 320×240 pixels
  • 160mb internal memory, Micro SD card slot
  • Symbian S60 Series 3.1 OS

I’m beginning to play around with it so I’ll write some more once I’ve gotten into it. I’m interested to see how the still images and video footage works out, the little I’ve used them so far is indoors with fairly low-light conditions and it’s definitely an improvement over my old Nokia N80 for still images.

Snappy interface

One thing I did notice is that it felt very responsive when navigating around the various applications. I read a few reviews of the N95 which criticised the N95 for being sluggish, I found the total opposite, maybe there was an earlier version of the firmware which didn’t work so well for the people who wrote these reviews. It’s certainly a lot better than any other Symbian based phone I’ve had.

Symbian Applications

One of the reasons I love the Symbian OS is the various applications that are available, not just commercial apps but various freeware / open source apps.

I’m going to have a good look for some interesting applications that really make use of all the hardware thats packed into the N95. One application I came across already is Movino:

Movino is a collection of applications for streaming and broadcasting live video from smartphones. The main applications are the following:

  • A client for S60 smartphones
  • A smartphone client for J2ME
  • A gui application and a QuickTime component for OS X
  • A video server for linux
  • A drupal web front end

Basically it lets you use the phone as a webcam source for things like Skype chats etc. I’m going to have to try this on my G5 tower at work and see how it goes, it sounds pretty cool though.

I’ll write more once I’ve used it a bit more.

~Rick

Mystery #2: AVCHD – answered by Final Cut Studio 6.0.1 update

In my recent post "Update on the ‘Four Mysteries of the Universe…" I highlighted the fact that 3 out of 4 ‘mysteries’ had been answered. Well, Apple answered mystery #2: AVCHD editing software today with the release of Final Cut Pro 6.0.1. The Final Cut Pro update page states:

New in Final Cut Pro 6.0.1 Update
Improves overall stability, resolves issues with long filenames on non-HFS systems, includes improvements for both FxPlug plug-ins and master templates. Log and Transfer support for the AVCHD format.

I think I can hear a collective sigh of relief from many Mac using purchasers of cameras such as Sony’s HDR-SR7 or HDR-SR1 cameras as they can now (after months and months since the cameras came out!) edit the footage from these cameras!

So, go get your wallets out and buy Final Cut Studio Pro 2 and get editing that AVCHD source footage!

~Rick

iAmSorryButIDidn’tUnderstandYouPhone

This post is not about a certain mobile phone that comes out this week, although I have to admit that I would be very interested in getting one if it was being released in the UK as well.

Track-and-Trace phone system = Lock-and-Load

I needed to use track and trace for a Western Digital NAS hard drive that I was getting swapped for a standard desktop version (due to it being sslloowweerr than a snail stuck in molasses). I tried using the website but the tracking code wouldn’t work either on Royal Mail or ParcelForce websites. This meant I had to call them up and get someone to check it for me.

Unfortunately I found that there was no human at the end but instead one of those lovely automated systems that wanted me to read the tracking code out character by character. I’d had a bad experience trying to use one with UPS before so I wasn’t hopeful.

My lack of hope was well founded as this system totally sucked too. It was completely incapable of understanding me, and I was speaking as clearly as possible! I spent about 25 minutes trying to make the system understand me and each time it went something like this:

Phonebot: Please say your tracking code one character at a time by only saying the letter or number required. For example: N S 1 2 3 4 5 and so on. Please say your tracking code now…

Me: C P 3 5 7 8 3 1 5 0 0 0 M A

Phonebot: Thank you, I will now read back the code as I heard it. If it is correct say ‘Yes’, if it is incorrect please say ‘No’: E P 3 5 7 8 3 1 5 0 0 0 M A.

Me: No.

Phonebot: Please say your tracking code again one character at a time by only saying the letter or number required. Please say your tracking code now…

Me: C P 3 5 7 8 3 1 5 0 0 0 M A

Phonebot: Thank you, I will now read back the code as I heard it. If it is correct say ‘Yes’, if it is incorrect please say ‘No’: C B 3 5 7 8 3 1 5 0 0 0 M A.

Me: No.

Phonebot: Please say your tracking code again one character at a time by only saying the letter or number required. Please say your tracking code now…

Me: C P 3 5 7 8 3 1 5 0 0 0 M A

Phonebot: Thank you, I will now read back the code as I heard it. If it is correct say ‘Yes’, if it is incorrect please say ‘No’: E P 3 5 7 8 3 1 5 0 0 0 M A.

Me: No. (…gggrrrrr….)

Phonebot: I’m sorry, we can try that one more time, please say your tracking code again one character at a time by only saying the letter or number required. Please say your tracking code now…

Me: C P 3 5 7 8 3 1 5 0 0 0 M A

Phonebot: Thank you, I will now read back the code as I heard it. If it is correct say ‘Yes’, if it is incorrect please say ‘No’: E P 3 5 7 8 3 1 5 0 0 0 M A.

Me: Aaaaaarrrgghhhhhggggrrrrrrr!!!!!!!

Phonebot: I’m sorry, a tracking code is required in order to track the status of a parcel, please make sure you have your tracking code and then call back. Click.

Me: What? It hung up on me? Huh??!!!?!!??!!!

I then repeated this whole thing about three times over! Eventually I tried another number and got a human being, but only after being faced with yet another automated system which made me try a few times again. But at least that one put me through to a human!

These kind of automated systems are supposed to save time, but all it did was waste 25 minutes of my time which was then dealt with by a human in about 30 seconds. These systems should at least send you to a human if it fails to recognise the code after a few attempts, not just hang up on me!

~Rick

Update on the ‘Four Mysteries of the Universe…’

Back in April I wrote a post entitled "Four mysteries of the Universe…" where I pondered over a few unanswered questions:

  1. Adobe’s European pricing for the CS3 suite
  2. Availability of AVCHD capable video editing software
  3. When are Apple finally going to ditch the really old Mac OSX 10.2-ish looking aqua pin-stripe header / main navigation graphics from their website
  4. Will there ever be a new version of Director released by Adobe?

Well, interestingly 3 out of those 4 questions have been answered! The only one outstanding is #1 – Adobe’s European pricing for the CS3 suite. I’ve yet to hear a better answer than exchange rate differences or pricing structures in global locales. On the plus side though Adobe’s profits are up 24%! ;)

Strike 2: AVCHD editing software

#2 mystery was solved when Sony finally brought out a new version of their Sony Vegas video editing software to allow those who bought their HDR-SR1 six months to edit their HD video footage!

Strike 3: Updated Apple.com website

#3 mystery was partially solved last week when Apple updated their website and got rid of the aqua pin-stripe navigation graphics. Although I have to say partially solved as the UK site has yet to be updated. I don’t really understand why the UK lags behind on offerings by Apple, when new products are announced they never appear until a few hours later than the US site. Don’t get me started on the unavailability of TV shows and Movies in iTunes, or maybe the iPhone but I’m not so bothered about that as it’s only just coming out in the US, but TV shows and movies have been available in the US for about 2 years now!

Strike 4: A new version of Director from Adobe

#4 mystery was solved after I’d been pestering a few people at Adobe for an answer to whether there would be a new version of Director coming anytime soon. I got an email reply from someone who pointed me to the Director FAQ page which states, albeit slightly uncommittedly:

Adobe has not published an official time frame for the next release of Director and generally does not disclose details of new releases more than 30 days before a product is expected to ship. However, our current planning assumption is that the next major release of Director will be in the second half of 2007.

Unfortunately I was too late to get on the Beta testing programme for Director, I would have loved to have had an opportunity to help test the next version of Director.

I’m glad it’s an app that’s going to continue to be developed although I do feel there is a big challenge being presented by the whole AIR (formerly Apollo) project and advances in Flash like PaperVision3D.

I’m a bit concerned that the lack of real announcements about this has caused many to consider Director dead in the water, I look forward to there being a public beta on Adobe Labs!

Other news…

Apple just announced updated information about the iPhone, namely that it will have longer than expected battery life and an ‘optical quality glass screen’ rather than plastic. The iPhone’s battery will provide:

  • 8 hours of talk time
  • 6 hours of Internet use
  • 7 hours of video playback
  • 24 hours of audio playback
  • 250 hours – more than 10 days of standby time.

Oh, and the Olympics 2012 logo still sucks! Also Hi to students from New College, Pontefract, thanks for your ‘insightful’ comments on my ‘Historical overview of Olympic logos’ article ;)

~Rick

Forget the iPhone…

Who cares about having a multi-touch interface, Safari web browser, enhanced voicemail features and widescreen iPod format when you can have Marioland and other NES ROMs running on your phone!

Picture of NES compatible phone

The phone is called the Gionee S20, the other cool thing about it is that it can hook up to your TV so you can play the games just like back in the day!

I have no idea if they’ll be available in the UK but I’m sure eBay will be a good source for them.

~Rick

Thoughts on WWDC07 keynote announcements / rumours

Rumours of iTunes movie rentals

If this turns out to be true then it means the FairPlay DRM scheme must now have the ability to do time-limited control of playback capabilities. This will definitely make a good addition for those with an AppleTV. If this story is true then the BBC iPlayer team should go talk to Apple right now!

Safari for Windows

Wow, I hadn’t thought about this, but seeing as Adobe’s Apollo (now known as AIR) initiative uses WebKit and runs cross-platform then it makes sense that a native Windows version of Safari would be possible. This will be very handy for web developers ‘stuck’ on Windows! It’s available now as a beta for OSX and Windows.

OSX 10.5 Leopard preview

Great looking set of features in there, I’m really liking the changes to the look and feel of the user interface. The iTunes-esque Finder looks to be a good update, I’m wondering how well those who really hate the current finder will take to this, will it be an improvement or not? I’ve not seen any concrete evidence that the Finder has been substantially rewritten, will this be the end of spinning beachballs when network volumes disappear?

~Rick