When people ask me the top ten things I care most about as the COO of a startup I tell them the top nine are all cash – and that I can’t remember what the tenth one is, so it must also be cash. Now obviously that’s not entirely true, there are other things I worry about – but it is true that I spend a lot of time worrying about money. My co-founders often accuse me of obsessing about it – and they’re right – I do. As a self-funded startup – even the kind of well positioned one I described in the paragraph above – cash is hugely important, it is your lifeblood and it needs to be properly managed.

The good news is that in a lean startup like ours cash management does not have to be difficult. There are two things that I have done in particular to help us manage our cash position.

The first one is to build a simple daily cashflow model to track all of our cash ins – client payments – and cash outs – payroll, contractor payables, taxes, insurance, rent, legal fees and other expenses. More importantly, the model also projects forward at least sixty to ninety days so that I can see where things might get tight in the near future. This model has been a crucial tool in our rapid growth over the last year.

The second is the general approach I take to spending the company’s money – which is, I don’t like to spend money. All joking aside, we do spend money on things that really matter to the business, but when we travel, for example, we double up on hotel rooms and we use points to buy train tickets. When we buy computers for our developers, we buy top of the line machines, but we buy refurbished and save a few hundred dollars per machine. Every dollar matters in the lean startup.

The reality of startup life is that there are lots of things that can go wrong, including running out of cash. While most of the potential pitfalls of running a startup are going to be out of your control, cash management shouldn’t be one of them.

Define Your Primary Assumptions

For our first website launch we decided to use the blog posts to drive analytics on our primary market assumptions:

1. Many developers want to improve their skills with HTML5 and JavaScript.
2. As the mobile app maturity index increases, customers will increasingly prefer HTML5 and Hybrid apps over native apps.

Build

• A WordPress site – Will people read, comments & contact us?
• Partner channels – Can we build a word-of-mouth referral network?
• Meetup.com – Will developers sign up and show up?
• Eventbrite – Will developer pay for trainings and bootcamps?

Measure

• Google Analytics – Goals Conversions (website contact form)
• SugarCRM – Word of mouth lead generation funnels (how many leads do we need to generate to close an actual opportunity? what is the cost to acquire 1 training registration?)

Experiment

Our v1.0 website ‘Content Recipe’ was a basic articulation of our primary assumptions and a value statement on our products and services.

We used a Lean Canvas to organize our thinking and surprisingly it also helped us craft the website content strategy and messaging.

Speak to Actual Customers

Luckily for us, we run Meetup groups in New York and NoVa and many of the members are representative of our potential customers.  In a very real way, Meetup attendee interest in certain topics is a clear indicator for training course topics.

In order to identify signals worth following, we first had to create a lot of noise.  Activity, as they say, is meaningless without visibility.  So we focused on cross-linking our content into the following obvious outlets:

• Twitter
• LinkedIn
• Meetup.com
• Sencha Forums
• SlideShare
• Personal networks

Learn

This is quite possibly the hardest simple thing to do. Analytics and numbers can get overwhelming quickly and evaluating contradicting customer feedback can get frustrating. What we’ve found that has worked best is to look for harmonizing patterns, which means paying attention when two completely different people ask you for the same thing.  Often times with customers, failing to listening is the single biggest mistake entrepreneurs make.

Adjust (Pivot)

What we learned from our customers really, really surprised us. It allowed us to pivot our ideas to better increase our chances of achieving scale.  We learned that not only do individual developers want this training, but very large companies want to train very large development teams on our courses.  Additionally, we learned that companies are also interested in licensing our training and subscribing to online training materials we create.

Website Iteration

v1.0 – Get to market

Our v1.0 website allowed us to get to market in a weekend and start learning asap.  We focused on content more than style and getting the maximum reach and engagement for our content and offerings.  We focused on building a lead gen machine and on qualifying opportunities into sales.

v2.0 - Branding, Positioning, and a Marketing Plan

For v2.0, (and our 6 month anniversary) we planned our ‘Coming out party’ as a company and coordinated a website refresh/relaunch timed with SenchaCon 2011.  With even a short history and paying customer track record, we re-organized our site content to focus on third-party validation of our products and services.

• Crowd-sourced a logo and identity system
• Redesigned our WordPress Template (thanks to our friends at SpryFly)
• Created a Facebook Page
• Content/Information Architecture refresh

