Although extreme, it reinforces a concept that I’ve advocated since founding Brolik in 2004. Designers are experts, and we do things for a reason. I don’t show clients multiple design options. A large number of people consider what a designer does as “art” or “making things pretty,” which are both subjective. In reality, a designer’s job is very objective- to produce a calculated, thoughtful and ultimately “successful” design that is goal-based and function-driven. Design is rooted in extensive research, experience, and learned skill, and it needs to persuade an audience to react emotionally and to do whatever it is you want them to do.

Presenting multiple design options just doesn’t fit that model.

There is always one “answer” that is most correct in any design problem.
Remember that good design is extremely purposeful, and a good designer doesn’t typically use the color green, for instance, just because they like it. They use it because the target audience likes it and will predictably react to it in a certain way.

In Paul Rand’s case, while dealing with Jobs, he refuses to brighten the color yellow as per Jobs’ request. That’s bold, but I can tell you one thing- he used that exact shade of a yellow for a very specific reason. Rand, an expert for decades at this point, was in a unique position to tell a paying client “no,” but most designers aren’t in that position and must compromise design for their client’s whim. To put it another way, the client can make the design less successful.

Furthermore, choice is dangerous.
There’s a TED Talk about happiness where a study group is asked to choose one of two different photos. They get to keep the one they choose, and the other is sent away. Half of the group is told they have five days to change their mind, and the other half gets no chance to rethink their decision. A few days later, participants were surveyed about how happy they were with their photos. The group that could not return their photo loved their choice. The group that got a chance to swap their photo was less satisfied. They all wonder if maybe they’d be happier with the one they didn’t choose.

That’s some crazy psychology, but it’s worth noting. There was no explicit quality difference between the actual photos. You could argue that having a choice alone made participants less happy with a product that they would have been (and should have been) content with in the first place.

Iterate!
Unlike Rand, I don’t believe that designers are always right and that they should be the final say when designing for someone else’s business. I do believe that instead of giving choices upfront, the best and most successful designs are arrived at through a solid discovery phase and then iteration. Show a working, functioning, real life design and then start discussing changes from there.

Lastly, time is money.
Just in case you aren’t convinced, let’s talk money. Why would you ask a designer to spend their limited hours split amongst three different designs for the same project? You’d be better served to have them spend three times as long on one design.

Furthermore, if your designer puts the required effort into the initial design, they’ll have nothing left but fluff to fill out more options for you. Once you arrive at the “correct answer,” the other designs are simply incorrect!

It all starts with you.
To get what you want from your designer, forget about forcing them to give options. Focus your time on giving them resources. Share links to things you like. Share what your competitors are doing. Show them a random magazine ad you like. Tell them about your vision for the company’s future, fill them in on your company’s history, and ask them questions. That’s how you get what you want. Give them the tools to do their job. You didn’t hire them just because they know how to use Photoshop. You hired them because they’re experts in their field, and they can use their expertise to help you excel in yours.

Let Websites be Websites
We need to rethink websites and how we design and interact with them. We should stop thinking about them like they’re printed material on paper. Let’s embrace the movement and interaction that modern technology allows us to have with our message. Websites should provide the most optimized, quickest and most enjoyable user experience no matter where they’re viewed. In order to do that, we need to employ the principles of responsive web design.

Responsive web design is design that grows and flows within the browser window. Using only one code base, a website can grow to fit the largest screen or shrink and stack to fit the smallest mobile screen, all with elegance and attention paid to design and usability. The trick is to forget about some of the restraints we currently impose on websites while deciding what is “good” and “pleasing” and “efficient” design, and to embrace some new thinking.

Is this starting to sound too philosophical?

Well, OK. Fine. Instead of talking about the design philosophies behind responsive web design, here are a few reasons why a business can benefit from thinking about the Web in a new way.

Adaptability
The Internet is an open and adaptable medium that can show up anywhere, from computers and phones to TVs to vanity mirrors and car seat headrests. Who knows where the next screen or projection surface will be? Content for such an adaptable medium should be able to adapt. This reduces redundancy in planning, development, and maintenance and therefore decreases cost. One code base can serve any and every device at the same time.

