I woke up late, only to see people tweeting about the conference (doh!), so I missed seeing Molly Holzschlag. But I arrived just in time to see…

Estelle Weyl: “CSS3 Implementable Features”

Estelle Weyl (@estellevw)

Estelle’s talk was about what features of CSS3 are available to use right now. She covered all the usual: border radius, text shadow, box shadow, tilted images, etc. And she showed off Paul Irish’s css3please.com, which greatly helps implement these cross-browser, with even the filter hacks required to pull it off in IE! (no word about the performance hit of these IE hacks, which I’m sure I’ve read about somewhere…)

One of the cool new things I learned was that you can use CSS shorthands to declare border-radius (rounded corner) values. So instead of this mess (courtesy of border-radius.com):

-webkit-border-top-left-radius: 1px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 4px;

All you need to do is this, which is equivalent to the above (disclaimer: I’m not sure about the compatibility of this shorthand!):

-moz-border-radius: 10px 20px 30px 40px;
-webkit-border-radius: 10px 20px 30px 40px;
border-radius: 10px 20px 30px 40px;

Or if you get bored of doing a perfectly rounded border radius, you can also do elliptical border radius (again, I’m unsure about the compatibility!):

-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 20px / 10px;

Matt Henry: “Going Mobile”

Matt Henry (@greenideas)

I’ve worked closely with Matt at Yahoo! Mobile for the past year, so not much was new for me. It seemed that the audience really dug the talk though (lots of questions were asked!).

Essentially, Matt explained that you have to make at least two different versions of your website: one for feature phones and one for smartphones like the iPhone, and with the help of something like WURFL, detect the phone and direct the user to the appropriate site.

Matt also emphasized that feature phone browsers are terrible, much worse than IE6.

As part of a response to someone’s question, Matt talked about the idea of feature detection on smart phones, essentially saying that by the time you’ve sent the JavaScript feature detection to the device, it’s already too late, and in some cases might end up crashing the browser (for feature phones that have an extremely small page weight such as 9KB). So for now it looks like user agent sniffing on the server-side is the way to go.

And there was a brief shoutout for Yahoo! Blueprint, which renders a website across thousands of phones.

Victor Tsaran and Todd Kloots: “Accessibility 101″

Victor Tsaran (@vick08) and Todd Kloots (@todd)

Before joining Twitter, Todd Kloots spent some time with Victor Tsaran at Yahoo! on accessibility.

In this talk they went over common misunderstandings and showed that even today, big companies such as Digg.com are still not investing in making their site accessible.

This was a pretty high level overview of basic accessibility, including an introduction to screen readers and ARIA attributes.

Here’s some of the stuff covered:
-making forms accessible with fieldset and legend elements and linking captions to their inputs.
-adding alt tags to images even if blank (so the screen reader doesn’t announce the entire URL)
-the title tag doesn’t make things more accessible, whereas the alt tag does
-screen readers obey display: none and visibility: hidden and that to hide something from normal users you have to position it offscreen (with negative left or text-indent).
-how to make basic tables accessible by taking advantage of table summary and caption, as well as putting tables headings into the <thead> element.

I’m still trying to absorb it, but Todd also mentioned that a simple anchor tag for a button didn’t semantically make sense, and that it was more semantic to have a span wrapped around a <button>. I guess I either don’t understand fully or I just disagree, since a <button> appears within a form and sometimes it just may be a cleaner solution to use a simple anchor tag. I guess I will need to look into this more.

Joseph R. Lewis: “Refactoring for Mobile”

Joseph R. Lewis (@sanbeiji)

This talk was basically a live demo of implementing CSS media queries in a WordPress installation to make an iPhone-friendly version of the site. There was a good use of the viewport tag, media queries, @font-face, text-shadow, box-shadow, border-radius, etc.

One surprising thing I learned was that apparently Mobile Safari recognizes border-radius without the webkit prefix? I’m going to follow up on this.

Dirk Ginader: “5 layers of web accessibility”

Dirk Ginader (@ginader)

Dirk is another Yahoo! (we’re everywhere!) whose presentation was also about accessibility.

As web developers, we’re already familiar with three layers of the web:

-HTML, responsible for content
-CSS, responsible for presentation
-JavaScript, responsible for interaction

Dirk introduced another two levels:

