12 Tips for Creating a Mobile-Friendly Website (2023)

According to comScore, as of December 2013, 156 million Americans owned a smartphone, a more than 3 percent increase from September 2013. And that number is expected to continue to grow. Indeed, eMarketer predicts that by the end of 2014, 1.75 billion people around the world will be regularly using a smartphone.

And those millions of smartphone users are not just using mobile devices to make calls and send emails and text messages. They are using their mobile devices to connect with their social networks, surf the Internet for news and information, shop and make purchases. So if your website or ecommerce site is not optimized for mobile traffic, you could be losing potential customers and sales.

To find out what “optimized for mobile” truly means, CIO.com asked dozens of mobile and Web design/development experts. Following are their top 12 tips for creating a mobile-friendly website.

1. Be responsive. “Use a responsive technology framework,” says Copley Broer, CEO, LandlordStation, which develops property management software. “There are several of these available (we use Bootstrap).

These frameworks are basically simple ways to lay out elements in a grid and then shift that grid based on different screen sizes, so that elements on a large monitor are spaced just as well as they would be on an iPad [or smartphone],” Broer says. “Frameworks like Bootstrap are open source (free), well documented and very easy to implement.”

“Responsive is a more unified approach to Web development that allows you to create a similar experience for the user no matter how they are accessing the site (desktop, tablet or smartphone),” adds Kevin Janosz, COO, RITTA, a marketing and advertising agency.

“In addition to being a better user experience across devices, it consolidates your website so you do not need a separate mobile URL, it has SEO benefits, and it’s also much easier to manage,” Janosz says.

2. Think with your thumb (or index finger). “Make sure your site is completely navigable with one thumb and requires no pinching to use,” says Marc Weisinger, director of Marketing, Elite SEM, a search engine marketing firm.

“This is one of the most important tips for any mobile site as you want users to be able to navigate your site with their ‘phone hand’ without the use of a second hand. Additionally if you have to pinch to zoom, your content is probably too small or not perfectly optimized for that browsing device,” Weisinger says

“Most users visiting a mobile website will be using a touchscreen device, so ensure that the buttons and menu navigation are big enough even for fat fingers,” says Dean Hume, CTO, Hire Space, a venue booking website. “Too often a mobile friendly website will simply resize the screen using CSS (media queries) and not take into account that fingers might cause misplaced clicks.”

Similarly, “when designing for mobile interfaces, you should make your targets large enough to be easily selectable,” says Mark Rattin, executive creative director at Lyons Consulting Group. “The average index finger for most adults is 15 to 20 mm, which translates to 45 to 57 pixels. Our ‘rule of thumb’ (pun intended) is to give buttons or tap elements at least 45 pixels of space for selection areas,” he says. “This allows the targets on screen to be easily selectable and removes many of the accidental taps from the user experience.”

3. Keep the design simple. “A clean design and focused copy can go a long way,” notes Michael LaVista, founder and CEO, Caxy Interactive, an application design and development company. “Remember that you only have a few seconds to convey who you are as a company. This is true for any website design, but is particularly important when you are designing for smaller devices.”

Too many bells and whistles (i.e., graphics, copy, video) can hamper the site’s ability to load quickly — and distract from your message. If you plan on using images, “try and serve images that are smaller in byte size as this will reduce the amount of time that users spend waiting for the page to load,” advises Hume.

4. Keep content short and sweet. “People sometimes fall in love with their [website] content and it makes the mobile site too cluttered,” says Broer. So “figure out how to tell your story with fewer words.”

“Go easy on text,” advises Yaniv Masjedi, vice president of Marketing for Nextiva, a phone service provider. “The screen on a smartphone is much smaller than that on a desktop computer, so try to minimize the amount of text on your mobile website. Mobile users are interested in scrolling quickly so include only essential copy to keep the reader’s attention.”

