Location: The Lincoln Center, 417 West Magnolia, Fort Collins, CO 80521
More info & tickets: ignitefortcollins.com

Ron Zasadzinski of CodeGeek.net is one of the co-founders and organizers of this community-connecting event hosted quarterly in Fort Collins and attended by over 200 people each time. Check it out and attend the next event. You’ll have a blast!

Location: Keystone Conference Center, Keystone Colorado

Part of the LeadingAge 2012 Conference, Ron’s presentation will inform attendees why the mobile web is
so important, how to create a mobile web strategy for their business,
specific factors to consider, and specific tips for the health care industry,
especially as it relates to service providers for the aging population.

I find this a really interesting Responsive Web Design technique and Jason’s article explains the code (CSS3 and Javascript) he used to create the demo. It’s a great case study and demonstration of the technique:

Original article A Multi-Device Web Layout Pattern

A few highlights:

In both the US and Europe, equal percentages of smartphone owners use both apps and browsers to access mobile content. Use of mobile apps and mobile websites is nearly identical, indicating that both are important methods of delivering content and engaging constituents of your business.

Health ranked as the fastest-growing mobile media category in the U.S. in 2011, followed by Retail and other commerce-related categories such as Electronic Payments and Auction Sites.

More than half of the U.S. smartphone population used their phone to perform retail research while inside a store in 2011, illustrating the emergence of savvy smartphone shoppers who bring online shopping behaviors in-store – a trend seen in other markets as well. At the end of 2011, nearly 1 in 5 smartphone users scanned product barcodes and nearly 1 in 8 compared prices on their phone while in a store.

Tablets quickly rose in popularity in 2011, taking less than two years to account for nearly 40 million tablets in use among U.S. mobile users and outpacing smartphones which took 7 years to reach the same. By the end of 2011, nearly 15 percent of U.S. mobile users also had tablets – a trend seen across other markets as well.

I appreciate the shift in terminology suggested by the article’s title as well. The phrase “Responsive Web Design” means something to some of us working in the web design and development field, but isn’t very descriptive and probably means nothing to website owners unless they happen to follow the latest web design techniques through the best web design blogs or conferences. “Multi-Device Layouts” gets a lot closer to a descriptive title for the technique, given that the reason to use responsive web design is to have one set of HTML for a web page and having the website adapt for optimal use on different display devices ranging from large monitors to laptop computers to tablets and iPads to smart phones and other mobile devices.

The categories Luke uses to group the layout patterns he’s cataloged include:

• Mostly Fluid
• Column Drop
• Layout Shifter
• Tiny Tweaks
• Off Canvas

This last pattern is intriguing. The concept of “Off Canvas” layouts is that some key content like navigation or additional but non-critical content lies off-screen to the left or right side of the main content area and are only a click away. This off canvas content slides into view when the user taps a navigation element to reveal it. At larger screen sizes more of this content is displayed on-screen until at the largest breakpoint all the content is on-screen. Check it out.

Essential reading for web designers and web developers working in the responsive web design arena:
Original article: Multi-Device Layout Patterns

235 million Americans age 13 and older used mobile devices. The total population of the US in 2011 was 311 million (source) and approximately 83% of the population is age 13 or older, or 259 million Americans. That means over 90% of the US population aged 13 and over uses mobile devices.

A milestone was reached in January 2012 when the number of Americans using smart phones exceeded 100 million for the first time. And by the way, that number is up 13% from October 2011 just three months earlier. The growth rate in the smart phone market continues to be astronomical.

With regard to smartphone platforms Comscore reports “Google Android ranked as the top smartphone platform with 48.6 percent market share (up 2.3 percentage points) followed by Apple with 29.5 percent market share (up 1.4 percentage points). RIM ranked third with 15.2 percent share, followed by Microsoft (4.4 percent) and Symbian (1.5 percent).”

