Celebrate a LONG Holiday

Celebrate the Holidays

With Christmas falling on a Thursday, it is giving many folks the time for a longer Holiday – throw in a couple of days vacation for good measure and you are looking at three weekends and 10 business days for the tidy sum of half-dozen days of PTO! Is there a better time to celebrate? Heck, No!

So, with that said, I thought I would share some awesome Holiday UX inspiration you can use to fill the dark nights in the middle of Winter.

Celebrate the Whole Customer Experience

There is so much focus on Mobile that we sometimes forget that the Whole Customer Experience is what matters. Amazon does a great job with their web, mobile and packaging to provide a whole customer experience, but you can also see it in other places. Starbucks does an awesome job in celebrating a whole customer experience.

Celebrate the Whole Customer Experience

Timing is important for celebrations

There is nothing worse than sitting and watching commercials on TV urging you to buy-buy-buy in time for Christmas, the day after Christmas! Use technology to time the events you want to highlight. It is really easy. We have Festival of Lights, Diwali, Kwanzaa, New Years…. the list goes on and on. But each of these events have different dates.

Celebrate The Lantern Festival

Design Helps a Lot

I am really lucky that I get to work with some of the best designers in the world. They are top notch. But, using color theory, grid layout and fundamental UI we can all side-step design horror stories. Leverage inspiration from others. My favorite is the Golden Ratio: the layout can be seen duplicated in many designs.

Here are examples of the Golden Ratio you can use:

This slideshow requires JavaScript.

Have fun with the Holidays

There are few times in the year where you can really relax and have a little fun with your designs. This is definitely one of those times. Kick back and enjoy yourself. Maybe even poke a little fun at the Boss.

Happy Holidays

Digital is a Trend and not a Fad

A trend is defined in Merriam-Webster as: a general direction in which something is developing or changing. The following chart is from Business Insider “The Future of Digital“, an annual peak at where the tech industry is and where it is going. It is a brilliant PowerPoint. There are few slides I’d like to focus on.

The Digital Trend

Digital is a Trend that is here to stay

Do you have a computer, phone and a tablet? My guess is you do. Will you be getting a smart car, smart watches and smart clothers? The knee jerk answer is “probably not”, but I am here to tell you that you are wrong. The trend is clearly showing that you will buy smart-everything. Why? A simple reason: price. Let’s take Tablets. The iPad shipped in 2010 as a premium device. Today, you can pick up really great tablets for $99. The price is free-falling. Companies such as Amazon have come to realize that the value is not in the Tablet. The value is in the services that are delivered to the tablet. Why pay the cable company $100 per month, when you can get Netflix for $8.99/mth on your one-time investment of a $99 tablet?

The trend for tablet prices is falling fast

We are spending more time using our Devices

This is no surprise, but the trend for how we use our devices vs. how we use traditional media demonstrates that we LOVE our devices. All traditional media is falling but device usage is skyrocketing.

The trend for a device first world for media consumption

There are a number of other areas worth checking the BI deck:

  • Android now dominates as the top computer platform
  • Android will soon overtake Apple for app revenue
  • Digital will grow for decades

Let me know what your thoughts are in the comments below.

Are you ready for Behavior Driven Design?

Behavior Drives When We Use Devices

Should behavior change how we develop the digital tools we use everyday. Consider the following, my typical day:

This morning my phone woke me up. I reached over and turned off the alarm (it plays the Mission Impossible Theme song – setting the alarm seems so funny each night, but not so much in the morning). I glanced at the notifications. Lots. Shit. My brain is now thinking and I better get up. Twenty minutes later I am in the car. My phone is playing my favorite radio station from London (I’m a Brit living in the USA, but I got to have my UK radio stations). I get to work, power up my laptop and tackle Excel and PowerPoint – Xcode I have my eyes on you, too! Noon comes. Meet some friends to grab a bite to eat and watch highlights from the World Cup on James’ tablet sized phone (seriously, you make calls with that thing??). Back to work, to my number crunching and off home. That evening I sit in from of the TV. My wife is sitting next to me with her tablet. I go to bed and set Mission Impossible for my alarm – that will be hilarious in the morning!

Sound like a familiar routine? Maybe you do not have the Mission Impossible ring tone waking you up, but you do use multiple devices throughout the day. The cost of a phone and tablet is now so low that the key barrier to entry– namely, PRICE – is effectively gone. The PC maybe not so much, so we let the company buy it. Problem solved. What we have, today, is a collection of different devices – phones, phablets, tablets, laptops – that we juggle our email and work around.

To this end, I believe we need to determine behavior before a single line of code or your draw a wire frame. Behavior is now King.

The above chart shows how we typically use different devices. Form factor, portability and screen size all play parts into why we choose to use different devices at different times.

Today, we have three main devices – phone, tablet, PC – but the signs are clear that we will have many more devices. Add to the list: smart car, smart TV, smart watches, smart house, smart health devices, smart…. You get the picture. One app will NOT work successfully across all devices.

Behavior is now the key metric. Think about the apps you use today. How will they change as the tools you use each day adapt to your behavior? Take my daily routine, these are the changes I expect to see:

  • My Android watch alarm wakes me up
  • My iCar has an app for my favorite radio station
  • My Laptop crunches Excel
  • A phablet sized phone to watch video with friends
  • I use my phone during the day to catch up on email and news
  • My watch tells me when to get to the next meeting
  • At home, my TV is linked to my wife’s tablet to send extra information about the show we are watching

We are surrounding ourselves with different screens that have different tasks. All are computers. All will be cheap. Get ready for behavior driven design.

Three Stages of App Development

“You know, I have this great idea for an app.”

I get told this, a lot (particularly when it is late at night and a couple of beers may have been consumed). Like writing the next Great American Novel, I think we all have ideas for apps. The concept of touch technology is now central to how we use computers. We get what apps are all about.

So, yeah, you have an idea. And that is brilliant. But taking the idea and making the app requires you step through three stages. Each stage is:

  1. Communicating what your App Idea is
  2. Developing your App
  3. Marketing your App

Can you make it through these three stages? Then your idea will be real.

Three Stages of App Development

Communicating what your App idea is

You have your App idea. Now you need to get it down on paper and communicate what it does. To be clear, you don’t have to spend weeks drawing up amazing concept art, sometimes a napkin and a permanent marker are all you need. I spent one lunch time with a client drawing out what his app would look like, how it would function and where the data would go with napkins on the table.

There are also tools you can use to sketch out your app. Here are tools I use to rapidly sketch up my ideas:

  • Google Docs (drive.google.com) – it is free, easily shared and available at any Internet connection
  • Sketchy (iPad App) – very cheap and very easy to use on your iPad
  • SwordSoft Layout (Mac App) – cheap app to layout the flow of an app
  • OmniGraffle – really expensive, but, heck, full of cool features

The goal for using any of these tools is to communicate your idea. This is the first stage of a Minimal Viable Product (check out Eric Ries’ book Lean Startup), the fastest way of getting your idea in front of people.

Next, line up who you want on your team. A small, cross functional team is the best way to get a product up fast.

When you have your team lined up, you then need to go and get funding. Funding can come from many areas: a VC, a relative, a loan from the bank. What is very likely to happen, however, is that you are getting funding for an app you are developing for the company you already work for. The leaders of your company need to understand the value of the investment in building your solution. Develop a high level business plan illustrating proposed costs, returns and benefits.

Developing Your App

Every day there is a new way of developing solutions. Should your app run on a phone? Is it better to view on a Tablet? Do you get into the Wearable market early? All of these decisions are important to make and come with Pros & Cons.

The next step is to define what type of technology platform or platforms you will target. You have a choice:

  • Responsive Web
  • Mobile App for Apple’s iOS
  • Mobile App for Android
  • Windows Desktop App

There are also an increasing number of additional platforms that are gaining popularity. My experience has shown that you start with one platform, such as Android or iOS, and port your solution to other platforms when you have seen how successful you are.

Choosing the development tools is also not easy. The choices you have include:

  • Native Web/HTML5
  • Hybrid – Using Web Technologies to build native app experiences
  • Native Development

There are plusses and minuses for each approach. I have used all three and what I have found is that you need to really understand who is going to use your app to determine which programming language to go with:

  • Web/HTML5 App – this type of app needs to reach a broad audience (such as an app to check your bank account)
  • Hybrid Apps – your app needs to target multiple platforms such as simple game or eBook
  • Native Development – your app requires complex integration with hardware on the phone/tablet such as access to contacts, camera, native APIs