Furthermore, there will always be some new device that people decide to start surfing the Internet on. If your site is responsive, there’s no need to decide if it’s worth the cost to build a version of your site for the new device. It’s already built and displaying beautifully.

Consistent Branding
For a lot of companies, online presence is almost entirely a branding exercise. It’s all about being there when your customer is looking for you. A successful brand is one that customers can identify with, relate to, and ultimately fall in love with. It makes sense that after spending the time to bake that brand into a perfect website, it should always look the same. With a responsive design, that brand will form fit to whatever medium it’s being displayed on. There’s never confusion or guessing for your customer, and there’s only one update each time you need to make a change.

Evolution
In a very short time, all of the smartest and most agile brands will boast responsive websites, and everyone else will be clamoring to catch up. Efficiency and good sense will undoubtedly win out, and when that time comes, instead of trying to keep up, you’ll be miles ahead.

It’s hard to tell companies that they should, without a doubt, look at implementing a responsive website. There are limitations. There are drawbacks.

It’s really easy, however, to tell companies that they’d better open up to a new way of thinking about the Web. They’d better be receptive to some big and beneficial change, and they’d better be ready to implement when the time comes. Those who don’t react will fall behind. It’s a lot like when older companies used to argue the importance of a website in the first place… remember those days!?

This article was originally published in Philly Ad News

Two of my Favorite Responsive Sites Right Now
(Play around with the window size to see how these sites shift and rearrange for different device sizes… or open them up on your phone and your computer at the same time.)
http://anderssonwise.com
http://bostonglobe.com

So what is content marketing?
It’s creating valuable content through blogging, podcasts, seminars, white papers, etc and distributing that material to people who will associate a positive connection to your brand or services. Content Engineering takes that a step further– it’s using trends in analytics to optimize the views, downloads, clicks, traffic, and overall saturation and performance of the content you are marketing, before you publish it.

Why does it matter if we engineer the content?
Well, Google (and other search engines) reward websites that provide helpful and relevant content and make it easy to find. Relevant doesn’t just mean it’s helpful to some people, it means that popular search terms, the blog title and blog content all connect, forming a relevant search experience for the reader. In other words, people search and find what they are looking for, consistently. As a result of your strategic content engineering, your website will be more credible and optimized.

This type of engineering can be as simple as doing keyword research to analyze the competition and volume of a keyword or group of keywords before publishing your blog post using tools like Wordtracker or Google Keyword Tool. Let me give you an example…I had a handful of options for the title of this blog:

Hi, I’m a Content Engineer, and I’m Doing it Right Now. (Interesting, but not good for SEO)
The Basics of Content Marketing, Keywords and SEO for Blogging
What’s the Value of my Blog?
How do I Search Optimize my Site with a Blog? (Getting closer…)
How To Blog Your Way To More Search Traffic (WINNER!)

The difference between these titles could be hundreds or potentially thousands of unique visitors in the next few months. It’s hard to predict exactly what the outcome would be for each title, but looking at the keywords in each, the titles range from very competitive to high volume / low competition (and that’s what we want).

For example, the term “Content Engineer” shows ZERO searches in the Wordtracker database. That’s right, being the top site on Google for those who search for “Content Engineer” will gain you exactly nothing. Nobody knows the term (surprise!), and so nobody is searching for it. Conversely, the term “How to” was included in almost 250 million searches in the Wordtracker database and “How to Blog” in over 20 million. While not everyone who searches for “How to blog” is looking to increase search visibility, there’s a good chance that people who are looking to blog want people to read it, making this a very pertinent article.

If you’ve read to this point and learned something new, then I guess I’ve done my job and I’m sure Google appreciates it. So, before you just post your next blog, think about the amount of potential interest based on the topic your writing about and don’t just come up with a clever title. Find the right title for SEO. You’ll be happy with the results.

Now, almost 8 years later, it would appear that everyone has realized that websites aren’t movies. Now that people are used to browsing the Internet, they want and need certain things to stay interested. Nearly everyone (except the restaurant industry) has done away with intro videos and sitewide music, but it’s still really hard for people to break away from another medium that the web tends to impersonate. Print design.