One important factor to take into consideration when targeting mobile platforms with a mobile website or mobile app is usage of your website by platform. While the number of Android devices in use greatly exceeds the number of Apple/iOS devices currently, a quick survey of three of our own customers’ website traffic shows that for each, iOS devices comprised over 75% of their mobile website traffic. The way people USE their mobile devices is quite different from platform to platform. As a website owner what should matter to you is which devices YOUR customers are using to access your content. Log into your Google Analytics account to check which mobile platforms your website visitors are using today.

The first is by Jeremy Keith and discusses conditional loading of content for websites designed using Responsive Web Design techniques. The technique Jeremy describes allows you to have one web page for mobile devices and desktop browsers alike, show just the necessary content on the small form factor mobile web browsers, but show additional content for the larger sized browsers too loading that additional website content only when needed. This saves on bandwidth for people viewing your website using a mobile web browser allowing your site to load quickly and not cost them more time or data than necessary.
http://bit.ly/siNiYY

Two solutions to the RWD Image Problem. One challenge when designing using Responsive Web Design techniques is the issue of serving appropriately sized images for different devices. The basic RWD technique is to use the largest images required for any device in the HTML, and just change the scale at which the image is displayed to make it smaller for smaller devices. The problem with this basic approach is that it’s not very mobile-friendly. All devices would be downloading images with large file sizes. This is particularly an issue with mobile devices that are likely to have slower internet connections and caps on bandwidth. Your site will take longer to load than necessary and for users who are paying for every bit of data as they go, downloading all those large images can add up to a substantial penalty.

Techniques continue to be refined for downloading small images for mobile devices and the largest images only when appropriate. Here are two of the latest techniques available:

The first by Matt Wilcox is a server-side solution involving PHP, cookies, and Javascript on the client:
http://bit.ly/uEioLu

The second by Jake Archibald is a client-side only solution with fascinating benefits. But in the words of the author, it’s a dirty, dirty solution:
http://bit.ly/vJlbcy

Check them out and comment. Which method do you like better?

Flash isn’t dead.

