Web Apps and iOS5
One less advertised feature of iOS5 is Mobile Safari CSS support for
position:fixed. Much overdue, and very useful for creating “web apps” where navigation bars are fixed to the viewport’s edge (top or bottom), allowing content to scroll naturally underneath.
Some mobile bowsers already support this (see Mobile HTML5 and When can I use…) and all modern desktop browsers do (as you would probably expect).
The term “web app” is rather irrelevant, a website is a website, though functionality based mobile — ahem, small screen — websites are where this fixed positioning technique can be handy; it replicates the design paradigm that many native apps employ.
In the past we’ve had to either:
The lack of fixed positioning in Mobile Safari is a real headache for creating web apps. Matteo Spinelli — the developer of iScroll — knows this all too well. He envisions a future where most “native apps” are simply wrappers for responsive websites. A distinctly advantageous method:
Web apps are much more than position:fixed or webGL. You can update them on the fly, build your own business model on them, ask for a subscription fee, have your users pay for additional features, or make them completely free.
And most importantly, the same app or website can be made accessible on all web devices, just like a good website should. There are many disadvantages of course, but those are for another article :)
Maintaining legacy support
Should we rejoice in the fact that iOS5 now supports
Yes, but we’re not quite home free. We still have to support the non-upgraders, the pre-iOS5 users. The trouble is that there’s no easy way to check browser support for fixed positioning. Keep an eye on the Modernizr discussion for the latest developments.
It’s worth noting that iOS5 has also added support for
-webkit-overflow-scrolling:touch, meaning that other native style interactions can be replicated a lot easier.
I’ve designed and built mobile specific websites before, as well as many more fully responsive websites. With techniques like this I can see a future where responsive website designs can deliver a natively styled and packaged “web app” that is also accessible on normal mobile & desktop web browsing.
A preferable future, I’m sure you’ll agree.