In 2007, Steve Jobs took the stage and announced that Apple was poised to introduce a revolutionary phone and a breakthrough Internet communications device.The big reveal during this announcement was that these 2 products were actually 1 product and it was called the iPhone.This device would make the Internet and the web more accessible than ever.
However, for website administrators this new form factor also introduced numerous challenges. These challenges included a limited screen size, missing Flash support and clumsy touch-based interactions.
These challenges might’ve been easy to ignore in 2007, but today there are numerous smartphone options and these devices have gained widespread adoption.In fact, smartphone sales today exceed those of desktop computers and by 2014 mobile-Internet traffic is forecasted to exceed desktop traffic.
To address the “rise of smartphones” many organizations were forced to create a mobile strategy.Sadly, most organizations chose to create an alternate website, a “mobile website,” to operate alongside their existing “normal-website.”In essence, these organizations “forked” their website; choosing to create and maintain two branches of similar web content to address the two form factors (mobile and not-mobile) they had identified.
This might look like a sound strategy, but it’s short-sighted and fails to address the core challenge.
“Forking” Doesn’t Scale & Fails to Produce Optimized Results
In 2010, Steve Jobs once again took the stage and expressed Apple’s vision of a new device that would exist between a smartphone and a computer.This device, Steve expressed, would need to do some tasks better than either a smartphone or a computer.Web browsing was the first of these tasks to be identified and Apple unveiled the iPad tablet to address this task.
Like smartphones, tablet devices are now becoming widespread and creating opportunities and challenges for website administrators.Tablet devices have mid-sized screens (between a smartphone and a desktop display) and rely on touch-based interfaces.
As a result, the two scenarios that had previously been identified (mobile and not-mobile) were no longer sufficient for addressing the full spectrum of Internet-devices being used by visitors.
However, in reality these two scenarios were NEVER sufficient. Real-world web statistics show that across computers, smartphones and tablets there are many different display sizes being used.There were never 2 classes of Internet-devices.
Instead there has always been a gradient of devices ranging from smartphones to widescreen monitors.By only targeting 2 narrow scenarios organizations neglected numerous other common devices.
Furthermore, this problem is getting worse, rather than getting better.Technologies like Google Glass demonstrate that we’re not finished innovating and new Internet devices will continue to be introduced and potentially gain mass adoption.
“Forking,” as a solution for targeting different devices, is ineffective and inefficient today and will become even worse in the years ahead.
Responsive Design as a Scalable & Effective Mobile Solution
The core problem is that most websites target a single screen size.For example, a website might be 800 pixels wide.On a widescreen monitor this simply results in wasted space.But on a smartphone it becomes almost unusable.“Forking” enables organizations to add an additional set-width website to their arsenal, but fails to create an optimized experience for ALL devices.
An ideal solution would allow the website to be created once and then adapted for an unlimited number of Internet devices.Although this might look unrealistic, it’s actually built into the DNA of the web itself.
From the very beginning, web browsers have simply ignored HTML they do not recognize.This means a web page can use the latest and greatest HTML 5.0 features and older browsers will simply ignore HTML tags that invoke those features.
This simple fact becomes the basis of a web design philosophy known as progressive enhancement.Progressive enhancement starts by targeting devices with very limited capabilities (text-only, no Javascript) and seeks to make the website usable even with these severe limitations.New HTML layers (images, Javascript, etc.) are then added to the website.
When supported, these layers enhance the core experience.When not supported, visitors will fall back to a default experience.This enables a modern website to simultaneously support old and new web browsers.
Learning Opportunities
Webinar
Mar
29
The CX Commute vs. the CX Joy Ride
Is your CX traffic holding up your customer's journey?
Webinar
Mar
29
Is Your Microsoft 365 Data Recoverable? How to Survive the IT Hotseat When Data is Lost
See why MIcrosoft recommends third party backup
Webinar
Mar
30
An Optimized Customer Contact Strategy Combines Transparency and Intelligence: The State of Outbound Communications
Learn from the Neustar-commissioned Forrester Consulting study on challenges and solutions for contact centers
Webinar
Apr
5
Adopt a Modern Digital-First Marketing Strategy
Learn how to use a composable DXP to your advantage
However, modern smartphones contain modern web browsers.Consequently, these devices support the newest HTML features.As a result, a desktop browser and a smartphone browser will recognize and act upon the same HTML -- thus creating the same experience on both devices.
Thankfully, a solution to this challenge was included in the specification for CSS3 (Cascading Style Sheets).This W3C specification included a feature called Media Queries.Through these Media Queries web designers can define different website styles for different devices.
This technique is known as Responsive Design: it combines the Progressive Enhancement philosophy with CSS3 Media Queries to create websites that adapt fluidly to any browser or device.This technique is heavily aligned with web standards and adheres to best practices for web design.
Responsive Design eliminates the need to “fork” a website simply to support a new device.Instead a single website adapts fluidly to address any device.
Sometimes a Fork is Exactly What You Need
“Forking” is an ineffective strategy for adapting a website to different devices.This strategy is difficult to maintain, impossible to scale and fails to produce optimal results.However, “forking” as a solution for creating entirely new web experiences can produce wonderful results.
For example, accessing the Google Maps website from a smartphone produces an entirely different experience than accessing Google Maps from a desktop computer.
On the desktop, Google Maps displays a large map that can be panned or zoomed using the mouse.On the smartphone, Google Maps displays a search box and icons for several nearby locations visitors might be looking for (Restaurants, Coffee, Bars, etc.)These are two entirely different experiences that take advantage of the underlying device.Furthermore, both experiences (mobile and desktop) are “responsive.”Meaning each fluidly expands or contracts to adapt to the device’s screen.
Consequently, if the goal is to transform a single web experience for multiple devices, then Responsive Design is vastly superior to “forking.”However, if the goal is to create a new web experience, then “forking” can be used in conjunction with Responsive Design to adapt each unique web experience to a variety of screen sizes.
Responsive Design is a wonderful technique for creating optimized websites for a wide range of Internet devices.However, there are numerous other factors to consider.For example, it’s worth considering the level of browser support for this technique, as well as CMS support for responsive design.
If you’re interested in learning more, there is a detailed whitepaper on this topic that addresses these and other considerations.
Editor's Note: To read more on the challenges of designing content for mobile devices:
