You might’ve seen our recent post announcing our new mobile site. We’d like to dive deeper into the design process, and point out the key components we set out to achieve. There were a few clear goals we had in mind while designing & building our mobile site. We chose some of them in order to go beyond what we’ve seen with the usual assortment of mobile sites today.

Seamless & Responsive Design

This phrase has been getting thrown around in website design for mobile devices discussions quite a bit lately, and we know that means the need for keeping focused on what people want becomes more difficult than simply following trends without fully understanding the rationale behind it. To counter that, we found that taking some common conventions head-on would help focus us on making the user experience better than ever.

Initially, we found that the use of something like http://m.hrb-ideas.com is fine & something that people have grown to terms with, but there are still some issues with detecting a mobile site by using a separate web address. For instance, link sharing has a discrepancy from person-to-person due to the device-specific URL rather than simply pointing to the content and adjusting for the visitor when the page is being viewed. It also restricts and isolates the mobile site in a way that we didn’t want to limit. For instance, we had the idea that, by having everything located at a single URL, the site could seamlessly respond to what the user is using/wants in a (hopefully) useful way. As a result, we’ve introduced a new feature on our site where the site automatically switches to the mobile site as soon as the screen is too small to show the full site.

Here’s a video of it in action (running in Google Chrome & sped up 2x for the sake of keeping the demonstration short):

This is especially useful when viewing the site via an iPad as the screen isn’t wide enough to show the full site when held vertically, but it is wide enough if held horizontally. It’s entirely up to the visitor to determine which way works best for them, and the level of control & custom tailoring is something we haven’t seen much of yet. If the mobile site isn’t for you, there’s still a button to switch between the full & mobile site that will remember the preference from that point forward.

Designing for Touch

The use of touch screens changes some fundamental design concepts set with a keyboard & mouse in mind. This is not just due to hardware limitations (e.g. you can’t have stuff happen when hovering over something anymore [a tap is required]), but there are also design decisions that have to be made in order to avoid overlooking the niceties that people have come to expect when using a mobile device. To address this, we reworked our entire navigation to fall in line with modern mobile and touch conventions while streamlining the featured navigation to be tailored to what people would want when using a mobile device. Another important aspect was adding touch gestures where one would expect, and now all of the content cycles/slideshows (e.g. homepage & portfolio) have the ability to be navigated via swipes left & right rather than needing to tap on the left & right buttons.

Details, Details, Details

There are certainly things that many visitors will overlook while using our mobile site. We set out to use CSS layouts, shadows, etc. when possible so they show at full-resolution at all times. In addition to that, some of the primary images on the site were made at 2x resolution so they show at full-resolution on Retina resolution displays (which is not exclusive to Apple devices).

Text was made to be more compact on smaller screens so it’s a more efficient use of space (while still being legible), and text is shown at a larger size on tablets since they have more room and are usually held farther away when reading.

iOS users get the added benefit of complete home screen integration as they can add our site alongside all of the apps on their device. They then get treated to a high-res app icon on their app screen, can visit our site with one tap, and don’t have any of the web browser’s interface taking up room on the screen. It’s really worth checking out.

There’s definitely more to our mobile site than what was highlighted, but this should cover the three primary goals that we set out to achieve while we asked ourselves to “build a mobile app” with us as the client. We’re excited to hear what you think about it, and we would love to hear feedback or any questions you have that we could address in a future article. Most importantly, we hope you enjoy our new mobile site!

On the heels of Apple’s iAd last year, Google announced that they are adding rich ad serving to mobile devices courtesy of HTML5. This announcement has flown under the radar for the most part so what makes this stand out from Apple’s service? The biggest difference is that these ads can be shown on regular websites whereas iAd is limited to only be used in apps. Google has added this service to DoubleClick, a company Google acquired in 2007 for $3.1 billion, under their rich media toolset called DoubleClick Studio.

Downloading the information sheet (pdf) that Google provided alongside this announcement shows that Google predicts, by 2015, mobile devices are going to be the number one screen though which people engage with advertiser’s brands. This is no small claim considering the level of adoption the personal computer has reached, but I’m not sure if television is included in that claim seeing how they are talking about interactive advertisements.

