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!
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!
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.
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.
- Forecast.io: The best weather app for iPhone isn’t an app at all. iSource, May 1, 2013.
- Forecast.io is a fantastic service and a fantastic Web app. TechHive, April 22, 2013
- Forecast.io is a beautiful weather app for any Web device. CNET, March 29, 2013
- Forecast.io is a weather app worth gushing over. No, seriously. ITWorld, March 28, 2013.
- Review of Dark Sky’s new forecast tool, Forecast.io. Washington Post, March 27, 2013.
- Forecast.io — When Good Design Meets Scarily Accurate Data. Beautiful Pixels, March 27, 2013.
- Forecast.io Delivers a Useful Animated Weather Report for Your Location, All On One Page. Lifehacker, March 27, 2013.
- Meet Forecast, The Web App That Has Web App Developers Drooling. TechCrunch, March 26, 2013.
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?
- 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.
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.
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.
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?