HOW 2014 CHANGED THE INTERNET
Flat design, responsiveness, minimalism, video content, typography, branded, one page, fixed navigation, sticky navigation, compact sidebars, parallax, SVG… I could keep this list going but thought this was a good place to stop. As technology and devices constantly change, so do our trends. 2014 has brought about some new web trends, kept some the same, and have made some as popular as Internet Explorer 6.
How do you decide which trends are appropriate for you? Every business is unique and has their own needs; a trend may be perfect for one but ineffective for another.
Here are examples of some of the trends that I listed above and how they are being used in our work and around the internet.
Responsive web design allows you to have one website which changes layout to fit the screen it’s being displayed on. The benefit is that your website will be optimized for use on any device, but you only have to update content on one site, unlike creating a separate mobile and desktop site, where you have to update each version independently. This sort of design also ensures that the user experience and navigation is consistent on all devices. Of course, As technology is constantly improving, there is still a lot of room for growth in responsive design.
Responsive web design should be a norm at this point, so, unlike most web design companies, BTI builds sites responsively at no extra cost. Here is one example of a responsive website we built for vanhullplace.ca:
Flash video is DEAD. Now that web technologies have evolved, so has the support for video, because video content is more important now than ever before! At BTI we are experimenting with HTML5 video content that has even taken us to some interesting full video background websites as well as video on demand, as you can see in this example from the website we designed for Vanguard Law:
Having all site content on one page and the allowing the user to see the page animate to the next section rather than refreshing has made one page websites all the rage in 2014. Below is an example of a one-page scrolling website we did for Meridian Law:
You will commonly see fixed navigation on single page scrolling websites as the browser is taking the user to the next section. Rather than having the user scroll back to the top to click on the next section, the navigation will actually follow the page, allowing users to access it at any time. In this example from Meridian Law, as the user clicks “services” they are taken to the services section, but the main navigation header remains in place. The ‘services’ navigation bar remains as you scroll, except on the services section, where it is redundant and disappears.
Most people do not know what this is called but, when they see it on a website, they like it. Once again, you will see Parallax Scrolling commonly used on single page scrolling websites.
“Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines…”
Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth, in a 2D video game for example, and adding to the immersion.
Below is an example of the subtle parallax scrolling we used for the Meridian Law website, followed by the more obvious parallax used on Seatle’s Space Needle website.
Flat design is starting to make its way back into the web design industry, with companies like Google, Microsoft and Apple taking the charge. Flat design refers to minimalistic designs that focus on simple elements, typography and flat colours. At the same time, it tries to avoid the use of three-dimensional objects such as gradients, textures and shadows.
FAREWELL TO OUTDATED PRACTICES
Before I finish this post off, I just wanted to talk about some outdated trends to avoid:
Goodbye mobile versions of websites… Hello responsive!
The time of mobile versions of websites has gone out the door. Rather than building a completely separate website for mobile use (example: jQuery Mobile), companies should be building responsive versions of your website to adapt to different screen sizes.
Text Heavy? No thanks, show me Infographics!
The era of text heavy websites has slowly drifted. Rather than telling your story through text heavy copy, invest in visual storytelling. Here’s a great example of infographic storytelling:
Forget keyword stuffing, content is king!
Google is constantly changing their algorithms to stay on top of web developers and designers, so start developing keyword informed and user-centric content instead. It’s also important to keep your content focused on your brand message and use copywriting to build up your brand, instead of focusing on SEO exclusively. Essentially, when it comes to copywriting, you should be embracing a back-to-basics approach.
Keyword stuffing and focusing copy from a keyword perspective is the wrong approach to modern SEO, and will only get you penalized under the new guidelines.
Do you want to update your website, to keep up with modern web practices? Contact BTI so that we can help you take advantage modern technology.