Mobile advertising can provide a level of usefulness that other forms of advertising haven’t been able to achieve. People bring these devices with them everywhere, and that on its own is an incredibly important aspect (ex. seeing an advertisement for a restaurant while at home might bring it to your attention to go there someday, but an ad for the same restaurant while you’re looking something up on your phone might help you choose where you’re going for lunch that day).

Connect with HRB:

These devices have integrated cameras and a bunch of sensors so the level of interactivity and intuitiveness can surpass previous mediums. What has been seen on mobile devices thus far is just the tip of the iceberg, and having established distribution platforms evolve to accommodate these capabilities is a good starting point.

We’re all familiar with online maps at this point. Some might have started with MapQuest while others were first introduced with Google Maps, Bing/Live/MSN Maps, or Yahoo Maps. For being something that was as simple as a fold-out that fit in the glove compartment of a car, the maps that the we all have access to today have come quite a long way. The maps that are available now are more accurate, have much greater detail & information, are quicker & nicer to use, accomodate for traffic & different methods of transportation, and are (of course) kept up-to-date. Let’s see how the evolution of these tools has affected web design as well as everyday people.

This entire campus was added via Google Map Maker. Image Credit: Ars Technica

Fundamental: Speed & Accuracy

It first started with trying to figure out who could get you the information you want the quickest & was the most accurate. We’ve all heard GPS horror stories of the map software telling people to do something crazy like make a u-turn on the interstate or simply takes them to the wrong location. Google Maps & OpenStreetMap have turned to crowd-sourcing to help enrich their maps with finer details (e.g. full-fledged college campus maps) in addition to staying up-to-date at a faster pace. Google has facilitated this by setting up a businesses verification process so businesses can manage their own listings, and Google has also launched Google Map Maker for making peer-reviewed map edits.

Behind the Scenes: Website Integration

Google Maps gained traction early on for its easy-to-embed maps that were still fully interactive rather than being static images (e.g. the visitor can get directions to the business & look around the map without leaving the site). They further catered to web developers by launching an API so developers can integrate a wide a array of map data/tools/capabilities into their website/web app. A developer API isn’t the most user-friendly tool available so they’ve since reached out to non-developers by launching My Maps so people can create & manage their own customized maps using an easy-to-use interface, and these can still be embedded like a regular Google Map.

Connect with HRB:

Important to Everyone: The User Experience

Google has also been evolving the technology powering their maps to make the user experience better. One of their largest improvements somewhat early on was the introduction of 3d models of buildings, landmarks, and terrain with the Google Earth application. The most recent improvement they’ve made utilizes HTML5′s WebGL technology to help merge the advancements made with the Google Earth application with the Google Maps website. They’ve been rolling out invitations to try out WebGL-enabled maps to people using HTML5-capable web browsers recently (a popup is shown in the sidebar to opt-in & shows a tour of what’s new). The WebGL tech allows for them to utilize complex graphics natively within a web browser (avoiding the need for plugins/downloads and doing so without introducing sluggishness/stuttering). Take a look at what’s new in Google Maps by utilizing WebGL:

I highly recommend enabling MapsGL if you’re given the choice as it’s a groundbreaking improvement technologically as well as being a more seamless & more enjoyable way to use maps in your web browser. WebGL is still a new web standard, but people can look forward to seeing more of this in the websites they frequent as HTML5-capable browser adoption increases. Needless to say, we’re investigating WebGL as something to be added to our website development toolset.

If you’re curious, Does my Browser Support WebGL? will tell you if your current web browser is WebGL capable or not, and upgrading to a web browser that has it is as simple as downloading the latest version of Chrome, Firefox, Safari (currently needs to be enabled via the Developer menu), or Opera (Internet Explorer hasn’t added WebGL support yet).

It’s a well known yet seldom followed saying – “Practice what you preach.”  But when we considered the prospect of rebranding HRB, we knew we had to follow ourselves the same advice we preach to our clients … that the most objective and ultimately most valuable branding efforts are done with the direction of an experienced outside advisor. You can’t read the label from inside the bottle, right?

