There has been a pretty aggressive sales curve away from the PC and towards mobile devices. 2012 marked the year that PC sales were projected to be lower than the previous calendar year and tablet sales are expected to exceed 100 million this year. While the growth of the mobile web isn’t news today, the technology behind making it look and function just like a PC is. The number of mobile device operating systems, browsers, and sizes continues to grow which increasingly complicates web developers and marketers jobs. Traditional HTML and CSS is not built to respond to different device sizes making for a bad user experience when part of the site is cut off. Enter responsive design and adaptive delivery. These technologies allow marketers and developers to create amazing user experiences across any device they may be using.
What is Responsive Design?
Responsive design is the practice of designing and developing a website that is flexible depending on the user’s environment and behavior such as platform, screen size, and orientation (landscape or portrait). Before responsive techniques were applied to web design, separate versions of the same website would need to be created based on each device that needed to be supported. That meant if you wanted to support the Blackberry, iPhone, and iPad then three separate code bases for that website would need to be developed to support those devices. Media queries, fluid layouts and scripts that automatically reformat a webpage based on the user’s device are the cornerstones of responsive designs. This is most evident on image rich sites and sites with multiple columns. Shopify sites, such as DingBikes.com, are a good example of being mobile ready by using responsive design. Other great responsive design examples include:
What is Adaptive Delivery?
Adaptive delivery uses different sets of HTML and CSS code to display versions of a website based on the user’s device as well as their intent. You may want to add or remove functionality or even focus on particular conversion funnels based on the device that is being used. The server hosting the website detects the device being used and displays the code base associated with the device for that website. This is especially helpful when your website is a direct revenue source. For example, Lufthansa is a German airline who uses adaptive delivery to present only pertinent information to mobile users navigating to their site. A mobile user coming to Lufthansa.com is most likely looking at flight statuses, checking in or looking up their itinerary. Lufthansa.com’s mobile version of the site focuses on these key areas for mobile users unlike responsive design which will show the same site version but arrange the content to fit the mobile device being used.
Examples:
Which is the Right Approach for Your Marketing Strategy?
The easy answer is both. For most organizations using responsive design alongside adaptive delivery allows content heavy portions of the site to shine no matter the device being used to consume that content while utilizing adaptive delivery for high intent portions of the site focusing users on what they need most. To choose which approach to use for your digital property and campaigns you need to ask yourself how the site can best support users and your business objectives (hopefully they go hand in hand).
For content heavy sites without a big difference in user intent between desktop and mobile users, responsive design is the straightest line to your end goal. For e-commerce focused sites where the user intent is very high, adaptive delivery may be your best bet. These types of sites must delivery an easy mobile user experience by shortening the conversion funnel and load time on the site. Adaptive delivery is able to accomplish both of these goals.
Don’t sell yourself, and more importantly your customers, short when it comes to which technology to use on your site design and marketing strategy. Think about your customers intent when they come to your site and how it differs on a desktop and mobile device and delivery the experience that keeps them coming back.
Image via Shutterstock