-CSS for JavaScript: special styling for when the full-featured JavaScript is available (this can be used by having JS add a “js” class to the document, and therefore writing CSS rules with “.js” in the front)
-WAI-ARIA: special HTML attributes to help define roles, landmarks, allow the developer to give instructions directly through the screen reader, etc.

Also a few more points:
-use the JavaScript focus() method for events (alerts that are injected at the top of the document and are otherwise ignored by the screen reader, windows that open and close, etc.)
-:hover CSS pseudoclass is for the mouse only.. be sure to also use the :focus pseudoclass! (my note: this is also important on mobile, for touch devices!)

Summary

Overall a great day. The food was pricey but good, and the whole event was free, so I can’t complain! Nice event, I just wish I could’ve seen the other talks in the other tracks!

Flickr for iPhone 1.2 released
Firefox Home For iPhone Approved, Lets You Sync Bookmarks, Open Tabs And More
Opera Mobile 10.1 for S60: W3C gelocation, border-radius & 2D transforms on S60 platform
Mobile Browser Cache Limits, Revisited by Ryan Grove
Mobile cache file sizes (and other performance tests on mobile devices) by Steve Souders
Out Of Nowhere, The iPad Has A Real Competitor: the Android-based Pandigital Novel
Ex-Apple Javascript Guru: HTML5 and Native Apps Can Live Together

HTML

[whatwg] The vision behind the <device> element and the ConnectionPeer interface: Hixie (Ian Hickson) explains the future of video conferencing, real-time games, and peer-to-peer file transfer from the browser
The id attribute just got more classy in HTML5: probably not very useful, but good to know. Summary: in HTML 4.01 you could use almost any crazy characters for class names (♥, ⌘, ⌥, etc.), and now with HTML5 you can do the same for ids.
<mark>: how do you use it semantically?

Events

FREE MobileMonday Night in the Park – Mobile Life and Demos (San Francisco)
$ DevNation San Francisco (August 14, 2010): $50 if you get the early bird discount!
$$$$$ Design For Mobile 2010: “Design For Mobile is the first and only North American mobile user experience conference. The focus is on strategy and tactics for user research, product definition, interaction and other design, and usability testing.” ($1,700 early bird discount)

JavaScript

JavaScript Programming Patterns: Klaus Komenda gives a concise explanation of the various coding patterns created over the years. Not a new post, but it’s so good that it’s worth mentioning.
DailyJS: A JavaScript Blog
Caveats of the JS Module Pattern
VIDEO: yayQuery Podcast Episode 19: HTML5, Sencha, John Resig, etc.
How ECMAScript 5 still does not allow to subclass an array

CSS

How media queries allow you to optimize SVG icons for several sizes
High DPI Web Sites: Dave Hyatt explains circa 2006 another way of targeting high-DPI devices (before media queries were around)
CSS3 PIE: “PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.”

Books

Introducing HTML5 (Voices That Matter) (Bruce Lawson, Remy Sharp)

Etc

VIDEO: Paul Rouget on Mixing the web! (Mozilla Summit 2010): mixing HTML5, CSS3, WebGL, websockets… etc
VIDEO: The Big Web Show Episode 12: Web Conferences: Andy McMillan and Eric Meyer
Caching Improvements in Internet Explorer 9
Web App Masters: Designing for Interesting Moments: notes from Bill Scott’s presentation Designing for Interesting Moments
CouchDB 1.0 released

(thanks to Chris Heilmann’s Tech Thursday for some of the links)

Flickr schwag: lens cleaner, phone cleaner, or iPhone 4 reception-enabler?

…and it helps if one of the speakers was once a member of your team (Markus was in Yahoo! Mobile until recently).

Markus Spiering of Flickr

I probably can’t chat too much about the future improvements they talked about, but I’ll just say there are some exciting plans for Flickr in the coming months! As you may already know, Flickr recently launched its new photo page. Markus went over some of the key new layout improvements, including the new prominence of geolocation and camera model information, which was previously buried deep in the exif info. He and Chris Martin also explained some of the improved photo navigation. Also, for anyone interested to know, the entire site was redone using YUI 3.

Chris briefly went over the public Flickr API they provide.

What’s really exciting is the amount of phones Flickr is being integrated into. It really says something when the top camera model for Flickr is the iPhone. More generally, just think of all the possibilities with packaging Flickr into lots of other phones out there (not everyone has an iPhone, after all!).

