With the advancement in web browsers, bandwidth and mobile computing power, developers have gained quite a bit of freedom. What weren’t quite possible before due to resource limitation, are now non-issues. As a result, the usage of oversized, high quality media and highly interactive elements have become trends in web design. While websites are looking better and more interactive than ever, we must not forget the importance of SEO. In this article, we go over some of the most widely used design elements we’ve seen, and explain why they may negatively affect a website’s visibility in search engines.
Slider & Carousel
One of the most popular web design trends in the last few years is the usage of sliders and carousels. A slider is basically a set of slides, consist of images and overlaying texts, displaying one slide at a time. Chances are you’ve seen it used by online stores to showcase their current and upcoming promotions. A carousel, on the other hand, is similar but displayed in a film strip format. Although both of these modules usually have controls for switching between slides, they can run automatically on a timer; hence they are also known as rotating banners. While sliders and carousels maximize the use of limited page space, they may not be optimized for search engines. Google, for example, gives less weight to contents that are hidden initially.
This is a slider showcasing our portfolio.
Video Background & Embedded Videos
This web design trend is likely here to stay as Internet continue to get faster with fibre and 4G networks. A picture is worth a thousand words, so a video must be more. What’s more convincing than showing your products or services in action with videos? More and more websites are now featuring full-page background videos and embedded videos on their sites. We’ve done it, too, to showcase our clients’ fleet of heavy machinery and fine-dining restaurant. That being said, the potential drawback is increased page load time. The reason being, background videos load and play automatically and embedded videos often pre-load to prevent pauses. Search engines such as Google penalizes slow websites and rank them lower than competitors. We are able to get away with it because we know how to optimize for speed, and we use premium hosting.
Tabs, Accordions & Flip Boxes
Tabs and accordions are also very efficient way of utilizing limited page spaces. For example, in web stores, you’ll often see tabs and accordions used to separate product information such as specifications and reviews. Flip boxes, on the other hand, allow users to interact with webpages to reveal certain information, such as pricing. They are usually animated to catch people’s attention. It’s not hard to see why these became trends in web design, but they have their drawbacks. Even though Google is capable of indexing them, just as previously mentioned, contents that are hidden initially are likely discounted for ranking purpose.
This is a tab. Information in tab #1 is considered to be more important by search engines because it’s displayed when the page is loaded.
Using tabs is an efficient way of utilizing limited page space.
However, since the content under tab #2 ad #3 are hidden initially, they are seem less important by search engines.
This is an example of tabs. Accordions are similar to tabs, but displayed vertically.
This is an example of a flip box.
Using parallax scrolling in web design is another trend that’s taken over Internet in the last few years. It’s a technique that scrolls a webpage and its background at different speeds, creating the illusion of depth. Imagine looking out a window, what you see outside of the window changes as you move your position relative to it. It looks cool because it adds another dimension to 2-dimensional webpages, but here’s the problem. In almost all cases, the parallax effect is implemented as background images, but not as HTML elements. Since background images don’t have descriptive tags and captions attached to them, they have little SEO value, if at all.
One-Page Web Design
One-page web design is starting to disappear, but used to be a trend few years ago. Since one-pager sites lack structure and contents, they naturally don’t rank well in search engines, unless there are external factors that signal their importance.
Animated Loading Screen & Pop-up
An animated loading screen delays the rendering of actual content, because it, too, needs to be loaded. A pop-up is an interruptive way of displaying information because it covers relevant content. Some of them will even hide or blur areas of webpages not overlaid by pop-ups. If a pop-up is displayed when search engine robots crawl through the page, it may be penalized.
Full Screen Banner
Another popular web design trends is the usage of full screen banner, sometimes also called hero header. It basically involves using oversized images or videos as banner background, usually overlaid with texts. A hero image on a webpage is like a cover page for a magazine, it draws readers in. However, the problem is search engines prioritize information that’s “above the fold,” which is content loaded in the initial viewport without scrolling. So by having a full screen banner, it pushes important contents down and therefore not optimized for search engines.
Web Design Trends or Fads?
We’re not saying don’t use these design elements on your website because we use them, too. They took over Internet because they’re visually pleasing, add interactivity or maximize space usage. It doesn’t make sense to completely avoid them. However, as SEO experts, we know what we can get away with without too much impact and we compensate with other techniques. At the end of the day, we build websites for human beings, not for robots to crawl. Therefore, we shouldn’t sacrifice user-friendliness or aesthetics for the sake of satisfying search engines. Remember, search visibility will get you leads, but your website still needs to be attractive enough convert them. If you’re looking for a web design company that build quality, search engine optimized websites, we’d love to help. Click the button below to get in touch with us.