Photo Credit: IGN.com

There has been a surge of new devices coming out with a wide variety of form factors and intended functionality. There was the boom of the netbook form factor and GPS/in-car systems, followed by the iPhone and other touchscreen mobile devices. Now companies are looking into providing more options for the touchscreen tablet-sized device and the HDTV screens that people already own (with the help of GoogleTV, AppleTV, and Boxee). These all are accompanying desktop computers, laptops and modern game consoles in the fact that they are all capable of being (if not already) Internet-enabled.

When people realize that the device that they’re using is Internet-enabled, they don’t want to have arbitrary limitations on what they can access considering that all of these devices have the screens and input methods that are necessary to access and navigate around a website or Web application that they can use on their computer. They’re all using the one-and-only Internet (or at least that’s how we’d like to keep it), so they should (in theory) be able to access the same content.

Many devices follow this rule of thumb by giving users access to a Web browser of some kind and this trend is becoming more prevalent among device manufacturers. This leaves Website designers with a new issue since most of the websites on the Internet were designed for computers with screen sizes ranging from around 13 to 24 inches with a mouse and keyboard. For example, needing to zoom and pan across a website that was designed for a desktop computer while using a mobile device is not the optimal experience.

It’s possible to take the same content on the site, detect the screen size of the device being used and display it in a way that best fits the device. The screen size detection is near instantaneous so it really comes down to the developers dedicating their time toward designing the new way that the content is displayed on the varying screen sizes. They can use a standard set of “Mobile,” “Computer” and “Projector/TV” options to limit the number of designs that need to be created (they might also choose to include a “Tablet” design). This still remains within the standardized capabilities of a website so the user is still simply accessing it via their Web browser of choice without needing to download an application or plug-in. (Although the developers might choose to offer an app simply due to the fact that it’s easier to access an application than to memorize and type in the URL on most devices.)

jQuery Mobile's Testing Lab

There’s a bunch of user interface libraries that developers can implement on their websites that help speed up the process of designing, as well as standardize an expected look and interactivity between websites that were developed by people who hold no relation (other than the fact that they used the same user interface library). Here’s a few that have sparked some interest in the developer community:

• Sencha Touch
• jQuery Mobile
• SproutCore (demo)

I would have included Cappuccino on that list, but 280 North (developers of Cappuccino) was recently acquired by Motorola so that they can continue their efforts for Motorola devices and software.

Still, this isn’t the first time something like this has happened—Palm was also recently acquired by HP and their efforts with WebOS (Web Operating System) will live on in HP’s future offerings. HP has already confirmed that their touchscreen tablet device coming “early in 2011” will be using WebOS instead of Windows 7 Tablet. Apple and Google (numerous hardware manufacturers are using Google’s software) already have a strong standing in this area and it’s reassuring to see that Motorola and HP are also making their commitment. The end result is being able to provide a centralized, yet completely open and free of corporate interests, access-point with content that’s custom-tailored to best fit the device that you are using.

It is important that we fight for this, because we don’t want our efforts of forming a centralized communication network to become overrun by large corporations that then will be able to influence what is sent over the network.

I wrote an article in May called “What’s the Right Way to Update?” that covered the updating procedure for various software and how it can be improved so that users have the latest version. Having the latest version of software can be very important due to the fact that technology is updated at a fairly fast rate. Using a copy of software from six or so years ago can mean a lot in terms of what it can do and how you interact with it. For Website developers, the target audience could very well be using a range of Web browsers that were last updated as far back as 9 years ago or as recently as an hour ago. This is where the concepts of “graceful degradation” and “progressive enhancement” come in.

What is “Graceful Degradation?”

Graceful degradation is a development term that means a site is built to the latest standards, yet it still works for anyone using an old Web browser. Not everything will work exactly the same in the old Web browser, but nothing will be broken. This means that those users with the latest Web browsers will get to utilize all of the Website’s features, whereas those using a less capable browser will see a simplified version.

What is “Progressive Enhancement?”

Progressive enhancement is essentially the same as graceful degradation, but the developer starts by creating the base-level functionality that works in every browser. Then they add features to provide a little more for anyone using a modern Web browser. Graceful degradation and progressive enhancement provide the same benefits, but it’s just a matter of the developer’s preference as to what they want to use as their starting point.

Now that I understand the lingo, why do these terms matter?

I invite you to compare what Websites looked like in 2001 to what they look like now. Keep in mind that the Websites from 2001 were being viewed in Web browsers that were released just 5 years after the concept of displaying an image in line with other content on a Website was first implemented.

The modern idea of providing a better Website for users with capable browsers is in hopes that people using old Web browsers see some benefit in updating them, which would allow innovation to commence in the mainstream user base. I mean, a group of Web developers actually held a funeral for Internet Explorer 6 when Google announced that they no longer supported it (Microsoft even sent flowers)!

In the meantime, there still needs to be some ambition by developers that leads the way to the latest and greatest features and functionality .

FTC Looks at Opt Out Option for Behavioral Targeting

If you have not been following the discussions surrounding online behavioral targeting and the resulting data gathering on individuals, you may want to start. Whether you are using behavioral targeting as a marketing technique or you are a consumer, you could be affected.

According to MediaPost, The Federal Trade Commission (FTC) is considering a “do not track” list to address Internet advertising privacy concerns, similar to the Do Not Call Registry pertaining to telephone solicitations. To learn more about behavioral targeting visit the FTC’s Wikipedia page.

What Are America’s Favorite News Sources?

As a former journalist, I find the rapid changes in news consumption habits fascinating. Of course, age, technology and access all play a role in how we get our news.

According to a new study by Gather, Inc., individuals are increasingly turning to the Internet to find, receive, share and discuss news. The report reveals trends in how people are receiving and interacting with various Internet news outlets and starting millions of conversations across America.

For instance, a whopping 53% of people still cite newspapers as their main source of news, although 65% of respondents younger than 25 years old described their news habits as interest-based, only reading about breaking news stories or stories of interest. 70% of respondents in this age group turn to the Internet to learn more about a breaking news story and share information with others via social networks.

