Here at pinch/zoom we always get clients asking the same thing, over and over. This is by no means a bad thing, it just reaffirms our role as mobile educators and not merely designers and developers.
Every project is unique and each client has their own unique problem they approach us to solve on their behalf. The problem is, on each of these unique journeys, we hit a lot of very common and repetitive roadblocks.
What is the mobile ecosystem and why should I care? What is device fragmentation and will it cost me money? HTML5 is finally supported on the iPhone and will fix all my problems, right?
These questions can often lead to lengthy discussions with your agency or developers but it’s definitely handy to start with a small pocket of knowledge on each topic.
This is why we have created Mobile Bits , collective bits of knowledge about design & development for mobile.
Have a look and pass it around if you find it useful, we’ll be updating frequently (and ironing out a few bugs) with no shortage of mobile topics in the near future. Enjoy!
Designing for mobile devices using HTML, CSS and JavaScript can be painful.
Not just painful for me, the developer, but also for our clients that often don’t understand the challenges that are exponentially added to a project with simple statements such as, “Can we support the Blackberry Curve as well?”
Brian Fling’s book, “Mobile Design and Development” presented a classification system of mobile devices based on support for XHTML, modern CSS, JavaScript and a few other factors. This has been used and improved on internally in pinchzoom when we are in the planning stages of a mobile web project.
What this doesn’t do is display these challenges to the client on an actual device. We needed something that a client could test themselves and that would return some kind of clue as to the support offered by each individual device.
That said, I created Sniffer, a small app that detects CSS support in the browser and returns a true or false value depending on the browser’s support for that feature. It’s a very early alpha release, so it may be buggy or sometimes return information that isn’t extremely helpful to the client – but the basic idea is there.
The code is on GitHub, so feel free to have a play. We have a long laundry list on how to make it better once we use it on an actual project with both our clients and internal developers.
Visit http://sniffer.pinchzoom.com on your mobile devices and see how they score.
Awesome quote from Craig Villamor on Mobile Web Apps:
When you visit a website and discover that they have a mobile version of the site, you are pleasantly surprised. The experience is so much better than what you had expected that little quirks don’t even register in your mind. On the other hand, when you download an app from the AppStore and it seems even slightly sluggish, when animations are not smooth and scrolling stutters, you think that app is a piece of junk.
I think Craig really taps into an exciting, yet freaky aspect of mobile design and development. The anti-climactic release of The Daily goes to show that native certainly doesn’t guarantee better results.
So if the silver bullet is not native, will it ever be web?
Native vs. Web
A lot of our clients are stuck having to provide mobile web solutions for Blackberry devices, which despite having one of the worst mobile browsers out there, it is still a very popular device with many users across the world.
When supporting Blackberry devices you must confront the dreaded LCD (Lowest Common Denominator) and like a piece of parsley dangling from your co-worker’s chin at lunch, it’s something we would all rather ignore.
But ignore it at your own peril, below are some tips for better LCD design:
- First, don’t let older devices get in the way of your great design. Design as you would for the iPhone, Android or any new device out there and worry about bad devices later.
- Next, take a step back from the design and make sure you aren’t obsessing about pixels. There are so many different browsers in the mobile ecosystem that you will drive yourself crazy if you think in pixel precision… take a long deep breath and be more fluid.
- Again, take one more step back from your design and think about how it will break in older, non-Webkit browsers. Identify potential trouble spots such as floats, absolutely positioning, advanced CSS3 selectors and JavaScript. Be ready for these to break and think about how you’re going to handle each situation.
- If you have no idea what half of that last sentence meant then grab your front-end developer or mobile agency and get them to walk through your design and tell you how they will handle these issues. Remember, the Blackberry will take your design, chew it up and spit it out again… your developer is the person who will repair this damage. Your task is to take another deep breath and let that pixel obsession fade away while they propose solutions.
- Finally, get your hands on the devices your users will have in their hand and test, test, test. Don’t like how it’s breaking down? You probably won’t – but think of this – is the essential information still being presented to the user in an efficient manner? Can the user complete the task at hand? If you answered yes to any of those questions, then you have built a successful mobile web application.
Remember, the more devices you want to support the more complex your application will become and the less control you will have over the final design. It’s a crazy, fragmented world out there.