Markus was also proud to exclaim that not only was the native Flickr app featured in the recent WWDC keynote, but it was also featured in iPhone commercials around the world (“There’s an app for that…”). Coincidentally, later that day Apple approved the latest version of the Flickr app, which now supports uploading in the background!

Chris Martin of Flickr

Keep your eyes peeled on Flickr! Cool improvements heading to a screen near you…

YouTube Mobile Gets a Kick Start
Battle of Champions: HTC Droid Incredible vs. Palm Pre Plus
Designing for the Retina Display (326ppi)
AUDIO: John Resig: You Don’t Know Mobile (Webstyle Magazine) – ~$5,000 minimum to do mobile testing
Tapworthy: Designing Great iPhone Apps
eMobile: We have the fastest network in Japan!
Apple iPad User Analysis — Phase II
VIDEO: Using iPhone with a Braille display (Victor Tsaran)
Mobile Access 2010 (Pew Research)
BlackBerry and iPhone losing ground to Android, overall smartphone growth (comScore data)

JavaScript

JavaScript needs modules!
JavaScript Cache Provider (Dustin Diaz)
Writing Testable JavaScript

CSS

VIDEO: Nicole Sullivan on CSS (The Big Web Show)
CSS Media Queries & Using Available Space
Data URIs make CSS sprites obsolete (Nicholas Zakas)

Books

HTML5 For Web Designers
Tapworthy: Designing Great iPhone Apps
HTML5: Up and Running
JavaScript Patterns

Etc.

Web Forms: Semantic Mark Up in our Forms [part 2]
Non Hover – “Elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo-class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone.”
Video to ASCII conversion with Canvas
CAPTCHA slider
Rich snippets and structured markup (Google Webmaster Central) (SEO)
Firefox 4 beta 1 is here – what’s in it for web developers?

I guess I really haven’t been keeping up with the latest frontend trends (doh!), as I’ve just recently discovered this very elegant solution circa 2008 offered by Paul Irish, which sticks a class on the body tag using proprietary conditional IE tags (no JavaScript magic needed here!):

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if gt IE 9]>  <body>             <![endif]-->
<!--[if !IE]><!--> <body>         <!--<![endif]-->

No need for creating multiple stylesheets for each version of IE (that makes extra network requests… boo)! Now you can add adjustments to your main stylesheet just as you would with CSS hacks, except now you’re doing it in a not-so-hacky way.

For instance, if you have some peculiar CSS quirk in IE6, you simply apply a fix like this:

.some-element { width: 200px; }         /* standards-based browsers */
.ie6 .some-element { width: 160px; }  /* elegant ie6 fix! */

The old way: CSS hacks

Previously I considered some CSS hacks the most elegant solution, but that was in the days when IE6/7 ruled. You can see that the following CSS hack gets really unruly for IE8 (that hack thanks to David Bloom):

.some-element {
    width: 200px;                /* standards-based browsers */
    /* some yet-to-be-determined IE9 hack goes here */
    width /*\**/: 180px\9        /* targets IE8 standards mode */
    *width: 170px;               /* targets IE7/IE6 */
    _width: 160px;               /* targets IE6 */
}

This works, but becomes quite difficult to maintain and understand. And it just creates a need for someone to find yet another hack for each new version of IE that’s released. By using the IE conditional comments to add a class to the body tag, we can accomplish the same result in a way that is easier to read and maintain and is dead simple to update when a new version of IE is released:

.some-element { width: 200px; }
.ie9 .some-element { width: 190px; }
.ie8 .some-element { width: 180px; }
.ie7 .some-element { width: 170px; }
.ie6 .some-element { width: 160px; }

Woohoo!

Use the viewport tag to properly fit the content to the screen:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Use the tel scheme for telephone numbers, allowing users to initiate calls by clicking:

<a href="tel:18005555555">Call us at 1-800-555-5555</a>

Or use the sms scheme to initiate an SMS message:

<a href="sms:18005555555">
<a href="sms:18005555555,18005555556">          <!-- multiple recipients -->
<a href="sms:18005555555?body=Text+goes+here">  <!-- predefined message body -->

You also have access to several Apple-specific tags to use in your web application (iPhone and iPod Touch):

// iOS 1.1.3+: this is the icon that's used when the user adds your app to the home screen
<link rel="apple-touch-icon" href="/custom_icon.png"/>

// iOS 3+: full-screen startup splash screen image
<link rel="apple-touch-startup-image" href="/startup.png">