Marketers Increasingly Seeking Online Tracking Metrics

Marketers are slowly but consistently moving more of their marketing budgets from traditional to online sources. And, the more they spend on SEO and social media marketing, the more they want to measure ROI.

The Forbes Insights and software and analytics firm MarketShare Partners reveal that marketers and agencies continue to struggle with finding the metrics to justify dollars spent on online campaigns.

Strategic Growth Planning for Business and Marketing Success

Ever wonder why some companies turn everything they touch into gold while others struggle to capture great market share? Why marketing doesn’t work with sales?

These questions keep CEOs from sleeping at night. It takes guts and experience to bring accurate, honest analysis and advice to today’s company executives. When it comes to growing a business, most companies struggle to find just the right balance of all the right growth ingredients.

Download the HRB GROWTH brochure and perhaps you’ll see how the “domino effect” can work for your brand.

Can the iPad Slow Newspaper and Magazine Readership?

Earlier this year, just as the iPad was being launched, BtoB Magazine carried a front page story about the possible effects the Apple iPad could have on reviving the ailing print media industry. For one thing, with its vertically-oriented color screen that mimics the size of a single magazine page, the iPad is seen in some circles as an ideal device for reading digital versions of print publications.

“We feel it’s an exciting, new, major media platform, and it can’t be ignored,” said Jason Snell, Editor of IDG’s Macworld, which is currently developing an iPad application.

The advertising model has now been brought into free apps, and it’s like a traditional Website that is mostly, if not entirely, supported by advertising. Apple’s iAd platform isn’t the first to offer developers the opportunity to include ads in their apps, but they do it a little differently.

The traditional electronic ad is either text, an image or a brief animation that, when clicked, will take you directly to the advertiser’s Website. iAd recognizes that most mobile devices either don’t support Flash or have a limited mobile edition of Flash so the common animated Flash ad isn’t possible. People often quote the statistic provided by Adobe that 96% of Web browsers have Flash installed, but that figure is actually representative of the percentage of Web browsers that are capable of running Flash and have it installed. That means it’s excluding millions of devices that have a Web browser that can’t run Flash, even if the device owner wanted to (this includes Apple’s mobile devices among many others).

Connect with HRB:

iAd instead focuses on the fact that 100% of all Web browsers have HTML support. Plus, all of the devices that iAd will be shown on also have CSS and JavaScript support for animation and interactivity. This method allows advertisers to show the full ad experience via CSS and JavaScript on all devices by default and shows the static version of the ad if they set JavaScript to be disabled. Using Flash will instead be shown as a blank block and will require the Flash plugin to show anything at all or requires the developer to also build the HTML version. This begs the question of, “Why not build the HTML version in the first place?” Ads haven’t been using HTML, CSS, and JavaScript until now due to the fact that CSS and JavaScript-based animations were introduced recently so Flash was the only option available to advertising / Website designers.

Click to view full size. Created by blog.monty.de

iAd’s extended ad view does include some new functionality that other ad services don’t offer. The ads expand within the current application when they’re tapped on instead of opening a Website in your Web browser. The ads are self-contained so that everything the advertiser wants to be shown can be included within the interactive ad, and can be closed at any time using a close button that is located in the same place for every ad. The expanded ad also has the ability to:

• Allow the user to submit a form (register for a giveaway / sign up to a newsletter)
• Download or purchase something from the App Store (purchase the full product / download a companion app)
• Save media to the device (wallpapers / videos)
• Access the camera (scan a barcode in a store / take a picture of yourself using the product)
• Integrate into other web services (social media / the product’s website)
• and more…

There’s the potential for a malicious advertiser to exploit some of these features or be a security risk but Apple is requiring each ad to be inspected and approved before being displayed. When iAd was announced, Apple brought up that finding a way to keep the advertising interactive while maintaining an emotional tone was very important to making this form of advertising engaging and effective. This is just another option that’s available to advertisers and developers alike and seems like a promising idea if used properly.

The timeline above shows milestones in the mobile market and it’s clear this industry has come a long way since 1946. If the common trend in devices continues, the next mobile phone will be smaller, faster, more durable and more aesthetically appealing. It will also be more affordable and have a longer battery life. Advancements like these are predictable and don’t really add anything new to the average mobile phone’s repertoire, but they do make for a device that is more universally appealing to consumers.

Researchers have been trying things that might seem ridiculous at first. For example, there are prototype phones being developed that feature an embedded video projector. This would be valuable for businesses or general users who want to share presentations, photos and videos without having to huddle around a small screen. Another approach is to create a mobile device that can “push” content to any TV with this functionality (such as Google TV).

Still other researchers have been exploring augmented reality:

Click here to view the embedded video.

Services like these provide location-aware information such as points of interest (ie. restaurants) and social interactions (ie. Tweets & status updates). This video doesn’t really show that the augmented reality concept has branched off into other areas including photo sharing, games, and more. The only thing that the user needs to do is point their camera at what they’re interested in to see the information. Consider that the alternative is going to Google and getting results that may or may not be what you’re looking for. Augmented reality isn’t a new idea, but it has become much more feasible with devices that now have high quality cameras, fast processors, compasses, gyroscopes and highly-accurate GPS.

New ways of accessing/sharing entertainment & information will continue to be developed so that people will always be able to choose the method that they prefer the most. Documents were first written on stone until paper was invented, and now technology has made it so that our ideas can be accessed, shared, and collaborated on with anyone, anywhere, and at any time. The concept of storing & distributing information remains the same but the possibilities have been extrapolated so consumers are no longer restrained by arbitrary limitations.

At one point, the most common way of getting information about someone involved looking them up in a phone book. Now you can find information in half that time by using Google search and find out more about them via a social media marketing site like Facebook. Both website designers and hardware/software developers have been busy making sure that what they make works harder, faster, smarter and easier for the user so that they have the best experience possible.

Who knows? At today’s rate of innovation, something like this will probably be coming to your household sooner than you might think!

The world's first commercially available mobile phone. The Motorola DynaTAC 8000X cost $3,995 when it was released in 1983.