v3.0 – Learn From New Mistakes

As we continued to work on our content strategy and messaging, we felt the site was becoming overly static and lacked a sense of activity, recency, and motion.  In an effort to more accurately have the site reflect our HTML5-ness, we built a kitchen sink of sorts with video, keyboard navigation, and the works.

v4.0 – Device as Market Share – Leading with Mobile

We have spent the better part of the past nine months optimizing our web content in line with our services.  As a company that is embedded in the center of mobile web app development, it’s no surprise that our site is optimized for phone and tablet devices.  We’ve also experimented enough to know that our website is one part of a content-ecosystem that connects and distributes our content among various content destinations: Facebook, G+, Twitter, Slideshare, Stack Overflow, Sencha Forums, Github, and Quora.

In as close to real time as we can make it, our content is curated and correlated to business performance.

In defining and refining your product or service to achieve scale, treat your website like a garden that needs constant attention: constantly plant ideas and weed out non performing content.

Old Meets New

Ethan’s premise of using a flexible grid system to achieve a responsive design that degraded gracefully between screen resolutions was really nothing new. Flexible and fluid layouts have been a part of web design since the beginning. We’ve all at one point used percentages for widths. Flexible designs were never highly adopted because of the ever changing landscape of devices we use to view web content, and controlling the content within those flexible bounds was a difficult task.

Jeff Croft wrote an interesting article that aims to provoke thoughts about the future of responsive design. He makes great points about responsive design being just that — responsive design it ends at visual design. As user experience designers, we don’t take into account other user contextual situations, and we focus on what we can control. In this case, that’s the user’s screen resolution.

Just a few of the interactions Jeff mentions –

Some, off the top of my head: Where are they? Home? Work? Inside? Outside? Private place? Public? Moving? In a car? Driving (eeek!)? On a train? What’s the weather like? Who are they with? Are they alone? In a group?

Certainly some great scenarios, but no great solutions are available for this type of user context. Yet. This sort of contextual design is something that many designers are still learning to understand. Designing for your users environment has never really become a factor. With more and more users on the move, and the majority of them using smart phones, we need to be more concious of their surroundings and how a design could change based on that.

Modus Create's website on iPhone. Vertical stacking is common for mobile layouts.

Is it good for our industry?

At the end of this year, it would not surprise me if “responsive design” is the most searched term on every web design and development website. Everyone is jumping on the bandwagon, and I think it’s great. When people get behind a technology, and start contributing, only great things can happen. There are already several great frameworks for getting up and running quickly with a responsive grid system.

Innovation doesn’t come from following, however. Developers need to even know, start thinking beyond the fluid grid. What comes next? Hard to say. For a long time we have let the media in which users consume content dictate our development technology choices. With the introduction of many devices with many screen resolutions, comes the need to support many devices with minimal amount of overhead — which is how flexible grid systems were born.

Fixed width is not dead

Not by a long shot. There will always be a place for a well structured and designed fixed-width website. And even greater still, not every website or application needs to be responsive. Think about the goal of your application, think about who is going to be using it, and where. Then decide if it needs to be flexible enough to deal with multiple devices gracefully.

Going big?

When most people think of a fluid and responsive design, they usually think mobile. Your site needs to look great on mobile, which is true. But what about a large portion of users that have screen resolutions pushing 3000 pixels? Gizmodo took a stab at designing for those users with their “HD View”. Massive, beautiful images gracefully cover your available real-estate. Viewing the site on my 27″ Cinema display with it’s 2560×1440 resolution, the site looks wonderful. Just an example of a little innovation.

Modus Create's Training page on the iPad. Landscape provided a perfect amount of space for a 960 width grid.

Closing thoughts

I purposely wrote this post with the intention of not getting into technical details about how to pull of a responsive design. There are hundreds of sites, many of them copied from one another, who lay out different techniques for creating a fluid grid, fluid images, type, and everything else you would need to be successful with your design.

Topics being covered include:

• Introduction to Sencha Touch
• Ext JS Component foundations
• Panels and Layouts
• TabPanels
• Sheets and Pickers
• Data Stores
• List and Nested List
• Form Panels
• Media and Carousels
• Application development
• Performance considrations