I’m feeling personal sadness with the Adobe’s mishandling of the announcement, as Flash deserves an elegant path through the future, whatever that future may be. It was my classmate at Harvey Mudd College ’89, Jonathan Gay, who invented Flash. Jon wrote the application SmartSketch which was published by FutureWave Software, founded by Jon and Charlie Jackson. The product eventually evolved into FutureSplash Animator. In 1996, FutureSplash was acquired by Macromedia and released as Flash. Flash was acquired by Adobe Systems in 2005 when they purchased Macromedia. [Historical references excerpted from Wikipedia: http://en.wikipedia.org/wiki/Adobe_Flash]

Jon is a wonderful and brilliant person (he put himself through Harvey Mudd College in part by programming Dark Castle – remember that one? Yeah, that was Jon too). I would argue that Flash was an incredibly innovating influence on the World Wide Web and has touched nearly everyone who uses the web. As a browser plugin, I’ll bet it has been the most widely adopted plugin in history and may retain that title for some time. Flash provided a stable solution to cross-browser problems when those were the biggest problems facing website designers and developers. Useful, powerful, and innovative, Flash is a tremendous achievement. Flash and Jon deserve tremendous respect.

So what’s really going on with Adobe and Flash? Mike Chambers of Adobe wrote a clarifying blog post to answer that question: Clarifications on Flash Player for Mobile Browsers, the Flash Platform, and the Future of Flash.

My summary of Mike’s blog post:
– Adobe is discontinuing development of the Flash Player for mobile web browsers only
– Flash will continue to fix bugs and support existing versions of the Flash Player for mobile browsers
– Adobe is continuing development of the Flash Platform for desktop web browsers
– Adobe AIR will continue to play a central role in mobile app development
– Adobe Flex will continue to exist and be developed for the indefinite future, but in a different environment

Without a doubt Adobe should have framed things much differently. Perhaps Adobe could have written a manifesto describing where they saw the future of the web going and exactly how their products would fit into that future. HTML5 has a major place in the future of the web, and Adobe is adapting to that reality in very effective and realistic ways.

Flash is incredibly powerful and capable. There really isn’t anything else out there that can do all Flash can do. HTML5 and CSS3 are several years away from “replacing” Flash. Those newer technologies can handle some of the simple things Flash has been able to do for more than a decade, but they are no where near the whole package yet. We’re in a transition period between the Flash era and the dominance of HTML5. As a web developer I’m extremely excited about HTML5, CSS3, and Responsive Web Design. We are working in those technologies every day. The future is very bright. I’m just sad that a leader like Adobe stubbed it’s toe and is now bleeding on the map that shows the path from Flash to HTML5 and newer technologies.

Mike Chambers’ post is a bandaid intended to help stop the bleeding. Though it’s long, it’s well written and explains Adobe’s position fairly clearly. Below are some key excerpts, the full article can be found here.

Excerpts from Clarifications on Flash Player for Mobile Browsers, the Flash Platform, and the Future of Flash:

First, I want to make it very clear that we are continuing to work on Adobe AIR for mobile applications, and have seen an increasing number of successful applications created with Adobe AIR. What we are halting is further development on the Flash Player plugin for mobile browsers. We will continue to provide critical bug fixes and security updates for existing device configuration, as well as continue to distribute the current player. At the same time, we are further increasing our investment (both in resources and engineers) in HTML5. I am not going to go into too much detail on this today, but, in general, we are shifting some resources from the Flash Platform and towards HTML5.

[…]

What does this mean for the Flash Platform in General?
While there was some frustration around our dropping development of the Flash Player for mobile browsers, the main thing I saw was concern and confusion about how this would affect the Flash Platform as a whole. Were we still committed to it? Would we stop developing the Flash Player for the desktop? Is Flash really dead?

So, just to be very clear, contrary to what many have declared, Flash is not dead. It’s role and focus has shifted but we feel that it still fills important roles both on the web and mobile platforms.

Adobe AIR
We are continuing to develop Adobe AIR for both the desktop and mobile devices. Indeed, we have seen wide adoption of Adobe AIR for creating mobile applications and there have been a number of blockbuster mobile applications created using Adobe AIR. Some recent examples of applications created for mobile devices using Adobe AIR are Machinarium, Watch ESPN and my personal favorite, tweet hunt.

Flash Player for Desktop Browsers
We feel that Flash continues to play a vital role of enabling features and functionality on the web that are not otherwise possible. As such, we have a long term commitment to the Flash Player on desktops, and are actively working on the next Flash Player version.

Of course, with the growth and continued improved browser support of HTML5, the role of Flash will change. We feel that for the foreseeable future, Flash is particularly strong in delivering advanced video, as well as providing a robust, and graphically rich gaming platform. We are focusing our Flash Player efforts around these areas.

[…]

The key point is this. If a Flash feature is successful, it will eventually be integrated into the browser, and developers and users will access it more and more via the browser and not Flash.

A lot of the things that you have done via Flash in the past, will increasingly be done via HTML5 and CSS3 directly in the browser.

I am not suggesting that all Flash content should or will be done in HTML5. You have to look at each project on a case by case basis and make a decision based on development costs, target platforms and user experience. Regardless, your customers are going to ask about HTML5, and you should put yourself in a position to best meet their needs, regardless of technology or platform.

Thanks Mike for the helpful blog post about the future of Flash.

#&*@

I hate losing jobs or projects. As the company owner, one of my most important responsibilities is to bring in new business. This has to happen regularly, consistently, reliably. As we’ve grown since incorporating in 2002, our monthly financial responsibilities have grown substantially. I need to bring in enough business every month so that our cash in at least equals the cash out (at least as an average over time).

Losing a project hurts. The circumstances around this one were interesting. The job was a medium-sized project, the client was a large state organization. We’d been in discussion for a couple of weeks and everything was falling into place. We’d met in person and had a very good meeting, we’d established an excellent rapport with our wonderful contacts at the client organization. The work was the kind of work we do day-in and day-out in the website development world. Our proposed scope of work and budget were accepted verbally.

Now, we’ve done work with other divisions of this organization before and learned that for a variety of reasons it’s very difficult (in fact nearly impossible) to get signed contracts. So I had chosen to proceed with this project based on a verbal agreement and forego the signed contract we normally require. I can imagine what you may be thinking: “what a dumb-a**, he didn’t have a written contract?” Correct. We didn’t have a written contract, and I’d do again the same way tomorrow with this client. Based on past experience it’s always worked out fine with this organization, and my gut instinct was that the people I was working with in this division had integrity. As I mentioned, the rapport we had established up to this point was excellent.

The kickoff meeting was scheduled. Less than one hour before that meeting, our contact called us and said they had just come out of a meeting with another division at the organization, one that does website design and development, and totally out of the blue they offered to do the work we were going to do. For free.

It’s hard to compete against free.

Our contact was caught in a tough situation. I could tell they genuinely felt conflicted. They felt they did have a verbal agreement to send the work to us, but they also knew the higher-level managers in their division would want the lower cost (i.e. free) solution. I could understand their position and shared as much with them.

To me, it’s usually the better choice to maintain good relationships in these types of situations than to get all huffy about a verbal contract. The fact is in any business that somedays you win the job and some days you lose the job. I’ve been in the web design and development business long enough to know that a project isn’t real until you have the initial check in hand and a signed contract. We had neither and that’s part of the risk.

I asked if they would be willing to pay for the time we had spent so far preparing for the project – the client had sent all deliverables due to us the week before and we’d spent the required time reviewing all their materials and mapping out our plan for implementation. Thankfully, they were willing to cover the time we had spent so far. I felt grateful for that. One small success there.

In the end, I feel very good about how I handled myself and the relationship between my company and our possible client. Who knows, the other division implementing their website may run into trouble and want our help. There could be future projects from this division that could come our way. And there very likely could be other work from the organization as a whole and in my playbook keeping all the relationships positive only has upsides. I’ve also learned over the years of running several businesses that it’s almost never a good idea to burn a bridge. In Fort Collins our population is so very interconnected. I see this as a successful opportunity to have strengthened my own network, as well as (to a smaller extent) the reputation of all web designers and developers in Fort Collins. The web development community in Fort Collins is even more connected and we’d be doing our colleagues a disservice if we had acted with anything less than grace in this situation.

Like it or not, losing jobs is a part of business. A successful business doesn’t win them all. (If you do, then you’re most likely lowering your price too far on some jobs which is a good way to go out of business down the road. For more on this and other highly useful business tip I recommend “The Knack: How Street-Smart Entrepreneurs Learn to Handle Whatever Comes Up” By Norm Brodsky and Bo Burlingham.)

About 20 years ago an elderly and very wise friend gave me a huge gift. I was standing next to him with a group of people and he leaned toward me and said, “Ron, I’ve figured out the secret to life.” Ok, that got my attention. “Do you want to know what it is?” he asked. I of course said I did. He said to me “The secret to life is to give thanks for all things.” So simple, and in my experience so true. I’ve done my best to see my world through that lens all these years and it has made a huge difference. This particular situation was a challenging one to give thanks for as it was unfolding, but I came around to it. I for one believe my wise friend, now deceased, was right.

I’m curious how you’ve handled business disappointments in your life? Why don’t you share your story or thoughts in a comment below:

• OMG this is *awesome*. Couldn’t stop laughing: http://gmail.com/motion
• Ok, Google is topping themselves. Here’s a job listing for “autocompleters”! http://bit.ly/dMDZ3O
• Another: Go to Google.com, type “helvetica”. You don’t even have to finish typing! Must be those autocompleters they just hired.

If you know of others, post a comment!