The Web is Definitely Not Print
At their core, print and web are very similar. Both mediums convey a message, both aim to lead the viewer around a “page” or “canvas,” and they both need good design to do so. The web, though, has a number of really useful traits that print doesn’t have- things like an unlimited canvas size, the ability to hide and show information, and the ability to adjust design based on user preference- to name a few. The boundaries of print design are defined by the medium’s lack of these traits. As of today, those same boundaries are (for some reason) being placed on web design.

What I’d like to propose is that the web doesn’t have the inherent boundaries that print has, so we need to stop treating web design like it’s print design. We need to stop thinking about the web in terms of print, and we especially need to stop talking about the web using print terminology. Remember (and I know it’s hard), that the web is not print.

Even though there are a lot of reasons why the web should not be thought of in print terms, I want to focus on a couple important reasons just to get you thinking.

The Canvas
You know why we call it a “web page”? It’s because we’re referring to a page, like a page of print. A page, however, has a fixed size. It has edges that limit it because it’s physical. In print design, if we have a lot of information to get across to a user, and we only have a small page, we’re forced to shrink all of the information to fit on that single page. Good designers know how to organize that information so that it still looks friendly, readable and carries a brand, but at some point the limits of a physical page can really hurt an otherwise perfect set of information.

A website, though, in a browser window, is a virtual and essentially limitless space on your computer monitor with no such constraints. Clients are always asking us to keep information “above the fold,” even if that means shrinking font sizes or reducing image sizes. But when designers try to cram information above the fold on one computer screen, another smaller screen still hides information and a larger screen looks empty with a ton of white space at the bottom. The web isn’t meant to have a fold. It’s movable, and it’s meant to be interacted with.

The Andersson-Wise website is a great example of how a design should react to screen size, not be constrained by it. Resize your window to different proportions to see it in action.

Instead of treating a website as a page, it’s better to think of it as a window– a window that looks into a sea of information that can be scrolled, moved, scaled, etc.

User Preference and Control
Another trait that print lacks is the ability to cater to user preference. Some like their words big, others very tiny. Some even prefer to read text that’s white on black, so it’s easier on the eyes. The modern browser allows us to control these things, but the modern web designer tries as hard as possible to override these settings, sticking to a strict, pixel-based font size and a fixed site width. We even purposely cut a design off on each edge and leave a bunch of unused “background” just because it’s a constraint that we’re all used to. (Don’t get me wrong, I know we have to do these things sometimes, but hopefully you’re starting to get the point here.)

That’s only one example of a user preference. Think about the user who has thirteen windows open on their screen at once, so your website is only a tiny square in the corner of their screen. Where’s the fold for them? How’s your font size look there?

And what about mobile?!

The Point
The point here is not to run out to your web design firm and overhaul all of your fixed-pixel font sizes, opting instead for a percentage-based font system that scales to a user’s browser window. (That would be awesome, though.) The point is really to start looking at the web as the living, breathing, interactive organism that it is. The more your users control their experience, the happier they are. It’s scary as a designer, as we tend to be control freaks, trying as hard as we can to finesse each and every pixel until our composition is “perfect.” But we need to design for the unknown. It’s even got a name: Responsive Design. Some consider it a zen-like philosophy towards web design, because it just goes with the flow. One “design” can work on a huge TV screen and on a tiny smartphone equally well.

I’ve found that the challenge of creating a design that can move and react and still look great is exponentially more fulfilling than creating a static, non-changing, single layout. Learning to embrace the spontaneous design moments that happen as our images and text slide and scale is essential to a more user-friendly and evolved World Wide Web. It’s more challenging, but it’s more rewarding. The sooner we all stop thinking about the web as print design, the faster the web can progress as its own new and different medium, with its own set of capabilities and possibilities.

Additional Information

Andersson Wise – a great example of what the web can be and where it’s going.
http://anderssonwise.com/

Responsive Web Design by Ethan Marcotte - If you’re a coder and are interested in responsive design, this book is a quick read and a great resource… in fact, the author coined the term “responsive design.”
http://www.abookapart.com/products/responsive-web-design

A Dao of Web Design by John Allsopp – Great article (from 2000!) that explains some philosophy relating to the web as its own medium.
http://www.alistapart.com/articles/dao/