After over 15 years with the same “label,” a logo we affectionately call “Herb” because its three letters also resemble a face, it felt like the time was right to go through our own rebranding effort. When Herb was first designed and put to work as the face of HRB, our company and the business of advertising was considerably different. Traditional media – TV, radio, print – was still king. The Internet was in its marketing infancy. The iPad, iPhone and Droid were only the distant dreams of Silicone Valley tech heads. Twitter and Facebook? Mark Zuckerberg was still playing video games in grade school.

It’s a vastly changed world now. Digitally-based, incredibly fast moving, with websites considered as the first point of brand contact instead of merely an afterthought … and handheld devices putting the power of brand engagement in the hands of millions of consumers.

To acknowledge those big changes in our industry, we decided to make a small but important change for ourselves. So we engaged the services of FUEL, a talented group of strategically-minded designers, to rethink and redesign our logo and visual brand. We vowed to be good clients and provide them with all the input they requested (which was a lengthy process), then ultimately, trust their thinking and their visual concept for our brand. Frankly, it was nice to be on the client side for once.

What you see here, the new logo, colors and look is a result of that collaboration. For us, it’s an important reminder of the new thinking we need to consider and then deliver every day. To our clients, it’s a reminder that brands aren’t static entities that can rest on their laurels. To Herb, it means a well-deserved retirement.

Wherever he is today, traveling the world or spending his pension at a casino in Branson, Herb can be confident our new logo stands for the same product we truly care about delivering … growing our clients’ brands to grow their business.

A site that’s online isn’t much of a site unless people go to it. The raw website visitor stats that services like Analytics and Quantcast provide sometimes aren’t enough for gauging the traffic flow to a site. A “link” is a fundamental way in which visitors reach a site, and direct links (typing in the web address) and search engines are the two other ways. Of course, there’s “good company” and “bad company” online that could be linking to you. I’m not going to discuss right & wrong in this article, but I will go over how to be more aware of one factor that affects all sites… backlinks.

Which method is best?

There’s a few different ways to find who’s linking to a site. Some are tools made available by search engines like Google while some are various services that are available online.

Google’s link: command (perfect for URL-specific stats)

Using link: as part of a Google search will list the webpages that have links to that specified webpage. For instance, link:www.google.com will list webpages that have links pointing to the Google homepage. Note there can be no space between the “link:” and the web page url. It’s also important to know that this finds the backlinks for that one URL, and doesn’t provide matches for every URL on the site. By the way, you can use the number of matches below the search box to get a rough number for assessing the online penetration of that webpage.

Google Webmaster Tools (perfect for site-wide stats)

As part of Google’s Webmaster Tools, they have “Your site on the web” => “Links to your site” in the side navigation that shows backlink stats for a site as a whole. Essentially, this provides:

• A list of sites and what pages they’re linking to
• Which page is being linked to the most
• The terms being used for the links
• and you can get fairly granular with each data set

Everything else

The above methods obviously depend on what Google has indexed, and similar tools are available using Bing and other search engines so one can diversify their data set. There’s also a great service from SEOmoz called Open Site Explorer that’s worth looking into.Unfortunately, searching for a tool that accumulates these stats resulted in finding a lot of adware/junk sites so your mileage may vary depending on the service being used.

Knowing who’s linking to a site a good way to understand what sort of company that site is involved with, and this can be helpful when working with the public relations & marketing for a website. It’s also a decent way to see what others are saying about a particular site, but do keep in mind that this is just one way that websites establish a connection with one another.

If you’re reading this, then it’s safe to say that you’ve probably played a browser-based game before. It might have been while waiting for a download to finish, during a break, or even is something that you like to come back to fairly regularly. The sheer ubiquity and pleasant simplicity of these games have allowed the online game market to grow immensely over the years. Tie-ins with the Facebook community (ie. Farmville & Mafia Wars) have generated quite a lot of hype fairly recently with some of them reportedly reaching somewhere around 60 million users each month.

Good ideas tend to spread to other mediums so we’re now seeing some of these games being ported to mobile devices. Games like Angry Birds, Plants vs. Zombies, and Bejeweled have found their way to the iPhone and other mobile devices even though their predecessors were simple Flash-based games that gained popularity with people who played the game in their web browser.