// enable full-screen mode
<meta name="apple-mobile-web-app-capable" content="yes" />

// controls the appearance of the status bar in full-screen mode
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

And also some handy attributes to turn off annoying autocorrect features (works on iPhone, but anything else?):

<input autocorrect="off" autocomplete="off" autocapitalize="off">

Mobile-specific CSS

Media queries enable you to target specific features (screen width, orientation, resolution) within CSS itself. You can use them two ways: 1) inline in a CSS stylesheet or 2) as the “media” attribute in the link tag, which targets an external stylesheet. The following is an example of inline CSS that’s applied only when the device is in portrait mode:

@media all and (orientation: portrait) {
	body { }
	div { }
}

Here’s the same media query using the other method, which points to an external stylesheet (not recommended, as it creates another network request):

<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css" />

Here’s a few examples:

// target mobile devices
@media only screen and (max-device-width: 480px) {
	body { max-width: 100%; }
}

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	// CSS goes here
}

// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
@media only screen and (min-resolution: 300dpi) {
	// CSS goes here
}

Read more: Media queries (Mozilla Developer Center)

Mobile-specific JavaScript

window.navigator.onLine (boolean): not strictly mobile, but helpful for apps to determine if they’re being run offline

window.navigator.standalone (boolean, iOS 2.1+): determine if it’s running in full-screen mode (Apple only?)

touch events (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel

gesture events (Apple only, iOS 2+): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)

orientationchange event: triggered every 90 degrees of rotation (portrait and landscape modes)

MozOrientation (Fennec/Firefox Mobile, Firefox 3.5+): also not strictly mobile. Gives access to the device’s accelerometer (x-y-z orientation data), updated periodically. Works on Android phones (I tested on the Nexus One), Windows Mobile, etc. On the desktop this works with laptops such as Thinkpads and MacBooks.

-near future: camera/microphone access in Android 2.3 (announced at Google I/O 2010) through the Capture API

If you’re developing for a BlackBerry Widget, you have access to proprietary information through the blackberry object (which gives access to useful information such as blackberry.network [returns values such as CDMA and Wi-Fi] and blackberry.system).

You also have the option to use PhoneGap, which augments JavaScript and gives you access to more phone features that native apps would have access to.

Use a mobile-optimized JavaScript library

Because smartphone browsers are standards-based, the aim of a JavaScript library on mobile is less towards API normalization and more towards providing an actual UI framework, usually to emulate the feel of native apps (and to provide easier workarounds to lack of access to position:fixed). We’ve seen a few libraries released that emulate the iPhone UI, and in the future we might see libraries emulating the Android UI, as well as entirely new UIs.

There’s also a bit to be said about simply loading full desktop JavaScript libraries into mobile clients. In my opinion this doesn’t particularly make sense, especially in a world where latency and bandwidth are so much more of a concern. It doesn’t make sense to force the user wait longer and download code that’s ultimately useless to them (hacks for desktop browsers such as IE 6, etc).

Here’s a few of the mobile libraries now available:
-Sencha Touch
-baseJS
-XUI
-jQTouch: jQuery-style mobile library that emulates the look of the iPhone UI
-iUI: the first JavaScript library to be released, emulates the look of the iPhone UI. Originally coded by Joe Hewitt.
-PastryKit: Apple proprietary non-public JavaScript library with no available documentation

Take advantage of new stuff!

While not specific to mobile, there’s a lot of new stuff in general that you can use. If you limit yourself to the top smartphones (iPhone, Android, and maybe webOS), compared to the desktop you immediately have access to an even wider array of new stuff, especially many Webkit proprietary features, since most of these top smartphones have browsers based on Webkit.

-HTML: new tags (HTML5 (I’m sure you’ve heard of it by now…))
-CSS: 2d transforms, 3d transforms, animation, border radius, custom fonts with @font-face, etc.
-JavaScript: strict mode, constants, block scope, Date.now(), etc.

Related posts

This post is part of a series on the mobile web. You can read the other parts of the series here:
Part 1: The viewport metatag
Part 2: The mobile developer’s toolkit
Part 3: Designing buttons that don’t suck
Part 4: On designing a mobile webpage

Summary

Thanks to my coworker for lending me his phone for a few minutes (he waited in line for 9 hours yesterday when it first went on sale!).

This is quite an improvement over the iPhone 3GS running iOS4, which ran the SunSpider test in 13787ms. The iPhone 4 ran the same test in 10669ms, which makes it ~22% faster head-to-head.

