Athenites is optimized for use with smartphones. It's main feauture is a directory of live music venues in downtown Athens, Georgia. The page for each venue provides general information as well as their twitter and facebook status updates, and a Google maps widget.
You can see Athenites at athenites.com.
When writing code I always try to keep things simple and with smartphones, this is a really good idea. Compared to a desktop or laptop, a smartphone is a puny thing: much less screen area, and less bandwidth and processing power. Good reasons to keep those HTML and CSS files as small as possible.
Here is a demo page showing how to make one page a a Drupal site look different from the rest. One way to do this would be to add page-specific css to your style sheet (i.e. style.css in your theme's folder), but I don't want to add bloat to my theme just for one page.
This page features an accordion which contains 3 Views, each of which displays a list of articles tagged with the taxonomy terms "Drupal," "JQuery," and "CSS." (See the accordion at the bottom of the page.)
One issue I haven't seen discussed much is the impact of touchscreens on how we design web pages. The most obvious issue is that for an iPad or iPhone user there is no such thing as "hover" or "mouseover" - in software-speak, touchscreens do not support mouseover.
Here's a little demonstration of photo tagging ala facebook, flickr, etc. done with just CSS. When you hover over a person in the photo, a red outline appears around the person and a grey box pops up displaying information about him.
This page is an experiment in embedding code in a single Drupal page. Usually, in Drupal you would put jquery code in a script file in the theme folder and declare it in the theme's .info file, but using this in-page method will allow for quick-and-dirty demo pages like this one.