In the past designers would create separate desktop and mobile versions of websites, which meant two designs and URLs. Now, the norm is a single responsive, mobile-friendly site that adapts to screen size. Mobile-friendly are set up so the code of the site changes the styling of images, text, and buttons based on device.
Key Elements of Mobile Design
If you're about to create a new website or are managing a current one, it's important to ensure the design is mobile-friendly. Styles created for smaller screens focus on the mobile user experience, which must be taken into consideration in order to create an effective mobile design.
The unique challenges of navigating a small screen must be taken into consideration when designing mobile-friendly sites.
- Mobile-friendly navigation should be clear and easy to follow, requiring only a few taps to get users to the screen they need.
- The design should include breadcrumbs that make it clear to users where they are on a site at any time.
Simplicity is the key to mobile-friendly interface.
- The site should rely on simple design elements that focus on ease-of-use and avoid clutter on the small screen. Clutter includes text, images, and video.
- Buttons and other touch-screen elements should be large enough for efficient finger tapping.
- If your site is an e-commerce site or includes forms, make these as simple as possible. Minimize the typing a user must do if you can.
Elements to Avoid
There are a number of "don'ts" to avoid when designing for mobile.
- Pop-ups are a huge annoyance to frequent mobile web users. Their use should be avoided to keep the user experienced seamless.
- Flash video, which still is used on many websites, is not playable on many mobile devices. For this reason, it should be avoided.
- Large size files take longer to download on a mobile device without the processing power of a desktop computer. A big flashy video on your home page may seem striking, a mobile user may be deterred from using your site if that video takes too long to load and make the site hard to navigate.
Creating a Mobile-Friendly Website
Many tools are available to help simplify the process of creating a mobile-friendly site.
Mobile-Friendly Themes and Frameworks
It's important to make sure your images are optimized for the web with any type of site. This is particularly critical for mobile-friendly design. If you don't have access to an image-editing program such as Photoshop, you can use online image optimizers such as Kraken.io and Optimzilla.
HTML5 Video Player
Since not all mobile devices can run Flash, make sure any videos on the site run with an HTML5 video player. JW Player is a popular player that can be used on many types of sites including WordPress. Another option is to run your videos through YouTube or Vimeo and embed on your site.
Media queries are code written for your CSS file that tell your website to appear in different ways based on the size of the screen viewing the website. This is how you make a single website optimized for both mobile and desktop versions without needing different URLs.
Code for Scaling
The viewport meta tag is another important piece of code to use. It helps the browser determine how to scale your site.
Tools for Screen Size Testing
It's important to know how your site will appear on different size screens. This can be a breeze if you use web developer tools, such as those found on Chrome or Firefox, for testing. Simply activate the tool and drag your screen to the size you wish to test.
Mobile-Friendly Design and Search
If you want to build a strong search engine optimization strategy for your site, mobile-friendly design is a must. Google let it be known back in 2015 that sites that were not mobile-friendly would be penalized in searches. Therefore, if your site isn't optimized for mobile, it will be difficult to promote it on search engines.
Making Your Website Mobile-Friendly
Whether you use a framework like Boostrap, WordPress plugins or HTML and CSS, there are tools available to help you with the complex task of mobile-friendly design. If coding is outside of your skill set, there are many website builders you can use to create a mobile-friendly site. However you create your site, make sure mobile is your first consideration when planning your strategy and design.