The web is abuzz with talk of HTML5 and with good reason. It seems pretty clear to this web developer that HTML5 is on its way to replacing the native application. When will this happen? Probably sooner than you think.

What is a Native Application?

“Native” means compiled for a specific operating system, such as Macs and PCs and all of their respective versions. For the last couple decades most applications have been ‘native’ applications.

Historically, native apps have been faster and more stable than their cross-platform counterparts, and–until recently–this has been something of an advantage. Of course, the drawback is that a native application only runs on a single operating system. (Sidebar for the geekish: it’s worth mentioning that most seemingly cross-platform applications are actually native applications. But that is an article for another day.)

Enough Is Enough…already

There are often multiple versions of an application, each one compiled separately for a specific operating system. This need to release multiple versions of an application, just to keep up, has led to rising development costs and other major hindrances in the development process. That has lead to projects of mezozaic proportions–and as you’ve probably have heard by now, most residents of the mezozaic era are extinct.

Considering this, it’s only natural that more and more companies are looking to the future for an alternative to the native application. Luckily, in the world of technology the future is always just around the corner and HTML 5 may just be the answer they’re looking for.

HTML5 vs. The Dinosaur

With powerful features such as file system access, web-cam access, and microphone access, HTML5 is robust enough to provide functionality once only available to system-level applications. Plus, HTML5 apps are lighter and nimbler–both for the web developer and the end-user.

For the first time ever, users can now drag-and-drop files straight from desktop to browser, save their work straight to the cloud and access their digital life from any computer, anywhere in the world. Developers can voice-enable web applications with a single line of additional code and adding realtime video and multimedia is just as easy. Perhaps best of all, there’s no need to install anything; the HTML5 application in combination with your browser does it all straight from the web.

So, what does this mean for native applications and the services that rely on them such as Apple’s App Store, Google’s Android Market and Blackberry App World? You tell me–chime in on the conversation below. I’d love to hear your perspective.

One web design company is not the same as the next. Before you commit, here are three important questions to ask:

Do you build custom designs or use templates?

Many web design companies use templates rather than creating a custom design from scratch. While both methods can be effective ways of creating a website, you should be aware of the advantages and limitations of each option. If you are looking for a website that presents your brand, a custom design built from scratch is your best bet. A fully integrated website must be custom built so it is tailored to the specific requirements of your business. On the other hand, a simple website with limited functionality requirements may be able to be achieved with a website design template. These types of websites act more as online brochures than interactive websites; that is, they display information but may not allow visitors to take action, connect with your social media accounts, get on your mailing list, etc.. Additionally, other people can use the same template, so the look and feel will not be entirely “yours.” Be sure you are clear about your online marketing goals before you decide.

How do you integrate search engine optimization (SEO) into your process?

Plenty of firms will tell you there’s a simple solution to acquiring high rankings on search engines, but the truth of the matter is a proper SEO strategy begins in the planning stages of the project and never truly ends. To create a successful SEO strategy proper research of the keywords and competition, combined with its continued integration into the site’s code, should be a priority. Search engine algorithms are constantly changing, as is the content of competitors. Updated, relevant, and optimized content should be the continued focus of any SEO strategy. Remember, content is king.

What type of content management system (CMS) would you implement?

A CMS allows an administrator–that could be you–to easily update all of the content on your website without technical knowledge of the code behind the site. Without a CMS a website can only be updated via its code. Be prepared to describe the level of control you would like to have in updating your site, and make sure that the design firm will deliver a solution to fit your needs. Most web design firms will build a website in either an off-the-shelf CMS or a custom-built version. This is important to know because many custom versions will be proprietary and therefore not transferable should you ever want to move your web business to another firm. That would mean starting all over again.

Ask these questions, get answers that satisfy you, and rest assured that your web production process will take your business where you want it to go.

Growing up, whenever my family got a new gadget, appliance or vehicle I’d always be the first to push every button, turn every knob and flip every switch on the thing—even the ones I probably wasn’t supposed to touch. As a web developer, I find that I’m still the same way—I get a new piece of software or find a new online service and I immediately want to click through everything and get a “feel” for the application.

The thing about all this that interests me most is that I’m not alone in my love for all things interface—it seems nearly everyone loves to press buttons. How often have you been waiting for an elevator and watched the person next to you push the button a few dozen times? Pushing that button again and again isn’t going to speed up the elevator. You know that and yet I’m willing to bet that you’ve done it too. Am I wrong?

