With almost 2 billion users around the world at the start of 2015, mobile design and the mobile internet’s relevance to the success of an online business can no longer be denied. Going mobile is no longer a choice as more and more people spend ever-increasing amounts of time on their smartphones and tablets. The situation is more like a landgrab for adapting to the current environment and beating everyone else to the punch.
Google increased the ante last year by releasing its “Mobilegeddon” update:
To help you steer clear of this pitfall, here are five principles to keep in mind when conceptualizing your site’s mobile experience and content delivery strategy:
#1. Plan the kind of content you want to showcase
Your mobile design strategy should hinge heavily on the kind of content that you intend to serve users. Is it text-heavy, image-heavy or a combination of both? Do you plan to embed video and audio? The answers to those questions will determine the approach you’ll want to take with your mobile design.
For easy reading, text should be 17-22px in size. Using common fonts is a good idea. It ensures that most devices will display the text properly. When using text as anchors for hyperlinks, avoid having them too close to each other.
If you want to present images, you’ll have to be very careful with the decisions you make. Using too many images in one webpage is discouraged. If you want to display a gallery, stick to light JPEGs for best results. The quality is often good enough to look compelling on phones but file sizes don’t blow up to ridiculous proportions.
You’ll also want to make sure the images scale well when screen orientations change. If a user decides to view your content sideways, do images appear nicely on a horizontal configuration or are they distorted to the point of being unsightly? Make this part of your QA process to ensure satisfactory user experiences each and every time.
When using videos, it’s best to upload them to YouTube, Vimeo and other video sharing sites. Not only are videos from them easy to embed on pages, they also scale very well to mobile displays. YouTube is still the fastest way to stream videos on mobile devices, making it the best choice for functionality and visual appeal.
#2. Decide between adaptive and responsive designs
Mobile friendly web design comes in two general classifications: adaptive and responsive. Both allow mobile devices to view sites in a much more eye-friendly manner, but each one uses a distinct approach to achieve the desired effects.
- Adaptive designs use multiple viewports for different resolutions. In plain English, this means there’s a different version of a webpage for a specific display category. When a visit requests a page from the server, the server determines what device will receive the data. Based on that information, it serves the version of the page that’s best for the display configuration. Designers can have as many viewports as they deem necessary as long as there are resources to support production. As you may imagine, this can take a fair bit of work. Most adaptive sites have at least six viewports to make sure desktop devices, tablets and phones all get served a good-looking version of a page. While that may sound daunting, some site owners prefer adaptive designs because it grants designers absolute control over the layout of each version.
- The same isn’t true about responsive designs. Responsive setups allow text, CSS and media assets to scale based on the screen resolution of the device that requests access to a page. There’s usually just one viewport for every device, so designers have to accommodate every possible device and display configuration that may be used for viewing a page. The drawback of responsive pages is that layout control isn’t as strong as it is with adaptive design schemes. The one viewport used has to deliver a layout that works for every device – a feat that’s not too easy for even experienced designers to accomplish.
#3. Build with UX and conversions in mind
It doesn’t matter whether you’re generating revenue by selling products, leasing ad space or funneling traffic towards affiliate sites. Your website has goals and those goals require certain actions from visitors to fulfill them. Whether you need visitors to purchase, sign up or click on ads to make money, your mobile design should complement the experience and encourage desired actions.
Making minimal use of images and other clickable elements ensures that the conversion funnel is focused on having the visitor complete the goal. Spacing out text, visual assets and buttons is also a good idea because it prevents accidental clicks or taps. Not displaying text and other elements on the far edges of the screen and making sure there are padded borders also ensures that scrolling is smooth and easy.
Finally, avoid using pop-up banners which disrupt the flow of user journeys. These may be helpful in your blog, article and wiki pages but they’re not quite as welcome on landing pages, ecommerce pages and in the checkout page chains.
#4. Trust the Thumb
There are few things that are as frustrating as an on-screen object that doesn’t respond when you tap it with a finger. Given the fact that smartphones and tablets come in a variety of shapes and sizes, the general rule is to make important and clickable visual elements as big as possible. An area of about 22mm is usually sufficient for comfortable finger tapping. However, take into account that some people use thumbs and that will require a little more size.
25mm is just dandy, but if you can make it 28mm or bigger, all the better. It’s a smart idea to test your buttons on several devices before settling on a size.
#5. Never Sacrifice Speed for Design
It’s important for you website to look good, but mobile browsing is more about speed, readability and ease of use. If your design ideas are causing your site to underperform in the aforementioned areas, don’t hesitate to trim down the desired look. After all, you may have a beautiful website, but if it takes forever to load, people will abandon it anyway.
Skillful use of CSS and HTML5 can help you achieve amazing visuals without bogging performance down. Likewise, proper caching schemes will help pages load better on the part of returning and engaged visitors.
Ultimately, mobile design is a means to an end, which is the facilitation of conversions. Follow the five principles and you should be in good shape.
Images “ Smart phone (phablet) with a transparent display in human hands. Concept actual future innovative ideas and best technologies humanity. / Shutterstock.com“
________________________________________________________________________________
Tweak Your Biz is a thought leader global publication and online business community. Today, it is part of the Small Biz Trends stable of websites and receives over 300,000 unique views per month. Would you like to write for us?
An outstanding title can increase tweets, Facebook Likes, and visitor traffic by 50% or more. Generate great titles for your articles and blog posts with the Tweak Your Biz Title Generator.
