For the Open Web Camp attendees, here’s my cheatsheet from the Refactoring for Mobile talk I gave today at Stanford:

Get it as a CSS file and view it in your favorite code editor:

walkthrough.css

Or preview here:


/*
The first thing we need is a media query and to add
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
to the head:
*/
@media only screen and (max-device-width:480px) {
/*
For starters, note the two divs #wrapper and #contents.
Let's use those to create our structural layout and
fold back in some of those design elements.
*/
#wrapper {
background:url(img/back2.png) no-repeat center top;
margin-top:-1em;
}
#contents {
text-align:left;
width:95%;
margin:0 auto;
}
/*
Now, let's style the main navigation buttons. First, we
will use inline-block to give block-like behavior to the
buttons but retain width based on the content. Then we set
the color, font size, and floating, and add a bit of box
shadow.
*/
.menu a {
display:inline-block;
background-color:#000;
float:left;
font-size:14px;
padding:1em 0.95em;
border-left:1px solid #888;
-webkit-box-shadow:0px 1px 5px #222;
}
/*
We can now use border-radius to style the left and right
buttons instead of image files:
*/
.first_menu a {
border-bottom-left-radius:6px;
border-left:none;
margin-left:2px;
}
.menu li:last-child a {
border-bottom-right-radius:6px;
}
/*
What if we flip to Landscape? There's a media query for
that:
*/
@media screen and (orientation:landscape) {
.first_menu a {
margin-left:78px;
}
}
/*
Now we can style the body content. #middle-contents is
the main containing block. We can use the background image
from the main stylesheet, but alternately we can use rgba
backgrounds to get finer control. Add border radius and box
shadow for depth.
*/
#middle-contents {
/* background:url(img/side.png) repeat-y;*/
background-color:rgba(0,0,0,0.3);
padding:1em;
border-radius:10px;
-webkit-box-shadow:0px 1px 6px #000;
box-shadow:0px 1px 6px #000;
font-size:1.2em;
margin-bottom:1em;
}
/*
Let's style the banner text and have some fun with it using
web fonts. Here's a font we'll pull in, using TTF and SVG formats.
Sadly, the vendors have many opinions on the solution, but
FontSquirrel can help sort it out.
*/
@font-face {
font-family:'Lobster';
src: url('Lobster_1.3-webfont.ttf') format('truetype'),
url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
}
#logo a {
display:block;
text-align:center;
padding-top:12px;
font-family:Lobster, sans-serif;
font-size:2.7em;
text-shadow:0px 2px 4px #000;
}
#logo h1 {
font-family:Lobster, sans-serif;
text-align:center;
font-size:1.5em;
}
/*
The float is creating a spacing issue. We can fix that
with a clear:
*/
#header { clear:both; }
/*
We are getting close. Now on to the bottom of the page.
The #comments section is too wide. We need to reset it:
*/
#comments {
width:100%;
}
#comments textarea, #comments input {
width:93%;
margin-bottom:0.5em;
padding:0.5em;
font-size:1.2em;
border:1px solid #000;
border-radius:6px;
}
/*
That input button could be nicer:
*/
#comments input.button {
display:block;
width:80%;
margin:0 auto;
height:2.5em;
padding:0.5em;
}
/*
Now we have something that looks like it was meant for a
mobile device. Let's wrap this up by making the final
links look like tap-friendly buttons:
*/
#right-col a {
display:block;
padding:0.5em;
font-size:1.3em;
font-weight:bold;
text-align:center;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#666666), to(#666666), color-stop(.5,#333));
border:1px solid #000;
border-radius:20px;
margin-bottom:0.4em;
}
/*
Maybe those final link items were over the top.
Let's restore them to inline links:
*/
#copyrights a {
display:inline;
margin:0;
padding:0;
font-size:small;
border:none;
background-image:none;
}
}
/*
Now add some HTML5: Add placeholder="I think..." to the textarea in
comments.php, line 191.
Add input types to email and url fields.
Finish with atouch icon: <link rel="apple-touch-icon" href="piano.png"/>
(Note to attendees: I forgot to add the piano.png file to my project files.
But this works otherwise!)
*/


Here are some lovely PSDs available for download; excellent for picking apart how to create great iPhone icons:

http://christianbaroni.me/?page=downloads