For designer/coders – A Smashing Magazine compilation of tricks and techniques that we’ll start to see as more designers start embracing the web for what it really can be.
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Of all the reasons to pay for a degree in graphic design, I consider typesetting the most important. I’ve seen plenty of “amateur” designers who master Photoshop, Illustrator and InDesign, but fall short of creating professional layouts because the nuances of type are insanely difficult to just pick up.

On the web, huge numbers of “amateur” designers take that difficult task and make it more difficult by appealing to a fleeting, click-happy audience. The web reader is much more finicky and typically holds the attention span of a gnat. (Plus they’re tweeting on their phone while reading your website.) Without proper typesetting, you’re going to lose potential audience, readership or business.

So here are some factors to consider when typesetting for print or the web. I’ll start with some traditional rules that are overarching type rules, no matter where your type appears, then I’ll get into web-specific rules.

• Watch the Line Length
  Believe it or not, there is an optimal amount of characters per line where a reader’s brain stays interested, and their eyes don’t get fatigued. The perfect balance of reading and breaking (“breaking” being the mental pause you get as you go from the end of one line to the beginning of the next) will make your text easy to read, and a shorter line length will make your text initially feel accessible instead of overwhelming.

  How long is too long? The entire width of a webpage is ridiculously too long. Think of books and newspapers and how they break large blocks of text into columns. The typical, optimal line length is somewhere around 70-80 characters (including spaces), but really it’s a judgement call based on actually reading the text and seeing how easy or hard it is to read and digest.

• Pay Attention to Space (Between the Letters, the Words, and the Lines)
  Graphic designers pay attention to every detail about their typography. By controlling the space between each letter overall (called “tracking”), we can make text more digestible and easier to skim. By adjusting the space between each line of text (called “leading”), we can help the reader move quickly up and down long blocks of text. Even manually adjusting each letter’s relationship to the letters around it (called “kerning”), can create a surprisingly more solid message.

• Create Hierarchy
  Probably the most important factor when initially setting type is to create hierarchy. A designer needs his or her reader to know in less than one second what’s important to read first, where to look next, where to look after that, etc. Or maybe the reader knows what she’s looking for and needs to quickly find only that. Changing sizes, weights, placement, white space, line rules and color are just a few ways to start distinguishing one piece of content from another and controlling how your reader sees your information.

• Be Generous with White Space
  The final traditional typesetting “tip” I’ll go over is white space. White space is the space around blocks of text, images or any object on your page. It’s very important to frame your content with white space so that it feels easy to dive into and doesn’t overwhelm your reader.

Now let’s get into a few web-specific typesetting rules. This is the “new breed” of typography, and once you start looking around the Internet with this stuff in mind, you’ll see that not many web designers are doing this right.

• Plan for Skimmers
  On the web, a typical reader has a much shorter attention span than someone reading print material. Usually people are trying to quickly find the information they want amongst the sea of junk that is the Internet. So they skim.

  If we read every word of text as we search for the information we wanted, we’d never find anything. Therefore, when typesetting for the web, keep an F-shaped reading pattern in mind. Users read left to right and top to bottom (at least in the US). This means that skimmers will read the first couple words of a paragraph, and if it doesn’t look like it’s going to have the info they want, they’ll skip right down to the first couple words of the next paragraph.

  Keep your text short and broken up. I like to follow two simple guidelines. No more than two or three sentences per paragraph, and every paragraph gets a title. Of course, I can’t always stick to that exactly, but I certainly try.

• Typeset for Interaction
  Web readers know that the information they need isn’t necessarily on the page they’re currently looking at. Moving page to page in a non-linear fashion is one of the hugest advantages of the Internet in general. So readers are not only skimming your actual content, they’re skimming your links, too, in case there’s a better place for them to land.

  Make your hyperlinks stand out well, and make the copy count. Web readers skim by reading the first 11 characters of headlines and hyperlinks.

Next time you’re reading something online and it’s subconsciously slowing you down or tiring you out, think about factors like letter spacing, line spacing, and line length. When you look at your own website’s content and wonder who’s actually reading it, consider how easy it is to scan the information so your reader knows exactly what she’s going to read before she reads it.

Graphic designers train in typography for years, but most web designers don’t. I don’t think we need to get too snobby or artsy with our type on the web, because after all, it’s ever-changing, dynamically generated, and largely utilitarian. But, what good is your website if no one wants to read it? You might as well put your logo and a picture of your product over a couple paragraphs of Mandarin Chinese.