Processors

The iPhone 3GS has a Samsung S5PC100 ARM Cortex-A8[5] 833 MHz (underclocked to 600 MHz), while the iPhone 4 has an Apple A4 1GHz (likely underclocked to an unknown speed).

Thoughts

The Incredible is just slightly faster than the Evo, to the point where it’s probably negligible or within a margin of error. Both of these phones run on Android 2.1 with HTC’s Sense UI modifications, and represent the latest and greatest in Android phones available on the market today. Both run on the same 1GHz Snapdragon processor (QSD8650). The Nexus One is a bit older, and runs with an older version of the Snapdragon processor (QSD8250), however it still runs at 1GHz just like the other two phones.

As you can see the Nexus One blows away all the competition because it’s running Android 2.2 Froyo. These results were quite a shock to me and are quite impressive. These results even blow away Apple’s new iOS 4 running on my iPhone 3GS, which clocked in at a total time of 13787ms compared to the Nexus One’s startling 5452ms.

Testing methodology

Test: SunSpider 0.9.1

Devices: HTC Evo (Android 2.1), HTC Incredible (Android 2.1), HTC Nexus One (Android 2.2)

The SunSpider test was run five times on each phone. The phone was completely turned off and on before each test. The most extreme values of the five tests were thrown out, and the resulting four tests were averaged (sometimes from three tests when the values were very close together).

Raw results:

SunSpider HTC Evo results (5 tests)

SunSpider HTC Incredible results (5 tests)

SunSpider HTC Nexus One results (5 tests)

Related links

JavaScript SunSpider test: iOS 3.1.3 versus iOS 4 GM

Thoughts

After running these SunSpider tests, it looks like overall there’s significant speed gains between iOS 3.1.3 and iOS 4 GM. However, it’s concerning from these tests there were some things that actually ran slower on iOS 4. This either represents a real speed loss between the versions, a margin of error, or some flaw or inconsistency while testing. Or maybe I possibly have some wrong setting on my phone? Any input would be appreciated.

Testing methodology

Test: SunSpider 0.9.1

Device: iPhone 3GS

The test was run five separate times on the same phone for each version of the OS. The phone was completely turned off and on before each test.

The most extreme values of the five tests were thrown out, and the resulting four tests were averaged (sometimes from three tests when the values were very close together). I’m no statistics expert, so if you’d like to work it out for yourself, here are my raw test results:

SunSpider iOS 3.1.3 results (5 tests)

SunSpider iOS 4 results (5 tests)

Related links

Speed Test: iPhone 3GS Even Faster than Apple Claims

Why would you want to install obsolete AVDs? In my case it’s a matter of research: I simply want to see the progress of features being added to its browser, and track those changes over time.

Step 1: Manually download and inspect repository.xml

When updating from “Available Packages” there’s a little one-line error saying “Some packages were found but are not compatible updates.”

Ok, so let’s check out the XML for ourselves to see if we can find anything. So point your browser to https://dl-ssl.google.com/android/repository/repository.xml (to see the XML, right click to view the page source if you’re using a Webkit-based browser).

Search for the AVD version you want. In this case we want 2.0 and 2.0.1, so a simple search find the relevant blocks of code. And we also find the XML tag that’s the cause of our troubles, which prevents us from easily getting the AVDs:

<sdk:obsolete />

Step 2: Get the AVDs!

At this point you could do two things, either save repository.xml to your computer and remove these “obsolete” tags (then add the XML to your AVD Manager by clicking “Add Add-on Site…”), or simply find the path to the AVD and download it manually.

The second option is to simply manually download the paths, which are easy to find in the XML and are listed here for your convenience:
Android 2.0 AVD (Linux)
Android 2.0 AVD (Mac OSX)
Android 2.0 AVD (Windows)

Android 2.0.1 AVD (Linux)
Android 2.0.1 AVD (Mac OSX)
Android 2.0.1 AVD (Windows)

Step 3: Install!

Create directories under your Android SDK installation’s “platforms” folder. In this case we have 2.0 (API level 5) and 2.0.1 (API level 6), so I created these folders: android-5 and android-6. Now just unzip the contents into these folders.

Start up the AVD Manager and click on “Installed Packages”. If you don’t see your new (obsolete) packages you just installed, hit the Refresh button and you should see them.

Now you can create new AVDs with these obsolete packages!