(Found via http://twitter.com/flyosity/status/15798736074.)

This will be important for iPhone apps but even more important down the road (in my opinion) for web apps that have custom icons associated with them. If you’d like to learn more about this technique, full instructions for creating a custom desktop iPhone icon for a web page or web app are right here in Jonathan Stark’s excellent go-read-this-now book on building web apps with HTML, CSS, and JavaScript:

http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932602

The gist of which is essentially you are creating a 57 x 57 icon and then adding one of the two following HTML lines to identify it:

The first option inherits the glossy light effect and corner radius from the iPhone OS. The 2nd one does not, so you have to handle corner radius and any desired light effects manually. iPad icons use 72 x 72 pixel resolution. I’m not sure yet, but I’m betting the new OS will have something closer to the 72 px size. Anyone know the answer?

Sometime last year I was considering home improvement options to our house, I was thinking about building a large, built-in bookshelf in our upstairs study area. I always loved to see lots of books on the wall, and really enjoyed pulling down a book to have a browse on whatever subject interested me from my own personal library. But there was all this discussion regarding ebooks, and I was thinking if this ever caught on big time, then printed books would eventually go the way of the dodo – the end of their 400-year cycle of greatness was at hand, and the new way to read anything was going to be on a digital screen.

I’ve since come to my senses. I love books – the binding, the texture of fine paper, the fact that it doesn’t require a battery or power cord, and even the smell are all plusses in my book. Books have been around a long time, and they’re here to stay. Ebooks are just another channel of distribution for such content, and I believe that both have their place in the modern era.

However, for academic research papers, I think we can safely kill the paper. Particularly, I think it should all begin moving towards the EPUB format. I read a lot of academic papers in my work, and I find myself wishing that more of this stuff were published as EPUBs. In contrast to my love of books above, I think academic research would largely be much better served in a purely electronic format. It’s already going that way from the reader’s point of view, right?

Typically, when academic papers get published electronically, the format of choice is PDF. Or in earlier days, PostScript. If you’re lucky, someone had the foresight to publish their paper as HTML. The advantage of a flexible format such as HTML is that you can resize the fonts. Text can flow. It’s easier to get a clean copy of a text or data segment out of HTML than it is from PDF for quoting in one’s own paper, because copying from PDF tends to yield horrific line break issues and other artifacts on the clipboard.

PDF is, I’m sorry to say, hard to read on smaller screens. PDF expects paper, and refuses to reflow itself into smaller screen sizes such as an iPhone or Android device form factor. It barely passes on the 1024 x 768 iPad screen. Anything smaller, such as most ebook readers, is going to be unacceptable. Having to zoom in and scroll left to right to read one line of text at a time on a mobile device is not what anyone would call a user-friendly reading experience.

EPUB by contrast works great on mobile devices. Using the Stanza reader on iPhone is quite comfortable. iBooks on the iPad platform is a joy to use.

After reading this tweet by Dave Gutelius today, I was reminded of how much I hate printing out all my academic papers in preparation for travel. Flying is reading time, and printing this stuff out and stuffing it in my backpack is time consuming, a waste of paper, and added weight that I don’t want to carry.

Stuffing those papers onto my iPad and using GoodReader is a step in the right direction. But still, all too often the PDFs are formatted for paper, not for screen, and I am still cursing the format. PDF usually assumes letter-sized or A4-sized paper, and most ebook readers have physically far smaller screen sizes. Far better I think to start providing EPUB options for academic research, so that folks like me who need ginormous fonts and such can read with greater ease.

Or, should it just go to straight HTML? At that point, papers might even be able to add a little functionality to the electronic reading experience – change variables in information graphics, show rendered 3D representations of models, and so on. EPUB doesn’t support anything fun like HTML5 DOM handling or Flash, although CSS3 might work depending on the EPUB reader’s implementation. Either way, PDF ain’t fitting the bill ebook readers, and I think this sort of format will be far more important in the coming months and years as ebook-capable mobile devices become more and more commonplace.

This evening as I was doing some research on mobile web development, I got myself on a tear about the wild differences we face as web developers regarding screen sizes and default browser installations, and came up with this:

*Some service providers will opt to use a different browser than the ones listed here.

It is interesting to note the diversity on these fronts. Screen sizes are all over the map, and the browsers here are not the usual suspects we see on the desktop. As for browsers, while it is certainly possible on many of these platforms to install a different browser (Opera being the usual choice), most users don’t bother. Regardless, Opera is the dominant player in this space, with significant marketshare owned by all the other actors on the mobile stage. As I research this topic, the WebKit engine proves to be the vast trendsetter and it is interesting to see how many platforms besides the iPhone are picking this one up. And trends show that this landscape is evolving rapidly as mobile capabilities increase and users begin surfing the web on their mobile devices with greater and greater frequency. ABI Research sees web browser installations on smartphones expanding from 130 million in 2008 to 530 million by 2013. The mobile web is a vastly unexplored frontier in web design and we should start seeing more and more attention getting paid to this aspect of the online world.

Update: Amazon Kindle’s Basic Web is based on NetFront – table updated to reflect this.

PPK has written his impressions regarding his shiny brand-new Jesusphone. (I wonder did he get black or white?)

In his post, he tells us the initial reports for the behavior of mobile Safari with regards to things like documentation (missing), mouse event implications (game changing), and how the disjunct state of finger tapping and dragging compares with the continuous state of the traditional OS desktop mouse pointer. In particular, he points out the fact that the assumed ever-present mouse pointer (the little cock-eyed arrow which points black and to the upper left on Mac, and is white and points to the upper right on Windows) can no longer be counted on. And in fact, there is no icon any more. Your fingertip is it, my friend!

With the coming of the iPhone the mouse model has lost its inescapable logic. Mousemove, mouseover and mouseout (and even poor old :hover) have been downgraded to device-specific events that may not survive in the long run.

May not survive… hmmm, interesting impact. I think he could be right here.

But — and here lies the problem — these events are used in countless web sites and applications for a variety of purposes, and Apple simply cannot afford these sites not working on the iPhone.

Interestingly, so far Apple has found that it indeed can afford to dispense with Flash and Java on the iPhone platform, and while most complain that the checkbox isn’t complete, some argue that Apple is doing just fine and won’t be in any hurry anytime soon. Certainly demand for these babies has been extremely high so far. I would be interested to see how many of such sites absolutely depend on such functionality to work, and how many of those either change their site behaviors or create iPhone-friendly web presences as the demand for the mobile web increases. Wondering… but at the very least, things like these aforementioned mouse events – Flash, Java, and the like – are not yet queued up on Apple’s priority list, or else they chose to take the less-is-better approach. It is an interesting question: How much of the specifications do browser vendors adhere to on such a limited platform such as mobile devices? What is practical? What is feasible?

Over at the Peabody Double Bass blog I just noticed this excellent post on a technique to practice good intonation. This is like the double bassist’s version of Twister, and I bet would make an entertaining drinking game! Seriously though, it looks very helpful and I highly recommend giving it a whirl.

I often use reference pitches when practicing as well. I usually don’t have the luxury of being able to work out on such things with others, so I came up with a couple of items on my own:

One is to practice a couple of Petracchi-like shifting and position exercises that I use with a reference pitch soundtrack that I made that ascends chromatically. I added this to my iPhone which is itself turning into a handy practice tool. I added the metronome track right in and modded the tempos so I can practice these exercises at a couple of different rates. I’ll try to post some of these at a later date if anyone thinks these would be useful.

Another thing I do when practicing repertoire is to test my pitch against an open string with a left hand pizzicato using whatever free finger is available – the trick with that one is knowing which open string fits best harmonically with the note or passage I’m playing, which makes it an added bit of fun.

Finally, sometimes I go for the brute force method and play long tones against a three octave scale with the electronic tuner. Interesting where my finger tries to go in the middle of the upper registers, but the tuner keeps me honest.

Good intonation can seem challenging on double bass, but I think some good practice tips like the one from the Peabody folks and such can help develop a good ear and good pitch strategies. Above all, start with an instrument that is in tune!

This is how all rebates should work. Confirm ownership over the web rather than cutting and pasting and mailing in a bunch of junk that would take six months to get denied.

Thanks for the store credit dudes.

Update: All may not be entirely well in rebate-land for some.

Last Sunday I purchased an iPhone. This was not my plan, but a couple of things came up to prompt this move. This thing is incredible for the most part, but with only one complaint:

The Purchase

First of all, my expectation was that I’d wait until a second generation release came about. I was quite content with my old Sony Ericsson semaphoring to the bimmer’s Bluetooth interface connection, and the old 3G iPod was the hurdy gurdy churning away at the iPod interface in the glove compartment. And these were good times. It all worked just fine – contacts loaded to the dash, control both from the steering wheel, phone call comes in and the iPod pauses until my conversation completes.

Until last week, when the phone died.

It had been dying a slow but natural death. To be honest, the only thing that was wrong with it was that the battery was able to hold less and less of a charge. The thing on my last business trip would last for maybe one phone conversation after a charge, and certainly wouldn’t make it through a couple of hours away from its power leash. But finally it ceased to work while connected to the charger. It couldn’t even hold enough juice to muster up a single phone call connected to power. Clearly it was time for a change.

And then the urgency occurred when a loved one wound up in the hospital, and my phone wasn’t working to receive the calls for assistance. What timing. Friday night in a hospital I had become all too familiar with recently, to the point where you know half the staff by name. Ugh. I need to do something about this quick.

I had two choices: Get a replacement battery for my Sony Ericsson for around $20 to hold me over until a 2G iPhone appeared, or jump on the technology bandwagon early and get an iPhone for upwards of $700 including tax and AppleCare. Naturally I went for the irrational choice and got the iPhone.

I owned the 1st gen Treo 180 when that first came out, and I loved it despite all its flaws. It was a PDA and a phone, and it was highly functional. But somehow the Treo line got confused and didn’t go quite where I was hoping it would, Palm support for Mac was off and on, and the rumors of an Apple phone began. My next phone would be a cheap-ass one with Bluetooth just to hold me over a cycle until something decent appeared. So with the iPhone finally coming out and the glowing reviews, I was placing myself in line for one of these babies.

The Initial Experience

If I may gush…

The purchase took minutes, the unboxing and activation was effortless, and I didn’t find the keyboard too difficult to operate even with my fat, round thumbs and long guitar-player fingernails. The initial sync was a bit lengthy over the USB connection for about 6 GB of data I had ready to go, and I had to rerun it a couple of times to get my contacts list right and to get the software updated on the unit. But once running, it just worked like a hot knife through warm butter.

Every application on this thing works extremely well, and well together. Syncing with my Mac, browsing through contacts, dialing numbers, watching vids from iPod or YouTube, email, calendar, and the rest of it – all very nice. The browser picks up phone numbers and converts them to hyperlinks to dial. Nice. I am sure that this is the finest mobile device created to date – very elegant.

The Browser

I’m going to get this out of the way. At the risk of being unpopular, I really am not a huge fan of the Safari web browser on the iPhone. Here’s why: I can’t resize fonts beyond tilting the screen – unless the page itself has font resizing baked in to the controls – a rarity. Zooming in on the content is inadequate, because I wind up scrolling horizontally as well as veritcally. The default page width for the iPhone is too wide and makes font scales too small as a result.

Now that I’ve had the iPhone for a couple of days, I want the handheld media type even more. This is an effing handheld device – support the handheld media type and prod developers to use it for your world domination goals instead of having to get people to fork their code. Web page layouts are too big by default for this size screen, and the web developer is confronted with the choice of either writing a version of their website just for the iPhone, or they have to install some greasemonkey-style hack. And I’m seeing plenty of websites offering iPhone-optimized versions of their sites so don’t tell me you’re doing this to offer the big giant World Wide Web in all its splendor. Boo. This would be so much better with an option to load the handheld css as an option somewhere. So much. Heck, even on a per-site basis as a preference in the bookmark or something.

What Safari on iPhone does, it does well – zoom in, hyperlinked phone numbers, and highly usable for a PDA web browser. Give me font resizing and the option to load the handheld stylesheet associated with the given web page and I’ll be happy. Bonus points if you can squeeze in a Flash plugin.

The Money Shot

OK this part I’m about to tell you was entirely unexpected. I went in to the Apple Store with no expectation that this thing would want to have anything to do with my BMW’s iPod and/or Bluetooth interfaces. It was created in 1995. This is emerging 1st generation technology two years later – snowball’s chance in hell of working with my car I thought.

I thought wrong.

This thing is sick. I tried plugging it in to the iPod interface and it just worked. OK cool – I can listen to tunes on this thing in my car if I need to. But surely this won’t pair up with my bimmer, right? No – it works effing perfectly. I pair it up, it connects just fine, it syncs my contacts, and I can place and receive calls in my car. iPhone gets charged up in the meantime – bonus points.

This thing just rocks. I am very impressed with the elegance of this innovative and highly usable design. Well done! Just fix Safari for me and we’ll be good.