1. Create a memorable brand identity and a strong voice to go with it (sorry all you product-centric folks out there, you’re generic without it).

2. Create a Facebook fan page and experiment with Facebook ad campaigns. You might be surprised at how quickly your following will grow. Just make sure you’re staying active with quality content, offers, and conversations. Each Facebook fan is valuable.

3. Get your product in the hands of people who want you to succeed and will talk to everyone they know, even if they don’t pay you a cent.

4. Find someone willing to write about you, then give them a reason to. Warby Parker got their start this way.

5. Make product returns as easy for your customers as possible to eliminate risk for the customer. Piperlime does this really well, and so does Gilt.

6. Go beyond the “browse and buy” mentality and integrate social tools to allow your customers to ask their friends’ opinions, share their purchases, and “like” your brand. Reward them for doing it, too.

7. Keep your website and customer experience slick, simple and extremely usable.

8. Pay attention to analytics. Focus on improving every page/click and converting every visitor.

9. Focus on CRM integration as early on as possible to organize customer accounts, email subscribers, purchase history and analytics from one central location. A few years from now you’ll be very happy you did.

Do you have other tips to contribute? Comment…

I realized that this is a pertinent question that would help a lot of our readers. Although the answer varies project to project, I believe I can shed a little light here.

A Quick Background
I’m going to simplify coding into two parts. The frontend and the backend. The frontend is anything that the end user will see on the web. This is probably what you think of when someone mentions a website. The backend is everything that goes on behind the scenes, which in some cases is a lot more complex than the front end. For example, backend coding involves complex calculations or pulling content from databases. For particularly complex sites, I refer to the backend as the “heavy lifting.”

Future Proofing
So to explain which parts of coding are genius and which are so trivial that a monkey could do them, I’ll start with the frontend. There is a very important factor in frontend development that I call “future proofing.” Future proofing is very important to us at Brolik, and I believe it’s a sure sign of professionalism when done right.

Future proofing includes three main factors. The first is scalability. Code should be written to make sure that it’s ready for future additions. This could be a new tool that comes out or a new trend that emerges on the web. If the client comes back with a request after a project is finished, we don’t ever want to say, “No, you can’t add that without starting from scratch.”

The second factor is updatability. After initially coding a website, we’ll sometimes need to make specific or global changes to how it looks or functions on the frontend. If coded properly, it should be simple and quick to make these global changes. This requires properly structured, organized code that is well commented (what’s code commenting?).

The third future proofing factor deals with standards and depreciation. The web is always changing, and sometimes bits of code get “depreciated” and eventually phased out. Also, website “best practices” change over time, and code that used to be cutting edge eventually becomes outdated. There’s enough documentation out there, however, that a good developer will be able to know what’s going to be outdated soon and avoid it.

As you may have guessed, all of this future proofing falls under the genius side of coding. There aren’t many worse surprises than picking up a project from another firm and realizing that it wasn’t written in a way that makes modifying easy.

The Backend “Hidden” Code
Some parts of a website or application are more set in stone, and a good coder will break these parts off into separate, “hidden” files that run in the background. If you’re familiar with coding, these parts would be javascript includes or PHP class files, for example. They’d most likely control common or standard functions, like an ecommerce shopping cart.

These files take in information, process it, and then output new information for the website’s frontend to display to the end user. Because this code is usually very function-based and is unlikely to change much in the future, it’s not as important to be future-proof or written in with human readability in mind (it’s good practice to format code so that it’s easy for a human to look at and assess what’s what). As long as this “hidden” code functions as intended, it matters less how well the code is written.

For this reason, “heavy lifting” is typically able to be handled by any coder with a computer science or information technologies degree. Of course, experience and individual skill will factor in here, as I’ll get to next.

Complexity of Project
Sometimes that heavy lifting backend part of a website or application is much more complex, important or sensitive than a typical project. In this case, you’d be a lot safer in the hands of a genius. Because there are differences in good and bad code, cases where bad code is a potential security threat (like sites that handle credit cards or store huge amounts of sensitive corporate information) shouldn’t be left to a monkey.