Mobile devices have been around for quite awhile now, but they’ve become incrementally more advanced and affordable since they were first introduced in 1983. From heavy Motorola models to today’s lightweight smart phones, how has the customer base changed over the years and what are their expectations for future mobile devices?

Innovators were willing to pay the expensive price for the service in big cities so that they could be reached at all times. Everyone wanted these devices to be more portable in addition to being affordable and have reception anywhere they may be. So the next decade was spent addressing those primary areas. Being able to contact someone anywhere at anytime was such a powerful idea that today we still see phones being sold where the features include nothing more than being able to call and/or text someone.

IBM brought us the first commercially available “smart phone” in 1994 called the “Simon,” which cost $899. This device paired the traditional cellphone with applications so that people would also have their calendar, address book, world clock, calculator, notes, email and a few games accessible anywhere at anytime. The Simon had a limited feature set, was slow and wasn’t easy or quick to use, so people knew that this was only the jumping-off point for things to come.

Look at the list of applications available for the Simon, and think of any additional capabilities you’d want a phone to have (other than make you a sandwich…that falls under robotics). Now, consider that the modern smart phone has had sixteen years of development time since the Simon. Many people don’t see the modern smart phone being any more capable than the IBM Simon, or at least they might not utilize it to it’s full potential.

Before the release of Motorola’s Blackberry brand, the hype over most technology advancements mattered only to businessmen and technology enthusiasts. The term “smart phone” became synonymous with BlackBerry, even though the only added benefit of this model was the Wi-fi email access at all times. Then Apple released the iPhone.

Recently a group of students were asked, “How many of your parents use a smart phone?” Nobody raised their hand. Then they were asked, “How many of your parents have an iPhone?” and two-thirds of the students raise their hands. The iPhone broke out of the the limited feature set/target audience that people have come to know “smart phones” by.

The iPhone was on to something. They combined the smart phone with the iPod, and the popularity of the iPod at the time brought over it’s userbase by the thousands. What differentiated the iPhone was that it did nearly everything that the BlackBerry could do but in a way that was quicker, easier to use and more aesthetically-pleasing.

The design might resemble the monolith in 2001: A Space Odyssey, but we're the ones filling it with information.

This wasn’t enough, though, because the first iPhone was initially limited to the applications that came with it. Apple launched the App Store two years ago and since that time it has served up over 3 billion downloads. The capability of the smart phone then became matter of the developer’s imagination. The iPhone 4 now includes a gyroscope that none of Apple’s apps actually take advantage of, and was added purely to provide more capabilities to app developers. This booming active user base and strong manufacturer support means that if users want it, Web developers will make and monetize it. It’s great to see that this isn’t a one-horse race either, because Android-based phone sales have been quite lucrative and also have an active app store.

Over the span of 27 years, we have seen mobile phones become more affordable, more reliable and more enjoyable to use. Most people, myself included, now find themselves with all their notes, email, contacts, voicemail, unread/saved news articles, etc. available from a phone, computer and any Web browser that then pushes any change made on one device out to everything else. The smart phone went from being able to contact someone anywhere at anytime with a cell phone to being able to do anything anywhere at anytime with any device. It has created an always-connected world for those with these devices.

There’s also WebGL support included in the beta, but it isn’t enabled by default due to the fact that it’s still the development stage. WebGL provides Web designers access to utilize users’ graphics cards, which show an advanced graphic presentation (3d, intricate animations, displaying and managing a large number of images at once, etc). It is also a sister-project to OpenGL, one of the most widely used technologies for game graphics.

What’s more, a group of people at Google came together and actually ported Quake 2 to WebGL so that it can be run within your Web browser. This is a nice touch, considering the multi-player focus of the game. Users can now go to a Website (even if it’s their first time there), click play and start competing with other players over the Internet.

Connect with HRB:

Mozilla’s biggest concern is whether the public will appreciate its new user interface, which is comparable to the current interface of its competitor, Google Chrome. Realizing that some users may favor Firefox’s traditional interface, they’ve included preferences that allow people to change the layout back to the way it was before the update. This is a smart decision because it shows they’ve done their research ahead of time and value the needs of both their present and future users.

Mock-ups for the new user interface were shown back in September of last year. So how could something that seems so simple take over half a year to tweak? They’ve spent some serious time preparing answers to such questions, as the following video will show:

Click here to view the embedded video.

The Firefox 4 beta is publicly available for download at their Website. Remember that it’s a beta version when you try it out, because the new user interface is the most fully-realized for Windows users. For all you Mac and Linux users, you’ll have to wait a little longer until the team gets feedback from the Windows beta testers.

Google Voice is a free phone service with the exception of international calls. It allows customers to register one number to ring them anywhere and get transcribed messages to their email inbox. Plus, the sign-up process is surprisingly simple considering the complexity of what’s going on behind the scenes.

Based on my own experience, I’ve outlined a  simple 5-step guide to follow for account setup:

1) Visit google.com/voice

2) Sign in with your Google account log-in and password

3) Choose a single phone number to have your calls forwarded to (you can use your existing phone number if you prefer)

4) Enter your current phone number so Google can call that phone and send you a 2-digit verification code

5) Enter the 2-digit verification code you receive to verify it’s the correct number

This might seem like a lot of steps to take but it took me less than ten minutes to set up my Google Voice account for my home and mobile phone numbers. Google guides you through the process so you understand why they’re having you do any particular step. I spent an additional half hour or so going through the various features and settings and getting things working to my specifications.

What benefits does Google Voice actually offer?

Check out their answers  in the brief video below. If you’re still curious, you can also view individual videos for the most popular Google Voice Features.

Click here to view the embedded video.

Google Voice can help someone that works directly with clients by giving out one phone number and assign various contacts to different groups. For example, you might have a group of contacts for your co-workers, clients, friends and/or family. Each group would be able to have a different set of phones to ring at various times, a different voicemail message and the option for a call to go directly to voicemail (which is a nice feature to have for a “blacklist” group).

Connect with HRB:

There was a moment of controversy when Google tried to submit their Google Voice app to Apple so that iPhone users could use the service. Apple ended up rejecting the application’s submission to its App Store. This led people to believe that AT&T had some part in making that decision, while others claimed that Apple was trying to impede on Google’s growing user base. Nobody is certain as to who made the final decision to approve the application or not, but Google knew that they needed to make this service available to iPhone users.

Google ended up writing the phone application so it could be accessed through a Web browser. iPhone users can now access their web service by going to google.com/voice and they are given access to all of the features that they’d expect from the native application that Apple rejected. There’s no way to block access to this due to the fact that it’s just a website and Apple can’t block Internet content under their existing terms of service (there would be an absolutely massive opposition if they were to start filtering users’ Internet access). What makes this so great is that Google programmed their Website design to make it look and act like a native iPhone application would.

My suggestion? Check this out. Even if you decide not to use this service, you’ll be ahead of the trend.

The “retina display” on the new iPhone, for example, supposedly has a pixel density that rivals some laser jet printers, and this improvement makes the individual pixels practically impossible to distinguish at a certain distance with the naked eye. While no device can truly be ‘perfect’, other devices will follow this example as the new iPhone’s retina display is receiving high praises by those that have already seen them in person.

The problem with this is that the majority of the graphics being shown on these devices were built using pixels rather than vectors, and this causes the graphics be be 1/2 their original size due to the fact that the pixels are 2x smaller. There are a few ways around this issue.

• Show the original graphics at their intended dimensions (this enlarges the pixels so that there’s a decrease in fidelity)
• Create higher-resolution graphics (this has a higher quality image, but results in larger file-sizes)
• Use vector graphics (this has the smallest file-size, and doesn’t loose any definition when being enlarged)

Connect with HRB:

Vector-based graphics definitely isn’t a new idea, but their native implementation on the web has yet to be widely utilized. SVG is a format that a vector graphic can be saved as and it’s one method that modern Web browsers support. Raphaël is one of the most popular JavaScript libraries that is trying to aid the adoption of SVG in Website design. I suggest checking out some of the demos & free icons on their Website if you’re interested in seeing what vector graphics are capable of on the Web. The company behind Raphaël, Sencha, has a lot of interesting projects that I look forward to covering in future posts.

When the Russians went into space, they also took highly effective extraterrestrial writing instruments. Pencils.

That little historical account is a reminder that the answers to questions and problems we face are often right under our nose. Things that we’ve overlooked in search of the “latest and greatest.”

Recently I became reacquainted with some old friends … pencil and paper. We used to hang out a lot but haven’t spent much time together in the past few years. With all the new high-tech tools, they just didn’t seem as interesting or as useful as they used to be. Or maybe, just not as cool. But for several reasons, namely an expensive swan dive of my iPhone on to a cement floor, I’ve decided to keep a pencil and notepad close at hand on a more regular basis. It’s been very enlightening.

Connect with HRB:

I’ve found that the flow of ideas from my hard drive (a.k.a., my brain) to my desktop (a sheet of paper) has significantly improved. The simplicity and ease of use is mind-boggling. Plus, when I need more storage space, I just turn the page. Pretty sweet, huh?

The “search” feature has been great also. Flipping back through the pages I can quickly see my notes, list of things to do and all the small drawings I’ve done to occupy my mind during boring meetings. Of course, if anyone out there sincerely believes I’m totally missing out by not having a 3G iPad with Wi-Fi and a 64GB flash drive, please feel free to send me one. I’ll be happy to try it out for a month or two. Or more.

In the meantime, I’m keeping my notepad handy and pencil sharp!

The limited browser compatibility is due to the fact that they programmed the demos to be run only in WebKit-powered Web browsers, and they programmed a pop-up to invite users to download Safari and view the demos using Internet Explorer, Firefox, etc. There are other methods for checking compatibility that would allow any browser that’s capable rather than the old method of simply choosing what browsers are let in.

The snafu concerning the “Safari-only” pop-up aside, the demos that they have on display are showing off some great implementations of what’s possible using HTML5, CSS3 and JavaScript in combination. They are displaying the use of video with custom controls (fast forward & rewind included) in addition to various real-time effects such as live resizing, image masking and 3D perspective. There’s also a nice demo for Web typography that shows off what’s capable now that websites can include custom fonts so that any text on a page looks & acts like a user would expect. There’s an assortment of photo demos that range from interactive panoramas, galleries, slideshow transitions, layering using dynamic content and post-processing effects with the ability to save the resulting image to your computer. Interactivity is being showcased by their checkers demo that includes the AI that’s required for the computer player, offline-accessible sticky notes and an offline-accessible calendar akin to a simplified iCal (Apple’s calendar application).

Connect with HRB:

Before the iPhone 4 announcement at WWDC, this showcase had a prime spot on Apple’s homepage that linked to apple.com/html5. It replaced the “Thoughts on Flash” open letter from Apple’s CEO Steve Jobs. It wasn’t removed from the site and the open letter got bumped to the bottom of the HTML5 & Web standards page. But it’s nice to see Apple’s commitment to Web standards and that they will be fully supporting them in the future. It’s a little bit of a bummer to find out that the Website they made used arbitrary checks to determine if they should display a warning that offers a download for Safari, but the overall outcome of them working to improve the adoption of Web standards is much more important.

Click here to view the embedded video.

HTML5

HTML5 support has also been improved. Some of the features that it now supports include geolocation, offline storage, web sockets, and file drag-and-drop. Geolocation works pretty much like it sounds, and provides the capability of attaining the user’s current location if it’s available (via GPS, WiFi triangulation, ISP, etc). That can be a little scary, so I should mention that users will always be prompted the first time a website wants to get their current location so that this information is never available without asking permission. Offline storage simply allows websites to save some information that’s specific to the individual user onto their local computer. This provides the opportunity of improving website load times, making user registrations not as compulsory, and allowing the user to access the when they actually aren’t connected to the Internet. Web Sockets allows websites to talk to the server and vise-versa in near real-time. Someone has put together a video demonstration of how much this can speed things up when multiple users are collaborating/communicating at the same time. File drag-and-drop has already been added to Gmail so that a user can now drag a file from their computer and simply drop it onto the message that they’re composing to attach it. These are all excellent features for web designers to take advantage of so that users can have the best experience possible online.

