If technology and website design are not your cup of tea, you might want to skip this one. On the other hand, if you're a business owner who wants to understand the future of how to make your mobile customers happy, and want to learn some advanced concepts that will help with the future of customer detection and personalization, read on.
Mobile Personalization
There are a lot of mobile devices out there. The data I analyzed while writing my latest popular search engine report, showed that there are 44 popular mobile device companies with thousands of different web browser and device combinations. Some of these devices support HTML5 video, while others don't. Some devices support newer image types like SCG, while others don't. In order for you to provide the best possible mobile user experience, you either have to set up your website for the lowest common denominator of technology, or figure out how to personalize your website based on the device.
Assuming you can correctly detect the device someone is using (more on that later), you will need to build the content of your website to handle all the devices. This is a big task, but not that big if you create groups of devices with known lowest common denominators.
There are new and faster web technologies available with every generation of smartphones, but those of us programming websites must always accommodate the majority of users visiting the sites we work on. Embedding video is a common technology hurdle. While HTML5 video might be great to embed in a website, some people are using older smartphones that are limited to the embedded video techniques provided by YouTube. It will take another generation or two before smartphones catch up, but that translates into 4 or 5 more years of waiting for people to fully upgrade their phones.
In the mean time, is it right that programmers have to wait that long to create the rich websites that we know we could create today if we were unleashed? No, it's not right, but what can we do about it if we're limited to serving the majority? There's an entire class of people out there who are willing to upgrade their phones as soon as they are available, you know, like those people who line up outside an Apple store the morning a new phone is released.
Obviously, mobile personalization is the answer to my rhetorical questions.
Achieving Mobile Personalization
Every time I attend a technical conference, read a web design trade magazine, or come across a technical article online about mobile website I become infuriated. Over and over again, everyone is talking about responsive website design and how you can easily let a web browser window determine how to lay out the content for a page.
In simplistic terms, you program a website with a set of blocks that can move themselves around within a window to make sure they all fit nicely now matter the size of the window. I could also say it's a fluid construction, but it's honestly more like having 100 water balloons that can change their shape to fit in a trash can, tub, or a fish tank. Somehow they change their shape to fit. That's how responsive website design works. It's the same water balloons with the same weight and color fitting into different size containers.
The reason I am infuriated by this idea is because it's the lazy way to approach website design. There's a better way that everyone claims is too difficult to deal with. This so called difficult method is the only way to achieve mobile personalization.
It's a bit technical to explain this, so take a deep breath... Every web browser has a finger print. Programmers will know it as a "user-agent." Every browser type has a different agent code, every operating system has an agent code, and every computer and mobile device also has an agent code. The hardware/browser/OS codes are sent together to a web server and become the user-agent string. The concept of mobile personalization says that you need to decipher the user-agent string and serve the right mobile experience back. That's a daunting task since, as of this writing, there are 84729 different user-agents reported by UA Tracker.
It seems like everyone analyzing these user-agents is tracking the browser type and the operating system while ignoring the hardware information. It's a simple matter to sniff the hardware manufacturer from a user-agent and figure out if the person is using a smartphone, desktop, or even a tablet. Every website I program already has the appropriate if/then statement to detect the hardware. It doesn't matter how often a hardware vendor upgrades their operating system or comes out with a new model because the hardware strings stay the same.
The only reason the majority of the web programming industry says that it's difficult to personalize for mobile devices is because someone said it was hard, and the majority of the sheep out there just followed along. With the collective intelligence of all those smart programmers, I can't believe more haven't woken up.
The company Netbiscuits does have a way of detecting mobile devices and helping you program your website to respond accordingly, but they charge $99 for their smallest plan, not to mention you have to also pay your programmer to integrate their device detection into your website. Perhaps I should charge $99 to show everyone how to write the correct if/then statement? That if/then statement is one of my little programming cantrips that puts me ahead of my competitors.
It's time for all programmers to hear the alarm clock and wake up from their responsive website design nightmare. Consumers want a more personalized experience, which won't happen until everyone wakes up and starts delivering responsive content.
Responsive Content
Instead of having water balloons moving fluidly around, responsive content will sniff out the device used and send the appropriate resized content to the user. The most basic way of setting this up is by having two different sets of content saved in your CMS. The desktop version and the mobile version of the content with the mobile version limited to the lowest common denominator of content that can be used on all smartphones. That fancy if/then statement I mentioned above is what allows my own company to provide specific mobile websites instead of using responsive design. It controls what content is delivered.
This method is not hard, it's just a programming hurdle that needs to be overcome once, which my team and I had to do back when the iPad first came out. We were tasked with creating a way to manage a wish list through the iPad so attendees at a ladies night event could add items without needing paper. It was very easy to detect the iPad hardware, and then the same code was improved upon to detect smartphone hardware. That was 2010, and that's when my company started programming mobile websites for retail jewelers using the responsive content method. Incidentally, it was 2009 when the concept of responsive website design started to take shape and it wasn't until 2011 that it was gaining traction. It wasn't until January 2014 when I first wrote about responsive content publically in this Nugget.
From what I can tell, the first public mentions of responsive content came from Luke Wroblewski's discussion of RESS methodology in September 2011, and Stephan Fowler jQuery code specifically for responsive content in October 2012. Since then, there's a Joomla theme for responsive content and a few articles explaining why content issues are not fixed by responsive design, like this one by Karen McGrane.
Back in November 2014 I reported on the SMX conference I attended in NYC where Google revealed their study about mobile consumer behavior. They announced that consumers preferred mobile websites that were specifically designed for mobile devices, rather than responsive websites. Large companies, like Amazon and eBay, have specific mobile websites that are easy to use with a single finger. When visiting Amazon and eBay on your smartphone, you are automatically redirected to the mobile versions of those sites. In other words, they are detecting the user devices and serving the mobile or desktop versions of the website. This is the first step in personalization, and Amazon has been trailblazing the path of personalization for years.
RESS
Since the popularity of responsive content isn't all that widespread, there's no telling if the phrase "responsive content" will become the defacto terminology or if "RESS" will. Luke Wroblewski is a well respected author, blogger, entrepreneur, and currently works at Google. His article on RESS has gained traction, so I want to go over his nomenclature here.
RESS is the acronym for Responsive Design + Server Side Components. Just the name alone sounds more complicated than calling it responsive content, but it's the same principle. In his post, he explains that the web server needs a way to detect the mobile device. His company dabbled with device detection, but it's unclear if he was using user-agent detection even though he alludes to it in his post.
I'll now explain more of the technical details of how server side detection and content manipulation works. A typical CMS uses a set of code templates to build every page of the site. The CMS I use builds every page from the initial framework outlined by these 3 files:
template-header.html
template-body.html
template-footer.html
The URL of every page on the site is translated through the database and the content is surfaced and arranged by these three files. The resulting HTML code is sent back to the user. Every CMS I know has this type of setup. For the device detection to work, we need to add an additional template level, that higher level will detect the device type and then choose a path between desktop, mobile, and even tablet layouts. The CMS I use works like this...
The main template file is called:
template.html
The if/then statement I mentioned earlier exists within the first few lines of code of template.html. When a mobile device is not detected, the database processes the 3 template files you see above. When a mobile device is detected the database processes these 3 templates instead:
template-mobi-header.html
template-mobi-body.html
template-mobi-footer.html
The mobile template files know how to surface the mobile version of the content for the page. This is where you can also set up content based on different mobile devices and create mobile personalization based on hardware vendor. However, most of the time it's the same written information, but this is also where we set up lower resolution images (because it saves their bandwidth) and give the user the ability to tap to see the highest resolution.
The desktop templates are laid out to handle different types of desktop screen sizes. There are aspects of responsive design resizing built into them. Similarly, the mobile templates know how to resize based on different mobile resolutions, but more attention is given to designing so everything will function with a single finger touch.
There are several other considerations to take into account before you can implement your own responsive content. First of all, other than the CMS I'm using I have yet to hear about other systems with content control like this. Let me know of another when you come across it. I did mention the Joomla responsive content theme above, but I don't know how they are storing their content.
My Soapbox
Internet technology allows us to do some amazing things. Every one of us wants our information when we want it, where we want it, and how we want it. You, as a business owner, can't sit back and watch the big players like Amazon, eBay, Google, and Apple be the only companies using personalization. This technology is achievable by all businesses as of today.
My own company was able to set up the responsive content with relative ease, and every other company should be able to do it too. For us it was a onetime development expense of no more than 40 hours.
Eventually, the masses will realize that simple responsive website design can't handle the growing needs of personalization and how beneficial it is for customer experience. Responsive content is the path to that personalization. Use the information I've provided above as a blueprint for thinking outside the box and setting this up on your own, or contact me for help.