So, there’s something really satisfying about pressing a button. It’s something kinesthetic—the sensation of the button snapping into place—and auditory—the sound of the button clicking into place—but perhaps more significantly, it seems there’s some psychological tendency within the human mind that associates pushing a button with reward. Push the button, get a cookie. This brings me to the focus of today’s discussion—”tasty buttons.”

Once upon a time, I was fortunate enough to work with the great thinker, writer and speaker Frans Johansson. During a design requirements meeting, he told us he wanted the buttons to be “tasty.” By this, he meant that the button should look and feel very clickable. I was thinking of that meeting again today as I sat here cooking up some fine gourmet buttons and I realized how central that funny little idea has become to the way I think about button design.

So, what makes a button tasty? To help answer that, I’ve collected some of the tastiest buttons around (including a few of my own design) and included them below with “tasting notes” for each. Bon Apetité!

Taken from Gorilla State (http://www.gorillastate.com/)

The subtle flat border on this button frames the interior of the button very nicely—like the matte on a well-framed picture. The text of the bottom has a well-implemented inset effect that works to give even more realism to the button and the curvy arrow point at the end is a very nice little touch. Also, I find this yellow-ish orange to be a very tasty color. Simple button—high click appeal. 8/10

Taken from Basecamp (http://basecamphq.com/)

Like the first button, this button utilizes the text inset effect. It’s also a gradient button with a flat 3px border and a slight bevel, as we saw above. The major difference here is the introduction of an icon instead of a simple arrow point. Again, simple but tasty. 8/10

Taken from CSS-Tricks (http://css-tricks.com/css3-gradients/)

Continuing the theme of the first two buttons, these buttons feature all the same design elements but also bring a bright flash of action-oriented color into play. 8/10

Taken from OH! Media (http://www.ohmedia.ca/)

One last button of the same style as those found above—this time a sleek blue on black with a really nice inset arrow point. 8/10

Taken from a banner advertisment for Elegant Themes (http://www.elegantthemes.com/)

Here’s something a bit different. A unique texture, subtle shine overlay and tastful bevel give this button some character. The drop-shadowed white text on the warm red works well. Placing the button so that it overlaps the heading above it gives even more depth to an already rich button. 8/10

Taken from Firefox 3.6.3 running on OS X 10.6.3 (Snow Leopard)

These should be pretty familiar buttons to many of you and while the rest of the buttons in this line-up are from websites, I’m allowing in this one exception because I feel these buttons are a small piece of genius and are likely under appreciated. Every browser needs both a back button and a forward button, but really, how often do you use the forward button? Maybe occasionally, but I can almost guarentee you that you click that back button much more often. These buttons seem to know that as the back button is obviously designed to be the center of attention though still grouped appropriately with it’s counterpart. 9/10

Taken from 13 Creative (http://www.13creative.com/)

Taking a step away from all these round cornered buttons, here’s a good example of a tasty button that laughs in the face of all the more traditional button design techniques. 7/10

Taken from Tres Amigos World Imports (http://www.tresamigosworldimports.com/)

Similar to the above, this is another example of how you can create a great looking button without bevels and shading. 6.5/10

Taken from FormStack (http://formstack.com/)

The wrap around edge is a great techinique for giving some depth to a button—the subtlely crafted drop shadow completes the effect. I also really like the emphasis of the word free here through added color and italics. The angle quote at the end gives it that extra bit of click-ablilty. 8/10

Taken from FormStack (http://formstack.com/)

Sometimes it’s a button’s context that really makes you want to click it. Take these sign-up buttons for example—where is your eye drawn? Through color, size and context, the middle button has some really high click appeal. 8.5/10

Taken from Freckle (http://letsfreckle.com/)

Cute and simple—it’s mostly the font that gives character to this little green button. Sometimes simple is better. 7/10

Taken from Daily Mile (http://dailymile.com/)

The execution of some of the effects here seems a bit unpolished but I really like the almost subliminal placement and coloration of the word FREE. I think this is a particularly effect button shape as well. 7/10

Taken from Paramore|Redd (http://paramoreredd.com/)

The most elaborate button in our line-up, this one combines suble line work and shading with a nicely framed icon and some solid typography. Plus, it’s big size makes it all that much more clickable. 8.5/10

Taken from unpublished design by Pixel Dreamer (http://pixeldreamer.net/)

I created this button as part of a design that ended up getting shelved but I wanted to include it here to show a good example of a button that has a lot of character through it’s depth and shading but also in it’s typography. 9/10

Taken from Pixel Dreamer (http://pixeldreamer.net/)

I designed these simple buttons over a year ago for Pixel Dreamer’s current website. There inverted (going into the page instead of popping out of it) and utilize a subtle but thick border as a rollover state. The simple icons add clarity. 8/10

Taken from Pixel Dreamer’s new website (http://pixeldreamer.net/)

Just so you don’t walk away thinking I have something against square buttons, here’s an example from Pixel Dreamer’s newly designed website (yet to be published). It’s a very simple button and aside from it’s bright color, the font is really what provide the flavor here. 8/10

Here at Pixel Dreamer, we pride ourselves on always delivering top notch, cutting edge solutions that will set your business apart from the competition for years to come.  With the successful launch of the iPad, the massive popularity of the iPhone and the general momentum of “mobile web + touch device,” we have come up with some general rules of thumb to apply when developing for these niché systems.

1. The End of Rollovers

While rollover menus have helped save a websites layout from clutter and also gives the ability to factor in slight JavaScript animations to rollover states, the truth is that these rollovers were designed for mouse behavior and mouse behavior only. In order to compensate for touch-based devices that know nothing of rollovers, we must do away with drop-down navigation.  The main culprit here is the “:hover” state.  There is no event listener that translates a hold-down gesture on a touch device to the mouse being held over a particular area.

2. No Flash

In a great press release by Steve Jobs this morning, there are many downfalls of Flash.

1. Lack of open standards – Adobe owns Flash, dictates its path and decides how it is to be used.
2. Drains battery – Decoding video on the software level, which is exactly what Flash forces rather than at the hardware level, drains battery life up to 2.4x faster.  It also has proven to slow down the device by using up more system resources to decode the Flash file.
3. Not semantic/bad for search engines – While Google has improved their Flash indexing, back in 2008, there has been little to no word on whether they continued to improve their Flash-reading algorithm within the last two years.  The basic fact is that if there is no need to put an extra layer between your content and the search engines working to make your content more accessible, then why add it?
4. Large file size – Flash websites are notorious for taking a long time to load.  This time translates directly to lost visitors (they would rather be reading content than watching a bar move slowly across the screen).

3. Embrace HTML5

Now is the time, more than ever to embrace HTML5.  Dragging and dropping of files, inline scrollable panes, the canvas element, HTML5 video and audio all are web standard-based solutions for your website/application, and will work on the iPad, iPhone and iPod.  Any other device that implements the WebKit rendering engine also should have support for HTML5.

This is just to get the conversation started on best practices for the mobile web revolution, as well as the touch revolution.  Could you think of other “rules-of-thumb”  to keep in mind when developing/designing new websites? Hit up the comments!

According to the Huffington Post, Social Media helped lead to the capture of Faisal Shahzad, the accused Taliban-Pakistani who attempted to bomb Times Square in the early morning of May 1st, 2010:

Photos of Faisal Shahzad emerged via the suspect’s profiles on social networking sites, including Facebook and Orkut. These photos provided the world a first glimpse at the person of interest suspected in the Times Square bombing plot.

This is a very interesting intersection of where social media and the law come together. For the sake of an argument, couldn’t it be said that having a social media profile makes you a much easier target during a criminal or even civil investigation? Even if this suspected bomber deleted his Facebook and Orkut accounts before driving into NYC that morning, would he have been any safer due to the data retention policies in place by sites like Facebook?

As evident in the Google Insight graph below, over the last four years, social media marketing seems to have sprung from nowhere to become one of the hottest new marketing niches.

The social media community has been quick and thorough in responding to the ever-increasing interest surrounding social media marketing by launching a few thousand blogs on the subject, publishing several hundred books about it and presenting countless tips and strategies and lists upon lists of best practices.

Yes, there’s a whole lot of chatter in the blogosphere on the topic but in many ways there’s nothing new about social media marketing. In fact, if you strip away the technology, social media marketing is nearly identical to the direct marketing approaches of the pre-broadcast era in that its focus is on the individual rather than a generic demographic. Given this similarity, I can’t help but find myself wondering what history can teach us.

How is social media marketing like the direct marketing approaches of yesteryear?

One hundred years ago, if a salesman knocked at your door, or if you were passing by a salesman on the street, you’d judge him on three basic factors—expertise, trustworthiness and dynamism.† Does he know what he’s talking about? Is he engaging and interesting? Can he be trusted?

Today, when you interact with someone on twitter or facebook, they’re judging you on the exact same set of qualifications. Does she talk intelligently? Are her comments fun, polite, constructive? Is the information she’s providing reliable?

With my somewhat limited knowledge of history, I’ve only been able to draw a few high-level insights from this line of thinking but I’m hoping that there might be a few history geeks out there who can chime in with their perspectives.

Can you think of other ways in which history might be able to teach us a thing or two about social media? Please share your comments below!

† As Richard M. Perloff outlines in his book, “The Dynamics of Persuasion,” there are actually several additional factors that we consider when judging someone including goodwill, sociability, extroversion and composure. I’ve selected to focus on expertise, trustworthiness and dynamism because of a talk I listened to by Jason Randal in which he identifies these three qualities as being the most critical.

Every year, Google does something special for April 1st, April Fools Day.  In the past years we saw fake products, including a new Gmail labs feature that allows you to send an email from the past, and an artificial intelligence entity named CADIE that powers all of Google’s services.

This year, we all woke up on April 1st to find a new announcement from Google: that they are changing their corporate name to “Topeka”.  Funny enough the Town of Topeka, Kansas actually changed their name to “Google, Kansas” almost exactly one month ago in order to make a bid for Google’s Fiber for Community promotion.

The Google team even wanted to make sure the verb “Google” as in “to Google some-one’s name” was used correctly with the Topeka Translation…

In this video, I briefly demo a clever little script on the NY Times website which entices the user to continue reading by presenting a related reading recommendation just as the user gets to the end of their current article. Now, that’s a smart content strategy.

Many companies are dropping traditional marketing for online marketing and with good cause—there are a ton of benefits to advertising online. With the website now acting as the face of most companies in today’s market, it simply makes sense to build a marketing strategy around your online presence.

So, what are the top 3 advantages online marketing has over traditional marketing? Here’s what we think—please chime in with your own thoughts in the comments section below.

#3 – Numerous Traffic Sources

There are numerous ways to drive traffic to your site when you’re marketing online, this alone is one of online marketing’s biggest benefits.

#2 – Accurate Targeting

An unmatched ability to target your audience based on a variety of variables, from a user’s behavior their geographic location.

#1 – Measurability

Trying to measure your return on investment (ROI) in the realm of traditional marketing is a slow and often impossible task. Traditional marketing does allow a company or individual to build a brand through print and broadcast (channels online marketing cannot reach), but the ability to instantly evaluate a campaign is severely hampered by a lack of readily discernible data.

Online marketing dispels any difficulties around measurability by providing instant feedback and making it simple to track the success of a campaign. With online marketing you can even alter your strategy mid-campaign based on real-time feedback—it’s that effective. This type of agile responsiveness is unheard of in traditional marketing approaches and that’s why we feel that measurability is the number one advantage online marketing has over traditional marketing.

What do you think? Agree? Disagree? Let us know—join the conversation below!

If you’re any sort of Gmail fan, you already know about Google Labs and the great enhancements their plugins provide.  Now, did you know that there are even more Gmail enhancements than what’s listed in Labs (Settings>Labs)?

If you go ahead and click on Settings > Gadgets, you’ll see a field to enter the URL of any gadget you want to install.  What’s that you say? You don’t know of any URLs to add?  Well lucky for you, what better way to start off Dreamer Labs than by giving you a list of great Gmail gadgets we know you’ll use.  Here we go…

Twitter Gadget

Does just what you think! Get Twitter integration in your Gmail with this lightweight Gadget.

Gadget Link: http://www.twittergadget.com/gadget_gmail.xml (copy and paste into Settings>Gadgets in Gmail)

Google Maps Search Gadget

How often are you finding yourself tabbing between Google Maps and your Gmail account?  Client are always sending addresses and directions for meetings via email, so why not double check the directions from within Gmail itself?  This Google Maps Search Gadget is a really convenient way to use Maps while never leaving Gmail.

Gadget Link: http://www.google.com/ig/modules/mapsearch.xml (copy and paste into Settings>Gadgets in Gmail)

Digg Gmail Gadget

If you are any level of Digg fanboy, this gadget is for you.  Keep track of the latest trending stories on Digg from the convenience of your Gmail account.

Gadget Link: http://digg.com/goog/ig.xml (copy and paste into Settings>Gadgets in Gmail)

Google Translate Gadget

Pretty self-explanatory, this Google Gadget embeds the powerful Google Translate right into Gmail.  It communicates directly with Google’s translation system, which means you can translate to over 30 languages, without even leaving your email.

Gadget Link: http://www.google.com/ig/modules/dictionary.xml (copy and paste into Settings>Gadgets in Gmail)

Wikipedia Search Gadget

Somewhat disappointed that this search Gadget opens a new tab for the search (results should really be in the gadget itself), this Wikipedia Search gadget is still very useful. Install now!

Gadget Link: http://www.google.com/ig/modules/wikipedia.xml