Just 10 years ago webmasters didn’t have to worry about creating multiple versions of a website for viewing on different platforms. Consumer used desktop or laptop computers in the home or office to research products, book vacations, and read the latest news. The screens, though different in size, presented information for consumers in the same design patterns, and there was a sense of predictability that made the job a little easier.
Today, consumers access the web from desktops, laptops, smartphones, tablets, e-Readers, and gaming consoles. These devices use various connection speeds, come in numerous screen sizes, varying resolution, and offer processing speeds that range from tortoise to hare in terms of reaction time. With consumers surfing your page on any number of different devices, how can you make sure your site looks good no matter which device they use to interact with your brand?
In this post, we are going to discuss the factors you need to keep in mind, and offer some helpful tips to guide you through optimizing your webpage for viewing on multiple devices.
How to See Your Site on Different Devices
If you’re like most Americans, you probably have a smartphone or tablet, or both. However, it is unlikely that you have these devices equipped with all the different screen sizes, processors, and operating systems floating around the market today. Fortunately, the good folks at HubSpot created a tool that allows you to view your website on various devices without having to test it on each device. Their Device Lab was launched in 2013 and allows you to simply enter the URL for your site.
The Device Lab will not only show you what your page looks like on different devices and operating systems, it will generate quick reports on the percentage of mobile visitors from the various platforms. You’ll see reports for iPhone 4/4S, iPhone 5, and iPhone 6/6 Plus, as well as Samsung Galaxy S3/S4/S5 devices, and today’s most popular tablet devices.
How to Create a Mobile-Friendly Site
Device Lab will help you view your website on various platforms. You’ll see if your page is getting cutoff on tablets or requires too much zoom-and-scroll action from visitors, but it won’t tell you how to make the changes necessary to develop a mobile-friendly platform. You want to ensure that your consumers find an engaging website that is user friendly, regardless of the device they access your site on.
Entrepreneur offers some basic starting points for webmasters looking to create a site that looks great on any device. For starters, you should take the time to look over your current site and ensure it matches today’s web user. More than a billion people use smartphones around the globe, and many use them as a primary access point for the Internet.
Begin by simplifying your overall site design. You need to consider simpler page designs and larger font sizes for quicker load times and easier viewing on mobile devices. The old newspaper term “above the fold” is important in modern web design. If your viewers have to scroll way down the page on a mobile device, they’ll give up quick in favor of a well-designed site. Make sure your critical information is above the fold (meaning no scrolling to find it) and use big, touchable buttons. Butt-dialing is a thing of the past, but fat fingers lead to accidental button pushes on smartphones on a daily basis.
If you don’t want to mess around with adapting your current website, you also have the option of creating a mobile site. Developing a mobile site for your business establishes a parallel website that exists separate from, but connected to, your traditional website. Processors determine whether or not visitors originate from desktops/laptops or smartphones/tablets, and redirect them to your mobile site immediately when they enter your URL.
There are tradeoffs that come with a mobile site though. Building a mobile site that uses a second URL, notably the .m subdomain, your visibility in search engines will suffer. Google and Bing are not found of the .m subdomain, and push for webmasters to use one URL for the sake of greater visibility and search engine optimization.
With that said, your budget may force you to create a separate mobile site instead of rebuilding your primary site. A mobile site that is less visible is better than missing out on the mobile audience altogether. Just make sure you link your mobile site to your main site and you’ll be able to close some of the gap.
The Best Option
Of course, you could always make a significant investment in your business and rebuild a site that will work on any device at any time. Through adaptive and responsive design, you can build a website that is proven to display properly every time visitors click to your page, regardless of the device they are using. Here’s a brief introduction to both concepts:
- Adaptive Design: Big companies invest heavily in adaptive design. An adaptive website detects and identifies each user’s device in seconds, and generates a page matched to the capabilities of that specific device.
- Responsive Design: Using Cascading Style Sheets (CSS) technology, responsive design creates a single version of your website that auto-adjusts to display properly on most devices, with the exception of older cellphones. Responsive designs are flexible enough to ensure your site looks good no matter the size of the display or speed of the processor on a device.
There are drawbacks to these approaches. Adaptive design represents the pinnacle of website design today, but it is incredibly expensive to implement and support. Responsive design is more affordable, but not quite on the level of adaptive design. Still, compared to other options, responsive is head and shoulders above building a simple mobile site.
As you consider a web redesign, keep the factors we’ve mentioned in this post in mind. No matter what your budget is, you need to set aside funds to design a website that is visible and user friendly on any device. Today it’s smartphones, tablets, and a growing number of Smart TVs. Tomorrow, consumers may be viewing your page in the kitchen on refrigerator doors or in the bathroom on mirrors. Prepare your website today for the challenges.
