fbpx

Wireframe Marketing
November 1, 2018

Mobile Web Design - Optimization Tips

Mobile devices are now taking over the internet and is the majority of web traffic. Today, 80% of internet users own a smartphone; which means that making your website mobile-friendly is no longer optional.

"If you look at the evolution of games from console to Internet to mobile, and look at social networking from Web to mobile, everything is fragmenting." ~Chris DeWolfe

1. Reduce Page Data Size

Not looking at page load times or page data size is one of the biggest mistakes that you can make. Many web pages have over 100 resources that are loaded such as HTML, images, CSS, and javascript code. Each element that loads is another request to a server that slows down your entire page load when a request gets held up.

Spend time optimizing your main pages for speed and data size to see an improvement in page loads and decrease in bounce rate, especially on mobile.

There are free tools, such as https://tools.pingdom.com/ and https://developers.google.com/speed/pagespeed/insights/ that can help you to find the key areas where you can improve. Keeping your page under 2 MB of data and 2.5 Seconds in load time would put you in the center of the pack. Try to reduce things even further.

If you want more information about optimizing your sites load time comment below or reach out to us. We can optimize your site for you.

2. Larger Text and Buttons for Mobile Usability

Mobile Website Design is a Type of Mobile Web Design That Focuses On Making the Web More Accessible on Mobile Devices

Make sure your website is easily usable by visitors on mobile devices. Mobile will continue to gain market share as the way we find and consume digital content.

"Mobile will probably disrupt much of what we know of web 2.0" ~Keith Teare

Having larger text and buttons will make your content easier to read and will make your buttons more simple to interact with on mobile devices. Google includes mobile usability as a metric when ranking sites for search results. Make sure your design works well on both desktop and mobile.

In 2018, nearly 70% of all web traffic is now through a mobile device. Be sure your site performs for mobile users on a variety of devices and screen sizes.

If you have an international audience, optimize your site for smaller screen sizes as older generation phones are more prevalent.

3. Use Scalable CSS in Mobile Web Design

Instead of sizing your CSS elements with pixels, use EM. EM, a unit in the field of typography, equal to the currently specified point size, allows the size of elements to scale with the size of parent elements. If you are not a developer, this just means that your elements will be able to change dynamically. Making your site responsive to changes in screen or orientation.

4. Engaging Images

"The Mobile Web Initiative is important- information must be made seamlessly available on any device." ~Tim Berners-Lee

On Facebook and Instagram images and video are key. Optimize your mobile and desktop sites to use images in a way that will add value to your users. Blogs with infographics and examples are more helpful and receive more engagement than purely text-based blogs.

Remember to correctly size your images to reduce data sizes and to make text large enough on infographics.

5. Vertical Layouts for Mobile Site

Vertical long form layouts are more conducive to mobile devices because they have a similar aspect ratio. Users on tablets or computers may be able to see the whole design of your website, but mobile users will be shown an entirely different layout.

When designing a page, be conscious of the ways that your content and layout will be modified by a mobile browser. Avoid having issues that will cause the user to have to scroll left and right on your content by using a responsive theme and sizing elements with EM or Percentages, instead of Pixels.

Conclusion

There's no right way to design a mobile-friendly website. However, there are standards that you should follow. By following these simple tips, you can ensure that your website is desktop and mobile-friendly.

Leave a Reply

Your email address will not be published. Required fields are marked *

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram