But even though Blueprint makes mobile web development so easy–there is only one code to write to cover all of the supported devices–there is still sometimes a need to deliver device specific content. For instance, a module that features videos should only be displayed on a phone that can actually play back videos. Or perhaps for an app store or consumables site that should only list items which will actually work on the user’s device.

Using Yahoo!’s request headers which are sent with every request to the developer’s server makes it possible to identify a device or even the device capabilities on the developer’s end. Depending on the header information, the developer can return optimized Blueprint XML back to Yahoo!’s infrastructure to get it rendered on the user’s phone.

The two most useful and most used headers are:

X-Device-Info
This header provides clear text information about the device maker, the model, and the operating system.

X-Device-Info: id=”4939392″; make=”Nokia”; model=”N95 8GB”; os=”Symbian”

X-Client-Accept
This header lists all the media types which are supported by the given browser. If you were to run a sports site that features a video section, for example, you may only want to return the Blueprint XML with the video section content when you see that the video media type is part of the X-Client-Accept header.

X-Client-Accept: video/, image/

Other headers can also be used to return region or language specific content. Please read the Headers section in the Blueprint documentation to see a full list of supported headers: http://developer.yahoo.com/mobile/blueprint/BPHTTPHeaders.html

Our Yahoo! Blueprint experts are there for you to answer your questions and to give you two sessions:

Using Yahoo APIs for the mobile web: content, location and context
Presenter: Ricardo Varela
Room: Huxley 342
Tine: 17:30 – 18:25; Friday 25 September

Introduction to mobile sites with Yahoo Blueprint
Presenter: Ricardo Varela
Room: Huxley 341
Time: 9:00 – 9:55; Saturday 26 September

More information about the event can be found at: http://overtheair.org

That’s because iPhone’s Safari browser allows mobile site developers to specify an icon to be put on an iPhone’s home screen when a user bookmarks the site. If this icon is not specified, however, the iPhone creates a mini-screenshot of the browser’s current page and uses that for a bookmark icon.

You can do the same with your Blueprint site. Since Yahoo!’s mobile homepage is built using the same technology as our site, you can surely implement your own bookmark icon as we do for ours. The trick is not yet documented, but we are happy to share it with you upfront:

- Create a 57×57 PNG file that you like to use as your icon. Example: slideshare_touch_icon.png - Put this image file in the resource/images folder of your ZIP package - In the config.xml, close to the <icon> tag, add another line: <icon type=”iphone”>…</icon>. Example: <icon type=”iphone”> slideshare_touch_icon.png</icon>. - In the space between the tag, fill in the image file name. - Submit your ZIP package. If you already have a Blueprint site up and running, you need to change the version number in the config.xml file and resubmit it again.

After the submission, click “Publish” and reload your page on the iPhone. When ever now a user adds your site to it’s home screen, your new icon will be used instead of the mini-screenshot.

After we made this extended device support available to Yahoo! internal properties in June, it’s now also available to all 3rd party developers using the Yahoo! Blueprint platform to build their mobile web experiences.

This is a huge step for the platform offering, since it makes your mobile sites available to potentially every user, regardless of which phone they are using. A mobile site developed with Blueprint can now be displayed with an wonderfully rich UI not only on iPhones, the Palm Pre, Windows Mobile phones or Series 60 3rd edition phones, but also at the same time – without you having to change any code – on amazingly popular devices (think Blackberry Curve, Nokia N70, Blackberry Pearl, and even the Motorola RAZR V3i) that do not come with highly sophisticated browsers.

Yahoo! Blueprint gives you, the developer looking to build a mobile web experience, an incredibly easy way to reach your users, no matter what device they are using. There are some devices which we do not support, but those are mainly limited to handsets that only support WML pages, can’t handle or support images or have strong memory restrictions.

Visit our Yahoo! Blueprint DevCenter to get the documentation and to learn how to get started: http://mobile.yahoo.com/devcenter

Here are a few examples:

Sony Ericsson W810i Screenshot:

Same page on an iPhone:

Blackberry 8800 Screenshot:

Palm Treo 650 (Palm OS) Screenshot:

There were 50 teams from various parts of Indonesia taking part in YMDA Indonesia, competing against each other build the best mobile-optimised applications for five of Indonesia’s leading corporate brands – Bank Negara Indonesia (BNI), Code Jawa, Excelcomindo Pratama Tbk (XL), VIVA News, and Yamaha Motor Kencana.

The teams built mobile applications based on briefs given by the sponsor companies. Submissions were judged on usability, quality, innovation, effective use of technology, and relevance to each sponsor company and its customers.

Best in show application

T Fuad (head of Y! mobile, SEA), Matthias Kunze (MD, Y! Mobile Asia), Winner of best in show and celebrity judge, Abdee Slank

You can go to http://www.flickr.com/photos/clasia_media to see pictures from the event as well as screenshots of the winning mobile applications.

Our friends from Yahoo! Developer Network spoke with Slideshare CEO Rashmi Sinha and CTO Jon Boutelle about the implementation:

The original YDN Theater video page can be seen here.

Ready to try it? Follow these steps:

1. Go to https://addons.mozilla.org/en-US/firefox/addon/59 and click “Add to Firefox”. After downloading the add-on, you will need to restart Firefox.

2. You’ll find a new menu item called “User Agent Switcher” in Firefox’s Tools menu. The Switcher comes with three predefined user agents for desktop browsers.

3. Identify user agents you want to test. Some manufacturers provide this information in their developer documentation, and sites like Wikipedia (http://en.wikipedia.org/wiki/Listofuseragentsformobilephones) can also be a good resource. To find your phone’s user agent, open http://whatsmyuseragent.com in the phone’s browser.

4. Add one or more user agents to the Switcher menu. In Firefox, choose Tools > User Agent Switcher > Options > Options… > User Agents > Add…; copy a user-agent string into the “User Agent” field and supply a descriptive name. Examples:

Description: Nokia N90
User Agent: NokiaN90-1/5.0607.7.3 Series60/2.8 Profile/MIDP-2.0 Configuration/CLDC-1.1

Description: Apple iPhone
User Agent: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; de-de) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/… Safari/…

Then click OK.

To see how your site looks on the selected client, choose the new user agent from the list in the “User Agent Switcher” menu and press Firefox’s Reload button.

Keep in mind that Blueprint does not support every client. But it works with most recent hand-held devices and browsers, and we are constantly adding more. We plan to extend device support significantly in June.

Get it here, print it and use it as your Blueprint cheat sheet: http://mobile.yahoo.com/pdf/handout-blueprint.pdf

With Blueprint for Mobile Sites you can easily create mobile web sites from Blueprint mark-up that look great and are optimized to work on a wide range of mobile devices and browsers. As this is a very time consuming process we’ve started with the higher-end devices and the current release of Blueprint supports about 300 devices. This covers the iPhone, the iPod Touch, the newer Nokia Series 60 devices, Windows Mobile devices and the latest Blackberrys.

In addition the mobile site can be viewed on all devices that support the Opera Mini browser. If we can’t display your site on a phone, we will prompt the user to install it.

When we take your Blueprint XML we want to ensure that it looks great on the several thousand devices we are targeting. You can imagine how many adjustments, how much QA and in the end how much time this process actually needs to take. Don’t think only about the screen size, think HTML support (and mark-up bugs), memory limits per page, maximum content sizes a device can handle and limited support for images.

The majority of the traffic in the mobile web comes from higher-end devices, most of which are supported today, but we understand that you (and we) want more – particularly outside North America. Therefore we are excited to let you know that we are in the final phases of rolling out dramatic increases in the number of supported devices as we extend our coverage to include older phones. We expect that by June your Blueprint sites will be rendered on more than 4000 devices and we will post an update once the release is available.

Thank you for your ongoing support and with your feedback we can make this platform even better.

We’ve separated the developer content from the rest of the Yahoo! Mobile site, which is targeted mainly at end users and consumers. The DevCenter offers easier, more consistent navigation, information relevant to developers, and room for all the additions we are planning. From the DevCenter, you can browse the documentation, get the latest SDKs, and manage your Blueprint applications.

Check it out at http://mobile.yahoo.com/devcenter — and update your bookmarks. (We also created redirects for those who prefer to keep their bookmarks as they are.) And be sure to let us know what you think.