Early bird pricing for the event ends on March 11th, so get your tickets now!

Tickets can be purchased from Eventbrite.

I have produced a set of Sencha Touch 2 OmniGraffle stencils based around the kitchen sink demo that Sencha has developed. Using this set of stencils, you should effectively be able to quickly wireframe and prototype a base theme Sencha Touch application.

Included are the majority of the UI elements, and in the set you will find buttons, toolbars, form elements, modals, overlays, alerts, tab bars, and a date picker.

• Download the OmniGraffle .gstencil here

The stencil will also be posted to Graffletopia shortly, so you can search for it inside of OmniGraffle and download it that way as well.

Update: The stencil has been approved on Graffletopia. You can find it here.

We’d love to hear your feedback!

HTML5 Evolves from Buzzword to Core Technology Platform

2012 is the year Mobile Web Apps will come online.  Most firms continue to struggle with mobile product development and the first generation of native mobile apps were held to a much lower standard for user experience.  As consumers expectations become more sophisticated, the ever increasing portfolio of novelty or ‘executive pet project’ mobile apps will have to be replace by a scalable, cost effective, HTML5 mobile web app model.

The ‘Hybrid App’ Development Becomes Migration Plan for Native Apps

Many firms we speak to look at HTML5 as their ‘everything else’ strategy beyond iOS.   For firms that have focused on native iOS apps, HTML5 will be their platform of choice for covering Android, Windows, and Blackberry devices.   Of course there are specific hardware features available to native mobile apps that packaging tools such as PhoneGap make available to HTML5 developers:  camera, GPS, compass, accelerometer, and local storage to name a few.  Hybrid Apps, apps that deploy HTML5 content wrapped in a native wrapper of code, allow for a smooth transition point to more scalable solutions.

Facebook embraces HTML5

Facebook will release project Spartan and most likely it’s own phone optimized to run HTML5 based games and apps as direct challenge to iOS.  Facebook acquired HTML5 platform company Strobe towards the end of 2011 and looks to be boosting it’s developer community relations.  With the release of ‘Timeline’ we believe Facebook is beginning to draw a line between the content and app experience on Facebook and HTML5 will be the technology that Facebook use to become an app distribution channel.

Open Government = Mobile Web Apps

Citizen engagement is predicated on citizen access.  Just as CMS platform like Drupal and WordPress revolutionized the way agencies standardize and manage web content, HTML5 based mobile friendly sites and apps that can easily pull content from existing CMS infratructure will revolutionize how agencies large and small achieve their mission.

HTML5 Challenges the “Native App & Store” Distribution (and Business) Model

Scale is the primary driver for HTML5 growth.  As enterprises shift mobile from vanity projects to core technology, the 30% ‘Tax’ levied to use native iTunes Store and Android Market will become increasingly seen as lost revenue.  Firms will increasingly look to hybrid apps and mobile web apps to grow their marketshare beyond iOS devices and leapfrog over the need to add native Android development to their operational stack.  As companies look to maximize mobile app revenues, they will be increasing motivated to recapture profit lost to pay for access to a delivery channel.

Why CSS is limited

• No nesting capability, therefore reading long strings of CSS can become difficult and time consuming.
• No re-usability. You cannot globaly change any particular style unless you do a manual find/replace.
• No mathematical operators for quickly calculating anything from margins & padding to font-size and colors.

Diving In

As a Front-End developer, I work with CSS a lot. One of the more frustrating things about CSS is in general, the more specific the rule, the longer the line of CSS will be. Of course there are ways around what I’m about to write, but in standard CSS it would not be uncommon to see something like this:

#main {
  background: #fff;
}

#main #blog {
  margin: 10px 5px;
}

#main #blog .entry-content {
  margin: 20px;
}

#main #blog .entry-content p {
  line-height: 20px;
}

#main #blog .entry-content p.opener {
  font-weight: bold;
}

That’s 18 lines, including spaces. But we don’t really care about lines numbers in our uncompressed CSS. We care about readability, and how quickly we can navigate and locate a specific style [more on this later].

In LESS, I’d write the same CSS like this:

#main {
  background: #fff;
  #blog {
    margin: 10px 5px;
    .entry-content {
      margin: 20px;
      p {
       line-height: 20px;
        &.opener {
          font-weight: bold;
         }
      }
   }
  }
}

