{"id":21339,"date":"2021-02-07T04:38:15","date_gmt":"2021-02-07T04:38:15","guid":{"rendered":"http:\/\/leadautomationsystems.com\/?p=21339"},"modified":"2021-02-07T04:38:15","modified_gmt":"2021-02-07T04:38:15","slug":"getting-comfortable-with-mobile-first-web-design","status":"publish","type":"post","link":"https:\/\/leadautomationsystems.com\/getting-comfortable-with-mobile-first-web-design\/","title":{"rendered":"Getting Comfortable with Mobile First Web Design"},"content":{"rendered":"

The way people interact with the internet has evolved. When the web was new, all internet traffic came from a desktop computer. While some early smartphones were released throughout the 2000s, they could only access a \u201cdumbed down\u201d version of the internet.<\/p>\n

Everything changed in 2007, when Apple released their first iPhone. Suddenly, we could access full sites from our pocket computers, leading to a previously unheard of level of connectivity.<\/p>\n

Today, 63%<\/a> of organic searches on Google come from a mobile device. Mobile has overtaken the personal computer as the primary way that we interact with the internet.<\/p>\n

When we consider our own internet usage, this makes sense. How often do you use your phone to search for a nearby restaurant when you\u2019re out and about, or look up that actor while you’re watching TV? But there is a disconnect between the way we design<\/em> websites and the way we use<\/em> them.<\/p>\n

We usually design websites on a desktop or laptop computer. And even some professional web designers can forget to optimize the sites for mobile while they\u2019re sitting at a full-sized computer screen.<\/p>\n

When we fail to put the mobile experience first, the result can be a frustrating user experience, with pop-ups that cover the whole screen, forms that are too small to read, and graphics with contrast that gets lost in shrunken form.<\/p>\n

Further, Google has switched to a \u201cmobile-first indexing\u201d<\/a> system. This means they do not crawl<\/em> your desktop site when indexing and ranking pages. They crawl your mobile site instead. If your desktop site is lightning fast but your mobile site crawls, you may get dinged in your rankings.<\/p>\n

What Are Your Mobile Site\u2019s Stats?<\/h3>\n

Before you know what to change, you need to know the current status of your site. Just because the majority of web traffic comes from mobile doesn\u2019t mean yours<\/em> does. To find out, visit your Google Analytics.<\/p>\n

On your home dashboard, scroll down until you see a circle chart called Sessions by Device. This will show you the device breakdown for the past seven days. You can change your view to look at a longer time period to get a more accurate average. You may find that your demographic is actually more likely to use a computer than a smartphone, especially if your customers skew older.<\/p>\n

Mobile-first design is still important, even if your customers are more likely to visit your site on desktop, because of Google\u2019s indexing. But you may be able to have a slightly more complex site if more of your customers are visiting on desktop.<\/p>\n

Another important factor to consider is site speed. Using Google\u2019s PageSpeed Insights<\/a> tool, you can test your site to see how quickly it loads on both desktop and mobile. If your site is like many, it will be plenty fast on desktop \u2014 and frustratingly tortoise-like on mobile. When you design mobile-first, you\u2019ll focus on the speed of your site on a smartphone, instead of treating it as an afterthought.<\/p>\n

How to Approach Mobile First Web Design<\/h3>\n

\"\"<\/p>\n

The old way of approaching web design was to plan for the desktop site, and then remove some features for mobile. Instead, we\u2019re going to design for mobile, and maybe<\/em> add some features for desktop.<\/p>\n

Websites have become simpler. You may remember the sites of the early internet, overwhelming the visitor with animation, banner ads, flashing colors, and small text on a neon background. Web design has matured since then, with a new minimalism taking hold. This is a good thing for mobile design!<\/p>\n

Keep simplicity in mind when you\u2019re planning your site. It will be both easier for the mobile user to navigate, and will load more quickly. With page speed a major Google ranking factor, keeping your site light and fast will improve your position in search engine results.<\/p>\n

Next, consider your hierarchy of information. On mobile, all content will be presented vertically. So you have to prioritize your content, putting the most important information at the top. Blog headlines and hero content should be visible before the user has to put finger to screen and start scrolling.<\/p>\n

You don\u2019t have to know how to code to create a mobile-first website. Even responsive website builders like WordPress and Squarespace allow you to toggle between mobile, tablet, and desktop views. Plan your site from the mobile view, and check it with the desktop view before publishing.<\/p>\n

Must-Have Mobile Site Features<\/h3>\n

Whether you\u2019re working with a responsive site design or starting from scratch with a new mobile design, here are the elements your mobile site should have.<\/p>\n

Hamburger Menu<\/h3>\n

A hamburger menu is a symbol with three stacked horizontal lines. It\u2019s a universal icon for a navigation menu on mobile, and it will immediately tell the user where to click for more options.<\/p>\n

Compressed Images<\/h3>\n

Large images are a major site-speed killer. Images should be compressed to reduce their overall size and improve your site and page load speeds.<\/p>\n

Simple Layout<\/h3>\n

A simple, easy to navigate layout will make your mobile site user friendly.<\/p>\n

Clickable CTAs<\/h3>\n

Your call to action (or CTA) tells the user what to do next when they\u2019re on your site. \u201cBuy now,\u201d \u201cLearn more,\u201d and \u201cGet the download\u201d are all CTAs that ask the user to take an action.<\/p>\n

CTAs should always be easy to click, preferably in a brightly colored box or button. This is especially important on mobile, where clicking a small text link may be difficult.<\/p>\n

Focus on the User<\/h2>\n

\"\"<\/p>\n

Whether you\u2019re designing your own site or outsourcing the project to a web developer, make sure that mobile is on your mind. Scroll through your most-visited websites on your smartphone, and note what makes the experience easy vs. what the frustrations are.<\/p>\n

Keep the user in mind when designing your mobile site. They\u2019re who you\u2019re trying to impress!<\/p>\n","protected":false},"excerpt":{"rendered":"

The way people interact with the internet has evolved. When the web was new, all internet traffic came from a desktop computer. While some early smartphones were released throughout the 2000s, they could only access a \u201cdumbed down\u201d version of the internet. Everything changed in 2007, when Apple released their first iPhone. Suddenly, we could…<\/p>\n","protected":false},"author":1,"featured_media":21340,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[6,13,22],"tags":[277,279,278],"_links":{"self":[{"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/posts\/21339"}],"collection":[{"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/comments?post=21339"}],"version-history":[{"count":0,"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/posts\/21339\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/media\/21340"}],"wp:attachment":[{"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/media?parent=21339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/categories?post=21339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leadautomationsystems.com\/wp-json\/wp\/v2\/tags?post=21339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}