A common issue today in website development and implementation is that one company sees another company do something they like and they declare it "GOOD!" Then that company copies the first company’s website and then other companies declare it "GOOD!" and copy that company and so on and so forth until soon we have a plethora of badly designed, coded, and/or implemented sites that are a poor experience for users and an even poorer one for SEO valuations. These site issues generally fall into about five specific categories.
So what are the most misunderstood site design and layout techniques that could be killing your website, or at least, your business in terms of traffic and site position?
As Matt would say, "What’s good for the user is good for Google."
Infinite (Endless Scroll)
While no technique is inherently bad, this design method is one of the most overused and misunderstood design techniques on the Web today.
While only truly useful for certain specific user intents, many sites use it with the idea it helps site engagement because visitors don’t have to click. Just give them a stream they will be happy. However, if a user wants to stream that glorious content is dependent on use case. That use case is highly specific and narrowly focused. In fact, when used incorrectly it can potentially hurt your site especially in terms of SEO, usability, and conversion optimization.
So let’s first define what infinite scroll is and how it is best used.
SitePoint defines infinite scroll as:
"A design pattern where content is fetched asynchronously from a database or master file and inserted into the user’s page as they consume the information. This results in a seemingly endless page that continues to load content as the user scrolls towards the bottom."
OK, so now we know what it is, next we need to know, what are the pros and cons of using this method?
- Pagination: No need to paginate and users get one stream.
- Clicks: Users do not need to click to read except possibly a load button (always advisable).
- Fast Access: Quick access to page content especially on mobile and tablet. Just a flick of the fingers.
- Good for Explorers: Infinite scroll is good for content that is based on exploratory actions and intent. It is also best when it consists of items that the user can easily break down into categorical taxonomies.What is that?
So for example, if you had a site about beer and you wanted to show all your IPAs, infinite scroll would enable the user to browse all items inONE category. The benefits of effect are lost when the user is expected to determine placement of items in the hierarchy.It is also good for sites like Facebook and Twitter that display chronological information. These sites have a natural time flow that almost demands infinite scroll. However, they are some of the few sites that use it the way it was intended.
So what are the negative affects of infinite scroll?
"Endless scrolling is not recommended for goal-oriented finding tasks, such as those requiring people to locate specific content or compare options." – Jakob Nielsen
So what does this mean it is not good for people who are goal-oriented searchers? In most cases we are referring to e-commerce, however it could be news sites or basic informational queries. Whenever the use has a specific intended goal bent on item retrieval.
Now what are my drawbacks?
- Scrollbar Issues: Breaks the scrollbar, which users rely on to understand the length of the page and how much is between them and the end.
- Placement Confusion: No way to know where you are in the scroll or page if your users need to leave and come back.
- Page Speed – SEO Issue: Page weight while Google is leery of fully crawling infinite scroll it will trigger some types of implementations and if it does just how much are you feeding the spider in terms of page weight and response delays.
- Memory Issues: If you put too much scroll into the page, you are consuming browser memory with each flick of a finger and you can cause browser performance issues.
- Specificity of Content: Often infinite scroll is used to replace good page and site architecture. It seems to be a very prevalent byproduct of the page design experience. This can cause usability issues, as the content is not categorized in a meaningful and/or consumable fashion way, while also not being specific to the page.
- Usability – Conversion Issue: Not good for users who need to perform goal-oriented tasks such as locating specific content.
- Footer Stickiness: Difficult to add a usable footer which for many sites is one of the highly visited portions of the page and will frustrate the user who cannot reach it.
- Sentiment: This method can be psychologically draining for task-based goals. This experience can make a user feel overwhelmed and associate a negative experience with using your site.
First make sure you are using infinite scroll for the right page type, user intent, and site goal. Don’t frustrate your users for "cool tech."
If you are merely using it because you think people will read more, the usability studies do not show this to be true if the intent is not matched to the method. I.e. if they are looking at an exploratory user, users will likely report a positive experience (if implemented correctly). However, if used for a task-oriented experience the user is likely to find the use of forever scroll tiresome, disorienting, and unhelpful in assisting the user in locating your content. When a user cannot locate what they are looking for they will often find a site that better meets their needs.
Second if you decide 'YES" this does match my user intent, site, and conversion goals, make sure you have implemented the method and the tracking according to Google’s instructions. If not implemented correctly it will cause SEO issues, which means not being found and not converting visitors.
You can also review the implementation at John Mu’s Demo site here.
Finally, if you do decide to use infinite scroll, don’t make it endless scroll. Put in the proper tracking and when you see where the majority of users who do use it fall off, cut the scroll. A scroll should NEVER be endless. Even Facebook, Twitter, and Google who have legitimate use cases for infinite scroll stop theirs at some point. Learn when to make the cut.
Lazy Loading is the latest in a not-so-short list of scripted solutions that cannot be properly spidered by Google for content indexing.
What Is Lazy Loading?
Lazy Loading is when the next part of the page, whether it is images or content, does not load until you interact with that part of the page in a manner that initializes the object in that page to load (example: your content is not visible until you scroll to that part of the page, then it appears).
What Does This Mean for Your Site?
This means your content or images will not be indexed by Google if they are below the load point because Google spiders will not try to interact with your script and load the rest of the page. Since your content or images are not loaded and essentially invisible to the spider, only the visible part of the page is indexed.
This issue can hurt your site in terms of traffic for say Google image search or devaluations by the Google algorithms for thin content, as you do not have enough above the index point to pass muster.
SPECIAL NOTE: Lazy Loaded images will also not load into G+
Follow this advice from John Mu and Google on how to handle the lazy loading of images and content, however, unless you are in real need of this method the solutions are awkward and clunky and not easy to implement. It would be better to take the age-old instruction to "design out the issue" if possible, rather than be married to something that is going to eat up development time with little value for your users or site.
Design out the issue?
Often the people that design a site or page have little technological experience and design in strictly visual terms i.e. "Is it pretty?" Often these items are very difficult to actually implement at a technical level or a different solution might save 50 percent in development time. So before you approve a design you should have your development and SEO team review the design to see if there are elements that will be complex to implement and can be designed out. Designing out complex implementation issues can save your team a lot in time and resources.
Parallax when it is done very well can be, well – cool. Unfortunately it is rarely used in the right context or for the right reasons. This also goes for pages that imitate Parallax.
What Is Parallax?
Parallax scrolling is where background images move by the camera slower than foreground images, creating an illusion of depth. On websites this is when the background and foreground cause the illusion of motion. Also taken from this concept are the pages that are segmented into sections as you move down the page with scrolling motions.
Have You Asked Yourself the Most Important Question About Parallax?
The most important question - why? Why are you choosing this method? If your only reason is it looks cool or you like it, stop and pick another method for displaying your Web content.
This method of Web page design is fraught with implementation and SEO issues that all require workarounds including one URL and inability to find content easily. In addition, it is a very frustrating user experience to have to "stop on a mark" when viewing the content. If you are not able to provide a fluid Parallax experience that makes sense to the user as they go through your site you have wasted a lot of time and effort making it work for little benefit.
Consider this method very carefully and make sure you have a clearly stated business goal for utilizing this technique. Cool does not impress users for most verticals. They want their info in a nice pleasing design and to get out. Do not put up roadblocks to the user or your SEO effort.
If your site is NOT mobile-friendly, stop what you are doing right now and go make a plan to get it there. This is one of those Come To (Insert person here) moments in your website’s life that if you rely at all on organic search traffic (or even Facebook) has to be fixed or you will lose traffic. Loss of traffic means loss of money, then jobs, then well we all know how that goes, so let’s not think past that.
Is Being Mobile-Friendly That Important?
Over the past two years, Google has been very explicit that sites needed to start taking mobile into account. On January 24, it even released a mobile algorithm that started removing sites from mobile search for not being mobile-friendly. OK maybe not completely gone, but far enough down you would need a ladder and rope to find you.
If your site is not mobile-friendly and generally this means is "responsive," "adaptive," or "responsive/adaptive," and in mobile search you do not see the words "mobile-friendly" next to your listing, you will lose some or all of your rank in Google SERPs, if Google sticks to its guns.
So what is responsive? Adaptive? And responsive-adaptive? When talking about your website? These are techniques that allow your site to be best seen in the desktop and mobile.
- Responsive: Uses one code set and techniques such as viewports, breakpoints, and CSS "media queries" to make the site render properly in all types of devices by estimating how it will appear on that screen size. It does not use device detection. The issue typically with these sites is proper loading of images into the mobile version and not serving a mobile site to a desktop user who has resized their screen.
- Adaptive: Design uses device detection and progressive enhancement to adapt the site to the user in a specific manner. The issue is you cannot know all device types and trying to render to as many as exist on the market today could keep a team of developers rather busy.
- Responsive-Adaptive: Is an excellent technique that uses Responsive design for all your main components, but special scripting for items such as image loads, so you can serve the lightest pages on the mobile surface.
Special Note: Did you get a mobile usability warning in your Google Webmaster Tools? If so, fix the issues immediately. You have been put on notice that your site will not be viewed well as further mobile algorithms are pushed out.
If you have a Wordpress site most themes today are responsive; if yours is not, find one that is and switch to that. (A lot easier than trying to make a no-responsive WP site work properly) If you have a site that is built outside Wordpress, find someone who is an expert in coding responsive sites and get going. There is no workaround for this anymore as m. sites are not long for the Google Search results.
It has become common to remove all menus and load in a "hamburger menu" or sites that are not being displayed in mobile. While mobile users have become more familiar with this menu type on desktops you are hiding what the user can find on your site and adding a click. Neither of these is necessary and in the end can cause user confusion. Where it might be appropriate is in a tools menu where the user is looking for say the mission statement, about us, or a page function. Usability studies do show us that if you want to get maximum clarity for those using your mobile site, add a border and the word menu to your hamburger icon. It helps users pick up on the "information scent" more quickly.
Don’t use the hamburger icon on your desktop site (except maybe a tools menu), make it clear that it is a menu by adding the word "menu" to your icon in mobile and make sure it is large enough to be easily clicked by tablet and smartphone users.
You Have Been Warned!
Often designers and developers get bored with their work and want to do something new and fun (don’t we all) or CMOs look at a new cool thing on another site and want to add it to their own. While these can sometimes work well for users, they are often roadblocks to meeting their intent and dead stops for your organic SEO efforts. So while some of these can be excellent for the right site, make sure that is why you are using these and not because you think they are cool, hip, or fun.