Forecast.io: some of the secret sauce revealed

Posted on May 7, 2013 by

Today I dug around the source code of forecast.io a bit, and learned about some easy wins that contribute to the native-like web app experience on my iPhone. Check out the code and see whether you want to use in your mobile web apps!

Note that I’ve only verified these behaviors on iOS. And as the tagging suggests, it probably is meant to only work in iOS. Anyone know whether the same behavior can be achieved on Android devices?

Hiding the Safari browser chrome and address bar

This screenshot shows the runtime experience of Forecast.io on an iPhone. Note that there is no browser chrome or address bar to be seen!

forecast1

How is this done? Here’s the meta tag:

<meta name="apple-mobile-web-app-capable" content="yes">

That’s all there is to it!

Displaying a custom icon in the app drawer

The next screenshot shows what you see after running Forecast.io, then returning to your home screen, then double-clicking on your home screen button to reveal the app drawer. There’s a Forecast.io app icon there!

forecast2

And here’s how that’s done:

<link rel="apple-touch-icon-precomposed" href="http://forecast.io/images/icons/54.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://forecast.io/images/icons/72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://forecast.io/images/icons/114.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://forecast.io/images/icons/144.png">

Note the support for both regular and Retina home screen icons.

So with these two little snippets of code placed before your page’s </head> tag, you can achieve the same native-like user experience with a web app on an iOS device as Forecast.io.

Posted in Uncategorized | 1 Comment

Forecast.io

Posted on May 6, 2013 by

Ever since it launched a few weeks ago, I’ve developed a mild obsession with Forecast.io. Quite simply, it is the most impressive standards-based web app I’ve ever seen. Whether you judge it on its design, data, or performance, it does everything exceedingly well.

The only deal is, there are some intriguing mysteries about how all of the magic is done. I’d love to be able to design my own web app like this, especially one that can be installed on my iPhone’s home screen and have its own app icon appear in the app drawer during runtime (instead of Safari’s icon). Just like a native iOS app.

Until I understand this and more, I’ll have to satisfy my curiosity about Forecast.io by continuing to Google it daily and compile the articles I find here.

Happy reading, and enjoy Forecast.io.

Posted in Uncategorized | Leave a comment

Product management for the web: the book

Posted on May 4, 2013 by

It’s official: I’m writing another book! And, happily, I submitted the introduction and chapter one to my editor today. Here’s an excerpt to let you know what it’s all about:

Whether you are new to web or app design and development, or have been doing it for years, you probably know the drill pretty well already. You know what I mean— the established, and very well-intentioned best practices that we list and make sure they are checked off successfully as we are designing, developing, and launching a new site or app:

  • Is it accessible?
  • Does it comply with the client’s branding and design guidelines?
  • Does it look great, and provide a simple and delightful user experience?
  • Was it written with good web or mobile content strategy guiding it?
  • Is the CSS, HTML, Javascript, or other code modern and standards-compliant?
  • If a web site, is it an adaptive design for supporting multiple screen sizes?
  • Has the site or app passed a usability evaluation?
  • Is analytic code in the right places for tracking user behavior?
  • Is there social media integration and a strategy to ensure that people will easily find and engage with the site or app?
  • Are there launch and maintenance plans so that the site or app goes live on time and does not quickly “go stale” after it is released?

These ten points and more should be pretty familiar to designers and developers. They’re the subjects of many outstanding books and conference sessions and, for goodness sakes, we can always get better at doing them, right?

Yet there’s a problem: this isn’t enough. A significant gap can remain between creative and technical success and true organizational success. This gap is filled by product management.

Continue reading →

Posted in Product management | Leave a comment

Completely amazing and utterly boring

Posted on March 16, 2013 by

That phone in your pocket…becomes just a part of your life. It’s something you use, something you rely on. And then completely forget about. And in its own way, that’s actually kind of mind-blowing.

I really like these two Wired reviews of the Samsung Galaxy S4 and iPhone 5. They are completely spot on.

Since the launch of the original iPhone, we have been conditioned to be wowed by Apple and its competitors when it comes to smartphone innovations. Finally phones didn’t suck… and could even be awesome. Exciting news indeed!

Then this expectation was bolstered further by our somewhat surprising love affair with the iPad and other tablets. Suddenly we were also getting excited about products that we didn’t even need. Yet suddenly we did, or at least felt that we did.

But like everything cool and innovative, it eventually becomes more everyday and ho-hum. But as these reviews point out, that’s rather impressive in itself. The fact that these devices have become so ubiquitous and “normal” means that they are impacting us more and more, and as they become cheaper they will become even more common.

Because let’s face it, when is the last time you got excited about a new pencil, piece of paper, car, or garment? Sure, from time to time there’s new ideas in these and other product areas, too. But as products become everyday products, they cease to amaze us as much, even as they are continually enhanced but often in smaller, more incremental ways. And this is okay. So let’s stop expecting Apple and others to impress us as much with mobile devices as they used to. At least with glowing rectangles of various sizes.

Because we can be sure that something else exciting is still around the corner.

Posted in Commentary | Leave a comment

The Minimum Viable Mobile User Experience

Posted on January 25, 2013 by

Slides and notes from my University of Minnesota Web Standards presentation about how product management methodology can increase design and development success. The presentation highlights what what “minimum viable” means (it’s not just the least amount of work possible!), ways to think about design and feature prioritization for web and mobile, and how to communicate about product design with the leaders of our organizations. The goal is to design and develop solutions that best meet our customers’ needs, and referencing the best metrics we can to measure real organizational success — not just visits to our sites and apps.

Posted in Product management, Projects - Mobile, Speaking | Leave a comment

2012: a great year

Posted on December 31, 2012 by

2012 was a really great year, and I thank everyone who played roles in making it so fantastic. I’m particularly indebted to my coworkers at Capella. I made a major transition from design and design management to product management when I accepted a job here in 2011, and it’s been a wonderful career change. I used to think that design is where the best creative work takes place, but now I’m not so sure.

Designers work with pixels, layouts, libraries and frameworks, and can have exciting, tangible results to show people when they’re done. Product managers need to step back from hands-on design and look at the bigger picture: how should an existing site or app be improved and why? How will we know if our improvements are successful? Who needs to know? And what’s the next big thing we should tackle?

Continue reading →

Posted in Uncategorized | 1 Comment

Designing ebooks with web standards

Posted on December 5, 2012 by

Slides and notes from my CSS Dev 2012 presentation about how standards-based web designers can leverage their HTML, CSS, and JavaScript skills to deliver content via channels in addition to web browsers. The presentation highlights what makes books unique, how they have evolved during their history, and how ebooks and book-like mobile apps can solve UX and distribution issues for designers and organizations (in particular, the ability to sell content rather than give it away).

Posted in Product management, Projects - Mobile, Projects-Web, Speaking | Leave a comment