![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08153051\/mobile-optimization.jpg\")
<\/p>\n<\/p>\n
For a long time, responsive design dominated the web as the format of choice for business and personal sites. Now, however, <\/span>mobile optimization<\/span> has begun to gain credence as a potentially preferable strategy.<\/span><\/p>\n Mobile optimization refers to optimizing a website specifically for <\/span>mobile devices<\/span>. <\/span><\/p>\n Instead of simply compressing and slightly rearranging the content on the screen, you design the entire experience for smaller screens.<\/span><\/p>\n Even if your site is \u201c<\/span>mobile-friendly,<\/span>\u201d that’s not enough.<\/span><\/p>\n How can we use mobile optimization to grow our business<\/span>?<\/span><\/p>\n If you\u2019ve ever accessed a website on a mobile device, you know it can be frustrating. Tiny buttons and links, endless scrolling, and unclear form fields create hassles that often result in abandonment.<\/span><\/p>\n People are busy, stressed out, and impatient. They won\u2019t wait for a slow page to load or spend hours trying to figure out how to add a product to their carts.<\/span><\/p>\n It all boils down to friction. The more friction a website creates, the less likely a customer becomes to convert.<\/span><\/p>\n Friction occurs when there\u2019s a barrier to conversion. If a customer has to work harder than necessary to achieve a goal, he or she feels friction. It makes that customer want to avoid the experience entirely.<\/span><\/p>\n Let\u2019s say, for example, that you pull up an ecommerce store on your smartphone. You want to buy a set of noise-canceling headphones.<\/span><\/p>\n First, you try the search function, but you can\u2019t get the search button to work. Then you attempt to navigate your way to the desired product through the top-bar menu.<\/span><\/p>\n When you finally find a list of headphones for sale, you have to tap each one to view the specs. Then you might have to pinch, scroll, and otherwise manipulate the screen to find the information you need.<\/span><\/p>\n Never mind comparing one product against another. There\u2019s no option unless you want to tap back and forth.<\/span><\/p>\n If you finally make it to the checkout process, you might have to create an account. More pinching and scrolling. Then you have to confirm via email.<\/span><\/p>\n Each of these frustrations creates friction. Many mobile users will simply abandon their search because they\u2019re out of time or patience.<\/span><\/p>\n See how to use our tools to improve your mobile version<\/strong><\/a><\/p>\n Mobile optimization<\/span>\u00a0strategy helps encourage conversions by reducing friction.<\/span><\/p>\n In quarter one of 2016, the <\/span>global conversion rate for desktop computers<\/span><\/a> was 3.63 percent. That\u2019s not great. However, the global conversion rate for smartphones was an abysmal 1.25 percent.<\/span><\/p>\n Keep in mind that mobile device usage has surged over the last several years. Not only does mobile Internet access surpass desktop, but mobile users <\/span>spend twice as many minutes on their devices<\/span><\/a> than desktop and laptop users.<\/span><\/p>\n Knowing these statistics, it becomes clear that mobile optimization is essential for business owners. But how can it affect your conversion rate?<\/span><\/p>\n A mobile optimized site makes the conversion process easier and less stressful on the user. Some of the hallmark features include the following:<\/span><\/p>\n All of these features help reduce friction. If you can buy a product or service from your mobile device without wanting to throw your device across the room, that business will likely benefit from your patronage.<\/span><\/p>\n Of course, there are several ways to get your site ready for mobile users. Responsive design is perhaps the easiest \u2014 and most popular \u2014 solution, but you might want to consider alternatives. We\u2019ll explore them in depth below.<\/span><\/p>\n Now that we\u2019ve covered some of the most important aspects of mobile optimization, how do you put them into practice? There are multiple ways to optimize a website for mobile users, so I\u2019m going to cover the topic broadly.<\/span><\/p>\n It\u2019s important to realize that mobile optimization looks different depending on the type of site you operate. I have a personal blog, for instance, where I post regular videos, podcasts, and articles. <\/span>It\u2019s not designed to move product.<\/span><\/p>\n Then there\u2019s Crazy Egg, where my partner and I sell SaaS. <\/span><\/p>\n I\u2019m also the co-founder of Hello Bar, a tool that allows you to create top bars, exit intent popups, and other modals for your site.<\/span><\/p>\n All of those sites have different functions, so I need to approach their design differently. Since I naturally have a preference for clean, minimal design, that helps when it comes to mobile optimization.<\/span><\/p>\n But minimal isn\u2019t always easy when you have an ecommerce site or a site that sells lots of services. You have to figure out creative methods of mobile optimization.<\/span><\/p>\n Let\u2019s look at a few of the most effective options.<\/span><\/p>\n The best way to start optimizing your site for mobile is to choose a responsive design. Responsive websites conform to the screen size on which they\u2019re viewed. The \u201chamburger\u201d menu often appears instead of a top bar, and images become smaller.<\/span><\/p>\n Keep in mind, however, that responsive design is different from mobile optimization. Mobile optimization simply starts with responsive design \u2014 it gives you the building blocks to create a completely mobile-ready site.<\/span><\/p>\n A mobile optimized design looks extremely different from a responsive site when viewed on a mobile device. It\u2019s configured with the mobile user in mind and often has a separate URL.\u00a0<\/span><\/p>\n The images are lighter to reduce page speed, the buttons are sized for broad fingers, and the need to pinch and scroll is minimized.<\/span><\/p>\n Starting with a responsive design, however, will take you in the right direction. <\/span><\/p>\n Your website will appear attractive and remain navigable for all visitors, which is the first step toward improving conversion rates on mobile devices.<\/span><\/p>\n If you\u2019re a <\/span>WordPress<\/span><\/a> user, you can find free WordPress themes that incorporate responsive design on the official website. Alternatively, consider searching for premium themes. Nearly all of them have been updated as responsive.<\/span><\/p>\n You might want to check out WordPress themes from <\/span>StudioPress<\/span><\/a> and <\/span>Elegant Themes<\/span><\/a>. Both companies produce responsive designs that are easy to install and adjust to your personal tastes.<\/span><\/p>\n Structured data allows Google and other search engines to display rich snippets. A rich snippet is a piece of Schema markup (HTML code) that you add to your website to give search engines more information.<\/span><\/p>\n Rich snippets often appear above the paid and organic results on a Google search results page. If you sell kitchen gadgets and publish recipes on your blog, people might find your recipes in a rich snippet. The basic instructions can be listed right in the SERPs.<\/span><\/p>\n It\u2019s also how some websites appear in the <\/span>Search Engine Results Pages (SERPs) <\/span>with star ratings and other details.<\/span><\/p>\n You can use <\/span>Schema.org<\/span><\/a> to find the schema markup you need for structured data. When you implement structured data, Google can rank you more accurately in the SERPs and better understand a page\u2019s purpose and content.<\/span><\/p>\n Large image files slow down page speed and make your site \u201cheavier.\u201d Compressing your images with a plugin like <\/span>Smush Image<\/span><\/a> can help avoid these problems.<\/span><\/p>\n If you\u2019re using a separate URL for your mobile users, consider uploading different, smaller images. That way, graphics don\u2019t overwhelm the screen or cause loading delays.<\/span><\/p>\n Product photos are an excellent example. You want a large enough image to allow consumers to view it clearly, but small enough to have a negligible impact on page load speed.<\/span><\/p>\n Instead of resizing images via CSS, which is what responsive design does, you can upload smaller images that won\u2019t weigh down your site for mobile users.<\/span><\/p>\n You might have elements on your website that won\u2019t convert well to mobile devices. <\/span><\/p>\n Take sidebars, for example. A typical sidebar appears on either the left or right of the page. Some are static, while others move down as you scroll.<\/span><\/p>\n Either way, they widen the page. On a mobile device, a sidebar can make the body text unreadable \u2014 again, without pinching the screen.<\/span><\/p>\n Take a look at a post on my personal blog when rendered on a desktop computer:<\/span><\/p>\n See the sidebar? <\/span><\/p>\n Now, let\u2019s look at that same post rendered on the Samsung Galaxy:<\/span>No more sidebar. It makes reading my blog posts on mobile devices, such as smartphones, much easier.<\/span><\/p>\n The same goes for an ecommerce website. You want to remove any unnecessary clutter.<\/span><\/p>\n Let\u2019s compare these two product pages from Walmart. The first is the desktop version.<\/span><\/p>\n There\u2019s a lot going on on this page. Let\u2019s compare it to the mobile optimized version on a Samsung phone:<\/span><\/p>\n Much simpler, right? It\u2019s streamlined so the user doesn\u2019t become overwhelmed by friction.<\/span><\/p>\n If you can remove an element from the mobile version of a page without losing essential information, do so.<\/span><\/p>\n Accelerated Mobile Pages (AMP)<\/span><\/a> are mobile-optimized versions of websites. You can add AMP functionality to your WordPress installation by <\/span>installing the plugin<\/span><\/a>.<\/span><\/p>\n AMP changes the <\/span>look and functionality<\/span><\/a> of your website when it\u2019s viewed on a mobile device.<\/span><\/p>\n You can customize your AMP to get the look and feel you want \u2014 and to match your brand.<\/span><\/p>\n AMP websites load faster than standard websites. The idea is to bring up a lighter version of the site that\u2019s been cached. If the page loads faster, logic dictates that readers will want to stick around.<\/span><\/p>\n Writing for Search Engine Watch, Methods Unsound<\/a> editor-in-chief Christopher Ratcliff revealed that <\/span>both traffic and ad results improved with AMP implementation<\/span><\/a> over 12 months. For instance, \u201c80% of <\/span>Gizmodo\u2019s<\/span><\/a> traffic from AMP pages is new traffic, [with a] 50% increase in impressions,\u201d and \u201c80%+ of the publishers [surveyed] realized higher viewability rates\u201d on AMP than standard websites.\u00a0<\/span><\/p>\n Popups can be a great addition to your site, but only if they don\u2019t disrupt its flow or create friction between your site and its users. On mobile screens, popups can become extremely frustrating because users don\u2019t always know how to make them go away.<\/span><\/p>\n That doesn\u2019t mean you should immediately disable popups. Consider A\/B testing them<\/a> to determine whether they have an impact on bounce rates and other important KPIs.<\/span><\/p>\n In an article published on Sumo, Sean Bestor<\/a> reported that \u201cSumo users collected 23,645,948 email addresses with List Builder pop-ups in less than two years.\u201d He goes on to assert, \u201cPop-ups work. There\u2019s just a misunderstanding about what makes a successful pop-up (that isn\u2019t annoying).\u201d\u00a0<\/span><\/p>\n Popups might work for your brand. If they don\u2019t, disable them. But don\u2019t assume they\u2019re useless until they\u2019ve been tested.<\/span><\/p>\n Images can become extremely limiting on mobile devices. You have to either stack them on top of one another, create a carousel, or place them side-by-side. Regardless, they take up a ton of room on the screen.<\/span><\/p>\n Video, however, can help engage your visitors visually and aurally without disrupting your site\u2019s design or the consumer\u2019s experience.<\/span><\/p>\n Explainer videos, for instance, work well for instructing your visitors about your product or service. You can also use product videos to demonstrate your products and even create mini commercials.<\/span><\/p>\n Test different video options to see what your audience enjoys most. You might even create educational video content to balance out your text-heavy blog posts.<\/span><\/p>\n Flash elements slow down your website and rarely render well in mobile devices. Neither Android nor iPhone operating systems support Flash, so if your website relies on it, people won\u2019t be able to interact with your business online.<\/span><\/p>\n Your checkout page is where you want everything to run smoothly. Multiple studies have been done on cart abandonment, and rates tend to <\/span>range between 55 and 80 percent<\/span><\/a>.<\/span><\/p>\n That\u2019s extremely significant when you\u2019re relying on people to actually buy your products or services. If 80 percent of people abandon their shopping carts, you\u2019ve lost revenue.<\/span><\/p>\n Cart abandonment is even higher than on desktop and mobile devices because, again, of increased friction. If the user can\u2019t complete the checkout process because of poorly designed fields or other issues, you\u2019ve lost a sale.<\/span><\/p>\n Speeding up the checkout page can help.<\/span><\/p>\n First, only ask for information you actually need to complete the sale.<\/span><\/p>\n Do you really <\/span>have<\/span><\/i> to know where the customer heard about your business? Probably not.<\/span><\/p>\n Does your customer <\/span>have<\/span><\/i> to create an account to buy a pair of shoes from you? Probably not.<\/span><\/p>\n By eliminating those obstacles, you can increase the chances of conversion.<\/span><\/p>\nWhy Mobile Optimization Is Important<\/span><\/h2>\n
![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08153538\/mobile-optimization-why.jpg\")
<\/p>\nHow a Mobile Optimized Website Can Affect your Conversions<\/span><\/h2>\n
![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08155951\/mobile-optimization-website-conversions.jpg\")
<\/p>\n\n
9 Mobile Optimization Tips in 2018<\/span><\/h2>\n
![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08154112\/mobile-optimization-tips.jpg\")
<\/p>\n1. Pick a 100 percent responsive web design<\/strong><\/h3>\n
![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08154734\/mobile-optimization-tip-2.jpg\")
<\/p>\n2. Use structured data<\/strong><\/h3>\n
![\"mobile-optimization](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08154917\/mobile-optimization-tip-structure-data.png\")
<\/p>\n![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08155002\/mobile-optimization-tip-structure-data-example.png\")
<\/p>\n3. Compress your images<\/strong><\/h3>\n
![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08155055\/mobile-optimization-images.png\")
<\/p>\n4. Identify non-mobile friendly features<\/strong><\/h3>\n
![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08155145\/mobile-optimization-tip-mobile-friendly.png\")
<\/p>\n![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08155233\/mobile-optimization-tip-mobile-friendly-example.png\")
<\/p>\n![\"mobile-optimization-tip-mobile-friendly-example-3\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08155357\/mobile-optimization-tip-mobile-friendly-example-3.png\")
<\/p>\n![\"\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08155413\/mobile-optimization-tip-mobile-friendly-example-4.png\")
<\/p>\n5. Add AMP<\/strong><\/h3>\n
![\"mobile](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/06\/08155452\/mobile-optimization-amp.png\")
<\/p>\n6. Test popup usage<\/strong><\/h3>\n
7. Add videos<\/strong><\/h3>\n
8. Never use Flash<\/strong><\/h3>\n
9. Speed up your checkout page<\/strong><\/h3>\n