"A strong mobile strategy is vital to keeping an audience's attention because, to put it bluntly, that's where those people are," Q Manning writes. Manning outlines five ways to be more mobile-friendly in your design, including utilizing media queries and high quality visuals.
According to comScore’s 2016 Mobile App Report, total digital media time grew 53 percent from 2013 to 2016, and 80 percent of that growth was driven by mobile apps. The point is, we haven’t all turned into zombies -- we’ve just altered our focus to take in content at an almost constant rate.
To keep your company from being left behind in the ever-expanding mobile world, you need to make content accessible to users where they spend most of their time. This means formatting it and making sure it's friendly and ready for mobile users to engage with.
The limitations of mobile hardware
A strong mobile strategy is vital to keeping an audience’s attention because, to put it bluntly, that’s where those people are. If your content isn’t available on mobile, you lose eyes -- and a slew of potential users.For this effort, understanding the hardware limitations of each operating system (along with what specs the largest audience has) is vital. Modern websites often employ animation and video to augment the customer visit and create a more engaging experience. Unfortunately, these don’t always work as planned on mobile devices -- if they even work at all.
Auto-playing videos on an iPhone is a beast all its own. To reach the largest audience, your content needs to be accessible on the widest range of devices possible.
Strengthening mobile-focused efforts
With so many people consuming mobile content, you need to design in a mobile-friendly way. Here are a few design considerations to keep in mind:1. Start using "media queries." This concept will save your life when it comes to content. Media queries are specialized style sheets that tell a website to recognize what size screen or type of device someone is using to surf the web. This provides the visual style sheet that’s right for the device accessing it.
You don’t need to understand how to program style sheets yourself, but your web developer should, as the person person in the process of creating responsive websites for a mobile-focused world.
2. Make content readable. Too often, websites link to PDFs and other documents created on computers for computers (or, worse, intended for printing). These documents are tough to read on mobile and will mostly likely cause users to abandon your site.
Both design and content convey your message to readers, and the nature of mobile content is bite-sized content. Everything from sidebars and widgets to PDFs that don’t fit a mobile screen can have an effect -- either keeping visitors coming back or leading them to abandon you completely.
Your mobile site should hide any excess buttons or bars that distract from the primary content. Videos in particular must be embedded in your design interface with HTML5 to avoid knocking your display out of whack.
3. Keep visual quality front and center. Modern mobile devices have high-res or HD screens; and cameras like the iPhone’s retina display. While it’s important that your content look good on lower-resolution screens, it also needs alternate images for clear, crisp viewing on 1080p, 4K and even 8K monitors now on the market.
A phone needs a higher pixel density to achieve this than a TV, which has much more surface space to cover. Regardless of what devices or screens your website is being viewed on, responsive design -- such as one that turns a carousel of four images into one static image for mobile screens -- allows the ideal image size to create a display as bright and professional as possible.
4. Keep file sizes small. On the flip side of this, even with high-resolution images, you want the lowest file size possible to enable faster load times, reduce costly cloud storage costs and more. Any page that takes more than two to three seconds to load will feel like an eternity to your users.
Several tools and tricks are available using free desktop apps like MS Paint, premium software like Photoshop and even web apps, to lower file sizes without compromising image quality. Sites such as TinyPNG can adjust image size while maintaining crispness to ensure that you’re optimized for any potential display.
5. Don’t forget text. Marketers constantly push the importance of video and imagery, and while these factors are effective, don’t underestimate the power of text. A picture may be worth 1,000 words, but 1,000 words loads faster -- and is much easier to reformat for visibility on any screen.
On mobile, your fonts will most likely need to be larger, with more frequent line breaks, but this takes a lot less work to accomplish than reformatting images. Your developer can develop or license a special font to embed on the website that will cost some money but is well worth the price tag. And if you must cut content to be more mobile-friendly, do it. In fact, this is great advice for writing in general -- less is always more.
In sum, convenience has driven users to mobile, rather than their laptops or desktops. You always have your phone nearby where it’s easy to access, and every time you look up from it, everyone else is doing the same. Computers, even laptops, can’t provide this level of convenience -- no matter how tiny, portable or all-in-one they are.
- Q Manning, Entrepreneur