Sync

Google also updated their cloud syncing feature so that it can now sync a user’s browser preferences & themes in addition to improving bookmark syncing. This allows someone to have their web browser tied to a Google account, and any other computer with Chrome setup to use that Google account will always be the same. For example, when a user adds a bookmark to their home computer it will be pushed out to their laptop, work computer, and/or android phone without requiring them to do anything. Adding preferences & theme syncing is pretty minor overall, but it really rounds off their syncing service so that it includes nearly everything that someone might want (extensions aren’t supported yet).

Extension support was added to Chrome in January of this year, and the library of extensions has filled out pretty nicely as many of the top extensions for Firefox have been recreated for Chrome. Now that it’s no longer in “beta” means that there’s a fully “stable” release available for Windows, Macs, and Linux. If you’re still using Internet Explorer or have settled on using Firefox/Safari/Opera/etc. give Chrome a try. You might find yourself liking it quite a bit. It’s available for download at google.com/chrome.

*Update* Apple has just released a new version of their web browser, Safari. It now supports extensions, additional HTML5 capabilities, hardware acceleration on Windows, and various other user-interface enhancements. They are also claiming it is comparable to, if not faster than, the speed of Chrome. They also introduced a new feature for web browsers that they’re calling “Reader” where a user can isolate just the content they care about on a page so that they can read articles online without distractions (I highly-recommend trying it out, because Apple really knows how to make a rich user-experience). There’s other great improvements, but I’ll give you a link to download it and try it out rather than simply posting a list of the features. It’s available for download at apple.com/safari.

Google TV

Click here to view the embedded video.

The main concept that Google was stressing was that they are now available on desktop computers and portable devices while the one screen that almost everyone has been completely left out of the mix. They noticed that there’s numerous occasions where people share videos and other things on the Internet with others, and they wondered how great it would be if the content that’s being shared was readily available on your TV.

Simply put, Google TV is a platform for bringing the Internet to your TV. This idea isn’t new, but Google is looking at products that attempted this in the past so that they can learn from their mistakes while providing something new. It also helps that TVs have been greatly improved in terms of size, resolution, and overall quality. Developers will be able to build different plugins & applications for it, and this means that it can be greatly improved and expanded over time. Hardware manufacturers will be able to provide consumers a choice on how they want it integrated into their new or existing setup. Logitech is working on a device that you plug into your TV where you can also plug your existing devices into that box so that you can control them via the Google TV enabled device. Sony is also working with Google TV, but they are building it right into their TVs with no external device required. The scheduled release date is set for sometime this fall.

Android

The keynote on day two was almost entirely dedicated to showing improvements made to Google’s Mobile Operating System, Android. It quickly became apparent that they are in a serious competition with Apple’s iPhone. What’s important is that the ideas they have for how the user interacts with the phone is different from Apple’s view, and they’re executing on them pretty well. For example, their multi-tasking feature allows the full program to simply run in the background while you’re free to do something else, but the iPhone’s multi-tasking will give the developer a few options of which kind of multi-tasking they want to offer so that they only run those specific tasks in the background rather than the full application (there’s pros and cons for both of these methods). You might see that Android is version 2.2 and the iPhone is version 4, but don’t let that fool you. The features that were added when updating from 2.1 to 2.2 can be pretty substantial for some people.

Here’s a few improvements in Android 2.2:

• Up to 4.5x faster than 2.1 (without needing to buy a new device)
• Automatic application updating
• Flash-enabled web browser (something that’s doubtful to ever come to the iPhone)
• Tethering / WiFi-hotspot (so your computer and other devices can use the Internet connection that the phone has by connecting to it wirelessly)

They’re also making good use of the Internet connectivity. The phone/android device is tied to your Google account (much like how an iPhone & iPad needs to be tied to an iTunes account), but what makes this different than simply allowing music & app purchases is that it allows for information to be pushed out to the devices using that account. The example they gave was that you could be viewing the app marketplace from any web browser while logged into your account, and you could purchase/get an app from the website. The iTunes model would download it to that computer (if it’s one of the 5 activated computers that you’re allowed to setup) and you would then have to plug the iPhone in and sync the whole thing. Android devices are different in that you would be able to “push” that application out to any device you choose so it starts downloading onto the phone in a matter of seconds (no plugging in and no syncing required). This is just one example of their cloud integration, and they did show a few other really clever uses for that feature. Android is maturing into a full-blown iPhone competitor rather quickly, and they’re differentiating it in various ways so that they’re not simply trying to imitate/copy Apple so that it the choice comes down to what you will use it for and how you want to use it.

Connect with HRB:

WebM (Open Web Media Project)

Streaming media sites have become a primary destination for people online over the last few years. As the owner of YouTube, Google can’t help but take notice of this. They also aren’t satisfied with the quality of the experience you currently get while viewing videos or listening to audio over the Internet. Google acquired a video compression technology company, On2, for $106 million in August of last year. The WebM project is the first result we’ve seen of that acquisition as the primary product that On2 made is now open source for everyone to use and help improve. Web browsers are including native support for media playback so that it’s takes less time to start playing, plays smoothly, doesn’t excessively drain battery life, and more. Most video technologies are patent encumbered and that could really be a big problem later on if the patent-holders decide to charge royalties for each video that uses their compression technology. The WebM project will prevent anything like that from happening while providing a generally compromise-free option.

Mac users might have used an update framework named “Sparkle” that approaches this common nuisance in a way that alleviates most of these problems. It’s so unobtrusive that users don’t actually know what it’s called unless they actively look it up. Sparkle is available for developers to include in their applications for free so it’s widely used, and therefore a very familiar experience when updating any of the applications on your computer even though they might be made by different people. It offers the user the ability to set the frequency that it checks for updates, and when there’s an update it shows a very concise preview of what is going to change if you install the update. It makes it really clear as to why you might be interested in keeping it up to date at a glance. Once the update is downloaded, you’re able to choose when you want to relaunch the application (if it’s already open) to finish the update process so it doesn’t intrude on anything that you might be doing.

