This week’s article on web design trends is a case-study on the
North Carolina League of Conservation Voters (NCLCV) website. I’ll be examining the website and talking about what web design trends it uses effectively. And which trends it falls short on. After reading this, you’ll know how to apply web design trends on your business websites and which mistakes to avoid.
Inclusivity
According to Meghan Duprey, inclusivity is a big-ticket item for 2019. And that’s what makes the NCLCV website so unique.
As part of its inclusive design, NCLCV features a high-contrast option, easily accessible via a button on the left-hand side of the screen. This makes it easier for the visually-impaired to read the web contents.
A website designed for high-contrast, as this one is, benefits users by ensuring that it is readable in a high-contrast theme, instead of hoping that high-contrast hacks result in readable content. Just look at the logo in the top-left: normally this logo has a transparent background, but the specially-designed stylesheet gives it a background that makes it more readable than if it was set against black! The stylesheet also changes text color and removes text backgrounds to enforce a designed contrast.
By doing this, the NCLCV creates an accessible website without sacrificing aesthetics. So remember to keep accessibility in mind when designing your business websites. It’ll turn heads instead of turning them away.
The Grid
Matthew Jenkins calls the grid one of four web design trends you need to know in 2019. And NCLCV is on board.
Grid-based layouts date back to the early years of web design, when websites used HTML tables for basic layout. As CSS grew in popularity and in functionality, blocky layouts went on the decline. But content is king and websites soon found they needed a better way to organize all that juicy SEO.
And so we have this. Websites with blocks of content (not unlike the blocks of content Gutenberg uses to construct this post). Stacked atop each other, square, vertical and horizontal. But as you can see, this isn’t your grandma’s website. New frameworks, like Bootstrap and CSS Grid, give us both form and function when creating modern grid layouts.
NCLCV’s use of the grid allows it to present all its latest news and calls to action without making users scroll and scroll. It keeps the content centerfold, compact enough to remain in view but padded enough to not overwhelm. You could do worse than to follow its lead.
Hamburger Menus
Let it never be said that I don’t love a good hamburger. Chicken, beef, potato chips; I don’t care, I’ll try it all (as long as it’s cooked well-done and contains no pork products). But let’s get one thing straight: when I order a pizza, I don’t want to be handed a hamburger. And when I’m on my desktop, the same rule applies.
I’ve criticized desktop hamburger menus before. And it’s no less baffling here. From the way NCLCV hamburger menu awkwardly cuts off just before the bottom of my viewing area, to the position of the “CLOSE” button not correctly overlapping the hamburger menu button, this is a bad design trend implemented poorly. I mean, try it for yourself: click the hamburger menu and you’ll find your cursor is below the close button.
You back yet? Good. Even ignoring these site-specific issues, there’s little excuse for a hamburger menu in general. Especially not one that’s larger than your footer. Oh God, the footer and hamburger menu have identical links.
The saddest thing about hamburger menus is that, in most cases, the navigation links could be more conveniently placed in a simple navbar. In this case, those six groups of links could be a drop-down menu. It’s a waste of potential on a website that isn’t half-bad. A sticky nav bar can even be created with nothing but CSS. So get on it, NCLCV! And you, reader, don’t use hamburger menus on desktop.
Next Stop
I’m afraid this is my last stop, but it doesn’t have to be yours. I pass off my conductor hat to you, in the hopes that you continue your journey into effective web design. Use this post as a resource when you’re designing websites, but don’t make it your only resource. There’s plenty of blogs, videos and tutorials out there. They’re just waiting for you to find them. So set forth, ye train conductor. Set forth to web design!
