The hardest thing to do is doing what matters.

Far too much time is spent thinking, talking and reading, versus actually doing. We seem to forget that most working things are a product of iteration, of prototyping and multiple cuts, including ourselves (unless ‘intelligent design‘ has a better explanation).

Creativity is a destructive process because it destroys the status quo, it replaces the incumbent, and changes the world of today….in exchange for something different, maybe even faster, better, cheaper and such. 

So, going back to the basics of building whatever we are in the line of building, and to re-think by re-doing is truly what matters. Nothing says this with more certainty than the life story of Thomas Edison.

So, What have you done lately that matters?

Image Attribution:

Eye of the dragon

Young Edison

Responsive Web Design and your Enterprise

“You can have any color as long as it’s black.” – Henry Ford

The trouble is, on the web we are not content to just have a black Model T….The evolution of web, and the web access mechanisms means that websites are no longer just about detecting a screen resolution, and figuring out whether the browser is IE or something else (and use / ignore appropriate IE hacks). More importantly, mobile user experience has become key to serving customers and prospects more effectively.

It means that now our websites need to have the web in other colors, shapes and sizes, and to support and correctly deliver a usable experience to the plethora of screen sizes, resolutions, behaviors (tap, double tap, orientation change) that mobile devices have added. And that is the problem which responsive design is trying to solve.

At a higher level though, one can think about Responsive Web Design as a philosophy that is about caring for your site visitors, and making the overall site user experience more usable.

From a technology perspective, the general set of articles on the web typically refer to inclusion of elements such as fluid grids, CSS3 and media queries to determine viewport sizes, orientation detection etc. often combined with usage of JavaScript libraries such as backbone.js. 

All of this enables a smart website that can be downloaded to your browser, and based on the browser size, resolution etc. modify its appearance and fit in correctly. It is a cool experience and you can see the webpages automatically add / remove images, change image size and text layout etc. It’s…magical 😉

While all of this is great, the RWD solution may pose some limitations for the Enterprise space, especially when a business is using vendor software that typically uses its own CSS etc. 

An alternative way to approach the responsive web design user experience (may not be the purist idea of RWD which is more specific to the Fluid grid + Fluid Images + CSS3 / Media Queries) is to consider a server side user agent detection (If your website / web application has a server side capability e.g. ASP.net, JSP or Visualforce / Apex based).

In this case, you can choose to do a Server side user agent detection and navigate to a different version of the website (so a mobile or a desktop version). This can certainly reduce the amount of CSS3 wizardry that a pure RWD site would need. Also, by making that redirection, features that are key to different devices can be enabled / disabled, but it comes with its own set of baggage, notably reliability. 

Yet another alternate can be to introduce a Client side JavaScript based detection (assuming one can inject custom JS in the vendor generated webpage), that either redirects the user to appropriate page, or prompts user with a link to the appropriate version of the website for an on-click navigation. This comes with its own set of limitations.

So, where does that leave us…As always, “it depends”. There are certainly more than one approach to consider, and there is no one size fits all especially when it comes to Enterprise websites. However, RWD is a step in the right direction and if you are not thinking about it, this may be a good time.

Mobile Apps: Backend as a Service

Parse

Simple to use, good set of basic features

Can get expensive quickly

NOSQL based

 

 

Appcelerator ACS

Some very unique / interesting features such as friend that are not with others

Still in beta-ish, some features feel a little rough around the edges / still evolving

Integrated with Appcelerator

NOSQL based

 

 

Database.com 

Lots of enterprise grade features

Workflows, data integration, sophisticated business object layer

RDBMS oriented platform

NOSQL based

 

 

StackMob

Simple, proven, seems to have a good acceptance both in the enterprise and start up space

Very granular pricing strategy

NOSQL based

Offers a web hosting facility also that may be useful for smaller projects

 

Battle of the senses – Orange Juice UX

Have you ever tried to buy Orange juice and found yourself unable to decide 15 minutes later (assuming you are trying to find a different brand than your regular one)? Did you just kept on picking them up and putting them down. Why does that happen?

Image courtesy: http://flic.kr/p/4RonNC

On a recent grocery trip, I think I had an epiphany while still deciding on my Orange juice brand. You see, every brand I picked up came in a sleek plastic bottle or a slick poly coated Tetrapack. Nothing felt like an Orange peel, and I felt like I was having a Sensory disconnect.

My eyes were seeing images of farm fresh Oranges, and the sunny yellow of Orange juices, but my hands were telling my brain that it is plastic, it is artificial, synthetic, factory-made, not-real etc.

http://blondeben.deviantart.com/art/open-hand-sketch-24274987

My nose was sensing a departmental store smell, not an orange farm breeze. So, maybe sensory experiences matter, and retail stores need to do a better job of setting up the display. Or maybe that is just too much effort to sell some OJ.

I wonder how this will apply to Beer bottles. I have often stood in front of the Beer freezers thinking about which one to buy. Maybe the should smell of fresh hops or something…Oh well, for another day perhaps.

 

Mobile Apps: Saving user preferences (Titanium only)