Here's a teaser of the Biolab Disaster game with an encouraging quote from the Guardian.

With the introduction of HTML5 comes another viable platform for creating these games. Parallels to the great flixel Flash-game library are being released that solely use HTML5 and other functionality built into every modern web browser. One that caught my interest is the Impact game engine. It comes with a library of common game-related functions, a level editor, and various other tools so that making a game in HTML5 doesn’t have to be done from scratch each time. You can check out the first game created using the Impact engine, Biolab Disaster. Impact is a commercial product that sells for $99 so I’m definitely curious to see if this catches on, and if it allows for further development.

Connect with HRB:

Games have been a part of the advertising repertoire for some time now. Companies like Nikelodeon, Adult Swim, PETA, and countless others offer web-based games while companies like Burger King and Doritos have even made the leap over to game consoles (XBox 360 owners should probably check out Doritos Crash Course. It’s free and yet tastefully Doritos-branded… sorry about that awful pun). The big companies aside, these HTML5 game libraries empower the web designers of the world (with knowledge of JavaScript & a good idea) to create games, and I can’t help but be excited about that.

As a Web design and marketing firm, HRB is receiving more requests from its clients to develop websites that generate leads and sales.

Your website is the most powerful sales and marketing tool available. It works 24 hours a day, rain or shine, and represents the face of the brand to the marketplace.

Successful websites are not just pretty online brochures. They convert traffic into leads and sales. So, if you are going to put time, effort and dollars into driving traffic to your website, why not ensure you have the tools in place to capture lead information, automate responses to inquiries and offer content visitors want to see?

Many websites are missing these critical elements.

Build a Site for Leads

If you want your website to generate leads, it must be designed and optimized for that purpose. That means offering valuable free content about your products and services (in text, video or audio), giving visitors a form to sign up for your email marketing and optimizing each Web page with your Web keywords and keyword phrases.

Build Trust with Quality Content

In order to do business with you, prospects and customers need to trust you. Trust that you are who you say you are and will do what you say you will do. During the research and buying cycle, visitors are looking for the vendor that presents the lowest risk. Ensure that your website establishes your credibility by sharing your expertise through helpful blogs, articles and white papers or ebooks.

Use Offers to Attract Visitors

Offers such as free information, a limited time sale, or “buy two and get one free” are great ways to draw attention and traffic to your website. It’s imperative that when you get good traffic to make sure you are prepared to collect lead data on your website and follow up on each lead.

Always Use Calls to Action

In order to make it easy for your visitors, let them know what you want them to do next by including a call to action. Don’t make them guess that you would like them to sign up for your enewsletter, download something, take part in a contest or to contact you for further engagement. You can number the steps, if necessary, or provide a prominent form for them to fill out on all your Web pages. And, in general, increase their response by reducing the choices they need to make.

Respond Quickly to Leads

Companies often spend substantial dollars to generate Web leads, and use lead management and CRM systems to track them. Sometimes companies overlook how slowly they respond to these leads. A Kellogg Study on Lead Response Management revealed the odds of connecting with a lead increases by 100 times if attempted within 5 minutes versus 30 minutes. And the odds of converting a lead if called in 5 minutes versus 30 minutes increases by 21 times.

Focus Content on Benefits

Website content should address company or product benefits, not just features. Potential customers want to know what’s in a visit to your website for them. Focus your content on how your product or service will make their lives easier, better or richer.

Analytics are Key to Success

Every website should have analytics software installed in order to see what’s happening on the site. If you never establish a baseline measurement for key performance indicators such as visits, unique visits, bounce rate and downloads you will have a hard time determining if you are achieving your website goals. Analytics are vital to determining site performance and can help you with testing to improve online results.

Great Websites Generate Great Leads

If your website is not generating any leads for you, it may be that one or more of the key items listed here is missing from your site. Contact us for an assessment of your site. We offer Web design and development services, as well as optimization for conversion of leads to sales. Let us know if you would like to take the first step to turning your website into a lead and sales generator for your business.

I’m going to kick off this article by sharing what sparked my interest to write this article about HTML5 video useage. I recently went to boxee’s website (a company that offers Internet-based TV products and services), and I was happily surprised by the clever intro they’ve added to their site. It takes advantage of HTML5 video so people using web browsers not yet capable of HTML5 will have to see it second-hand, or you can (as always) choose to download Google Chrome or Safari to take a peek at it yourself. I’ve embedded a screen recording of the HTML5 version below so you can take a look (screen recording makes it look choppier than it really is).

Did you see the intro? You can skip this paragraph if you haven’t seen it yet, because I’m going to proceed to break-down what about this intro made me instantly know it was done with HTML5 video (honestly, the first thing I did after seeing it was look at the site’s code to verify my thought that it was indeed HTML5). The first thing that tipped me off was how fast it loaded. Flash videos take time to load up the Flash plugin instance (commonly causing a splash of color/white to be shown for a split second where the plugin will appear) and load the video player/skin portion of the Flash file (since Flash requires a “helper” file alongside the actual video file in order to display it) in addition to loading the video itself. Instead of requiring that whole process, the only thing that needs to be loaded using HTML5 is the video itself, and that means videos can start to play in less than a second. Another thing I noticed was how responsive my browser was even though it was playing a rather large video. Flash videos of that size typically cause my scrolling to become more choppy and are more CPU intensive than what was seen on this HTML5 version. Another, less obvious, thing I noticed was how well integrated the video was into the website design. The tabs at the bottom have a nice translucent look to them and there’s various pieces of the page such as their logo and login form in which part of the video takes place behind (this is something that is commonly problematic when using the Flash plugin), and the video compensates for the dynamic width of the browser really well.

HTML5 Video Usage as of October 2010. Courtesy of Mefeedia.com

With all of that whizzbang out of the way, we can now start to cover how the landscape of the Web has changed now that people are adopting the use of the HTML5 video standard. Part of the recent announcements was that Boxee has embraced HTML5 and switched over to using Webkit for it’s built-in web browser functionality. This definitely seems to the the trend since Boxee isn’t the first or the only company to switch over to the Webkit engine (most commonly known for it being what powers the Google Chrome and Safari web browsers) in an effort to provide the best support possible for the latest Web standards. Mefeedia (a video search engine) said in lastt October that 54% of web video is now available in HTML5 (doubled in 5 months), and they attribute the growing market of “smart” mobile devices as being the primary driving factor. These numbers are a good sign, but I still can’t believe the fact that bands and restaurants continue to use sites built for the Flash plugin even though their websites are most commonly accessed on a mobile device by people looking for a place to go while they’re out and about (costing them potential attendees/business with no real benefit as a trade-off).

It’s not all perfect though, because one thing that many people are still anxious to see the result of is if copyright-protected video providers decide to switch over to HTML5 or not. Currently, sites like Hulu and Netflix use Flash as it provides an encryption method that prevents people from ripping the video directly from the service. I personally think that’s actually a non-issue considering the people that want the content for free already have multiple avenues for acquiring the content (download via bittorrent, use a screen capture program [such as the one I used for the video embedded above] as a loophole around any protection the site might have, etc) and the protection methods that are available to be used in conjunction with HTML5 are actually enough to thwart off anyone looking to get the content from that particular website. A sticking point that affects web developers is the lack of agreement on which video codec is the official standard for HTML5 video, and this means that they need to offer multiple video files for various browsers (Firefox is looking for an open-source OGG video, Webkit is looking for a higher-quality H.264 video, and some are hoping WebM catches on as the official format). These issues can all be agreed upon eventually, and websites will continue to switch over to using HTML5 video so the future is looking pretty bright for a web video standard.

We’ve all grown accustomed to the idea that search engines take a word or phrase that you write, and then retrieve a list of results the search engines have determined is the most relevant to your search. One thing international businesses should take into consideration is these words and phrases change when they’re in different languages. Searching for something in english shouldn’t return results in a different language since the user won’t be able to get anything out of them. Not even the introduction of image-based searching changes this since the user still chooses a language preference for their results. This is important when working with international companies considering search engines return results based on the user’s primary language.

