Tag Archives: devices

Video: Adobe Edge Inspect

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.

edge_inspect_feature1
Synchronized Browsing

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.

edge_inspect_feature2
Remote Inpsection

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…).

edge_inspect_feature3
Screen Captures

Did I mention Adobe Edge Inspect is also free? It’s part of the free tier of Adobe Creative Cloud.

Rapid Prototyping With PhoneGap

Last week I gave a presentation to a local DC Meetup group on “Rapid Prototyping with PhoneGap“. The main takeaways are:

  1. PhoneGap is great for rapid prototyping.
  2. Don’t limit yourself to a prototype! PhoneGap is awesome for building real-world production applications targeting multiple platforms!

You can check out my presentation here:


Some reasons why you might want to use PhoneGap for rapid prototyping:

  • It’s easy
    • More people know HTML & JS, over native development
    • Lower barrier of entry in mobile development
    • Integrate seamlessly with HTTP services
  • It can cost less & can get done faster
    • Reduced developer hours + web designers can build the prototypes
    • Less development effort = faster turnaround

Here are the real-world PhoneGap apps that I demonstrated:

Wikipedia Mobile - The official mobile application for wikipedia.

Halo Waypoint – Companion application to the Halo game for Xbox & Xbox Live.

Untappd – Social networking with beer.

US Census Browser – Visualizing data from the 2010 US Census


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“.

US Census Browser v2.0

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 is currently available for:

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

The source code for the US Census Browser has also been updated on github: https://github.com/triceam/US-Census-Browser

To learn more about app-UI, check out my page here: http://www.tricedesigns.com/2012/04/24/introducing-app-ui/

Enjoy!

Introducing app-UI

I’d like to take a moment and introduce app-UI, a new open source application framework that I’ve been working on.

app-UI is a collection of reusable “application container” user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices. app-UI is a continual work in progress – it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.

Disclaimer: Please keep in mind that things will change as the project is improved and matured – this is a beta/early prototype.

All of app-UI was created using HTML, CSS, & JavaScript. All animations are rendered using CSS3 translate3d, so that they are hardware accelerated (where supported). app-UI works well on iOS, Android and BlackBerry browsers (others not tested), and works well on the latest releases of most desktop browsers (I know it does not work on old versions of IE).


Why?

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…).


Application Containers

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.

ViewNavigator

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.

Samples:

SplitViewNavigator

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.

Samples:

SlidingView

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.

Samples:

Just swipe horizontally with a finger or the mouse…


Bugs & Features

No software is ever bug-free. If you encounter an issue, have feedback, or have feature requests, please log them at: https://github.com/triceam/app-UI/issues

-OR-

Fork it, fix it, and send me a pull request.

Please do not just complain.


Real World Usage

You can see this framework in the following real-world apps:

If you have built your own app using this framework, please let me know! (@andytrice on twitter)


Download

Get started with app-UI today! Just browse to http://triceam.github.com/app-UI/, read the details, download a copy, and start building your own apps!

If you’re building something cool with it, then let me know! I’d love to hear about it.

Mobile Web & PhoneGap HTML Dev Tips

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.

Disabled AutoCorrect:

<input type="text" autocorrect="off" autocapitalize="on" />

Disabled AutoCapitalize:

<input type="text" autocorrect="on" autocapitalize="off" />

Managing the Keyboard

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.

Default Keyboard: Supported Everywhere

<input style="width: 400px;" type="text" value="default" />

Numeric Keyboard: Supported on iOS, Android & BlackBerry (QNX)

<input style="width: 400px;" type="number" value="numeric" />

Numeric Keyboard: Supported on iOS

<input style="width: 400px;" type="text" pattern="[0-9]*" value="numeric" />

Phone Keyboard: Supported on iOS

<input style="width: 400px;" type="tel" value="telephone" />

URL Keyboard: Supported on iOS & BlackBerry (QNX)

<input style="width: 400px;" type="url" value="url" />

Email Keyboard: Supported on iOS & BlackBerry (QNX)

<input style="width: 400px;" type="email" value="email" />

Disable User Selection

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.

<style>
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
</style>

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.

Disable Zoom

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.

<meta name="viewport" content="width=device-width, user-scalable=no" />

You can read further detail on the viewport metadata tag from the Apple Safari HTML Reference, or the Mozilla reference.

On a Phone? Integrate With It

Your application can dial phone numbers very easily. Just use a standard web location, but use the “tel:<phonenumber>” URI format.

Test it with Apple Customer Support: 800-275-2273

<a href="tel:800-275-2273">800-275-2273</a>

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.

Luckily, this is also really easy. I personally prefer the open source iScroll JavaScript library from cubiq.org. iScroll works really well on iOS, Android and BlackBerry – I haven’t tested other platforms, but you can test them out yourself: http://code.google.com/p/iscroll-js/source/browse/#hg%2Fexamples%2Fcarousel

Remove “click” Delays

“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).

transform: translate3d(0,0,0);
-webkit-transform: 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:

I hope these get you moving in the right direction! If you have read this, and aren’t sure what it all means, check out the Adobe Developer Connection to ramp up on HTML5, or theexpressiveweb.com to see what HTML5 & CSS3 can do.