Category Archives: Mobile Web Development
New Site Added to the Wap Review Mobile Directory
9to5Mac is a popular news and rumor blog covering Apple Inc. The site was the first to report on a slew of new Apple products and features including Siri and the iPhone 4s' dual core A5 processor,
Last August 9to5Mac and sister sites 9to5Google and 9to5Toys (consumer electronics and deals) got a mobile first responsive redesign. It starts out with a simple one column mobile friendly layout and progressively adds things like retina resolution images, sidebars, an animated lightbox and desktop ads. The result looks and works very well with desktop browsers and just every mobile browser I tried including non-Apple ones like the Android Gingerbread browser, the Symbian Belle browser, Firefox Mobile, Opera Mobile and proxy browsers Opera Mini, UC Web and Nokia Xpress for S40. I even got 9to5Mac to load (slowly) and be usable in the ancient Myriad (formerly Openwave) feature phone browser.
The mobile first philosophy pays off in drastically reduced page size. In Firefox 17 on my Linux PC, 9to5Mac's home page weighs in at a hefty 7311 KB ( 2741 KB compressed). In the Myriad browser it's 502 KB, one sixth the size.
When you are developing mobile web apps it's important to test in as many browsers as possible. There are lots of Android browsers and I have most of them installed on my phone for testing purposes. I just discovered a great little Android app that makes cross browser testing a little easier.
It's Switch Browser by Vimperator and it adds an option of the same name to the Share menu of every Android browser that's installed on your phone or tablet. To use it, just go to your current browser's share menu and tap Switch Browser to bring up a list of all your installed browsers. Tap a browser's name to open the current page in it.
It's a brilliant app and is available for free in the Play Store. It's also ad free and requires no permissions to run.
In my Nokia Series 40 Browser V 2.0.2 Review, I mentioned that the phone supports running Series 40 web apps. They have a look and feel similar to native apps and can use device features including geolocation and messaging. This post takes a look at Nokia Web Tools, a set of applications for creating, testing and deploying these apps.
Nokia has just released a new Beta version, Nokia Web Tools 2.0 which includes the following new features:
- Support for new full touch devices (Asha 305, 306 and 311)
- improvements to simplify web apps development, including:
- preview for template and snippets, so you can see what effect they will have.
- Series 40 web apps specific CSS and HTML validation.
- simulator UI alignment with phone UIs, enabling more accurate testing on your computer.
- updates to all templates, snippets, and code examples so they reflect the Series 40 platform UI style.
- improvements to the usability of the tools, including:
- keyboard shortcuts for most key tasks, such as simulation and packaging.
- a more intuitive process for the deployment of web apps to phones for testing.
- smart, partial, web app content uploading for faster testing when using cloud based simulation or running on a phone.
- improved start-up performance in the simulator
- single software version update process that updates the Web Developer Environment and Simulator in one step.
- Support for in-app advertising using Inneractive, an aggregator delivering ads from over 100 ad networks.
Nokia Web Tools is available for Windows XP, Vista and 7; OS X Snow Leopard and latter and Ubuntu 10.04 and latter. 1 GB of RAM is required on all platforms. Nokia provided me with a pre-release evaluation copy of the Windows version of WDE 2.0 which is the subject of this post. There may be minor differences in the release version.
Installing Nokia Web Tools using the Windows installer,was trouble free. If you already have an Web Tools 1.5 installed you can update to 2.0 by running Check for Updates from the WDE Help menu.
The Web Developer Environment comes with a number of templates which can provide a convenient starting point for your web app. The templates include a basic empty project, various UI skeletons including a carousel, tabbed GUI and two styles of lists. There is also a complete working example of a single feed RSS reader. You can learn a lot about web app design by studying and modifying the code in RSS reader example app. It displays a Time magazine news feed complete with thumbnail images for each news item on the first page and a nice sliding transition between stories. It's trivial to modify it to display your own site's feed.
The WDE also includes a library of code snippets for UI controls; lists, a header bar, text fields, buttons, a tab control, etc. that you can use in your web apps.
The Web App Simulator has skins for full touch, touch and type and non-touch devices and runs in two modes; local preview and cloud preview.
Cloud preview more closely simulates real world web app performance. You web app is uploaded to Nokia's servers where it's executed and rendered before being sent down to the simulator as a compressed binary stream, which is same the architecture that the Series 40 browser and web runtime use.
Of course, there's no substitute for testing on a real device. Web Tools includes a Bluetooth Launcher Java ME app that you an install on your device. When the Launcher is running WDE can push the client portion of your web app to the device for testing. If Bluetooth access isn't available, deploying a web app for testing generates a short URL that you can enter into the browser on the phone to launch the app.
Here's a video I created showing the Web Developer Environment, Web App Simulator and Web Inspector Debugger in action.
Download Web Tools 2.0 at Nokia Developer - Series 40 web apps.
Seeking Alpha is a big US based stock market analysis and financial site. I recently discovered that it has a mobile formatted layout which it seems to only serve to Android and iOS devices. In Safari, the Android default browser and Android Chrome, the mobile layout is attractive and seems user friendly, although scrolling in both Android browsers feels a bit laggy.
On other mobile platforms like bada, Symbian, S40 and WebOS, Seeking Alpha delivers its desktop layout, which is a bit sluggish and unwieldy, but usable on mobile devices.
But woe to anyone who tries to use the Seeking Alpha site with
Firefox Mobile, Opera Mobile or Opera Mini on Android. The mobile formatted version loads in these browsers. It even looks OK with all the page elements laid out in their proper places. But most of the links don't work and pages can't be scrolled. In other words the page is completely and totally broken! And there's no way to switch to the desktop view either. I didn't try the site in Opera Mini on an iPhone but suspect it breaks the same way there.
The site's designers apparently know or suspect (because they probably didn't bother to test in any other browsers) that their mobile view doesn't work with anything but iOS Safari and the Android browser so they don't serve it to other mobile platforms. But their browser detection algorithm detects platforms rather than browsers and they end up serving markup intended for the Android browser to Opera and Firefox just because they are running on the Android platform. This is confirmed by the fact that the Opera browsers on Symbian get the desktop version.
The way Seeking Alpha breaks only on non-Google browsers on Android is weird, but one of the perils of building and testing to a specific browser or browsers rather than using a standards based approach and testing with multiple browsers and platforms.
This tendency for web designers to only test against iOS and Android, the so called "Webkit Monoculture", is putting other browser vendors and their users in a real bind. It's pushing Opera and Mozilla toward giving their browsers -webkit- CSS prefix support, and in the case of Mozilla, changing user agent strings to impersonate Safari. Many in the web design community design community whom I respect think this will do more harm than good. As a user I'm don't know who's right, I just want sites to work no matter which platform and browser I'm using.
Update 3-May-2012: The Seeking Alpha site now works properly in Firefox Mobile but is still broken in Opera Mobile and Opera Mini.