We are looking for experienced mobile developers to help us build tomorrows amazing apps. We are seeking someone based in Seattle with experience in creating native applications for iOS, that gets MVC, has experience working in a fast paced, agile environment and has an eye for great design and usability (experience building mobile web apps is a big plus).
We offer a great salary, health benefits, unlimited time off, profit sharing, 25% time allotted for personal projects, learning opportunities aplenty, super flexible schedule, family friendly workplace and an unrivaled team of passionate people, dedicated to making great mobile products.
If that sounds like you or someone you know, please email hello@pinchzoom.com with your job history and links to app that you’ve done.
I can’t tell you how excited we are for the upcoming Web Directions Unplugged happening May 12-13 here in beautiful Seattle. There will be a great line up of speakers covering the gamut of mobile topics, from business-to design-to development. The entire pinch/zoom team will be at the conference to listen, learn and talk about where everything is going in mobile—and to a greater extent the Web.
Events like these are a great investment for organizations of any size. In mobile especially, hearing first hand stories from people at the front lines can easily save you 10-20% from the cost of implementing a mobile project. Actually talking to speakers in halls, the savings only increase.
Use the promo code pinchzoom to save an extra 30% off your ticket price. And to sweeten the pot further drop me a line with their details and I will email your boss and explain to them why they should send you to Unplugged.
Kevin Tamura joins Brian to talk about the recent Breaking Development conference in Dallas. A much needed and rejuvenating summit around the future of the web and mobile.
There was so much great stuff at this week’s Breaking Development conference. All my initial attempts to write up my lessons ended up being a bit too conceptual—but I’ll probably post that soon too.
Mobile carrier 3 has created a new e-commerce tool called LiveShop. Basically you have video chat with a sales person, but instead of just a simple video, the salesperson can you a special multi-touch interface to overlay devices, plans, accessories to the experience.
I especially loved this quote:
We’re actually surprised that no one has done this before.
Watch the video for an inside look at the tech that makes it work. Very cool.
(By the way, the whole thing is built in Flash, so I guess it won’t work on that iPhone or iPad 2, one of 3’s most popular devices.)
Stephanie Rieger from yiibu did an excellent talk at Breaking Development about how the mobile web has evolved as a platform. Her talk (and slides) are filled with lots of great quotes and data points about mobile and the mobile web. A great place to start when thinking about the value of mobile.
Last week TripAdvisor launched a Windows Phone version of their popular mobile app. However one look at the design of the app, and you’ll notice that is has a familiar iPhone-like interface. This is not how you design mobile apps.
Mobile app design should always follow one of two rules of aesthetic: embrace the system or remain neutral.
Embrace the System
Embracing the system, means that your app will follow the mobile operating system rules and guidelines for how a user interacts with information called Human Interface Guidelines or HIG. In the case of iOS (iPhone & iPad) these are explicitly defined and designers and developers are required to adhere to them. However for other platforms like Android, Blackberry or Windows Mobile, these rules aren’t thoroughly defined nor monitored as stringently.
Even if the target platform doesn’t have a great HIG, the user is instructed on how to use a device from the minute they pick it up. How is information oriented, vertical or horizontal? How does the user “drill down” on target information? What visual elements do you use to indicate actions? How does the user go back—or in other words—what are the spacial orientation rules? The list goes on. The user is immediately instructed on how to use the device. Their expectation of how third-party apps should follow these same rules.
From the usability research we’ve seen users have very strong opinions on the app aesthetic. When they buy a device, they are buying into the entire platform ecosystem. App’s that do not follow the platform design rules are viewed as cheap or untrustworthy. Users and quick to delete and rate them poorly.
In the case of TripAdvisor they failed to heed this best practice. They launched an iPhone app in the Windows Phone ecosystem. In fact it appears that the app may just be their iPhone-like web app loaded into a native container. No thought was put into this app in the context of this platform. Essentially TripAdvisor is saying to all Windows Phone users, “we don’t care enough about you to make an app for. And by the way, you should have bought an iPhone.”
This is my biggest complaint about hybrid mobile apps, or developers looking for a quick win in mobile—they are convinced that users don’t care about how the app looks or acts. This simply isn’t the case.
Remain Neutral
The second option is to remain neutral in your design aesthetic. Meaning that you do not use any of the platform defined user interface elements or interactions and you create your own library based on your own branding. This is most commonly seen in games, where each of the interface elements are draw by the game and not the platform.
By my count there are at least 75-100 unique interface elements for each platform (300-400 across all the platforms). Then you have at least a dozen different interactions that are designed to inform or evoke action. There is a reason why apps don’t do this—it is no small feat.
To recreate each of these elements and bake them into an app is very time consuming. It requires time, experience and knowing a lot of undocumented mobile UI best practices. And that just to design them. They also need to be built and work consistently. The mobile Javascript frameworks like jQuery Mobile and SenchaTouch have already created UI libraries for their respective platforms. However most web frameworks still rely on emulating the iPhone-method of design and screen interactions (for example the familiar slide right animation to go to another screen)—something that is clearly abandoned from Windows Phone interactions.
Long story short, there are no easy wins when it comes to mobile. Users expect more from mobile platforms than what most companies are willing to give. Users are quick to pass judgements of your app, and therefore your brand. In the end you have to ask yourself tough questions like: can you afford to launch a poor experience like TripAdvisor for Windows Phone? My guess is you can’t.
Last December we played around with creating an adaptive layout (sometimes called responsive design or responsive web design). The goal was to create a single source of HTML5 markup, but to provide the user with the best possible experience for their device of context.
We know from BBC usability testing and the work we did with the New York Times that iPad users prefer horizontal “paging” of content over vertical scrolling by an astounding ration—something like 10 to 1.
Therefore we wanted to find a way to deliver this experience using only web technologies and from a single source of markup. So in the case of an iPad the user would see a magazine based layout, complete with horizontal based navigation. In the case of the iPhone or Android device they would see a simple mobile web app. And in the case of the desktop they would see a traditional desktop website.
In order to create what you see here we had to create:
1x HTML5 Markup
1x Hexadecimal CSS Grid Framework (aka the “Hex-Grid”) which we created for this and will write up and release at some point
1x Typography Framework that included all our typefaces and sizes for different device contexts
3x Javascript Frameworks (one for each device context)
12x Media-Query-based layouts and device styles (three for each device context, e.g. iPad, iPad Portrait, iPad Landscape, etc)
It proved to be far more time consuming that we had ever planned due to the number of stylesheets and time needed for testing. But we learned a lot from the process:
pagination was a nightmare. Every article had to be manually adjusted in the CMS to maintain proper page flow.
content has to come first! we tend to forget this lesson, but not having complete content, with images, sidebars, etc really became a roadblock.
had to create an entirely new way to look at css-based layouts—resulting in a css framework to deal with all the screen sizes.
every page had to be designed individually—very little reusable elements apart from the layout
content had to be type fitted, similar to print layout workflow in order to not break the page flow on tablets. We couldn’t build the pages until the content was finalized, making the workflow very similar to a traditional print magazine or newspaper.
had to disable pinch to zoom—no text resizing otherwise we break the page flow
large image needs for iPad were brutal—bigger screen, bigger images, bigger download—often we’d need two images for each device context (see the cover image in the video. They are two totally different images being loaded based on orientation)
had to add simple PHP-based device detection to conditionally load the Javascript per context—different device contexts had different interaction needs. It didn’t make sense to load all the Javascript for a device that didn’t need it.
typical navigation metaphors had to be scrapped. Trying to use Mobile Web App navigation metaphors didn’t translate to Tablet. And it always had to work as a plain old website too. A navigation metaphor for one context would break the metaphors for another context.
design sacrifices had to be made to make it work. We either couldn’t get the tight layout we wanted for each device context, or we needed to sacrifice the interactions. Neither was an option. So we had to reduce the desired experience to try and make both work—similar to lowest common denominator design.
page flow was less than ideal. It could be pretty glitchy at times. The text resizing was the worst bit.
like with all mobile testing—it is time consuming to debug and fix problems. One you move away from your reference design and start to incorporate the media queries testing time goes up. 12x media-queries simply means 12x the testing time.
CSS Flexbox is killer. It really enabled us to maintain semantic code order for the less capable desktop web browsers, but adjust the layout to suit the device context.
We are trying to find time in our busy schedules to finish it up, but at the very least you can see a quick video demo of the iPad version in action. Hope you like what we have so far.
(forgive the bad audio. I shot this in my hotel in Dallas while at Breaking Development)
I can’t tell you how excited we are for the upcoming 
Last week TripAdvisor