Advances in web technologies, and especially HTML5, have created a range of new options today for web designers. We’re starting to see more and more of the effects show up in the webpages that we visit. Users may not always know what these techniques are called but they recognize something trendy when they see it. Mobile first web design, long scrolling, parallax scrolling, video backgrounds, hero images, and pages with simplified content and color schemes are some of the major new features that you’ve probably started to recognize on the web. And these are the design techniques that more and more individuals and businesses are going after today.
But then there’s the performance issue. What many often fail to realize is that, unless optimized correctly, those sophisticated looking features may come with a heavy price. Again, if your visitors are waiting 10 seconds for things to load up then perhaps it’s time to ditch some of those extra features. Instead of the “sun, moon, and stars” you may have to settle for just one of the three. A recent study shows that the highest performing retail sites contain smaller, leaner pages. From a design perspective, the latest trends don’t always equate to better performance nor to increased revenue. And you must recognize too that your site is intended for one purpose and one purpose alone – to convert visitors into paying customers!
If you’re a startup or small business trying to create a fancy new website, you can see why things get complicated rather fast. There’s a lot to consider from the design perspective. You have to balance the site’s look and feel with performance and user experience. Not to mention, you probably don’t want to spend an and arm and a leg building your site. In light of these considerations, we think it makes sense to give an overview of the latest trends in web design and describe factors to keep in mind when aligning them to your overall design strategy. So let’s discuss!
Mobile First web design: We’ve heard a lot about responsive web design in recent years, but this approach has become rather common and it’s certainly not a long term solution. The problem that many folks don’t seem to get is that RWD focuses on making traditional websites mobile friendly. This is a backwards approach especially since more people than ever are using their phones to access the web and make purchases. As a result, more and more designers today are building around mobile.
A Mobile First perspective is one that focuses on layout, design and content for smartphones and tablet devices. In other words, it puts the mobile experience at the center of your business. From a design perspective this changes everything because you will suddenly need to switch your paradigm from a traditional desktop mentality to a mobile one. The dividends will definitely pay off if you do go this route, and if you don’t – well, the rest will be history. So if you remember one thing here, remember this; the most successful businesses today are the ones engaging tech savvy mobile customers with very high expectations.
Long scrolling pages: This has become a new trend in the last couple years and provides companies with a visually stimulating way to share their products or services. Nest provides a great example of this technique. While it used to be that long scrolling pages were filled with tons of content, these are now getting heavier with rich motion graphics and cool design techniques such as parallax effects (see below), anchored navigation, and moving widgets. Long scrolling pages offers ways to tell compelling narratives in a new way.
Parallax scrolling: Chances are you’ve seen this effect and didn’t know what to call it. A leader in the web design industry, Creative Bloq, defines and comments on parallax scrolling this way: “One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth.” Here’s a good example.
There is however some confusion around the SEO effects of parallax scrolling, with some saying it’s SEO friendly and others not. This article does a good job of clarifying that if applied properly parallax can be a great and SEO friendly technique to adopt. Though there are limitations; for example it’s not ideal for mobile and makes the site too heavy. For any new and emerging business, however, the right implementation of parallax should be a top consideration to give your visitors a great, trendy presentation of your product or service.
Let’s pick up the discussion in part 2.