Web browsers have yet to unify the way that they’re updated, and this can really impact the way that websites are designed and created. Website design and programing is at the mercy of the least capable web browser that the users view the site in. This really hinders the capabilities that a website has at it’s disposal. Web technologies can only evolve as fast as the web browsers that access them. This can be really limiting if there’s a need to tailor to users that are running programs from 10 years ago, because at that point the website can only do what was possible 10 years ago.

Internet Explorer (IE) is set up so that the user needs to proactively go out and download the update for the new version. There’s some IE  users that simply don’t update it and don’t get the new version until they buy a new computer. They might jump from version 6 to 8 while getting that new computer, but that’s a time span of over 7 years between the release dates of those two versions (late 2001 – mid 2009). Safari uses Apple Software Update that prompts you when there’s a new version available, and only requires you to click once to start the update and once when it’s done. Meanwhile, Firefox and Chrome taken it a bit further and have started to make updating to the new version automatic. The user simply opens their web browser to find out that they have already updated, and are now using the most up-to-date version. It does ask if they want to update if there’s a substantial user interface change involved so that the user doesn’t open their web browser to find out that the new version looks completely unfamiliar to them. This process doesn’t require any effort or knowledge of computers on the user’s part and yet it gives them the best experience while accessing the Internet, and also allows designers and programers to make use of newer and better technologies that will only increase the enjoyment of the user.

Connect with HRB:

If you’re interested, this article was the reason that I wrote about this and has some interesting statistics on the updating habits of the users for each web browser.

Flash was created due to the user’s requests that the web should be able to do more than just serve up static images and text. This also needed to be provided in a way that didn’t result in a large file-size, because the majority of people online were still using slow dial-up Internet connections. These two things couldn’t be done with the capabilities that the web browsers provided on their own so Adobe decided to build the Flash platform that would be a plug-in for your web browser to extend it’s capabilities.

Over time, users came across different problems while using and developing for Flash. The issues that people experienced included crashing, inconsistent/confusing user interfaces, excessive computer resource usage (draining battery life), couldn’t be crawled by search engines, and others. This is fine as software gets better over time, but the problem that many people came back to is that Adobe has ownership over Flash, and they’re the ones that develop and make the improvements to it. Adobe listens to feedback from it’s users, but ultimately they would have the final say in what gets added & optimized in the next version.

Connect with HRB:

The open standard of HTML has a new version in the works that will include many capabilities that until now could only be done via Flash. HTML5 has a capability called Canvas that is what it sounds like. It’s an area of a website that can do pretty much anything the developer wants. There’s too many benefits to using this over Flash moving forward that I’ll have to make sure to cover them in a future article.

One move that Adobe made recently (that I couldn’t agree with more) added capabilities to the latest versions of their applications (Creative Suite 5) that utilize Canvas for displaying content on the web. This is something that until now would have been using Flash. They’ve demoed the ability of being able to export something made in Flash to Canvas, and sadly that doesn’t look like it’s going to make it to the shipping product yet.

Something that is going to be available as soon as Creative Suite 5 is released is the ability to take vector images created in Illustrator and simply paste them into a website. This means that you can zoom & resize the image, literally, as much as you want without any loss of quality/pixelation right on a website. They also are including a feature that allows you to tie data to the image. The example they gave was that they made a bar graph look exactly how they wanted it in Illustrator and simply tied a spreadsheet file to it. They then pasted it onto the website where they wanted it. If they needed to update the bar graph on the site, they would simply update the spreadsheet and the image would automatically update to match the spreadsheet. This is only a taste of what’s to come in terms of making things quicker and more manageable for those running websites, and a better experience to use for those viewing the site. Here’s a video of the demo they gave at a conference:

Click here to view the embedded video.

Preview of Instapaper on an iPad

As a preface, I recommend that you check out my previous post about RSS feeds so I can jump right into the questions that publishers have to ask before distributing an RSS feed. The first major concern is that an RSS feed takes away visitors from your actual site. This means that those people don’t see the offers and forms that are on your site, and not the RSS feed. Turns out that the subscribers are people that have been to the site often enough to know that they like the content and would like to stay up to date with the articles. That means that they have already been exposed to the offers you have made available and would have participated already if they were truly interested. If you have a new offer that the people viewing via RSS wouldn’t know about, I highly recommend that you make an article about it. The readers will accept/appreciate any article that brings their attention to changes made to the Web site. There’s also going to be a group of people that choose to get a large amount of their web content via RSS feeds. If your site doesn’t have an RSS feed, then you’re turning down that potential audience.

There are ways to draw the people using RSS feeds back to your Web site. One way is to build an active community where the user could potentially be interested in what other people have to say about a certain article. That’s one feature RSS feeds aren’t able to serve up so the user would have to go to the site. That’s just one example of something you could make sure that is only available to those that visit the actual site. Another way people have been trying to get people to visit their site is to make it so that the RSS feed is only a tease of the article and you have to go to the site to read it in it’s entirety. There’s a really great Daring Fireball article on this topic that I can only butcher if I were to summarize, but I’ll try for the heck of it. Publishers hope that truncating RSS feeds will drive people to go to their site and increase ad revenue. In practice there’s people that realize that the Internet is a large place and that they can get very comparable content in the fashion that they prefer at a different Web site. Publishers are trying to stick with the model that has been working, and aren’t sure of the right way to get this new model to work (we’ve all come across this before). The fact of the matter is that there’s a way to satisfy both, but it takes some thought so that it works for that specific site.

Connect with HRB:

So how do you provide an RSS feed, and know that that audience is almost never going to go to the site and click on an ad? There’s a few things to try, and these might not work for your specific case. You can always embed ads into each RSS feed article as you would on a Web site. This usually isn’t the most effective method as the ads are traditionally very distinguishable from the actual article. One other way is to have an article that is a promotion for one of your advertisers. That way it shows up like any other article in the RSS reader. The user knows it will be quick to skim the article over. The traditional method here is to mention somewhere in the article that it is an ad as to not mislead the user. At the very least the ad has captured the user’s attention and they will pursue it further if it interests them. There’s still more ways to give the audience what they came to your site for and make sure you benefit for your work, but you will have to consider your specific website design / audience to be able to determine what will be best.

