Designing A Website For 2014
It’s been about five years since the last redesign of my website, Hitched. A lot has changed since then, most particularly the rise of mobile. While we made sure our website was mobile compatible all those years ago, it wasn’t (and still isn’t) optimized for smaller screens. Needless to say, we’re working pretty hard to correct this as quickly as possible.
As we have been working to give our website a fresh coat of paint, I’ve come across some current design trends that we may or may not implement, but wanted to share with you.
Continuous Scrolling. This is a design element that Forbes already implements. As you scroll down the page you are automatically taken to the next story without clicking. Since you continuously scroll, this changes other elements of the design. For example, when you get to the second article, unless you also add floating navigation and other elements, you lose the all-important “top fold.”
Larger Fonts. While we haven’t done a major redesign in years, a few months ago we quietly increased the font size on our article pages. Next year, I expect the font will get even bigger. One major reason for this is the improved screen resolution and greater screen sizes of the computers and other devices now used; which makes the standard font sizes of yesteryear seem puny.
Responsive Mobile Design. I mentioned earlier how mobile is effecting all web design. Walker Sands, a public relations firm found that mobile devices account for 28% of total website traffic in Q3 2013, up 67% from the same time last year. Our numbers show that mobile now makes up nearly 60% of the total traffic on Hitched. This trend has been going up for years and will continue to do so in 2014. The way to design for this in the past was to create a mobile-specific website, but now websites have the ability to be more responsive and to adjust accordingly to the device and screen. This means publishers don’t need to maintain two completely different sites and can instead focus on just one that responds appropriately.
Flat Design. It seems mobile really is driving everything. Since Apple AAPL -0.11% released iOS 7 with a complete flat design overhaul, the flat esthetic has quickly creeped into desktop and website design (to be fair, Windows went flat first). For example, we use the social sharing site AddThis and earlier in the month they updated their sharing buttons to a new flat design. It seems the flat design offers more than just a new look, it also boosts performance. AddThis mentions that the new buttons are 40% smaller in size than their previous glossy ones. This actually makes a lot of sense considering a flat design eliminates all the gradients and shadowing that can quickly eat up precious kilobytes.
Parallax Scrolling. The first time I saw Parallax Scrolling used on a website was in 2012 on the New York Times feature story, “Snow Fall.” Since then, other websites have been using the technique and it seems that in 2014 it will be a standard design feature. If you’re not familiar, Parallax Scrolling presents the webpage as multiple layers whereas the background layer scrolls at a different speed than the foreground layer (in fact the background layer may not move at all). Other techniques can also be used in conjunction, such as animation to offer some truly unique and dynamic effects. We recently posted our 2013 Holiday Gift Guide and included a new stylus called Pencil from FiftyThree. I mention this because their product site very effectively uses this technique to breakdown and explain the Pencil. It is my hope that this and the other design trends help to serve as inspiration with your next redesign.