5. Remember, an icon is worth a thousand (or, okay, a dozen) words. “To keep your site from looking cluttered, use conventional mobile [icons], rather than words for tap to call, connect socially or find the menu,” suggests James Ramsey, CEO, Fiddlefly, a digital creative agency. “Using these symbols helps viewers know that the site is optimized for mobile.”

6. Make it fast — by serving images that are optimized for mobile. “The mobile Web is considerably slower than its FiOS and cable-powered cousins,” points out Jay Melone, CEO, New Haircut, a Web design agency. “The U.S. in particular was ranked second from the bottom for our LTE speeds, with averages hovering around 6.5 Mbps,” he says.

“So be sure to strip down the heavy media files that exist on your desktop site, such as videos,” Melone says. “Use media queries to repurpose your desktop site’s retina-ready images into lower res versions. And consider replacing bulky JavaScript libraries like jQuery Mobile with standalone JavaScript.”

“Mobile device resolutions and aspect ratios are very fragmented — [ranging] from 240 x 320 to 2560 x 1440 and above,” says Itai Lahan, CEO, Cloudinary, an image management solution for Web and mobile apps.

“Also consider that mobile devices operating under a 3G network are still considerably lagging behind in download speeds and that many mobile users out there pay for bandwidth use. Factoring all of this in means that it is crucial to resize, crop and optimize images to best fit the specific device resolution and aspect ratio,” Lahan says. “This can save a huge amount of bandwidth, dramatically reducing mobile Web pages loading times while greatly improving visitors’ browsing experience.”

7. Don’t go overboard with Java. “Avoid excessive JavaScript in your mobile websites where possible, because it runs differently across different browsers and devices,” says Hume. “Even different models of the same phone can often behave quite differently when it comes to JavaScript,” he says. “This isn’t to say that you shouldn’t use JavaScript, but rather be clever about it and keep in mind that it could affect the performance of your mobile-friendly site.”

8. Make it easy to find your phone number, location and contact info. “Keep in mind the context in which your site will be used on mobile,” says Anthony Overkamp, creative director, Engage, a full-service design and development firm.

“Often, users are looking for store hours, a contact or booking number or perhaps the business’s nearest location. The easier it is for users to access and take action on this information, the better the user’s experience,” Overkamp says.

9. Consider video, but add it wisely. “Video is an absolute must-have for any mobile site,” argues Russ Somers, vice president of marketing, Invodo, a video strategy and content provider. “That’s because consumers using mobile devices are three times as likely to watch videos than laptop/desktop computer users,” he says.

That said, “use a video technology that provides a flawless mobile experience. Your mobile video player should run HTML5 to ensure that it can play on most mobile devices,” Somers advises. “In addition, use a video player that’s lightweight (doesn’t consume valuable bandwidth and processing resources) so that you can significantly improve page loading time and provide a better overall experience.”

10. Make sure forms are designed for mobile. “Request the minimum amount of information that you need in order to contact a lead,” suggests Zubin Mowlavi, CEO, Lucid Fusion, a Web design and branding company.

“Minimize the number and size of form fields as much as possible, and leverage the technology built into mobile devices to optimize usability,” Mowlavi says. “For example, GPS is usually accessible. So don’t ask someone to enter their city, state and ZIP if you can prepopulate it instead.”

11. Consider geolocation. “Take advantage of mobile capabilities such as geolocation,” says Michael Read, founding partner and CEO, The Level, a Web design and development agency. “Businesses can use geolocation to give directions, allow visitors to check in-store availability at the nearest store location, offer targeted promotions, offer online shoppers prices in their local currency and connect to social communities such as Yelp.”

12. Test to ensure your content can be properly viewed on different devices, platforms and operating systems. “Remember to test the mobile user experience by operating system to improve overall site experience with usability testing,” says Debbie Carkner, vice president, Ecommerce Strategy, SMITH, a digital experience agency. “Some of the mobile testing tools that are emerging include Solidifyapp, UXRecorder, POP and delight.io.”