Couple of advantages here. If you only used LESS for straight formatting, which I sometimes do, you gain several advantages.

• It’s faster to write CSS when you don’t have to repeat extremely long chains.
• Visualizing your cascading styles (we are working with Cascading Stylsheets afterall) is much easier when you actually can visually see them cascade and nest.

Using the & operator will output the CSS:

p.opener { font-weight: bold; }

If you removed the &, you would get an additional class not specific to the tag.

p .opener { font-weight: bold; }

Use LESS for :pseudo-classes

Another  quick trick is that you can use the & operator to act on :hover, :active,  and any other pseudo-attribute including the new CSS3 spec like :nth-child or :last-child.

a {
  &:hover { color: red; }
  &:active { color: blue }
}

Use CodeKit

LESS isn’t a language that browsers can compile without Javascript, so I’ve been using an app called CodeKit. From the developers mouth:

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that’s just the first paragraph.

Yep, it automatically watches and compiles our LESS files. Very nice indeed. I’ve also used it for JSLint validation on my Javascript. Setup is dead simple. Add the folder in which your project lives, and CodeKit will find all of the files it can handle and work it’s magic. CodeKit will also output our CSS in compressed (no line breaks) format for us.

Another advantage using CodeKit is that since LESS is compiled, it needs to be syntactically correct. No more hanging semi-colons or double ## laying around in your code anymore!

Download CodeKit here: http://incident57.com/codekit/

LESS is MORE!

One of the great things about LESS are variables and mixins. When you develop, you’ll notice that you begin to write repetitive CSS, especially when working with CSS3 properties like border-radius and box-shadow. Here’s a couple resources to bootstrap LESS and add in functionality that you can start using right off the bat.

