A little over 1/4 of the world’s population and a little over 2/3 of the population of the United States now own a smartphone. Additionally, roughly 1/3 of the people in the United States has a tablet. Between smartphones and tablets, all of these users are now spending more time on their mobile devices than on desktops or laptops, and mobile-only use is growing while desktop-only use is shrinking.
What does all of this mean? If your site isn’t adjusted to display correctly on mobile browsers, you’re turning off a massive segment of traffic — quite possibly the majority of your visitors!
There are a number of unique web design factors to consider when tailoring a site to mobile devices. The operating systems and browsers are different, the screens are smaller, and users are nearly always navigating by using a touchscreen and a virtual keyboard versus desktop and laptop machines. They don’t have the precision control of a mouse; they’re lacking certain features like the ability to hover over thumbnails, typing more than a few improperly-punctuated words is an imprecise hassle and screen real estate is at an absolute premium.
The Adaptive, Responsive Solution
Even though demographics seem to be shifting heavily to mobile internet use, you can’t just abandon desktop and laptop users. Some sites have created two separate versions for each type of user, but there’s an even simpler solution: a responsive and adaptive design.
Responsive and adaptive design simply makes adjustments to the site based on how each individual user connects to it. A “device aware” site can collect basic information that doesn’t require any cookies or similar tracking of users, and then apply that information, while automatically optimizing different site settings for that user’s needs.
The information includes:
The operating system being used
The web browser being used, including various setting and configuration details and the range of HTML and CSS features the browser supports:
- The display resolution
- The connection speed/bandwidth available to the end user
Is There A Difference Between “Responsive” And “Adaptive”?
Responsive design is effectively the simple first layer of adaptation to your site visitor. All it does is to alter the HTML and CSS properties, in response to the user’s device and browser. Every visitor gets the same base HTML code, but things like image size and CSS elements are adjusted automatically for them.
This adjustment is helpful, but it doesn’t go all the way in fully optimizing the site for each user. Adaptive web design makes more fundamental changes to the underlying HTML and CSS when it is beneficial to the user based on the information the site collects about them. This is the layer at which sites will consider the bandwidth or connection speed of the user in addition to their device and operating system, and may entirely disable certain features or change the layout in response.
Ultimately, the ideal site that can deliver a great experience to any device employs a mix of responsive and adaptive design. Implementing such a design from the ground up not only provides a vastly improved experience for users but also saves your company money and frustration on future web development as well. No worries if you’ve got a large legacy site that’s optimized solely for desktops and laptops, however; a skilled web developer experienced in adaptive techniques will very likely be able to modernize it without much trouble.
Interested in learning more? Feel free to contact us! We can also be reached at 215-393-8700.