Knowing when you should hire a genius and when you can get away with a monkey will surely still be a challenge if you aren’t a coder yourself. Learning and understanding these general concepts can, however, go a long way for a business owner.

HTML and HTML5… Defined
There are a few reasons why asking someone to code “in HTML5” is not exactly correct. First and foremost, HTML5 is not a new coding language or a new framework to build websites on. HTML, or HyperText Markup Language, is a coding language that’s universal for the web. All web browsers read and interpret it. HTML5, for all intents and purposes, is a slang term for some new standards in HTML. There are some new tags (what’s a tag?) that are specific to HTML5, but the language is still the same HTML.

Before I give a few examples of the new features that HTML5 allows, let’s make sure we’re on the same page with how this stuff works. HTML code is always the same. It’s a programming language, and much like Spanish or French, it has its own structure, syntax, organization, etc. Once you deploy a website, it’s up to the web browsers to interpret the HTML code and display it to the user. The different browsers– Internet Explorer, Safari, Chrome, Firefox, Opera, etc– all interpret HTML in their own way, which is to say, however they please. So when a developer writes a webpage in HTML and views it in Microsoft Internet Explorer, it may look completely different than viewing it in Google Chrome. Independent organizations like the World Wide Web Consortium (the W3C) compile and write standards for how browsers should interpret code, but there’s certainly no law that requires browsers to follow any standards. This is especially frustrating for developers, as it forces us to test the same line of code in every browser we can think of, including different versions of the same browser. If you’ve ever heard a developer or Internet nerd complain about IE 6, this is why. Beautifully written code won’t necessarily render correctly in IE 6… it’s just the way it is.

The Examples
Understanding that there are code standards is a good start to understanding some of what HTML5 means. Since the demand for standardization is greater now than it ever has been, companies that make web browsers (Microsoft, Apple, Google, Mozilla) are doing their best to stick to standards. HTML5 offers up a new set of standard tags and information about how they should output and what they need to do. The new tags include better and more compatible video embedding (without Flash), more in-depth form tags, and location-based features that come into play a lot with mobile web. For example, before HTML5’s video tag, embedding a video was an iffy experience. The code to do so (without HTML5) is not well supported across different browsers, and developers are forced to add “catches” into their code so that a browser that’s confused by an “embed” tag will revert to something else that it can understand. Even Flash video players (the current standard) require coding a couple different “versions” to make sure all browsers display the content correctly. HTML5’s video tag now makes sure that one universal tag always works and always degrades in older browsers. It’s that type of standardization that separates HTML5 from other HTML.

When And Where It’s Safe to Use HTML5 Now
HTML5 was unofficially “released” (or at least made popular) in April 2010 when Steve Jobs brought it to mainstream attention. But that in no way meant that all browsers were ready to read and interpret the new features and functionality that HTML5 offers. Currently, in March of 2011, as HTML5 is really starting to take hold, there are more and more places where it’s 100% acceptable to use the new tags. The most prominent place is mobile web. New smartphones that have full Internet browsing capabilities are almost all up to standards when it comes to their browsers. There’s no such thing (yet) as an outdated phone browser because the mobile phone web browsers are so new. Coding a mobile web application or a mobile web site is very easy compared to the untamed wild of desktop browsers and desktop browser versions. But aside from the mobile web, the new or new-ish versions of Safari, Chrome, and Firefox are all ready to take advantage of the new capabilities. Internet Explorer 9, recently released, will supposedly follow Internet standards better than any previous version of Internet Explorer. Here is some info on how it performs out of the gate.

But Back to the Question at Hand
Hopefully I haven’t insulted anyone who’s ever asked a developer to code their site in HTML5 because I truly love the interest in the web and in technology in general. My intention here is to clarify the little distinctions so that there’s no confusion down the road. A more appropriate question could be: “Can we (and should we) take advantage of the new features and technology offered by HTML5?” But don’t forget to follow that up with: “Will it still work in IE 6 on Windows XP, though?” Because of course: “My office only uses IE 6 and we can’t upgrade. I’m sure most of my clients are the same way, too.”

*Mass sigh from developers everywhere*

More Reading
W3C HTML5 specificiations
Dive Into HTML5, a great HTML5 resource

