iosOverlay.js — iOS Overlay/Notification Plugin
Here’s a plugin that allows you to place iOS-style notifications over your web app. It’s useful for showing short succinct messages, or notifying the user of what action is being performed. It’s great for the same reason that the native iOS overlays are too; it’s intrusive enough to grab your attention, but doesn’t steal focus entirely.
This plugin works equally well on desktop, mobile and tablet.
Given the trend towards micro js libraries and removing dependencies, this plugin can stand alone or work nicely with other frameworks.
Features and details:
- Uses CSS3 transitions for smooth animation
- Plays nicely with spin.js for sweet spinners
- Notifications can show for a duration or be manually closed
- Notifications can be updated on the fly (icon/text)
- Framework agnostic (but you can degrade to jQuery animation if CSS animation is not supported)
- IE7+ support (minus rounded corners) and all the usual suspects
- Fully documented
- MIT/GPL/Who gives a shit just don’t be a nozzle about it license
To do:
If there’s a bit of interest in this project then there’s more I’d like to do.
- Add fancy CSS 3D transitions (drop, 3D drop etc)
- Use fader.js for cleaner animation syntax (one less optional dependency)
- Add a fallback IE rounded corners PNG
- Option to dismiss with ‘Esc’ keypress
- Add some retina icons
Styling File Inputs in iOS6 with jQuery Mobile
File this post under: “stuff that’s in obscure forum posts but not really documented well”. As per a previous post, iOS6 brought about access to the camera in Mobile Safari. While access is not real time (getUserMedia would be amazing), we are able to prompt the user to take a new photo or access the camera roll. Presumably for security reasons, styling file inputs in desktop browsers has always been hell on earth. Mobile is much the same.
What you can do as a work around is rely on native browser functionality where clicking a <label> triggers the clicking of it’s associated <input>. I’ve relied on the native jQuery Mobile button styling for speed, but you can achieve pretty much anything. Hiding the input can be achieved in various different ways, but as far as I know it cannot be display: none; for security reasons. Setting visibility: hidden; or opacity: 0; will all achieve the same effect, and setting position: absolute; will take it out of the page’s flow.
You can see it in action in the JSFiddle below.
UX Lab 013: ThreeJS Battery
It’s been a bit quiet in the lab of late, and for that I apologise. To make up for it I thought I would have a dabble with something small in ThreeJS. I’ve played with it before, but never put out anything production-ready.
3D artwork has become pretty common place these days. But generally you’ll see it flattened, and in turn, unable to be interacted with. ThreeJS opens the web up to a whole new world of possibilities when it comes to gaming and immersive experiences. But what about the little things?
Here’s a little experiment from the lab, demonstrating just how easy it is to bring a bit of excitement to the web. As uptake of WebGL grows, so does the opportunity to liven up the web. I’m not impressed when you can build an entire iPhone with CSS using a single HTML element. I’m actually impressed when you design something awesome, you build it without compromise, and it’s not a completely flat, static experience.
So with that in mind, here’s a shitty battery I built :)
You can go about building things in different ways with ThreeJS. The ability to export existing 3D objects from popular programs like 3DSMax, Maya or Blender is the sole reason this technology is remotely useful in the real world. Strangely enough, I chose to create the battery with primatives, by hand, and not import any objects. No 3DSMax. No Photoshop (aside from a reflection map, oops). Just ThreeJS.
That meant it took a couple of hours one night to create the geometry and camera tracking, and a couple of hours the next night to create all the materials. That’s not long. I really don’t see why more people can’t build stuff like this.
So check it out, the source code is on Github.
iOS Theme Update
I pushed an update to the iOS jQuery UI Theme to add support for the latest release - jQuery Mobile 1.2.0. Not much should change, but there is a notable syntax change to “in page” buttons.
The changes are:
- Added support for jQuery Mobile 1.2.0
- Support for, and styling of new
popupelements - An example iOS style
popupas per the image below (would be best if you set it up with a timer to hide after a couple of seconds?) - Major refactoring of “in page” button styling. No more messy
.ui-btn:not(this):not(that), instead it inherits from.ui-btn-plain. - Closed various issues and pull requests
- While basic popups are supported, no nested popup menu support is available
- As above, button syntax has changed. This causes an issue with
<button>elements. I’ve raised a bug here.
Wishlist: An integrated iPhone experience
I’ve always liked the way that the iPhone fades out and pauses your music whenever a phone call interrupts. It took a bit of getting used to, but now I can’t imagine it working any other way. So I think it’s understandable that it feels a bit disconnected that my phone, ringing in my pocket, can’t pause iTunes running on my Mac Book - or even music and video on the iPad and Apple TV. Looking into the options turns up a $20 shareware solution that allegedly no longer works, and it’s not the answer. As a relatively new Mac user, I get the impression that Apple rewards those who commit fully to the ecosystem. And so I feel, something like this needs to go native.
But that got me thinking: why stop at pausing media?
The concept of finding a phone number online, pulling your phone out of your pocket and physically dialing the number; well it all feels a little last decade, doesn’t it? Admittedly, you can purchase Skype-out credits and have a dicky little widget that overrides numbers in web pages, but it’s just another program to install and more logins to maintain. Some of you may scoff at the experience I’ve described. Perhaps it’s already possible on an Android phone and a Windows box? But things like this are not about who is first to market, it’s about the value they add.
It’s been said that a lot of Apple innovations seem inevitable when you think about them. You can already use iMessage and FaceTime on nearly every iOS device. Phone calls via a FaceTime-esque protocol seems to be a standout omission. So whether calls are routed through a mobile phone via bluetooth or handled via VOIP, it doesn’t really matter. It’s certainly possible today, it just hasn’t been executed well.
Although pocket change for both companies, a pivot on Apple’s part would rival the value that Microsoft paid $8.56 billion for when purchasing Skype.
Dribbble is rife with shots portraying desktop widgets for answering calls. Spurred on by an informal rebound contest, there were 22 follow ups to Daryl Ginn’s shot. Funnily enough the shot was a conceptual take on (the terrible, existing) Skype for Mac, but the execution is good. I’d love something like this.
Great concept. Be sure to watch the video as the text just doesn’t do it justice!
Flick Scrolling
You might wanna watch the video above, but in short: When scrolling content on a touch-screen, instead of letting momentum stop the scrolling, you can decide exactly where it should stop. It stops at the point where you flicked it.
It would be great for things like books, blogs, timelines or anywhere where you don’t fly over, but continuously wanna “move forward”. Kinda like paging but within and long scroll. Some apps have a page up/down feature, but I don’t really use it because it moves always the whole height and might cut off a picture or so. With this “flick scrolling” you can decide to where it should move to. The last paragraph or beginning of a picture.
Why not just use pages or cards? Yes, that works sometimes, but not always, especially not when you have no control over the content. iA wrote a good post about it: Scroll or Card? With flick-scrolling you get the joy of “card flipping” without the cards.
Here the two demos from the video so you can try it out (only tested on iOS).
Warning: I’m not really a programmer so the demo is just a hack to demonstrate how it could work. Would need some improvements. And of course, performance would be better if it would be implemented natively.
One thing I’m not sure about.. there is the possibility that you intend to do a flick scroll but end up doing a normal scroll or vice versa. You can judge for yourself in the demos. Maybe the detection could be further optimized or here some other possibilities (Let me know if you can think of more).
- Use a two-finger scroll. But then you can’t use just your thumb which makes it not that useful.
- Split up the screen into two areas, for example left for normal scroll and right for flick-scroll.
Credits: Demos use the iScroll4 library and in the timeline demo, the “scrollToElement” feature is used, which is a pretty cool one.
Real Racing 3 is looking pretty boss. Lets hope they can make it much more addictive than older versions which, besides looking beautiful, could get a bit repetitive at times.
UX Lab 10, 11 & 12
Here’s a bulk upload of three UX Lab experiments. I’ve been pretty busy, but these are ideas I’ve had for a long time and have been kicking around on my hard drive to some extent. I thought I’d better get them out and about.
UX Lab 010 - Blurred Modal Backgrounds
Modal dialogs are used in preference to regular popups because they generally disable interaction with the page behind and guide focus to the new window. This is achieved by visually obscuring the content behind the modal, but not so much that the two seem disconnected.
As long as people have been doing this, the have been attempting to blur out the background to greater magnify the effect. It hasn’t been possible without the use of non-dynamic PNGs, Flash or some other form of hack. Now that Webkit-based browsers are supporting the CSS filter property (not to be confused with the IE legacy one), the sought after feature is now possible.
The linked demo guides focus in two modes. One blurs out all background elements, the other desaturates them. Unfortunately there is no support for animation of these properties, so until that is implemented the effect is a bit blunt.
UX Lab 011 - Flipboard-style Notifications
I see notifications similar to these throughout iOS and OS X applications everywhere. I like the way they demand a bit more attention than your normal jGrowl, but still aren’t too impactful.
Maybe I’ll fork these properly into their own GitHub repo. Maybe I won’t.
UX Lab 012 - OS Dependent Modal & Close Buttons
This is something I thought of a long time back, and has been live in Kiandra IT development template for a while now. It’s frustrating that on the web, OK/Cancel button order and close button placement are all decided by the designer/developer. I remember a while back when a notable ex-Apple designer more or less told Dan Cederholm the close/delete icons should be on the left for everyone. Sure, there are probably more Macs and iOS devices on Dribbble than Windows - but it’s still pretty inconsiderate to force that upon the entire audience.
A UX guy once explained to me that the OK/Cancel placement on a Mac had a lot to do with the linear direction of the workflow. The OK being on the right, as it advances you another step to the right in a wizard. I remember the Windows placement being that you read the desired action first, and that’s the most important. After a bit of research, it appears Jakob Neilsen summarised it quite nicely..
But the little Mexican girl in me says:
It’s not even remotely difficult to implement technically, and shows you’re willing to compromise. Exhaustive studies may one day show one method to be “better” than the other, but until then, don’t be a dick about it.
Beautiful Retina iPad Wallpapers
I’m not one for customising my iPhone or iPad to the nth degree, which is why I thought I would share this amazing retina iPad wallpaper collection with you all. A lot of wallpapers are suited only to lock screens, and contrast badly with the app icons of the home screen. But not these beauties! I really struggle to pick just one to use at a time, and I’m sure you will too.
Check them out over at Simon C Page’s blog.
Many thanks to @james_paintwork for the find.
This announcement from Brightcove should trigger excitement in any front end dev. Running web content on the Apple TV is something I’ve personally dreamed of for a while now. Unfortunately comments indicate that the free version is essentially just a teaser, and most of the cool functionality remains behind a $99/month paid service. Ninety nine bones. Every month.
No thanks. I’ll wait until Apple offers it natively.
Repository Updates (iOS Theme + jQuery.Gantt + Aristo)
Hey guys, not much has happening on the design/development front while I’ve been away on leave. Today I’ve landed some fairly big pull requests and bug fixes to what are probably my three biggest repos.
jQuery.Gantt
This is the big one. I made some pretty major changes before I went away but wanted a few more people to test it before I did the writeup.
I received a fairly major (and necessary) rewrite from Leo Pfeifenberger who sped up this project like you wouldn’t believe. It wasn’t a simple matter of landing the pull request, as the performance changes did come at the cost of coding standards and consistency. Some parts had been buggered by what looked like Visual Studio auto formatting, but they could have been hand-coded that way too.
For future reference, here are my own personal front end dev guidelines that have been received well by the community. They’ve changed in some regards based on feedback from individuals and organisations and represent how you should aim to format your code.
- Major performance increases.
A before and after IE9 test shows performance going from 20 seconds to 400ms.
That’s 2% of the previous run time. - All new click events - fired when clicking an item or when clicking the empty space. Use this to edit events or create new events at certain points.
- State persistance - requires cookie.js to work.
- Scroll to today on load
- Extensive documentation
- Defined a license (MIT)
- Removing
$.ajaxSetup, which was corrupting other scripts in the page.
According to this stackoverflow answer it was only there to ensure it worked in ASP.NET situations. If you’re using it there, consider setting$.ajaxSetupexternally.
Unfortunately that means there are some new issues:
- Code standards - I spent a considerable amount of time running the code through JSHint and fixing issues. I got most, but that included setting a few ignores.
- Eval - yep, as above, you’ll notice that there’s an eval in the code. Yuck.
- Holiday and “Today” highlighting are not occurring on the cell, only the header.
Two steps forward one step back. No biggie.
iOS jQuery Mobile Theme
I realised there was a big difference between what I was seeing in Chrome, the iOS simulator and my iPhone running iOS 5.1. Turns out the iOS simulator was only running 4.3.1, so I’ve now got the 5.1 simulator and that’s helped me resolve some visual quirks.
- Fixed: header bars had black top border
- Fixed: Vertical centring of header buttons was off (related to above, layout woes)
- Fixed: Black buttons had blue text shadow
- Fixed: Footer icons had crept to the right with last update (jQuery Mobile styles took precedence)
- Pull Request: <label> styles coming from poorly scoped selector
- Pull Request: Demo page typo
- Set demo page transitions to “slide” by default
- Set all demo page toolbars to be position=”fixed” by default
- Decided on licensing (MIT)
Aristo jQuery UI Theme
- Fixed: Cross browser CSS3 animations appear to have been re-instated.
- Pull Request: Added a non-prefixed value that I missed.
- Pull Request: Widget nesting issue fixed.
What iOS 6 Mobile Safari Offers Front End Devs
Update: Now that iOS 6 is out and the NDA is no more, Max Firtman has posted an excellent summary of new iPhone 5 and iOS 6 mobile Safari enhancements and regressions. It goes into further detail and mentions features that couldn’t be publicly announced while still under NDA (not that I was, I’m not a registered dev).
Corrections: Although I recommend checking out the above link, I received two corrections via email from Apple. One regarding smart banner documentation and one clarifying css filter support.
Here’s what we know about Mobile Safari in iOS 6 so far, and what it brings to the table for front end developers. I expect there’s more to come in future betas and as people experiment with the current beta more.
Web Inspector via Remote Debugging
The pre-existing developer tools for iOS are limited to say the least. A console.log is flattened to a single level, without actually presenting the contents. iOS 6 introduces the Safari Web Inspector to both the iPhone and the iPad via the Safari ‘Remote Debugging’ interface.
It implements a similar interface to how the Chrome for Android remote debugging works. Safari remote debugging acts in a similar fashion, such that when you select an item in the Safari desktop inspector, it is highlighted on the iOS device.
Prior to this, the only alternative was embedding Firebug Lite, which while powerful, is not designed for touch screen devices.
As far as I can tell, the old, flawed Developer Console has been removed.
Many thanks to Andrew Harrison for fact checking and screenshots.
<input type=”file”>
Finally, it’s here. You can now upload photos and videos from the Photo Library using a regular input element. This was previously only possible via the use of Phonegap etc.
This is a real game changer for mobile apps.
No word yet on if it allows you to capture a new photo. It does.
Real time camera streaming has been confirmed as not supported.
Smart App Banners
The new Smart App Banners are a way of showing Safari users a message indicating that a native app for the website is available in the App Store. While not really a great thing for those of us hoping to move apps back towards the web, it’s still a good experience for the end user. It’s also possible to preserve the page/state/view and send this to the native app. Documentation is available on the Safari Developer Library.
Picture via Wired.
Web Audio API
How useful this is remains to be seen. Web audio tends to be fairly handicapped, regardless of browser, operating system or device. Microsoft’s HTML5 Cut The Rope game still used Flash to play the sound effects. I truly hope the iOS implementation changes that, but I’m also a realist.
CSS Filters
According to the Can I Use report, these are only supported in Chrome 18+ with a -webkit- prefix. CSS Filters are also supported in Safari 6, on Mac OS X Lion and Mountain Lion (10.7 and 10.8, respectively).
Full Screen View in Landscape Mode
Interesting by itself, but with desktop browsers beginning to land support for a full screen API - can this be triggered progammatically?
requestAnimationFrame
This has landed, albeit with a webkit prefix.
You should be using the Paul Irish polyfill anyway.
App Cache Upped from 5MB to 25MB
I believe it used to show you a dialog asking for more if you exceeded the 5MB limit.
JPEG Downsampling Ceiling Lifted
JPEG downsampling no longer occurs at 2MP, and instead kicks in around the 5MP on supported devices. The iPhone 3GS and 4th gen iPod touch remain at 2MP. That’s if your carrier isn’t downsampling for you (AT&T, Optus in Australia).
Faster JavaScript Performance
This happens every year, so it’s not really news. Nitro was previously brought to home screen apps giving them a massive performance boost. Nitro hasn’t yet been brought across to UIWebViews, one of the many reasons that the Facebook app is a steaming pile of shit. Maybe future iOS 6 betas will bring Nitro to UIWebViews? Maybe it’s already in iOS 6?
Mobile Safari Wishlist — What Devs Want
This years WWDC in June will hopefully bring about a new iPhone and iOS 6. But in reality, pundits are calling an October release far more likely. While Apple has been slowly closing the gap between mobile Safari and native application development, there is still a host of issues holding mobile Safari back. What a lot of it boils down to is granting software access to hardware components. Stabilising the home screen app experience. Ironing out inconsistencies.
So what do front end developers desperately want from the next version of Mobile Safari?
Home Screen App back to Safari
Fantastic! With a handfull of <meta> tags, you can turn your web page into standalone, chrome-less home screen app! But the second you click a non-ajax link (or external links) - you’ll be thrown straight back into Safari. While it’s not really a problem if you’re writing single page, MVC or AJAX centric applications from scratch; try serving an existing page-based layout to run as an app and you’re gonna have a bad time.
Workaround: A StackOverflow question along the same lines features a host of pre and post iOS5 solutions hacks.
getUserMedia/Camera/File Access
It’s currently impossible to take new (or load existing) photos without the use of some intermediary like PhoneGap or Titanium. More frustrating yet is the inability to upload anything in mobile Safari at all. I’m sure part of this stems from iOS not having an exposed file system, but it’s been notably missing for a long time now.
The new and immature getUserMedia functionality at least gives desktop websites the ability to access webcams. Because it’s only available in Opera nightly builds and the correctly flagged Chrome, Addy Osmani wrote a polyfill that no doubt uses Flash to patch support. That doesn’t do much for us on iOS.
Workaround: PhoneGap etc.
Device Orientation Lock
Speaking of PhoneGap founder Dave Johnson, I was lucky enough to catch his talk at the recent WDC12 conference in Melbourne. A spec is underway for a device orientation lock, resulting in layouts that are explicitly portrait or landscape only. This would help further bridge the gap between web and native by allowing apps to only work in one mode.
Workaround: Currently it can only be hacked together with CSS transforms triggered via media queries on device orientation changes. Undesirable.
WebGL
It’s possible to build some pretty amazing stuff in WebGL using wrappers such as Mr Doob’s mind-blowing three.js. His work on three.js has made it incredibly easy to get started building 3D scenes without having to write your own texture and lighting plugins.
Unfortunately iOS does not officially support WebGL, although it can be enabled on jailbroken devices with this recently released app. It relies on the fact that WebGL is actually installed, but not enabled for Safari.
WebGL was added to iOS 4.2 for iAds but Apple has not yet turned it on for general browsing and the like. Enabling WebGL for single applications has been done in the past but this is the first tweak that I know of that applies across the whole OS, including Safari.
navigator.connection.type, navigator.battery etc.
It seems that all the cool stuff seems to exist on the navigator object. In iOS we were already sourcing geolocation and connectivity via the navigator object, but there’s heaps more coming in the form of specs and proposals.
Android web browsers lead the way in exposing a navigator property that reveals the type/quality of the connection the device is receiving. It’s therefore possible to determine if the device is EDGE, 3G, WiFi or I guess LTE connected. Safari on iOS is only capable of differentiating between online and offline modes, exposed by the navigator.onLine property. You can also bind events that listen for the ononline and onoffline events too.
In his talk on AppCache manifests, John Allsop touched on the user experience methodology of listening for the online/offline events and enabling/disabling submit buttons respectively. Why not take this one step further by serving tailored resources and displaying spinners relative to the network speed? iOS already does it at the system level, so why can’t your app?
Sidenote: I only stumbled across this disparity because I was trying to implement the above for a UX Lab experiment.
Double sidenote: PhoneGap founder Dave Johnson mentioned that, funnily enough, a call to navigator.battery actually decreases battery life.
Proper Resume and Suspend
Home screen apps always start from scratch when opened.
Even if they are reopened via multitasking.
Seriously.
Workaround: Preserve the state with localStorage? I guess?
Non-binary Device Zoom
Setting the acceptable zoom levels in the viewport meta tag is quite final. When building a native-ish application, it’s generally advised to set the zoom and min/max values to 1.0. so users don’t accidentally scroll “native” elements. But doing so completely removes the user’s ability to resize images and resources displayed within the app. Think a mobile Safari Facebook where you can’t zoom any of your friends photos.
Workaround: Hilariously bad. -webkit-scale styles bound to events.
Did I miss something? Found a factual error? Let me know in the comments.
Repository Updates
iOS Theme for jQuery Mobile
Good news! I’ve just pushed some major changes for my iOS jQuery Mobile theme. It now works with jQuery Mobile 1.1.0, which was a bit of a struggle. It also forced me to do some major code cleanup, delivering cross browser gradients and various enhancements I had been putting off.
A full list of changes and resolved bugs follows:
- Supports jQuery Mobile 1.1.0 (this was a nightmare)
- Code cleanup more strictly obeys my coding conventions
- All gradients and effects are now cross browser compatible (Issue #2)
- Updated slider toggle to iOS 5 style (Issue #7)
- Got dialogs looking as close to native as possible considering jQuery Mobile doesn’t support overlayed dialogs (they’re standalone pages) (Issue #3)
The changes have introduced a few minor visual quirks relating to the .ui-focus box shadows etc, but hopefully these will be rectified in the near future.
jQuery Gantt
I made some minor code changes, but the most important thing here was the addition of documentation. The original creator didn’t provide any, so hopefully this makes a bit more sense. I’m sure I’ve missed something here and there (holidays?), but I’ll fix that up as we go.
The changes:
- Added documentation and better demo with bootstrap popovers
- Works with latest jQuery 1.7.2
- Merged pull request for “undefined error”, thanks Nathan Colgate.
- Code and folder cleanup
Front End Development Guidelines
The page now passes HTML5 validation. Apparently some people care about this.
iOS 6, Mountain Lion and Beyond
Predicting development roadmaps is something best left to the professionals. Consider this list nothing more than a collection of rumours, leaks, patents and the musings of arm chair experts everywhere. Did I miss something? Think you know better? Sound off in the comments.
Siri, Siri, Everywhere
The question is not if Siri will make it on to the remaining devices, but when.
Server load and processing power were assumed to be the reason Siri was originally confined to the iPhone 4S. The recent release of the iPad 3 new iPad only managed to bring Siri Dictation to the fold. So if the next major Apple TV release is expected to feature Siri-driven voice navigation, when can we expect to see Siri adoption across all Mac and iOS products? 2012? 2013? Later?
Siri on the Mac
“Siri on Mountain Lion” by Joe Hribar
Siri on the iPad
Commentators seem to question the use of Siri on the iPad. Some argue that it is something to be used “on the go”, not on your lap. Maybe you’re supposed to feel less odd talking to a phone than a tablet PC? Regardless, Apple is never going to achieve the original Knowledge Navigator concept by handicapping devices.
“Siri for iPad UI Mockup” by Rene Ritchie
“Siri Mountain Lion Concept for iPad” by Rene Ritchie
Likelihood: Inevitable.
Retina Displays Galore
2012 has already brought about the retina iPad, so it’s not surprising that the rumour-mill continues to churn out “clues” and “leaks” regarding retina displays for the Mac. There’s a few reasons why this isn’t that unrealistic. Both the advent of Thunderbolt and the latest update to the Ivy Bridge processor allows for the greater through-put required to push that many pixels.
The missing piece of the puzzle is already being filled by developers, seemingly of their own accord. GitHub for Mac pushed an update with support for HiDPI mode, driven by people using AirDisplay to enable their retina iPad to act as an extra monitor. This is fantastic, and on par with iPad developers who pre-emptively created retina graphics before a retina iPad had been officially confirmed.
Likelihood: Inevitable.
Further reading:
- HiDPI Retina Images in Mountain Lion Messages.app - but lets not forget the @2x iBooks graphics that leaked before the iPad 2, and guess what, no retina iPad 2.
- Using AirDisplay as a secondary (retina) Mac display.
Rethinking the Dock
Aside from the addition of “stacks”, the OSX dock remains relatively unchanged. Personally, I’m a big fan of using the Flurry icon set by IconFactory to achieve a more iOS look and feel. Lion brought about the circular icon and user avatar styling that made this redundant, but I’m looking forward to either visual convergence or a strong divergence. All rounded rectangles, or all circular icons.
The concept below includes a video showing a different take on spatial depth.
“Mountain Lion Dock Concept” by Marshall Bock
Likelihood: Unknown.
Near Field Communication
The original concept of Square’s credit card system, and in turn the development of Card Case, seem to fill a void caused by the omission of NFC. The use of geolocation to tie Card Case users to stores always seemed like a bit of a hack, albeit necessary. But with the granting of the iWallet patent in March, is Apple going to enter the mix in a very big way?
A hardware advantage is indisputable. But just because Apple sets its sights on an existing app (eg: Reader/Reading List vs. Instapaper/Readability), doesn’t mean the show is over. A designated application will always have the potential to beat out a vain attempt. Square is one of the most innovative and exciting startups I’ve ever come across. I don’t think they have much to worry about.
On the other hand, it’s not unheard of for Apple to release a product with neutered hardware. It’s my understanding that earlier iPhones and Apple TVs had bluetooth chips included, but disabled pending software updates. Recent reports state that the latest Apple TV model has a dual core processor, but is only using one at most. Perhaps the iPhone 5 will roll out with a dormant NFC chip, while Apple waits for vendors and the infrastructure to catch up.
Less Carrier Dependence
Before Apple announced it’s first dividend since 1995, people speculated what Apple would do with its billions. ”I hope they buy AT&T”, they said. ”I hope they become a carrier”, they said. But why would you want anything to do with a carrier in this day and age?
iMessage is doing a fantastic job of replacing SMS and MMS messages.
Facetime, currently and foreseeably restricted to WiFi, has video calling locked down.
The only remaining piece of the puzzle involves phone calls, and VOIP offers a lot. If Microsoft now owns Skype, will Apple roll their own solution?
For a while now, the only thing separating an iPod Touch from an iPhone has been the whole, you know, phone thing. I think it’s inevitable that the devices will merge as one ubiquitous internet-based method of communication. When entire cities like San Fran and Seattle are offering city-wide WiFi, where does the carrier fit in? Oh damn, that’s right, they’ve got the 4G LTE.
Likelihood: Theoretical only.
Mobile Safari Closing More Gaps
As a web dev, iOS 5 had me seriously fist pumping. It added missing features as well as fixing some critical user experience bugs that prevented web apps from behaving like native apps. Position fixed support was absolutely critical, and jQuery Mobile benefited hugely from that. I really hope iOS 6 continues to enable web devs to deliver a rich experience by extending more hardware and software APIs to mobile Safari.
Currently PhoneGap, Titanium and other app wrappers are the solutions to bridge the many gaps. They’re worth checking out if you absolutely must have access to the camera, vibration etc. immediately.
- Safari in Mountain Lion will allow websites to push notifications to Notification Center. Maybe mobile Safari will do the same? Until then, fake it till they make it.
- Expect Apple to eventually implement getUserMedia, although Opera is the only browser to have supported this outside of a nightly build.
- An exact replication of pull to refresh isn’t possible because of when Safari fires scroll events (hint: rarely). Until then, this is a viable alternative.
- Vibration API, photo stream access and whatever else is still missing.
It’s Time to Unplug the Antenna
There’s no doubt a complete shake up of the television industry is on its way. I’m really excited at the prospect of pulling the antenna out of the back of my TV and never looking back. All the innovative media startups like Netflix and Hulu never made it to Australia, at least in their true form.
I’ve tried writing this up as a separate blog post about 5 times now. It’s very difficult to articulate just how important this is, and how it will shake up the entire media industry. Apple has the cash to ensure the production quality is world class. They’ve got the diversity in TV shows and movies to build comedy or action “channels” and such a massive archive of music videos that replicating MTV, VH1 etc would be a cinch.
In terms of hardware, who knows if we’ll see a greater than 1080p resolution any time soon. Factors like viewing distance mean that most 1080p TVs are already retina-ish in quality. Digital TV here in Australia barely makes it above 720p, which is incredibly frustrating. On the other hand, Bluray or even true HD TV content always feels so unnatural, so I’m not sure of the appeal. But regardless, if anyone was going to push 4K quality film down the tubes, it would be Apple. They have their own distribution channels in the form of iTunes, working around TV bandwidth limitations - as well as a massive media library which would presumably include access to 4K film.
Likelihood: Long overdue, but we’ll believe it when we see it.
Apps on the TV
Who knows if we’ll see this before or after a major overhaul, but it’s coming regardless. Apps on the Apple TV are possible if you’re willing to Jailbreak, and the image below hints at a browser being available in the latest JB.
Likelihood: Inevitable, already possible on jail broken devices.
“Native” Facebook App
Facebook acquired the Mac software house Sofa back in 2011. They create beautiful UIs and were definitely a good pick up. So what will they be tasked with doing at Facebook? Pundits guessed native Facebook app, but we’re yet to see any information confirming this. The problem with this is that it flies in the face of Facebook’s current direction with Project Spartan. A native application would have to be a simple wrapper around a web view, as that’s what both the iOS apps currently are.
“Facebook App for Mac OS X Lion” by Andrianov Oleg
Likelihood: Unknown, counter-intuitive.
GitHub → Notification Center
There are already some scripts for automating Growl notifications when Git repositories are pushed, pulled or committed to. I can imagine GitHub taking advantage of the new Notification Center framework in Mountain Lion to deliver these messages. Whether this spells the death of Growl remains to be seen. While features such as “Reading List” in Safari were seen as a direct attack on independent app developers such as Instapaper, it is still a clear choice for the pro user.
Likelihood: Would be awesome.
Form Factor Changes
Budget 7” iPad?
Teardrop shaped iPhone 5?
Macbook Air sized Pros?
Can’t say I really care.
One More Thing - Calculator (and everything else) Facelift
Why not? Apple has demonstrated it is committed to bringing more useful iOS apps such as Reminders and Notes to the Mac with Mountain Lion. It would great to see the Braun-inspired look of the iOS calculator come over. And hey, Apple also loves to keep a little something up its sleeve for when media events look a bit thin. Just look at Cards.app.