When you have chosen your platform start the work. I have found that short, iterative internal releases every two weeks really works. The sponsor sees progress, the team sees progress and problems can be caught very quickly. Think about a public release every 8-12 weeks.

Marketing Your App

You had the idea, your team built the app and now it is ready to publish your work. This will be your biggest challenge. Success stories such as Flappy Birds are rare. There are more than a million apps in the iTunes App Store and Google’s Play app store. When it comes to promoting your app you want to consider the following:

  • Make sure you app has a snappy name
  • You need a good icon and not all icons are created equally – I have used apps to generate icons (check Google.com for a search on icon generators)
  • Spend time on the description for your app
  • Create awesome images your app working – in many ways this is the most important feature as we all do “judge a book by it’s cover”
  • Create a short video outlining what your app does

The next step is to choose which app stores you are going to publish to. They include:

  • Apple’s iTunes App Store
  • Google Play
  • Amazon App Store
  • Barnes and Noble Nook App Store
  • Microsoft App Store
  • Your Own Private Enterprise App Store

Each store comes with its own set of guidelines. Remember that this is not the open web. Many of the app stores will review your app before publishing. Amazon, I have found, is very hard to get apps approved. Apple is no walk in the park, either. Google Play is still very easy to publish too.

When your app is published (anywhere from 2hrs up to several weeks) you need to get the word our on your blogs, social media accounts and even good old fashioned email. It is Marketing 101 time, folks. Promote, promote, promote.

These three stages represent a lifecycle every app goes through. They are not always sequential and, you will find, when you have your app completed for Version 1.0 that you will start to run all three stages at once (while version 3 is being ideated, version 2 is being developed and version 1 is being promoted – repeat with version 4, 3 and 2).

Let me know how your app ideas have come to life in the comments below.

Getting Started with jQuery Mobile [VIDEO]

A very popular framework for building HTML5 mobile web apps is jQuery Mobile. The following video steps you through how to get started with a blank page and build your first Web app.

The first step in creating a jQuery Mobile web app is to create a standard HTML page. The following will do:

<html> <head> <meta charset=”UTF-8″> <title>jQuery Mobile Web App</title> </head> <body>

</body> </html>

In the HEAD element section you will want to add the following links to latest release of jQuery Mobile:

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css” />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

The concept of “pages” in jQuery Mobile is not individual HTML documents but a classified section in between the BODY element on one document. This means you can have many “pages” in one HTML document. For instance, the following will add one page:

&lt;div data-role="page" id="page1"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;First Screen&lt;/h1&gt;
 &lt;div data-role="content"&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;

You can now add a second, third or fourth screen all in the same HTML document, like this:

&lt;div data-role="page" id="<strong>page2</strong>"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;Second Screen&lt;/h1&gt;
 &lt;div data-role="content"&gt;
 &lt;p&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/p&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;

The difference is the ID in the first line.

Each page has content you can format in it. This can include HEADER, FOOTER and elements such as BUTTON, FORM FIELDS and many more widget. The jQuery Mobile web site has a complete list of custom features you can add.

When you have completed your HTML editing, your page may look like this:

<DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>jQuery Mobile Web App</title>

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css” />
<script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js”></script>


<body> <div data-role=”page” id=”page1″> <div data-role=”header”> <h1>First Screen</h1> </div> <div data-role=”content”>

&lt;ul data-role="listview" data-filter="true" data-filter-placeholder="Page #" data-inset="true"&gt;
 &lt;li&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#page2"&gt;Page Two&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#page3"&gt;Page Three&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#page4"&gt;Page Four&lt;/a&gt;&lt;/li&gt;

 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;

&lt;!-- second screen --&gt;

&lt;div data-role="page" id="page2"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;Second Screen&lt;/h1&gt;
 &lt;div data-role="content"&gt;
 &lt;p&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/p&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;

&lt;!-- third screen --&gt;

&lt;div data-role="page" id="page3"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;Third Screen&lt;/h1&gt;
 &lt;div data-role="content"&gt;
 &lt;p&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/p&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;

&lt;!-- fourth screen --&gt;

