Creative Solutions and Digital Designs since 2010

A3 Creative Solutions The A3CS Blog

Stories, Tips, Tricks and Trends

The A3 Creative Solutions Blog

Responsive Website Design Trends for 2017


Blog postedPosted on January 23, 2017 by Aaron Macdonald

A3 Creative Solutions made a trip down the coast this past November to the annual Adobe Max Creative Conference. This worldwide conference brings over 10,000 creative minds together to learn new skills, stay up-to-date on the latest trends and technologies, be inspired and network with some amazing people! In the blog article below, we dive deep into what the upcoming trends that will help shape, and may be applicable for the 'Modern Web' moving into 2017 with a short-list that can help you increase sales, improve user experience, and help search engine ranking.

DEVICE AGNOSTICISM

Big words...we know...

Trent Walton, an amazing developer writes about Device - Agnostic (source).  In his article, he describes taking a 'Device Agnostic' approach to all website design and development, which takes into account infinite combinations of screen sizes, screen resolutions, input methods, browser capabilities and connection speeds.  

The key to this approach is to zero in on the following nuances: Hostile Browsers, Tiny Screens, Slow Connection Speeds, Touch Inputs and Offline Browsing.  Let's take a quick snapshot of each of these:

Hostile Browsers: No browser is created equal! This is even true with modern web browsers like Edge, Chrome, Safari and Firefox! We still have to design for those using IE6 (even though Microsoft has stopped all support this browser, and IE7).  Unfortunately, these older, outdated browsers don't bode well in the age of modern web design, but we still need to give these users some sort of experience.  While this is still a hot topic, and some could argue that we should just simply not design for these older browsers, or browsers missing plugins, or browsers that have their Javascript turned off, the problem is that in some cases, it is the users choice on what browser they are using, and there could be infinite reasons for not upgrading their browsers.  All we as web designers can do is to serve up the best user experience as possible, and progressively enhance the experience from there.

Tiny Screens: Simply put, we need to keep consistent experiences for any screen size, orientation or device.  From form inputs to buttons for fat fingers, our mission is to deliver the same content from a 27" screen to a 2" screen in some form or fashion.

Slow Connection Speeds: Typically as web designers, sitting in our plush offices with uber-extreme high-speed internet connection we often forget that users may not have the same web surfing experience as us.  So, what do we do? We need to look at the value of content on each page, and ask ourselves, how do we deliver this content to someone with a 56K modem speed and someone with a 1000TB (lol!) wifi speed?

Touch Inputs: Touch screens are here to stay.  From mobile touch to desktop touch screens, we need to take into account larger fingers for "touching" active areas of the site such as navigation, buttons, etc.; how the site scrolls, screen zooming (or not zooming), when to replace 'mouse' clickable navigation with touch navigation and more!

At A3 Creative Solutions, we make every effort to build a website or digital experience with the end user in mind.  With almost 2.8 billion people on the web now, we cannot just expect that everyone is on the latest browser, fastest terminal, are using extreme-high-speed internet and have limitless wireless connectivity.  While accounting for all user types may seem unrealistic, it is possible, and our goal with every website we develop.

If you are interested in discussing this approach further, please contact us!


MOBILE FIRST APPROACH, BUT...PLEASE DON'T FORGET ABOUT THE BIG BOYS (Big Screens!)

For the past several years the approach to Responsive Web Design was focused almost solely on designing with a "Mobile-First" approach - meaning - start your designs on the smallest device possible for a great user experience, and so on. While this is still a very important approach, since, according to most Marketing Statistic Reports - 80% of users are viewing websites on their smartphones (source), there is also an increase of large monitor sizes including the iMac27 and Microsofts new Surface Studio, Retina-based (or higher resolution) screens, and Media Streaming on 32"+ TV screens, we simply cannot forget about larger screens!

The larger screens and higher resolution screens offer even more opportunities! Most web designs follow a grid based system with a "max-width", meaning the contents of the web page will only expand to that max-width size, which is typically around 1200-1400px in width.  This leaves almost 30-40% unused screen real estate (left and right) which should be used for content.  If you are looking at a web page, for instance on an iMac27" screen I bet you can probably see a nice chunk of white space on the left and right side of the website template - why not design right to the edges!

So, it's time to look at the entire website and yes, build for that 320px width old-school smartphone screen, all the way to the 65" 4K TV Screen size! Use up all possible screen "real-estate" and remove those "max-width" constraints!  Furthermore, with the larger screens, we can also offer up more content, for instance, a few more blog articles, or a few more products to view or larger product images... the list goes on!


BUILD YOUR WEBSITE LIKE A BOOK, FOR A BETTER USER EXPERIENCE

This particular trend made perfect sense, and couldn't be more obvious in our opinion, but can be overlooked in some senses.  Take a book, for instance, you wouldn't read a book title near the end of the book, or the chapters headline half way through the chapter? The same can be said about website design. A website needs to be built structurally sound with the user in mind.  Start with the Title (the Logo or Name of Brand/Company), Index (Navigation), Chapters (pages): and within the pages you have your Chapter Headline (Heading Tag), any Sub-Headlines (Sub-Headline Tags), and the Body of the Page! And in case your site has multiple pages of the same content, some pagination for guidance.

