82: Cross-device development

Cross-device development

The novel development of mobile applications with technologies that let you write code once and run it on several devices of different phone vendors.

Baked-in “UI continuity” has the widest audience reach — and thus the most value to the user.

Overall continuous UI tapestry = ecosystem

Media queries are part of the CSS3 specification. A media query allows targeting not only certain device classes, but to actually inspect the physical characteristics of the device rendering the site. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk. To do so, incorporate a query into a linked style sheet’s media attribute:

The query contains two components:

  1. a media type (screen), and
  2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).

We’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load shetland.css. Otherwise, the link is ignored altogether.


More companies create mobile optimized versions of their websites using media queries. 2011 is the year of responsive design.

The number of active users will be more important than the number of downloads.

Mobile-exclusive brands and content will have success
• Traditional publishers will launch new, mobile-only brands
• Vertical-focused content will be used to create greater user stickiness
• Mobile applications leverage new distribution channels and, as a result, new discovery options

Mobile applications and the mobile Web will get hitched and play nice together
• Operating systems creators are making it easier to launch applications leveraging Web technologies and skills
• Applications will heavily leverage mobile Web in applications as a means to scale utility and custom features cross-device
• The average user will not be able to tell the difference between a mobile Web site and mobile application eventually

81: CSS Gradients


This link above was written by the same book author of “Responsive Websites”. It’s good stuff.

I have a philosophy that “basic” elements of speed. Gradients is one of the elements that can give “light and depth” cues. As the author, Ethan Marcotte, says though –gradients can be abused and overused. Nonetheless, he has some good stuff here. More than I would ever have patience to code. But intriguing bag of tricks.

I’ve alway built gradient’s as tiling backgrounds. CSS would be more elegant and speedy.

My basic elements are 1) color, 2) foliage, 3) lighting, and 4) legibility. They are an adaption from cheap but attractive “tradeshow” booth design. Gradients fall in the “lighting” effects category.

I demonstrate applying this graphic “formula” a bit on my blog http://ultraspeed2.blogspot.com/2010/06/34-julia-mumford-com-continued.html