Let’s start by looking at the options when it comes to mobile marketing, and clearly define the differences between each. (You may be surprised how often people confuse them.) I sat down with Chuck Sacco, VP of Client Strategy at Movitas to help shed some light on mobile technology and what you need to know.

Know Your Options
Standard Website – Built for a desktop computer that can be accessed from a mobile device. The developer didn’t take mobile devices into account when building. (This will help to differentiate it from the mobile website).

Mobile Website – A browser-based website that is developed specifically for a fast and efficient experience on mobile devices. Traditionally, the content is in a list form, pages load quickly, and heavy visuals are simplified, but that is changing as technology advances. Chuck added, “Newer mobile optimized sites can be quite sophisticated. Take a look at m.espn.com for example. It’s also important to remember that the complexity of the features depends upon the type of device. These mobile sites can detect your device and deliver the appropriate experience based on the device capabilities.”

Mobile Application – This is a native application sold through an app store. This application is not readily available to the public like a website, and is usually purchased through an app store and then downloaded onto the user’s mobile device.

The State of Mobile
Ok, now let’s move on to some hard numbers. ComScore reported that smartphone usage escalated in the US in 2010 to 1 in 4 subscribers, up from about 1 in 10 in 2008. A common misconception is that smartphone users are more willing to use the common web browser more than download an app. Comscore’s November 2010 report shows that the numbers are actually very similar, with about 35% of smartphone users accessing a browser on their device, and about 33% downloading apps.  In what may be the most daring of all smartphone predictions, The Mobile Marketing Association expects smartphones will represent more than 50% of the market by Q3 2011.

Chuck emphasized the importance of considering the industry you’re in. “The stats show substantial growth for mobile web and native apps, but before choosing one or the other on a whim, it’s important to note that certain verticals are better fit for one experience over the other. Finance, retail and restaurant verticals show enormous growth in mobile web advertising, but aren’t growing as quickly as other verticals in launching successful native apps.”

The mobile optimized website is undeniably the first step into mobile for most businesses who have survived with a traditional website for many years but are now seeing many of their customers using smartphones to access their site. Although mobile browsing makes up only about 3.5% of total web browsing according to NetMarketShare, this number is growing quickly, up from about 1.6% one year ago. The other thing to note is that this growth in mobile web browsing is replacing desktop browsing to some extent, as we see desktop browser use dropping almost 2% during 2010. In this report published by mobile search company Taptu, they present their expectations for the future describing the move to “the Mobile Touch Web,” which they define as: “Web sites created for mobile touchscreen devices, with finger-friendly layouts and lightweight pages that are fast to load over cellular networks.” In their original report Taptu predicted over 1 million mobile optimized (browser-based) websites popping up by the end of 2011. Four months later they amended their projection to come much earlier, at the end of 2010, based on how quickly the mobile optimized sites were popping up.

Pros and Cons
Even with a burgeoning touchscreen smartphone market and so much marketing for Apple’s App Store, native apps are actually growing at a much slower pace than the mobile optimized market.

We should also note the differences in development costs, delivery and maintenance for each. A mobile optimized website can be developed for less than a native app and launched much more quickly without the need to pass it through an app store approval process. Mobile optimized websites can be updated and enhanced quickly by the developer while native applications force the developer to re-submit, get approval from the app store, and require the user to download an app update.

Also, unlike the mobile optimized site that can be developed to be compatible for multiple devices, native apps must be developed for each device and submitted separately to each device’s proprietary app store. This makes a native app a much more expensive route.

Decide What Your Goals Are
If the goal of your application is to provide a mobile destination for marketing efforts, developing a native app may be the wrong approach. Consider the potential to drive users to a mobile website with one touch of the screen through traditional marketing, social media or QR codes. A native application requires a user to download an app before they can access info and learn about your product or services. Chuck agreed and noted, “Understanding the context of use and being clear on the goals of a mobile deployment are an extremely critical part of the process. Where and when are consumers most likely to be exposed to a mobile site or app?  In the travel industry, it’s often about in-location information.  Context of use becomes a key driver for how a business may want to influence behavior.  For example, a well-placed QR code can drive new behaviors tied to a specific marketing goal.”

