Here’s a quick video introduction I put together for Adobe Edge Inspect, a *free* tool that enables synchronized browsing and debugging of HTML content between desktop and mobile devices. It’s definitely worth checking out, if you aren’t using it already.
Adobe Edge Inspect enables synchronized browsing across desktop and mobile devices. By pairing your devices with Edge Inspect running on your desktop, any content you view in the desktop browser will be synched to all paired mobile devices.
Adobe Edge Inspect also enables remote inspection of content running on those mobile devices. This includes on-device debugging capabilities for both DOM & CSS inspection & modification, console logging, and more.
Adobe Edge Inspect also makes it easy for you to track and document visual issues on the remote devices. With just one button click, you can capture screenshots from all connected devices, complete with information about each device (OS, device name, screen resolution, etc…).
Did I mention Adobe Edge Inspect is also free? It’s part of the free tier of Adobe Creative Cloud.
I covered techniques for making your apps feel like “apps”, not “web pages”. You can read more about these techniques and useful libraries in my recent post on Multi-Device Best Practices. Note: That post contains references to both Flex and HTML/JS/CSS tools. In this presentation I focused only on the HTML/JS/CSS tools.
I also covered techniques for data visualization. You can read about techniques for visualizing data using web standards technologies, and see serveral HTML/JS data visualization libraries from my recent post on “Data Visualization with Web Standards“.
In this presentation, I covered PhoneGap Build, a cloud-based compilation tool for PhoneGap apps, and debug.phonegap.com for remote application debugging. I also covered iWebinspector for debugging PhoneGap experiences inside of the iOS Simulator.
Let’s also not forget the real-world companies that have invested in PhoneGap/Apache Cordova, including Wikipedia, Facebook, Salesforce, IBM, and others. You can read more about these companies from my recent post “Who Uses PhoneGap“.
I am happy to announce the US Census Browser version 2.0! Back in December of 2011, I released the US Census Browser as an open source application intended to demonstrate principles for enterprise-class data visualization and applications developed with web standards. This version has some fairly substantial changes – See the video below to check out features in the latest version:
Version 2.0 of the US Census Browser has some substantial changes, including:
Completely new & redesigned UI layer, using app-UI. app-UI is an open source framework for application view-navigators that mimic native mobile applications. Using the app-UI SplitViewNavigator, the US Census Browser now supports both landscape and portrait orientations.
Switched from Google Maps to Open Street Map using OpenLayers. Users of the Census Browser maxed out my Google Maps account! That is 25,000 map loads within a 24 hour period! WOW! I switched to the free Open Street Maps solution, which doesn’t have any usage/bandwidth limitations. With this change I was also able to add interactive maps.
Updated to Twitter Bootstrap 2.0. The app is now using new UI styles and components which are now available in Twitter Bootstrap version 2.0
I’d like to take a moment and introduce app-UI, a new open source application framework that I’ve been working on.
Disclaimer: Please keep in mind that things will change as the project is improved and matured – this is a beta/early prototype.
You might be wondering “why create this?” when there are other open source alternatives like jQuery Mobile. The primary motivation for creating app-UI was to have reusable application containers that are highly performant, and do not force any prescriptive development paradigms. With respect to animations/transitions, app-UI outperforms the alternatives, particularly on mobile devices.
app-UI can be used with many different existing frameworks – app-UI only requires jQuery as a solution accelerator framework. It will work with existing UI widget frameworks (jQuery UI, Twitter Bootstrap, etc…), and will work with existing templating frameworks (Moustache, Knockout, Handlebars, etc…).
app-UI currently has three application containers, and at this time it is not intended to be a complete UI widget framework.
Please see the “samples” directory for usage scenarios – there is no documentation yet.
The ViewNavigator component allows you to create mobile experiences with an easily recognizable mobile UI paradigm. You use this to push & pop views from the stack.
The SplitViewNavigator component allows you to create tablet experiences with an easily recognizable mobile UI paradigm. The SplitViewNavigator allows you to have side-by-side content in the landscape orientation, and the sidebar is hidden in portrait orientation.
The SlidingView allows content to slide to the side using a horizontal swipe gesture, revealing a navigation container “underneath”. This is very similar to the behavior in Facebook’s iPad application.
Just swipe horizontally with a finger or the mouse…
Recently I’ve been spending a fair amount of time working on HTML-based applications – both mobile web and mobile applications using PhoneGap. Regardless of whether you are targeting a mobile web browser or a mobile app using the PhoneGap container, you are still targeting a mobile web browser instance. If you haven’t noticed, mobile web browsers can often have peculiarities with how content is rendered, or how you interact with that content. This happens regardless of platform – iOS, Android, BlackBerry, etc… All have quirks. Here are a few tips that I have found useful for improving overall interaction and mobile HTML experiences.
Disclaimer: I’ve been targeting iOS and Android primarily, with BlackBerry support on some applications. I don’t have a Windows Phone device to test with, so I can’t comment on support for the Windows platform.
AutoCorrect and AutoCapitalize
First things first: autocorrect and autocapitalize on Apple’s iOS can sometimes drive you to the brink of insanity. This is especially the case if you have a text input where you are typing in a username, and it keeps “correcting” it for you (next thing you know, you are locked out of the app). You can disable these features in web experiences by setting the “autocorrect” and “autocapitalize” attributes of an <input> instance.
Have you ever experienced an an app or web site on a mobile device where you have to enter numeric data, and the default keyboard pops up. Before entering any text, you have you switch to the numeric input. Repeat that for 100 form inputs, and try to tell me that you aren’t frustrated… Luckily, you can manage the keyboard in mobile HTML experiences very easily using HTML5 Form elements.
One way to easily determine that an application is really HTML is that everything on the UI is selectable and can be copied/pasted – Every single piece of text, every image, every link, etc… Not only is this annoying in some scenarios (and very useful in others), but there may be instances where you explicitly don’t want the user to be able to easily copy/paste content. You can disable user selection by applying the following CSS styles. Note: This works on iOS, and partially works on BlackBerry/QNX for the PlayBook. It did not work on Android in my testing.
The -webkit-touch-callout css rule disables the callout, and the -webkit-user-select rule disables the ability to select content within an element. More details on webkit css rules from the Mobile Safari CSS Reference. More detail about disabling copy/paste on iOS is available at StackOverflow.com.
If you want your content to feel like an app instead of a web page, then I strongly suggest that you disable gestures for pinch/zoom and panning for all use cases where pinch/zoom is not required. The easiest way to do this is to set the viewport size to device-width and and disable user scaling through the HTML metadata tag.
This technique works on both Android and iOS devices, and I assume other platforms. However, I don’t have the devices to test all of them.
Touch Based Scrolling
Touch-based scrolling is critical to having an application that feels native. I dont mean that the whole page should be able to scroll… Your browser will be able to take care of that alone. Instead I mean that you should be able to scroll individual elements so that they mimic clipped views, lists, or large blocks of content. You should be able to scroll content where it is, and not have to scroll an entire page to reveal something in only one area of the screen. You should minimize scrolling when it may cause poor UX scenarios. This is especially the case in tablet-based applications which have a larger UI than phone-based applications.
“Click” events on HTML elements on mobile devices generally have a delay that is caused by the operating system logic used to capture gestural input based on touch events. Depending on the device, this could be 300-500 MS. While this doesn’t sound like much, it is very noticeable. The workaround is to use touch events instead of mouse events: touchStart, touchMove, touchEnd. You can learn more about touch events from html5rocks.com. There’s also a great script from cubiq that adds touch events for you to optimize the experience for onClick event handlers on iOS devices.
Add To Home Screen
If you want your web app to fee like a real app and take up the full screen without using PhoneGap as an application container, then you can always add it to the device’s home screen. Although this can only be done manually through the mobile browser, there are a few open source scripts to guide the user through this processs: cubiq.org or mobile-bookmark-bubble should get you started.
Use Hardware Acceleration
Animations will generally be smoother and faster if your content is hardware accelerated (and the device supports hardware acceleration). You can make html elements hardware accelerated just by adding the translate3d(x,y,z) css style to the element (be sure to set all three x, y, and z attributes otherwise hardware acceleration may not be applied. If you don’t want any translation changes, you can use the translate3d CSS rule with all zero values: translate3d(0,0,0).
In your development/testing, you can even visualize which content is hardware accelerated in both desktop and mobile Safari using the technique shown at http://mir.aculo.us/.
Make You Apps Fast
Last, but certainly not least, make your apps fast. Follow best practices, and be efficient in code execution and the loading of assets (both local and remote). Here are a few links to get you going in the right direction: