The Minimalist Guide To Developing Apps

The other day, I was discussing with William how the enthusiasm for a new project tempts us to rush into a project with a list of features, rather than stopping to make a Wireframe, a very important step that saves much time and aggravation.

I’ve never heard of a contractor who builds homes without some form of schematic. The borders of the property need to be mapped out, the lines must be drawn, and the project must be visualized before the first hole is dug. Imagine being halfway through a project when you realize the bathroom is on the wrong side of the house. Whoops.

In software development, a wireframe is a very useful tool and can be created with minimal effort on the back of a napkin, but there are also some very good tools out there that give you a more modern representation. These aid in the understanding of information design, navigation design, and interface design. A good wireframing tool lays out all the buttons and menus and lets you click and drag them into place. Easy peasy.

The mere process of sketching out your website helps you add and subtract features to fit the scope of a project by giving priority to the kinds of information that are displayed and the range of functions that will be available. It goes beyond a mere list, which always gets bigger as the project moves forward, and projects that start that way almost always go over time, as well as over-budget.

There are several wireframe tools out there, both free and paid versions (see below). Paid versions are often more mature and have larger list of features. Free versions are generally newer and are working hard past the awkward teenage years in order to become a paid version. Either way, the mere act of creating a wireframe will save you much time, effort, and aggravation.

Just as web applications need good planning, so do Mobile Applications.  JQuery Mobile has a fun schematic markup on their homepage that gets you thinking about Mobile Development.  They have helped names like Disney and IKEA and allow you to quickly adapt a standard website into a mobile version of your site.

These tools do allow you to upload images to gain a more detailed rendering, but in some ways that defeats the purpose. A black and white representation is often best to grasp work flow and will help you to own the project before you launch development.

Below is a video example from Balsamiq:

Of course this is a good exercise to perform with the developer, but you might even try doing it yourself beforehand.  It’s a simple process that won’t take too much time, but will always give you a return, benefiting both you and your developer.

WireFrame References:
Free Service: Moqups
Paid Services: Mockingbird, Balsamiq


Less is More – What’s The Big Idea

When Apple took the world by storm and created the iPhone, it was the device’s simplicity, rather than its complex list of features, that won the day. In technical terms, we call this elimination of unnecessary state; the process of reducing the list of options to eliminate the clutter.

Apple understood this concept, and made brilliant decisions to reduce features in order to give it the friendly factor. You will notice one button instead of 18, one device instead of exposing their iOS to the open market, one place to download apps and music, the latter of which has given them much control profitability.

Consumers rave about the iPhone’s intuitive and user-friendly nature. The reduction of state and good design is what gave it life, allowing only one application at a time with only one physical button. No confusion. Easy. beautiful.

Programming is the same in many ways, with no fewer temptations to add multiple features.

Look what happens if you add one parameter; You are creating a true condition and a false condition. Then add another parameter. Now you have 2^2 or 4 conditions that you will need to test. Add a third and you are at 8 conditions.  In this vein, Windows clearly offered many features and services (internet, phone, contact management) but its first phone, with all its working parts, was a bust.

More features = more working parts = more opportunity for clutter or failure. Complex API’s are necessary. Nowhere does this rule hold truer than when you are dealing with vast amounts of working data. In the end, if it is not simple to read or use, it will collect dust.

I have seen many instances where a new piece of software was installed to solve “every” problem a company was having. The challenge? Such solutions are big and scary and often come with a giant learning curve. This is why Basecamp grew so quickly (it solved one big problem), and why Workamajig, a much more complete system, requires so much effort to sell, train, and install, and why they need a one-year contract to get things going. If people don’t invest in the idea, they will not use it. It’s just too hard.

The world of apps is taking off so successfully for the very same reason. Mobile Apps handle one idea, big or small, at a time. So, if you want your launch to be successful, you may want to do a little elimination of unnecessary state on your own. What big idea do you want to solve?


Mobile Apps – How To Save Thousands of Dollars

The gold rush is on, and people have hitched their wagons to many different platforms as they pursue the mobile market. The tsunami of technology is hitting us so fast that consumers are both dazed and engaged as new technologies flood their mobile widget du jour. Even more confused are the companies trying to decide what is best for their organization. Trends are being directed by the market as it is played out through supply and demand. The question boils down to our clients in how should they think about Mobile?

Many are asking, “why do we have different concerns for different platforms: the Web, Mobile Web, and Native Apps? What should mobile web be?”

The good news is that it’s more a buffet than a battle – and under the sneeze guard you can choose options based on how you wish your viewers to engage. Do you wish for them to shop, search, entertain, manage, inform, navigate, or connect? Is security your focus or functionality – or both? What is your budget and where should you invest?

Your Choices:
Mobile web (MW) – This is a browser-based application that is not downloaded from an app store and accessed when you type the URL on your mobile device. It allows fluid browsing, but developers need to code through a web-to-native abstraction layer to enable access to device capabilities that are not accessible in Mobile Web applications, such as the GPS, camera, and local storage.

Native App (NA) – This is an application designed to run specifically on the mobile device and allows use of Native Applications like the device camera, GPS, etc.

NA’s can do more heavy lifting with no need to download cookies because everything is loaded on your device, which provides added security and speed in contrast to a MW, which has traditionally been Read-only.  Still, NA’s are also much costlier to develop and need to be almost entirely coded for each device (Android, Blackberry, iPhone, etc..). Adding iPad compatibility, for example, can add up to 50%, due to the development cost. This provides less flexibility when new technology arrives. In contrast, having an out-of-date MW App is virtually impossible because it naturally adapts to the device.

Twitter and LinkedIn have also invested in both MW and NA. Compare the two iPhone screen shots and try to guess which is which:

Twitter:

LinkedIN:

Technology for MW is improving to a degree that it will soon be undetectable to the user.  Hint: Twitter MW is on the left, LinkedIn MW is on the right.  How did you do?

Compare the difference of the location of the tool bars; how do they act when you touch them? Which one is faster? Do they have the same number of functions?  Will they both allow you to upload a photo?

Boston Globe is another example of a website that has taken a hybrid approach, developing both MW and NA.  Their website is very mobile-friendly, adapting screen size extremely well using HTML-5. One way to test this on your screen is to play with the size of your browser while engaging with BostonGlobe.com. The responsive design is quite deliberate and well done.

The big mistake is to force a traditional media strategy into the mobile environment.  Companies need to realize that the world, and even the Web itself, have changed and continues to change quickly.  One advantage of MW is that it has the potential to adapt quickly and with less impact on your budget.  It is no longer the 2nd class citizen of mobile development and could overtake the NA, though Apple’s dominance should not be underestimated.  Consumers love the one-stop-shopping in the App Store, where credit card numbers are stored in one place.  They also like the one-click icons.

But if you ask, “What should Mobile Web be?”  Soon, it can be whatever you want it to be.  MW has as many advantages as Native Apps and should be equally considered.  My opinion is that developing web apps with the idea of using Cordova to make them native is the most cost effective solution for a customer.  It also delivers a good experience in both platforms.

Read this and this for more on this topic.


One Tool That May Keep You Relevant

Last week I wrote about PhoneGap in the context of how I believe it could make mobile development more available to small business.  This week I am writing of another equalizer which can work cooperatively with PhoneGap, and allows mobile friendly sites to be developed without the need for a native mobile application. This provides developers with a write less – do more environment and can buy time for small businesses, hesitant to take the plunge.

Though we are seeing small businesses loosening their development dollars, the mindset of austerity from a down economy is still ever-present.  So as the number of electronic touch-points increases exponentially, the money allocated to keep pace is still being doled thoughtfully and efficiently.

I give you JQuery Mobile(JQM); a turbo boost for your development dollars that gets you to the mobile environment while developing for the web.  Because mobile is quickly becoming the first-screen customers see, businesses can no longer ignore applying effort in this area.

Also notable is the fact that mobile and small screen size are no longer one and the same.  With giant phones like the Galaxy S3 and small tablets like the ipad Mini, net tops, desktop replacement laptops etc, it’s really important to utilize screen real estate, or lack thereof properly, and custom targeting will never get it right.

What happens when you custom target a desktop, then minimize the screen and drag it into the corner? Unless your site is reactive then it will not produce a good experience. Prioritizing columns and replacing icons can provide a great experience without having to custom target screen resolutions.

Still, it’s one thing to develop a mobile app and another to be mindful of the mobile environment. While many business owners are deciding if an app is the way to go, they can now buy time to ponder the question. One way to do this is to bring your website to its lowest common and most efficient denominator, something JQM is helpful to do.

JQuery is the brainchild of John Resig, and is the most popular Javascript library used today.  Its mobile version works with all popular smartphone, tablet, and desktop platforms, and is very easy for a developer to use.

The world now thinks of a website as more than a virtual directory.  And with Google’s emphasis on recency and relevancy of content, websites have much more information from which to cull, which is not always practical for smaller screens.  To help solve this, JQM provides responsive tables that allows developers to prioritize columns  and use abbreviated headers on the page so that only crucial information is displayed.   This releases the pressure on the decision to go mobile and allows you to concentrate on when to go full throttle with a mobile app.

When do you do this?  When you are ready.  It takes a plan that weighs cost vs. profit, and has a good marketing strategy, a good design, good content, and a desire to invest your brainpower – your most important asset.

 

 

 


The Mobile Savior of Small Business

Among the radical changes in the recent world is the impact of mobile devices on modern society.  Quickly becoming the first screen of information for everyone, mobile apps are even being used by the electronically resistant senior population who has found convenient use of large-print apps and the ability to maintain closer contact with grandchildren.  We have seen such a great shift in the past five years so that even the shortest elevator ride has people pulling out their phones to manage their lives.  This poses opportunity, as well as, challenges for businesses trying to stay ahead of the pack.

Big business has been the first mover with custom mobile apps that segment services to their simplest form.  With a few clicks on an iPhone, anyone can re-order medication, purchase movie tickets, or find their way using GPS technology.  To the small businessman, mobile apps are still something to put-off developing because it adds to the development budget, and they resort to mobile friendly sites that only require one build.  This means developing web apps with a width of less than 960 px and reducing the number of pages that display on mobile devices.  A true mobile app requires additional development dollars, but is native to the mobile device, even using geo location sensors and maps.

There are also more challenges involved with mobile apps because, just as web applications must function in multiple browsers, mobile apps must also function in multiple mobile frameworks (iPhone, Android, etc.), adding to the burden and cost of development.  For all the trouble, most small businesses throw in the towel applying their efforts in things they understand.

A new friend has come into the development community, and it has the potential to narrow the gulf between small and large business.  PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you are most likely already using.  That means, without needing to write code in a new language, developers can continue in their native environments, like HTML, CSS, or JavaScript.  PhoneGap will then recompile the code, turning your web app into a mobile app that runs on IOS, IPhone, IPAD, Android, Blackberry, Windows 7, Web.O.S, and Simbian.

Adobe saw the potential and invested heavily in PhoneGap as part of their plan to compensate for FLASH Players fading relevance.  They have put this service into a pretty package and are adding services such as compiling your code in the cloud, which ultimately improves consistency and offers convenience to the developer. They sell it simply:

Build great apps powered by open web standards. Cut down on development time by re-using your existing web dev skills, frameworks and tools. Get all the benefits of cross-platform development while building apps just the way you like.

Developers should be paying attention because they can use their existing development team without the need to find or create mobile specialists.  It also allows the ability to incorporate sensors, like geo location and cameras, which are native to the mobile environment.

Small business will love this because it simplifies their development strategy and gives them wider access to their customers.  It makes mobile development affordable for everyone and could very well equalize the playing field between big and small business.   For this reason, we are paying close attention to PhoneGap and hope to add it to our list of services very soon.