I am passionate about mobile apps and one of my favorite mobile app development toolkit is Titanium by Appcelerator.Often mobile apps need to save user preferences such as font size and such. As I dug around, I found some interesting posts and built upon them, I figured it may be worth sharing it. So, here is one way of storing user preferences using Properties.

Then, where ever I needed to access it, I just used the getString method.

Why not use Global variables instead?
When I initially started, I thought that is what I should do. Save or default it to a property, and the first time my code accesses this property, just copy it into a Global variable, which can be referenced in any file across the App.

For some reason, the getString code seems cleaner (as in more explicit) to me. That way, if someone changes this property using the setString method, they know exactly what they are changing, instead of some proxy Global variable.

Happy Coding!

The storytellers of software

Disclosure: I work for Salesforce.com, but this blog represents my personal opinions and not those of my employer.

These are the screenshots from some of the leading Enterprise software company web site (organized alphabetically). It is interesting to see what stories are they trying to tell us…

Is this a story about how cool / great these organizations (or their products) are, or is it a story of how cool / great they can make you (the customer’s) business / life. 

Frankly, do customers really care about products or companies, or do they(we) care about what it can do for us?

So, who is Product-centric and who is Customer-centric in the images above, and what does that tell us about how these companies personalities…You decide.

HTML5 Mobile Apps builder – Easy-Peasy-Tiggzi

And late one night, I stumbled upon Tiggzi which is a hosted solution that allows you to create mobile apps inside a browser using jQueryMobile UI controls and easily integrates Rest APIs for mobile backends.

Using Tiggzi (and following this video), I was able to create an app that reads QR codes and writes that data to Parse.com (a mobile PaaS back-end, ) in just a few hours.

So, here are my thoughts…

Pros:

• Easy to work with, no IDE / configuration / Android / iOS SDK required for basic prototyping
• Very easy to integrate bar / QR code reader and to consume REST APIs,
• Testflight style remote app deployment and testing (probably the coolest feature of this service)
• Prompt support

Cons / Limitations:

• Needs better documentation / more content on best practices etc.
• Some UI controls are a little bit unintuitive
• Takes a little getting used to (esp. for folks used to of typical IDEs, like me)
• Will costs real money for making non-trivial apps

Here is the data on Parse.com (The bar / QR codes were read from products / QR generators using an Android phone and written to Parse.com).

And here is the same data inside the emulator.

Summary: Tiggzi is an interesting way to make basic read / write mobile apps, and for a simpler business app it certainly deserves consideration.

However, for apps that need a superior UX (higher visual and interaction fidelity) and a tighter device integration / better performance, Tiggzi may run into the limitations of jQueryMobile controls and constraints of Phonegap itself.

Want your .Net app on a free cloud, try AppHarbor

As the cloud continues to gain momentum, every other day a new and interesting service comes online.

However, with platforms like EC2 you may still buying more cloud than you really need because it is still a virtual machine running in someone’s data center that you get access to.

 

So, what is the point of Google Sites

When it comes to making a website, my experience with UI editors and WYSIWYG tools has been somewhat spotty.

HTML5 for mobile – Comparing JQueryMobile and Sencha Touch

I have been playing around with some HTML5 / JS frameworks that allow creation of mobile web sites and can be integrated with platforms such as PhoneGap for creating mobile apps.

The two frameworks that I have tinkered around with are JQuery Mobile and Sencha Touch. Here is what I found…

JQueryMobile

Summary: Easier to learn framework with a strong focus on mobile web / apps. Has a larger corporate backing / partners, and is integrated with Adobe Dreamweaver CS 5.5.

Pros:

• Much easier to learn as compared to SenchaTouch

• Newer version has good basic themes and themeroller makes custom theming easy

• UI controls appear better focused on mobile devices e.g.

 – By default labels are above the text input boxes which preserve real estate on mobile devices

 – iPhone style Flip switches work out of the box and allow text on both sides of it Ref: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-switch.html

  – Placeholder text for dropdowns works as expected (broken in Sencha touch)

Cons:

• Less Object oriented / more web site programming like when it comes to wiring events etc. For non-trivial applications, it may almost require using another framework such as backbone or Knockout

• Rough at the edges, Transitions may flicker and sometimes are not smooth

• Some UI controls do not work very well (Fixed toolbars that are overlaid everytime on vertical scrolling make the UX very flaky)

Sencha Touch

Summary: A more robust OO style architecture with a strong focus on mobile web / apps.

Pros:

• True MVC style architecture

• Takes a SASS based object oriented approach to theming

• Much smoother / flicker free transitions than JQM

• Nicer iPhone style theme and icons (better than JQM’s, IMO)

Cons:

• Steeper learning curve, changes from Sencha 1.x to 2 in coding styles etc. do not help

• UI is more oriented towards web design than mobile design e.g.

  – Form style UI layout with labels on the side of text boxes

  – iPhone style Flip switches (Toggle in Sencha world) require .css changes (https://github.com/tomalex0/SenchaTouch-Form-iosToggleField/)