While we are not experts in SEO / SEM (we can refer to you some amazing local SEO experts), we do know how to build out websites for the basics of SEO, and build progressively for a better UX. Have you noticed that a lot of browsers have a "reader" tool, where it basically strips out all page styling and basically turns your web page into a page of a book? These work especially well if your website is set up using a solid structure as mentioned above. Conversely, try viewing a web page using the reader tool on a web page that isn't set up well, it would certainly look like a poorly written book!


BRANDING CONSISTENCY (stating the obvious) BETWEEN PRINT & DIGITAL

This one seems pretty obvious, but more often than not we see a company advertisement or a company brochure that looks nothing like the website design (different colours, fonts, visual identity)! It's important for your customer to see consistency in your brand! Visual consistency allows people to consciously remember your brand.  With the design software available nowadays, there is little to no excuse to not keep your branding consistent on all mediums.

So, while this obvious trend should simply be a given, it is not.  At A3 Creative Solutions, we make every effort to help your brand succeed with visual branding consistency!


TALK TO YOUR WEBSITE - START PREPARING FOR VOICE RECOGNITION

Yup - you heard it correctly!

Talk to your website, tell it what to do! This is going to be happening quicker than you think! There are even a few Javascript Plug-Ins which will integrate your computer's speech recognition with your websites search, navigation and also further enhancing your websites verbal dictation -  while verbal dictation is already available, perhaps looking at having your websites ask the users questions if they are paused on a page for too long - ie. "I see you are stuck on this page, is there anything we can help with".

The first phase we see will be simple plug-ins to add to your site. The second phase will be some sort of AI, or user-learning algorithms. Hmmm.. sounds a little like Skynet!  

 

AMP (Accelerated Mobile Pages)

Users today expect mobile websites to load super fast. The reality is that it can often take several seconds. It is no surprise that 40% of people abandon a website that takes more than 3 seconds to load. To reduce the time content takes to get to a user’s mobile device Google started working on the Accelerated Mobile Pages Project, an open source initiative to improve the mobile web experience for everyone.

Accelerated Mobile Pages are HTML pages that take advantage of various technical approaches to prioritize speed and a faster experience for users by loading content almost instantaneously.

Later this year, all types of sites that create AMP pages will have expanded exposure across the entire Google Mobile Search results page, like e-commerce, entertainment, travel, recipe sites and many more.  Source - Google Webmasters


MAKE YOUR WEBSITE AVAILABLE OFF-LINE!

Another hot topic is how your website can be viewed when the user is not online. While this is not new, it is something that is being explored in more details, is the use of 'Web Service Workers'. As described by Google, a Service Worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.  These service workers work even when your website is not open.  The reason for this, is that it allows you to support offline experiences. While typically Service Workers are being used for Web APPS, they can also be applied to websites.

 

FOCUS ON ORIGINAL IMAGERY AND LESS STOCK IMAGERY!

We love Adobe, and we love all of the new progressive, forward-thinking software they provide. Including all of the new add-ins like Libraries, Swatches, Patterns and Adobe Stock.  However, Adobe Stock, like Shutterstock and many other 'Stock Photography' programs out there, they offer up quick and easy photos and assets for our clients, allowing for a quicker site development, as most often our clients don't have time or the budget to shoot their own photos.  While this is a simple and cost-effective option, what happens when you see the same image you used on your home page slider, on another website, or worse off, a competitors site! Welcome to the wonderful world of 'Stock Photo Clash'!

There are so many wonderful photographers that we work with, while they may not fit with your 'stock photos' budget, nothing beats owning your own photos! Taking pride in proper photos that you contracted a photographer to take for you based on your spec! Business Owners should pay more attention to this one, and account for this in their project planning budget!

If you are interested in having professional, high-resolution photos done, please contact us and we can recommend the perfect photographer for your photo needs.


TYPOGRAPHY IS AN ART FORM - BIG, BOLD TYPEFACES & WEB FONTS!

The web offers up so many more options for Font Faces now! Adobe Typekit and Google Fonts are just two services that provide the ability to inject creative font styles into your site design.  We see bigger, bolder typefaces making a bit impact moving forward used for headlines and captions.  Typography has always been an art form in Graphic Design, and now you can bring creative typography to your website!


VIDEO - YUP!

Full-Screen, auto-play, videos with overlay patterns, interactive videos and more! Videos are making a huge impact on web experiences and will continue increase in popularity over the years.  With YouTube being the #2 search engine, business owners need to start taking videos more seriously. As developers, we need to increase the use and creativity on how videos are being presented, making sure they don't impeded the end-users experience (i.e. load times, browser compatibiliy, etc.).


POSSIBLE DEATH OF THE HAMBURGER MENU

No, say it ain't so! The little off-canvas or dropdown mobile menu that looks like a hamburger! LOL! It's just been overused (we are guilty of this as well) - time for a new design, or whole new approach to mobile menu icons.  We see more click animations, a different design style... but alas, it might be time to throw that chewed up Hamburger in the recycle bin! 


As mentioned, this is just a shortlist, pulled from various sources! Of course, your website should suit your client base and your brand's identity! These are just meant to inspire you! 

For more information or if you have any questions about the info above please contact us! 


Sources: Adobe Max 2016 // Google Webmasters // Trend Walton

Top