This is Swipe, a blog by pinch/zoom about mobile, design, user experience, usability, development and the future of technology.
The idea that it’s only the young or people who’ve grown up with a technology who can appreciate it. Complete nonsense! My generation is highly intelligent and highly adaptable, and we’ve gone through this series of extraordinary technological leaps. Unlike today’s young who were born with this world, we’ve shown the meaningful thing, which is adaptability, and the ability to encounter radically different new technologies repeatedly.
Problem:
You need to resize your background images for multiple device orientations. e.g. portrait and landscape, but you want the browser to resize the image instead of downloading a second image.
Solution:
Using background-size and media queries you can define different image dimensions per orientation.
Example:
@media only screen and (orientation:portrait) {
.example-image { background: url(example.png) no-repeat center; }
}
@media only screen and (orientation:landscape) {
.example-image { background: url(example.png) no-repeat center; background-size: 50% 50%; }
}
Device Support:
Works in most Mobile WebKit browsers, including iPhone and iPad.
References:
Patterns Adaptive Layout CSS Media Queries
In a move against Apple’s 30% fee for magazines in the App Store, the Financial Times released a HTML5 version of their paper for iPad and iPhone. The app uses nearly 8000 lines of Javascript to perform a few interactions and the offline storage. They made the move to give customers faster updates, greater speed and more videos for iPhone users.
While officially FT doesn’t support Android with this release (telling Android users to use the mobile website or their Android app), I see a bunch of code to support it, including a lot of device detection and light adaptation to device types. Further highlighting some of the “uniqueness” found among multiple flavors of WebKit these days.
But this quote is my favorite bit:
The breadth of tools and documentation available for native apps and even desktop HTML5 development is just not there for mobile-based web app development. In addition the usual testing tools for both functional and performance testing do not exist, so we had to invent our own systems and processes to make sure the app worked effectively.
HTML5 Newspapers Newsstand Subscriptions App Store
This is a bit of a pain in the ass, if it stays in the final build. In some cases it can break overly tight layouts that are some times required in hybrid apps.
iPhone WebKit Typography
“It was truly an oh-shit moment – and really, really painful to realise where we were. MeeGo had been the collective hope of the company, and we’d come to the conclusion that the emperor had no clothes. It’s not a nice thing.”
It has been four years since the original iPhone debuted and four years that web developers having been finding hacks to get content to be fixed positioned.
From my book Mobile Design & Development
One of the things the iPhone doesn’t support is the ability to display fixed position content at the bottom of the viewport, because you can scroll the entire viewport. This is incredibly annoying if you want to create a bottom tab bar, similar to the native app convention.
Finally when iOS5 releases to the public this fall, Mobile Safari will support position:fixed, meaning you can position toolbars and tab bars to the screen edge and use the native scrolling feature and not CSS Transforms.
This is long overdue. Other WebKit platforms have slowly been making the fix, but it will be good to see it in the core source.
iPhone WebKit HTML
I don’t know about you, but there seems to be a disproportionate number of male relatives in my extended family who can talk under 6 feet of wet cement. We all have an Uncle Alby who completely dominates any conversation with a whole lot of yapping about themselves and zero listening to anything you have to say – you’re just a foil for more stories about their youth. (Or maybe that’s just my relatives). Even when he starts the story with “Did I tell you about the time” and I answer in the affirmative, I’m still forced into listening for the 495th time.
Well, now there’s an app for that (of course).
Talk-o-meter is an iPhone app that monitors any conversation by recognising who is talking and keeps track of each person’s talk time. The hope is that both conversationalists can glance over and can notice if they are dominating the conversation and hopefully temper their chatting to give the other person a chance to speak.
I’ve downloaded this and I’ll let you know how I go… although I suspect my Uncle Alby will use this as a challenge to just dominate the conversation 100% instead of the current 97%.
Chez and I give our WWDC predictions, including mobile payments in the iPhone and web as an app platform in iOS 5. They also talk about the controversy around Google Wallet and PayPal and the $10 million dollar investment into grilled cheese sandwiches.
Watch the episode on Vimeo
The Context WWDC Apple Google PayPal Sandwiches
Here is my presentation entitled 6 Rules to Designing Amazing Mobile Apps from last week’s @media in London.
It is a pretty packed presentation. I really had to fly through a lot of material quickly before my 7 year stage manager brought out the hook. But overall response was pretty great.
Mobile Design Presentations @media
While the headline sounds hilarious, it’s an actual serious story. Jonathan Kaplan, formerly of Pure Digital Technologies (creators of the Flip HD camera), just announced that his latest secret venture is a chain of grilled cheese fast food restaurants.
Reconfirming my disdain for QR codes, users order from the mobile website, and get a QR code, which they then redeem at one of the four San Francisco restaurants to receive their grilled cheese sandwich. And reconfirming my believe that we’re in a bubble, he’s already allegedly secured $10 million in funding.
It reminds me of the dotcom boom all over again where the technology is shouting loud but manages to distract everyone from what they should really be focusing on. Remember when it was a really big deal to be able to order pizza online?
Kaplan is really trying to invent a new model for the restaurant business, one that uses mobile technology for an experience that’s fast and flexible without sacrificing quality.
It’s great that they’re trying to use mobile technology to improve a system but this really seems to be like it’s a solution looking for a problem. I mean, how long does it really take to duck out and order a sandwich? By using the technology users will probably save a few precious seconds of their lunch hour, which they’ll then probably spend eating at their desks.
This might be the first step in revolutionizing our relationship with casual dining… or could be another case of investors gasping to throw money at mobile.