• LESS Elements (http://lesselements.com/)
• Preboot (http://markdotto.com/bootstrap/)

Don’t overnest

As I mentioned earlier, one of the best features of LESS is the ability to nest rules. However, it’s important to keep in mind that you do not want to overnest. Here’s a good example:

nav {
  ul {
    li {
      a {
        ...
      }
    }
  }
}

Nesting with LESS isn’t really a LESS problem, but inherintly it’s a CSS problem. Find the balance between nesting for convenience, and nesting for function.

header {
  ul { ... }
  li { ... }
  a { ... }
}

Additional Resources

• How to Build a Responsive Frankenstein Framework With LESS
• Run LESS with Node.js
• LESS Github

Wrapping Up

Whether or not you use all of LESS’ features, or only a few, I think its worth giving it a shot on your next project. Using LESS is less about improving your CSS knowledge, and more about being more efficient when writing CSS. Once you start to write with LESS, you’ll begin to wonder why you waited so long.

Sheridan had recently served as the Director of Product Strategy at Three Pillar Global after the 2009 acquisition of CloverLeaf Consulting, a user experience strategy firm he founded in 2005. Sheridan helped grow Three Pillar from 20 to 200 employees globally and deliver noted iPad, iPhone, and Android applications for PBS and Time, Inc.

The meteoric growth of Three Pillar is a testament to the talent of the executive team and dedicated staff and I will draw on that experience and friendships heavily moving forward with Modus Create,” said Sheridan. Sheridan has also been recently nominated to participate in the exclusive DC MindShare class of 2011.

Jay Garcia, who founded Frederick Maryland based TDG Innovations in 2006, will serve as the company’s CTO. A core part of our growth strategy is consulting services, training, and product development based on the Sencha Touch HTML5 framework,” said Garcia, who recently authored ExtJS, in Action” for Manning Press and is currently authoring Sencha Touch, In Action.” We are excited to be the premier provider of Sencha consulting on the east coast.

The start of Modus is a very exciting development within the rapidly expanding Sencha Touch ecosystem,” said Jeff Hartley, Vice President of Services at Sencha. Jay Garcia and Pat Sheridan are skilled technologists and highly-regarded Sencha community advocates. We believe Modus will show customers directly that HTML5 is the right approach for enterprise mobile applications.”

Modus Create will focus primarily on mobile apps for media, publishing, and entertainment.

Founded in March 2011, Modus Create provide high end solution design for mobile, tablet, and rich web applications. Modus Labs offers training, workshops, and custom learning engagements to empower their clients. More information is available at www.moduscreate.com

Pretend for a moment you have been given an assignment. You are to allow records from a DataView to be moved to an adjacent GridPanel. The rules are as such:

• Users must be allowed to migrate records form the left DataView to the right GridPanel
• After records have been moved to the GridPanel, they cannot be migrated back to the DataView. They can only be destroyed.

The question becomes, how can we do this? If we sit down and think about the first task, migrating records from left to right, we must consider the order of operation that must occur.

• Get a collection of the selected nodes and records in the DataView
• Animate out the row representing the record in the DataView
• Remove the records from the DataView store, all the while capturing a reference to that very record.
• Add the records to the GridPanel store
• Locate the indexes of the newly inserted records in the GridPanel
• Somehow gain a reference to the HTML elements that represent the records in the GridPanel View
• Animate the elements in.

Sound like a lot of work? With Ext JS It’s actually surprisingly easy. Here is the handler for the “add to grid” button.

// This is the handler for the 'add to grid' button
var addToGrid = function() {
    var selNodes  = dataView.getSelectedNodes(),
        selRecs   = dataView.getRecords(selNodes),
        dvStore   = dataView.store,
        gridStore = gridPanel.store,
        gridView  = gridPanel.view,
        gridRowIdx,
        gridRowEl;

    // Loop through the selected nodes
    Ext.each(selNodes, function(selectedEl, idx) {
        // Animate and remove from store after animation
        Ext.get(selectedEl).slideOut('t', {
            callback : function() {
                // remove from DataView store
                var rec = selRecs[idx];
                dvStore.remove(rec);

                // Add to grid store
                gridStore.add(rec);
                gridRowIdx = gridStore.indexOf(rec);
                gridRowEl  = gridView.getRow(gridRowIdx);

                // Animate the newly added row.
                Ext.get(gridRowEl).slideIn('t', {
                    callback : function(el) {
                        el.highlight();
                    }
                });
            }
        });
    });
};

As you can see in the code above, the trick to getting things done immediately after an animation is making use of callbacks, which are methods that are executed after something of interest has occurred. In our case, the animations will execute our callback methods to ensure that everything happens in the proper order.

Here is a video of it working:

There you have it. Adding simple animations implemented in DataViews and GridPanels can enhance the feel for our Ext JS applications, helping make a more pleasant experience for your users.

If you want to see the example visit http://moduscreate.com/examples/566. There you can add/remove records. You can view the page source to see how everything is setup.

Read more.

To understand how Animations, data Stores, GridPanels, DataViews, work, check out my book,Ext JS in Action. You can get 40% off by using coupon code “extjs40″ at checkout.

Like what you’ve read today?

Please register and leave a comment. The best fuel that drives us to write is involvement with our readers .

     The rub with this requirement is that buttons automatically steal focus. One approach is to manually try to manage what input field was last focused, and will have to create all types of spaghetti code just to overcome this focus issue.

    A better approach is to prevent the problem from happening in the first place. This means that we’ll have to somehow intercept the mousedown and mouseup events. In order to do that, you will have to override two methods in the ExtJS Button class.

If you want to check this out on your own, I’ve attached code below. The easiest thing to do is to drop it in any Ext JS page via firebug. Here is quick video demonstrating the override in action.

In that video, we can see that even when mashing on the keyboard and button with the overrides, the focus is retained in the text area. But, you’re probably interested in seeing a real-world use-case.

    Below is a video that demonstrates a very early working copy of module I’m developing, that utilizes the overrides.

In the video above, I am pressing number keys along with clicking on instances of Ext.Button to demonstrate the consistent focus of the input fields on the screen.

The big picture

To solve this application wide, you could create a plugin or a mixin, but I think the best approach is to create an override that injects a new behavior for all Button instances, allowing you to simply set a flag to turn on the behavior with a simple config property.

Below is the code that you can use in your application today to include this behavior.

Read more.

To understand how inline extensions work, check out our article titled “how to extend and override with out creating an extension or override“.

Like what you’ve read today?

Please register and leave a comment. The best fuel that drives us to write is involvement with our readers .

Looking for Ext JS or Sencha Touch professional services?

TDG-i specializes in high-end software development with Ext JS and Sencha Touch. To learn more about who we are and what we do, check out our professional services and about-us pages.