Happy Halloween!!! We hope you are enjoying this fun holiday. We thought we would take advantage of the holiday spirit to review a few common mistakes that scare customers away from your site. Correcting these issues can make the upcoming holiday season sweet for your business or organization.
Can you imagine what trick or treaters would think if you gave them candy wrapped in a pound of lard? Unfortunately this is what most web pages do, causing unnecessary delays. Rather than wait, customers go to your competition.
We all hate to wait for sites or applications to load. It does not matter if we are on a SmartPhone or a powerful desktop, the human mind is impatient. Research shows if your page is not rendered within 3 seconds half your traffic has already clicked the back button and to find your competitor. Slow sites causes measurable anxiety. Even if your web application is line of business latent load times affect your company’s overall quality of life, productivity and brand experience.
There are many image optimization tools available. Kraken.io is a great image optimization service. Kraken performs fast optimizations that trim up to 70% of an image’s size without loss of rendered quality.
Node modules like UNCSS can be added to your build workflow to eliminate those unwanted CSS rules and properties. Did you know the average Boostrap site applies less than 10% of the library’s rules? Reducing your CSS not only reduces your payload, but reduces the browser’s burden to render, making everyone happy.
Not Mobile Friendly
Not having an experience that works across all devices also decreases customer engagement. Sites that are not mobile first are missing a majority of today’s traffic. Google and Bing both use responsive design as a key search engine optimization signal. [Recently Google announced they are splitting their search indexes into mobile and desktop](http://www.businessinsider.com/google-changing-index-splitting-into-desktop-and-mobile-2016-10, with mobile being the primary search index.
The web passed the mobile moment in late 2011. This is when more devices were mobile class, phones and tablets, than traditional desktop and laptop computers. Today the average person visits over 100 sites each month on their phone. The web is the most engaging medium on mobile devices. However the majority of businesses do not have a mobile friendly experience.
There are many mobile first CSS libraries and frameworks available. But it takes more than just adding Bootstrap to your code. You need to think about your content. This means identifying what is most important to a customer and not discriminating based on their device or viewport. You should also make sure your site’s payload is light because mobile bandwidth is expensive and devices are not as powerful as their desktop counterparts.
Being mobile friendly means applying responsive design, performance best practices and prioritizing your content. Its about creating an experience that puts the customer first. Loading a slow, non-mobile friendly site is a sure fire way to spook customers before they approach your front door.
Janky User Experience
How often do you visit a site and try to start reading an article or go to click a link and the entire page shifts on you because latent content loads? It could also be anytime you try to interact with a page and get no or jittery response. These scenarios fall in the jankiness category.
Moving layouts are caused by not properly sizing a layout for the content that will be rendered. This happens when images are slow to load or third party ad scripts inject latent content that renders outside the original dimensions.
It is not a bad thing to load slower content or data after the main page has loaded. Technically this is how single page applications work. What is a problem is unpredictable layout rendering. Not only do visitors expect the initially render content to stay where it is, but the browser has to work hard to re-render the content again and again. Customers expect and deserve a seamless experience, so give it to them.
You can avoid this problem by applying styles to images and other container elements that define the dimensions or box the latent content will file. Images can also have placeholder images loaded that are either small or possibly pre-cached and load quickly. They can be replaced with the real image once it downloads.
If you visit Facebook you have no doubt scene them using skeleton images in the place of news items as you scroll through your feed. You can employ the same tactic and improve your user experience.
As for third party content, you should audit this experience. Find service providers that are not honoring your agreement. If they are reducing your user experience, eliminate them from your site and replace with a service that will work with your layout constraints. Better yet, write your own service!
There are many ways to scare customers away and employees into the pit of despair. Audit your site for these bad user experiences and banish them to the graveyard of failure. Give your customers a treat so your competition wont egg your business.