"Times" is an RSS reader for Mac by Acrylic Software

RSS feeds haven’t actively gained mainstream adoption, but have provided a great service to the people that don’t want to have the potential of missing something that they wanted to see. Essentially, an RSS (Really Simple Syndication) feed is a file on a Web site that only contains the content, and separates each update into an individual post with a timestamp of when the update was made. The website design completely removed from the content if the user is really only interested in the content. People can then subscribe to that one URL using an RSS reader (I will go into more detail about this below) and they will be notified when there’s been an update made to your site and how many updates that have yet to read.

If a user stumbles across an RSS feed, it might be something that they haven’t used before and don’t really understand the benefits of subscribing to it. There’s a few things that are making this adoption process easier for the user. Most modern web browsers are including RSS readers so that the content is displayed the way a user can understand when you visit an RSS feed. For the publishers out there, you might look into using a service like Feedburner to enhance your feed. The services that Feedburner include a user-friendly interface, analytics, sharing functionality, promoting your feed to news hubs, email subscriptions, and more. You can visit our feed that’s been sent through feedburner at http://feeds.feedburner.com/HRB and check out what would show up without feedburner here. The next post I’ll write will address the concerns you may have of possible lost traffic to your website resulting in lower ad revenue or leads, because people are using RSS feeds to bypass directly visiting your site.

The beauty of the RSS feed isn’t the fact that it’s once place to go for all of your content, but rather the nearly endless options of how you want to go about reading it. The RSS readers out there allow you to put all of your RSS feeds in one place. At that point you can choose how you want to be notified when there’s a new post on any of the feeds you’re subscribed to so you never need to visit a website just to find out that they haven’t updated anything on it. The range of RSS readers offer a variety of ways to interact with your feeds. Google Reader is a powerful feed reader that is simple to use, has unique community features with other people who use it, and keeps track of your reading patterns to show you the stuff you’re more interested first based on your past behaviors. There’s also applications for both Mac and Windows that you might choose to use also. There’s one that caught my eye, called Times (Mac only), that styled your feeds as if you were reading a newspaper, and when you click on the headline it shows the full article either as a new page in the “newspaper” or as the actual site where the article is located. This might be an interesting way to go if people start using tablet computers (such as the iPad) where this is provides a newspaper-like experience that shows you what you want to read and nothing that you don’t while also including high-resolution photos and videos.

Connect with HRB:

RSS is a very basic and universal capability that sites can take advantage of. In fact, podcasts became popular once people started utilizing RSS feeds to take care of distributing the new episodes to the subscribers as soon as it’s available. If you’ve never tried using RSS feeds to go about reading the blogs or news sites that you frequent, I recommend that you first find an RSS reader that appeals to you (considering that’s what you’re going to be using to read everything), add the feeds of a few websites, and give it a try for a short while. You might find it’s not for you, but you might also find it a great time-saver or a nicer way to go about staying up-to-date with the sites you frequent.

If you look at the design of the iPhone (and many devices since it’s release), it really focuses on taking your attention away from the actual device in an effort to draw your attention to what’s actually happening on the screen. There are so many choices when purchasing a device that there’s no way to really go wrong in terms of the hardware’s capabilities. The number one aspect that really makes a device great is the software that’s available, and how you actually use it. The iTunes App Store really locks people into purchasing the new iPhone when buying a new phone, because you can’t use any of the apps you’ve purchased through the App Store on any other phone. If they choose to buy a new phone, then they’re forced to re-purchase similar apps to ones they already had.

AT&T just announced that they have a new phone that’s using Android (Google’s Phone OS) that will have a locked down App Store that they have full control over. Mobile devices are currently dividing and controlling users’ software experiences. Meanwhile, personal computers have 3 choices for software compatibility (Windows, Mac, and Linux), and those are becoming more cross-compatible every day. There’s software that you can run that simply takes an application written for one of the other operating systems and makes it so that it runs on your computer as if it were made to do that from the start. There’s this trend in the emerging technology where the manufacturers and carriers are trying to make as much money as possible as people jump into a category of technology they haven’t dealt with before so they’re not sure what to expect in terms of pricing and experience. Once people realize that this simply isn’t what they want, the market will have to change to a new model, and that might be the personal computer’s model of a few major competitors with separate purposes, the unified standard of Web site technologies, or something we have yet to see.

Connect with HRB:

The one choice that I currently see being the best option is to use web standards. The Internet isn’t new so why haven’t we seen any of the cool stuff I’ve talked about yet? One of the primary issues with web development in the past is that the Web sites out there have had to build sites for web browsers that just don’t have the same capabilities as the browsers today so it’s limited by the least capable, but most common, browsers being used. Hardware manufacturers are constantly making and improving upon these really great devices, and the software needs to be able to adapt and make the best use of the new devices. Modern web browsers have also changed the way that they update themselves so that making sure users have the latest version will be more obvious if not automatic. This is good news.

arrow

Click Here for Simple Demo

Ta da!

At the heart of the new development process while working on websites is the emphasis on improving how we interact with the websites we visit, and making them more intuitive to use for those that haven’t learned how to use a computer yet. Ideally, the websites will be intuitive enough that people will no longer need to use trial and error or follow tutorials before they understand how to use the site. A key element to that is providing real-time feedback without the need to take the user to a new page or make them refresh.

Now that the more basic elements of website design are well established, people are free to focus on making sure that the site is user-friendly and a joy to use. One way to accomplish this is to make the site more lively with subtle animations that give the user hints that they can interact with it. Users can hopefully appreciate the time that is saved whenever an action is made or feedback is given without the need to take them to another page. Instead, JavaScript is used to make the update right on the page they’re already on. It can show it instantly if it’s a small amount of information, but if that’s too jarring the developer might add in a little animation.