Many sites are utilizing automated translation that takes a single version of the site content and translates it into whatever language the user wants. The accuracy of these translators is always improving, but there’s always the potential of having errors that make the lack of attention to detail stand out like a sore thumb. The more important issue caused by using an on-demand translator is that the numerous translations people might use won’t actually be indexed (included in) by search engines whereas the source material is.

The way to get a multilingual website indexed in each language is to make copies of the source material for each language. This is especially true because search engines aren’t currently able to derive automated translations from the automated tools. By making copies of the source materials in the different languages, the search engines have raw and unique content to crawl for the different languages, and it communicates a level of commitment the site owners had to undergo to make the translated versions. This has the additional benefits of allowing the site to cater to a more specific audience and being able to avoid the mistakes an automated translator might make. The different languages need to be separated some way, and there are different methods that web developers can choose from where each have their advantages and disadvantages.

Separating the languages via a top-level folder (ie. http://www.example.com/en/ & http://www.example.com/es/) allows for a single domain to contain the whole site and every language. This makes it so that each language helps to contribute to a single site’s search engine rankings rather than being dispersed across country specific domain names (ie. http://www.example.co.uk). The centralized location allows for a single address to be shared that then gives the user a choice of the region and/or language they prefer. International website designers can also integrate a language selector to guide users to the corresponding page in the desired language, and Google has tools to ensure each different language section of the site is indexed properly.

In light current client developments this is something we have been researching heavily. We welcome all on-comers who might be interested in more information.

Google® gave us an update to what they’ve been up to regarding Chrome OS (announced in July of last year) and they seem to be ready to get serious about the potential of their new operating system. Until now, most updates concerning Chrome OS were highly technical and lacked any details describing what Chrome OS is actually going to be once it’s ready to be used by the public. As part of the announcement, Google launched a website dedicated to Chrome OS that includes videos detailing the primary features and a way to sign up for a chance to test the first set of Chrome-powered notebooks.

Operating System… like Windows & Mac?

Yes and no. It’s an operating system that’s based on the open-source Linux OS, but it’s very different from Windows, Mac and the other variations of Linux. The goal is to make the best operating system that’s built entirely around using the Web, because most people find themselves owning a computer yet only use it for accessing the Internet. Chrome OS’s inherent simplicity lends itself to strive to be as fast, mobile and secure as possible rather than trying to add and support new features that some people might end up using. They’ve been focusing on getting the core of the OS right first, and this leaves Google in a situation where they can now claim that their notebooks start up in just 10 seconds (even though the notebook itself is lower power for the sake of a better battery life).

I want to access my favorite websites & discover those I might like with ease

Enter Chrome Web Store. Google launched their Chrome-centric store as part of the announcement. Chrome Web Store has a decent selection of web apps for its launch and users of the Chrome Web browser will notice that this also offers extensions and themes.

iTunes® users will instantly be familiar with how the store is structured. The “apps” that are available to be installed from the store aren’t much more than bookmarks (considering they’re still sites you access with a Web browser), but they do have some enhanced functionality and added benefits.

• Installed web apps are able to be “pinned” so they take up less space in the tab bar and are easier to access (great for music).
• They can also be opened full screen by default (great for limiting distractions and for rich media sites).
• They also offer a different way to manage your saved websites (allowing bookmarks to be a set of links that you simply want to revisit sometime later whereas installed Web apps are sites that you commonly use or rely on).
• Web designers are free to make their websites act more like applications without having it seem out of place (sites can offer an app that looks and acts in a much different way than their website even though it’s accessing the same content).

This is what I'm greeted with when I open my Chrome browser

Do I need to buy a Chrome OS device to use it?

What a marvelous thing that open-source software is. Chrome OS is free to be installed on any device it can run on and it costs nothing to upgrade to the latest version (which isn’t too exciting considering upgrades to Web browsers, which is almost all of what ChromeOS is, have always been free). There might be particular hiccups that one could come across when using Chrome OS on a device not intended to run it, though. For example, Google will be bundling cellular data connectivity along with WiFi in every device in an effort to make it so that they always have an Internet connection. Check out Engadget’s in-depth preview of the Google Chrome notebook if you’re still skeptical that Google will actually be releasing this.

Connect with HRB: