By Lucas D. Arnatt, Web designer
When I started web designing back in the fall of 1997, “web patterns” were really just emerging and becoming established as the tried and true foundations of successful design. Responsive web design wasn’t even a concept then. I worked with a Web media company in 1999 in downtown Calgary. We focused on building scalable websites. “Scalable” meant that the website would expand out to larger desktop screens, with our base resolution width of 640px. Building and testing all of those resolutions was about as much fun as trying to get ANY site to work properly in Netscape 3 or IE 3! But there is also such a joy felt when all of the pixels lined up as they should.
While building a website to accommodate the various viewer platforms and devices can be a painstaking process, the end goal is worth it: A better User Experience.
And a better User Experience leads to a better Brand experience, which is what we are, as businesses providing products and services, hope to deliver.
There are always the latest web design trends making headlines and causing discussions in forums and social media groups. Each year a particular font or effect will make its way through newly created (or redesigned) sites. But behind these passing fads and trends remain a lot of common sense design approaches that are still valid today.
With the wide variety of mobile screen resolutions to contend with, CSS3 and above have been a godsend to designers, providing a fluid and manageable way to control different layout versions of the same content.
So now in 2015, we are enjoying the freedom of mobile technology and design seems to be evolving at a similar pace to provide the best user experience possible.
Check out this interesting article by Jeremy Girard about 8 responsive web design trends that defined 2015.
I am including the eight trends below, but please note these are my comments, not Jeremy’s, below each numbered title:
These 8 trends include:
1. Captivating storytelling
Yes, if one thing all media teaches us is that it is the story that matters. It engages, it conjures up images in the imagination and it can sell any idea if done well enough. Girard notes that it is important to tell the story above the fold. Many designers may focus on just making sure the main navigation, logos, and titles are above the fold, but making sure the immediate impact and engagement with the story’s characters is strong enough to stick. He also notes that making the story easy to share for the reader is of utmost importance in this day and age of social media audiences.
2. Less is more
This is one of our company’s design mantras for both print and Web. Keeping design clean and properly spaced can in itself define a website’s subtle, but powerful, presence as an authority in its niche. Quantity is relative to a certain degree when it comes to a successful website, as we have seen all varieties of content length and page counts from simple video sales pages and landing pages to extensive articles on super-specific topics.
You have to first define the need of the user, what it will take to convince them to trust you and then provide the solution based around what you can give them. This is why video sales letters are so popular and successful; they provide everything above the fold, simply, cleanly and effectively.
3. Patterns everywhere
Girard notes that with the advent of responsive web design, new patterns have begun to emerge. This is definitely true, including new ways to compact navigation, image scalability, hierarchy control of content blocks all making sure the User Experience is first and foremost. Google has started to penalize sites to some extent that are not considered “mobile-friendly”. Here are some layout patterns from Google’s developer website.
4. Card layouts
This type of layout made popular by Pinterest focuses on one block of content. For example, a product, a single photo (meme), etc. that can be more easily arranged among other similarly composed content blocks. This facilitates the Millenial ability to share content across social media channels.
5. Hidden menus
As I mentioned before, navigation has had to adapt to small screens, so long horizontal menus are sculpted into small square icon capsules that you can pop open when you need to. A click to get to any navigation isn’t ideal, but it is a relatively small price to pay for an otherwise intuitive solution.
Girard mentions that some argue against these menus for that very reason of having to make an extra click (if they recognize the new menu icon at all) and that they are less used than visible full menus. Yes, but as with any new pattern, it will take the global audience a relatively short time to adapt as more and more web sites use this type of navigation.
6. Big hero images versus no hero images
A hero image spans the full width and height of a user’s screen creating instant impact and strong visual engagement (or strong repulsion if the image backfires). They are part of the evil parallax designs that (to me) are all bark and no bite. Google always is stressing the importance of quality content.
Don’t get me wrong, I can see the appeal of parallax designs to both designer and client. It’s BIG, it’s BRANDING IN YO FACE BIG. But how useful is it to the end user if they struggle to find the content they are looking for, scrolling (seemingly) forever down the page, loading full screen image after full screen image separated by a minimum of a 60px heading that says something impactful, but meaningless at the same time all the while taking ages to load as all of the “content” is strung together as some contrived story that trails off to a basic footer with a massive phone number in a 300px font at the bottom: “CALL ME!” It can also be a lazy way to optimize for multiple screen resolutions simply because there is very little content to contend with.
Girard compares the advantages of Big hero images and No hero images. Both have their place of course and I agree that 2016 will continue to see both used judiciously aaaand not so much.
7. Rethinking advertising
He makes a good point that, as advertising on a website revolves around ad size and placement, the need for responsive web design challenges this static approach. Girard doesn’t give a solution here for this new need, but I think that we can simply look at how Social Media giants are developing solutions. They do incredible amounts of testing across many demographics so any design company or marketing team can benefit just from keeping up with, and making use of, the likes of Facebook, LinkedIn, Twitter, etc.
8. Improved workflow
With all of the challenges of scalable responsive design facing a designer, I have to say it is nice that this challenge is being met by advanced prototyping design software that allows for quick and easy multi-platform development. Girard refers to UXPin, which looks like a great solution for designers in 2016.
He also offers some “next steps” at the bottom of the page, which you should definitely check out.
The user experience of any web presence in 2016 will still depend on the key elements of quality content backed by strong, supportive design elements and frameworks that allow the message to be conveyed consistently and effectively.
Learn more about our responsive, mobile-friendly web design services.
You can also read the top 21 responsive web design statistics on our latest blog post.
Get a free, no-obligation website audit that takes into consideration these factors (and more), or if you are starting a new website or branding project, just fill out this request form.
