According to comScore, 156 million Americans had a smartphone in December 2013, up more than 3% from September 2013. And that number is only expected to rise. Indeed, according to eMarketer, 1.75 billion people will use a smartphone on a regular basis by the end of 2014.
Millions of smartphone users aren’t just using their phones to make calls, send emails, or text messages. They use their mobile devices to access social media, search the Internet for news and information, and shop and buy things. As a result, if your website or ecommerce site is not mobile-friendly, you may be losing prospective clients and sales.
CIO.com polled hundreds of mobile and surrey website design specialists to find out what “optimized for mobile” really means. The top 12 tips for making a mobile-friendly website are listed below.
1. Be quick to respond. “Make use of a responsive technological foundation,” Copley advises.
Broer is the CEO of LandlordStation, a property management software company. “There are a number of them available” (we use Bootstrap).
These frameworks are “essentially easy approaches to lay out things in a grid and then change that grid based on different screen widths,” according to Broer. “Open source (free) frameworks like Bootstrap are widely documented and simple to use.”
“Responsive Web development is a more unified approach to Web development that allows you to provide a same experience for the customer regardless of how they access the site (desktop, tablet, or smartphone),” Kevin Janosz, COO of RITTA, a marketing and advertising agency, explains.
“In addition to providing a better user experience across devices, it consolidates your website so you don’t need a distinct mobile URL,” Janosz explains. “It also has SEO benefits and is much easier to manage.”
2. Use your thumb to think (or index finger). Marc Weisinger, director of marketing at Elite SEM, a search engine marketing agency, advises, “Make sure your site is entirely navigable with one thumb and requires no pinching to utilize.”
“This is one of the most crucial suggestions for any mobile site since you want consumers to be able to explore your site without using their second hand.” Furthermore, if you have to pinch to zoom, your material is generally too small or not optimized for that particular browsing device.” According to Weisinger,
“Most customers accessing a mobile website will be using a touchscreen device,” says Dean Hume, CTO of Hire Space, a venue booking company. “Ensure that the buttons and menu navigation are big enough even for fat fingers.” “Too often, a mobile-friendly website would merely use CSS (media queries) to scale the screen, failing to account for the possibility of misdirected clicks.”
“When designing for mobile interfaces,” says Mark Rattin, executive creative director of Lyons Consulting Group, “you should make your goals large enough to be easily chosen.” “Most adults’ index fingers are 15 to 20 mm long, which converts to 45 to 57 pixels. “Our ‘rule of thumb’ (pun intended) is to leave at least 45 pixels between buttons or tap elements and selection spaces,” he continues. “This makes it easy to choose the objectives on the screen and eliminates many unintentional touches from the user experience.”
3. Keep the design as simple as possible. “A focused content and a clear design may go a long way,” says Michael LaVista, founder and CEO of Caxy Interactive, an application design and development firm. “Keep in mind that you just have a few seconds to portray your company’s identity. This is true for any website design, but it is especially critical when creating for mobile devices.”
Too many frills (graphics, content, video) might stifle the site’s ability to load rapidly — and divert attention away from your message. “Try to 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 if you plan on using images.
4. Keep your content to a minimum. “Sometimes people fall in love with their [website] material, and the mobile site becomes too busy,” Broer explains. “Figure out how to express your narrative in less words,” says the author.
Yaniv Masjedi, vice president of marketing for Nextiva, a phone service company, recommends, “Go easy on text.” “Because the screen on a smartphone is much smaller than on a desktop computer, keep the amount of text on your mobile website to a minimum.” Because mobile users want to scroll rapidly, only provide the most important material to keep the reader’s attention.”
5. Keep in mind that a picture is worth a thousand (or, at the very least, a dozen) words. “Use traditional mobile [icons] instead of words for tap to call, connect socially, or access the menu to keep your site from being cluttered,” recommends James Ramsey, CEO of Fiddlefly, a digital design studio. “Using these symbols informs visitors that the site is mobile-friendly.”
6. Make it quick — serve graphics that are mobile-friendly. “The mobile Web is significantly slower than its FiOS and cable-powered cousins,” says Jay Melone, CEO of Web design firm New Haircut. “Our LTE speeds in the United States were ranked second from the bottom, with averages hovering around 6.5 Mbps,” he says.
According to Itai Lahan, CEO of Cloudinary, an image management service for Web and mobile apps, “mobile device resolutions and aspect ratios are quite fragmented — [ranging] from 240 x 320 to 2560 x 1440 and higher.”
“Also keep in mind that mobile devices connected to a 3G network still lag behind in download speeds, and that many mobile customers pay for bandwidth usage.” “With all of this in mind, resizing, cropping, and optimizing photos to best match the exact device resolution and aspect ratio is critical,” Lahan explains. “This can save a lot of bandwidth by drastically lowering the time it takes for mobile Web pages to load while also considerably improving the surfing experience for visitors.”
8. Make it simple to access your phone number, address, and other contact information. “Think about how your site will be utilized on mobile,” advises Anthony Overkamp, creative director of Engage, a full-service design and development agency.
“Users are frequently looking for store hours, a contact or reservation number, or the business’s local location. “The better the user’s experience is, the easier it is for them to access and act on this information,” adds Overkamp.
9. Think about including video, but do it with caution. According to Russ Somers, vice president of marketing at Invodo, a video strategy and content supplier, “video is an essential must-have for any mobile site.” “This is because mobile device users are three times more likely than laptop/desktop computer users to watch videos,” he explains.
“Use a video technology that gives a faultless mobile experience,” says the author. To ensure that your mobile video player works on a wide range of mobile devices, Somers recommends using HTML5. “Also, use a lightweight video player (one that doesn’t require a lot of bandwidth and processing power) to drastically improve page loading time and deliver a better overall experience.”
10. Make sure your forms are mobile-friendly. “Request the bare minimum of information in order to reach a lead,” advises Zubin Mowlavi, CEO of Lucid Fusion, a Web design and branding firm.
“Reduce the number and size of form fields as much as possible,” Mowlavi advises, “and take advantage of the technology integrated into mobile devices to improve usability.” “GPS, for example, is frequently available. So, instead of asking someone to enter their city, state, and ZIP code, prepopulate it.”
11. Take into account geolocation. “Utilize mobile capabilities like geolocation,” says Michael Read, co-founder and CEO of The Level, a Web design and development firm. “Geolocation can be used by businesses to provide directions, allow visitors to verify in-store availability at the nearest retail location, offer targeted promotions, provide online buyers with prices in their local currency, and connect to social sites like Yelp.”
12. Run tests to confirm that your content works on a variety of devices, platforms, and operating systems. “To improve overall site experience with usability testing, remember to assess the mobile user experience by operating system,” advises Debbie Carkner, vice president, Ecommerce Strategy, SMITH, a digital experience consultancy. Solidifyapp, UXRecorder, POP, and delight.io are some of the new mobile testing solutions on the market.