&lt;div data-role="page" id="page4"&gt;
 &lt;div data-role="header"&gt;
 &lt;h1&gt;Fourth Screen&lt;/h1&gt;
 &lt;div data-role="content"&gt;
 &lt;p&gt;&lt;a href="#page1"&gt;Page One&lt;/a&gt;&lt;/p&gt;
 &lt;div data-role="footer" data-position="fixed"&gt;
 &lt;h4&gt;Page Footer&lt;/h4&gt;


jQuery Mobile is easy to use and scales effectively across many device types.

jQuery Mobile


Getting Started with PhoneGap Developer App

Adobe is expanding the tools in the PhoneGap line to now include PhoneGap Developer App. The Developer App essentially allows you to run PhoneGap projects you are developing on your computer easily an Android and iOS devices.

The following video steps you through what you need to know to get started with PhoneGap Developer App for Android and iOS:

Here are the steps:

  1. Install PhoneGap Developer App on Android or iOS device
  2. Open Terminal/Command window and install the latest version of PhoneGap: $ sudo npm install -g phonegap
  3. Create a new PhoneGap App or Open an existing app: $ phonegap create myDev
  4. Step into the app: $ cd myDev/
  5. Launch the Developer service: $ phonegap serve

What is now happening is that a Web service is running on your WiFi network. You can connect the PhoneGap Developer App on your device to the IP address that is being broadcast in three steps:

  1. Open the PhoneGap Developer app on your device
  2. Enter your IP address
  3. Select Connect
Connecting the PhoneGap Developer App on your iPhone

You can now view your app on your device. The following screen shot shows the app running on a Nexus 7:

PhoneGap Developer App on a Nexus 7 Android Device

This is the first release  of the PhoneGap Developer App and future releases will include support for Windows and Plugins. Not a bad start.

5 Techniques for your Mobile Web Site

There are lots of different ways to build mobile web sites. What I have pulled together is a collection of techniques that our teams use to allow your web site to look awesome on mobile devices. This is important due to the rapidly increasing demand for web sites optimized for the growing number of wireless devices.

The Mobile Web is a Many Screen World

The mobile web is not just Smartphones like iPhone and Android phones. The mobile web is anything that can connect to a web site. The term “mobile web” is now a reference term for multi-screen solutions. This means that Tablets, Laptops and even TVs are part of the mobile web. If it has a screen, it is likely it has a Web browser and will view your site.

Your Web site analytics are showing you how many different devices are connecting to your Web site. Google will breakdown PC and Mobile. Dig into the Mobile analytics and you will see all of the different screens (phones, phablets, tablets, etc.).

Mobile Web is for Every Device

Mobile Web Templates for Content Management Service

Many of us use CMS (Content Management Service) solutions to deliver content to Web sites. This will likely come as no surprise, but many of the leading Web CMS solutions now have templates that will deploy a mobile web template to ensure that the correct experience is deployed to a device.

WordPress, a tool used by many Web sites, has two ways of managing Mobile content. The first is through Plugins. The popular WordPress Jetpack plugin has a “Mobile Theme” that only requires you to activate the theme and your site will re-structure the content for phones and tablets. The second method is to implement a responsive theme. The goal of a responsive theme is to ensure that your site looks awesome for any screen. Check outwww.visualizetheweb.com as an example of a responsive WordPress template in action.

Responsive Design for Mobile Web

A big trend is the adaption of Responsive Design. The goal of a responsive site is to create one web page that will dynamically resize to the device and screen size viewing the content. Check out www.mashable.com as a good example of responsive design.

The biggest challenge for Responsive Design is a lack of design tools. Adobe, as you might expect, has two tools you can use: EDGE Reflow and Dreamweaver CC. Both tools will give you the capability to create Responsive designs for your Web site without having to write code.

The many screen of the mobile web

Leveraging Mobile Web Frameworks

Sometimes you need to go the functions of a template or tool and need to edit the code. Fortunately there are some great frameworks you can leverage to accelerate the deployment of your mobile web site. Here is a selection of frameworks you can use (it is not complete and I encourage you to share any additional frameworks in the comments below):

Working in the details

The goal of a framework is to get you up and running very quickly. But, there are times when you need to get down into the details of a specific mobile web browser (I’m looking at you, Mobile Safari).

One area that receives a lot of focus is creating Retina (high-definition) images. A good library to use to manage retina images in your code is Retina.js ().

A great list of the changes in iOS7 for Mobile Safari is here:http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Please add any techniques you use in the comments below.