Monday, March 12, 2012 at South by Southwest Interactive Conference in Austin, TX
by Paul Trani (Evangelist – Adobe Inc) #sxsw #devices #SXdevices
Demystifying Devices: Understanding the Future of the Web & Apps
Adobe Proto looks cool really awesome! Talking about the Adobe Creative Cloud. The creative cloud is Adobe’s way of syncing all of your Adobe products and apps to all your devices.
- Since 2009, Mobile Internet Usage has doubled every year
- iPads and iPhones make up more Web traffic than Macs
- mobile Internet usage will surpass desktop Internet Usage by 2015
Mobile devices have come a long way since the first mobile phones came out for the masses more than 20 years ago.
Progressive Enhancement (UI) and Responsive Design (layout)
progressive enhancement only gives browsers/devices the features they can use
Media queries – find min/max width, orientation & min/max-resolution to decide what css to load
Great resource for media queries is The Expressive Web. Style the page and lay it out differently, based on the device. At the same time, you want to make sure that you’re serving up the correct content. Adobe has greatly enhanced Dreamweaver since buying Macromedia. Dreamweaver 5.5 has a multi-screen preview, so it allows you to see how it will look based on the different media queries on the site. macromedia dreamweaver leave a comment
Tools
UX Design Demystified
Mobile users use apps more than the browser and the percentages are going up. Because apps are more attractive and are built specifically for the device.
In usability studies, attractive design is easier to use. http://www.jnd.org/dn.mss/CH01.pdf
It doesn’t just look good, it feels like it works better. In studies, round feels better (Golden Ratio – 1.61803399). Rounded corners are here to stay. iCloud logo follows the Golden ratio.
Design for REAL hand sizes – at least 45×45 pixels. Even if the label is small, make sure the hit area is large enough.
Remember a hand comes with a finger – don’t hide the data you are manipulating under your hand.
Technologies
Dreamweaver includes frameworks, you can create pages using jQuery mobile, Sencha Touch or other frameworks. You can use jQuery mobile themes in Dreamweaver or you can use the jQuery Mobile Theme Roller. Fireworks has an add-on that does the same thing.
Sencha Touch creates its own DOM, so it’s a little more complex. It’s more of an MVC approach, instead of a JavaScript approach.
PhoneGap
You can take that mobile site and use PhoneGap to make an app out of it.
- PhoneGap creates a chromeless browser packaged as a native app.
- Creates a “bridge” between the browser and the native code so you can access camera, accelorometer, contact, events, etc.
- Packages the web app into an .apk
Appcelerator Titanium Mobile also creates a native app. The problem is it’s packaged, so you have to use their environment.
Native Mobile Apps
Strengths
- Great integration with OS and device
- better performance
- better user experience
- supported by platform manufacturer
Weaknesses
- Platform dependent
- multiple skill set and tool requirement
- more difficult learning curve
- higher TCO
Multiple Native App Development requires multiple native languages
- iOS – Objective C
- Android – Java (Harmony)
- BlackBerry – Java
- Windows Mobile – .net
Even if you use something like PhoneGap to create multiple native apps across platforms, you still need to consider differences in native hardware and software, like the back button, date picker, etc.
What do YOU think? Let me know...