Know Your Business
Deciding whether your company should launch a native mobile app in addition to a mobile website also comes down to your industry, products and services. Do you have customers that shop frequently? Do you have continuously changing products and information? Will your customers need or want to use your app daily or at least weekly? If the answer is “yes”, maybe a native app is for you. If the answer is “no”, you’re probably wasting your time/money and the user’s mobile screen real estate with an app that is rarely used.

So When Do You Develop A Native Application?
As Kevin Nakeo writes in this Mashable Mobile article, “Once you’ve optimized the experience, you can use your mobile website to graduate users to a more robust native app.” Even though a native app may be more attractive than the mobile optimized site because you have the ability to make money through user downloads, Kevin also explains the challenge with launching a successful app: “One of the most important differences between a popular app and the thousands you’ve never heard of is the merchandising from the iTunes App chart. Hitting the Top 4 on the Free App chart drove over 250,000 downloads for [our] WhitePages Mobile App. Download volume and positive ratings are important factors needed to get onto the chart…It helps to think of the mobile web as a beta, and the app as gold.”

So You’re Ready For An App…
New app developers and development platforms are popping up everyday. These resources give you a jumping-off point for creating a native or web app that can be within your resources and budget. If you’re wondering where to get started, Giles Goodwin of Widgetbox mentions some tips and tools to consider when approaching app development in this article.

No matter your approach, the point is that you know your options and are taking mobile technology seriously. There’s no doubt that your customers and users are, and that upsurge will continue for years to come.

Contributors:
Chuck Sacco
VP of Client Strategy at Movitas
President of Mobile Monday Mid-Atlantic
http://twitter.com/chucksacco

More Reading:
Awesome mobile websites - http://www.mobileawesomeness.com/

Why you need to optimize a mobile site, not just redirect - http://searchengineland.com/why-mobile-searchers-need-mobile-optimized-sites-40386

We get calls about it all the time – a potential customer asks if we can land them on the first page of Google, perhaps thinking we can control the whims of Google’s search engine with a few lines of code or an incantation over a black cauldron. Invariably, they grow confused and indignant when asked what keywords they want to show up on the first page for, resisting recommendations that include visible changes to their website. They especially aren’t interested in adding pages full of keyword heavy content to the site; who has time to write that stuff anyway? What they really want is to get more website traffic. My best advice to these proactive entrepreneurs is to start a blog. Here’s why:

1) SEO – Nothing is better for a website’s SEO than adding lots of informative content that is industry or service related. Writing a short blog entry that explains some of your business’ finer points is a great way to attract those interested in your products or services. It’s amazing how effectively an article full of blog tips can attract people who search for “how to write a blog.” Similarly, a blog or website that becomes a wealth of information on Internet marketing techniques and practices will tend to attract people searching for a marketing expert. Why swim against the current of Google’s search algorithm when you can just play to its intent of providing users exactly what they’re looking for?

2) Let’s give ‘em something to talk about – Aside from search engine traffic (and those who type the URL straight into the address bar), a site’s most important metric is referral traffic, that is, users who click a link to your site from some other location. Whether it’s from your Facebook page or a link from a partner company’s website, your best tool for drawing these inbound clicks is to have content that your target audience wants to read/watch/listen to. So, start a blog, write an entry about using organic, garden fresh ingredients in your recipes and post a link on your restaurant’s Facebook fan page. At Brolik, we nearly doubled the number of referral clicks to our website with just this technique. They weren’t bounces either, the users stayed on our site for an average of several minutes because they were actually reading the article. Write really good stuff and you’ll find that other blog websites will use or link to the content, giving you even more avenues for referral clicks. What better target audience for our web and interactive focused content than those who regularly read a well known technology blog like Mashable or Engadget?

3) Blogging for PR- A corporate blog can be the most direct, open line of communication with customers and the rest of your industry. It’s long been the territory of a PR firm to help establish corporate credibility with careful placement of press releases and articles in well known industry periodicals and resources. Now you can take control of your own destiny, forming a professional reputation for being on top of your industry with the newest ideas and tools. A lot of trust and respect comes with being the authority on topics related to your industry so make sure people feel this security with your brand. Conversely, the openness of communication that creating a blog allows can be a great way to show a little personality. Where more formal means of communication may obligate you to write with a straight face, your blog gives an opportunity to open up and live a little, forming a more human relationship with your readers.