JavaScript has influenced a large part of the development of HTML5, and is also available to a larger percentage of the users on the internet than years prior. That in consideration, interactions in the way that provides real-time, easy to understand, and a level of consistency will most likely use your web browser’s built-in JavaScript capabilities rather than using an external plugin.

Connect with HRB:

In my last post about animation, I mentioned how Flash still has it’s place in web design but simple interactions are the first thing to be changed from being programed in Flash to JavaScript. This really furthers the point.

Click here to view the embedded video.

For years now, there has been only one way to make things animated on the web. Flash quickly became the dominant technology for animation due to the complete lack of competition. It also provided a great vector graphics platform that’s capable of providing graphics with a very small file-size. There is another technology for animation, but it isn’t a fully-capable Flash replacement. JavaScript provides support for very simple positioning, resizing, and color animations, but doesn’t have the ability to do anything more advanced than that. Considering that JavaScript wasn’t built with the intent of using it for animation, things as simple as rotating an object simply aren’t possible so it isn’t a viable solution for most applications. What it manages to do is provide a nice middle ground between a static page and exporting and embedding a flash animation.

The latest development is an iteration of an existing website design technology called CSS (Cascading Style Sheets). CSS has been used for years as the primary technology for styling websites. When you view sites without CSS enabled they all look the same; white background, blue links, the same serif fonts, nothing positioned in the correct place, etc. Essentially, CSS keeps most websites from looking like they could have been made in Microsoft Word. This latest version of CSS (using HTML 5) is drawing the attention of web developers because it will provide full support for advanced animation.

Not only will CSS provide support for the basic animations that were availble through JavaScript, but it will also provide the capabilities of rotation, skewing, 3D, and more. There will also be a performance boost compared to other animation technologies, because CSS has been fully optimized for the single purpose of rendering graphics on a website. It will also be able to utilize the powerful graphics cards that computers ship with today, and that’s something that has yet to be taken advantage of on the websites that most of us visit.

Connect with HRB:

It is important to compare Flash and CSS because it’s worth understanding the advantages and disadvantages of choosing one over the other. There’s no denying that Flash has a well-established install base and provides vecor graphics capabilities that are still some of the best out there, but for the most part CSS is giving Flash a run for it’s money in terms of animation. I’m not proclaiming Flash to be dead, but I definitely hope that this level of competition will push Adobe towards more innovative thinking than they’ve had in the last few years.

The iPhone has seen a surge of apps that allow you to “check-in” at any particular location. You can then decide to send out a message to your friends so they can come join you. The apps also keep track of each time you check into a location so they can integrate a game component into their service. They award “badges” to users that complete a certain objective such as, “Gym Rat” where you visit the gym over 10 times in 30 days. They also provide ranks for the top visitors of a certain location, and the highest attending visitor is commonly known as the “Mayor” of that location. These new services are a great idea considering they encourage meeting with friends, going out more frequently, and help promote / advertise your favorite businesses. The most popular services out there are Foursquare, Yelp, and Gowalla. Check them out, because they might provide an app for your phone even if it’s not an iPhone. Yelp is the latest to provide check-ins so it’s a little limited at the moment, but also provides the user-reviews that made the site so popular. These services are still very early on, and they’re providing a good amount of competition for each other.

Connect with HRB:

Website designers are now able to integrate geolocation into websites as soon as the HTML5 standard gains a larger install base. This seems to be yet another feature that gained popularity through the iPhone’s App Store and is now being included as a capability of the new web. Developers will rejoice as they won’t have to make and maintain a separate app for every device out there, and instead built it into a website that every device can use.

To help speed up the adoption of this technology is the increase of Internet enabled portable devices and computers being used along with the increase of websites that provide software as a web service. Software as a service is where a more traditional program that you download to your computer has been converted into a Web site. It still offers the same capabilities in addition to being able to access the same information from anywhere that has internet connectivity.

Connect with HRB:

Offline access is new and isn’t yet supported by the majority of Web browsers that people use. So there’s something that’s lost in the process of turning a program into an online application at the moment, and that’s the ability to access the information without internet connectivity. Once the offline access capability is more ubiquitous, you will be able to see this feature being offered by more and more Web sites. It bridges the gap between the benefits of a program that you download and an online application. Google has been using a similar technology for their services called “Google Gears” that they created themselves, but they have stated that they will be moving over to this new standard introduced in HTML5. There’s already iPhone specific Web applications that are using offline storage, so there’s no need to wait for it to re-download over the cellphone’s Internet access to use it. This is one small part of HTML5 that will be a key component to opening up what’s possible on the web.

In any technology industry, the drive to improve the accepted standard is unavoidable. Flash is far from perfect. People encounter crashing and performance hogging websites due to their use of Flash. Another issue that’s come into play is that Flash is solely owned and developed by Adobe, and people can’t help but feel like they don’t want a single company to determine what the future of online media will be. For example, Microsoft Internet Explorer is one piece of software where one company single-handedly slowed the development of Internet technologies from making years of progress. There are various enhancements that Adobe has been capable of adding over the years, but has chosen to only include them now such as search engine optimization, graphics acceleration, and more. Apple has added another reason to prefer open-standards over Flash by not supporting Flash on their devices. They claim it’s due to battery usage and poor stability, but others say it’s due to Apple wanting to force people to use their App Store to provide services that were once available via Flash. Either way you look at it, the solution needs to be something that is faster, more reliable, and isn’t owned by a single company. Now there’s a new video distribution method that aims to fix everything that Flash video has gotten wrong, and it’s HTML 5 video.

Connect with HRB:

Both YouTube & Vimeo have recently launched their web players that are 100% HTML 5 and don’t use any Flash. Not many web browsers are capable of HTML 5 video at the moment as it is still a developing Internet standard. It’s a good sign to get two big name video sites showing their support early on. Once the standard is finalized, the available web browsers will be capable of supporting it. There are even ways to enable HTML 5 in older versions of Internet Explorer for those that prefer to use IE. HTML 5 video will be able to provide all of the custom designs and functionality of modern Flash players, but will be fully optimized for speed and reliability in addition to promoting the use of the latest version of web browsers (while not forcing you to use any one in particular). This is the first article in a series covering the new website design and development technologies.