Design Trends for 2017

While 2016 was an exciting year for design – there was a shift toward mobile-first design, video and rich imagery were hotter than ever, and animations became the norm – I’m even more excited about what we can expect to see in 2017.

 

A few weeks ago, Creative Director Alex Pineda and I held a webinar with CEO Joanna Pineda to talk about the trends that are emerging in 2017, and how you can give your members the best user experience possible by incorporating them into your web presence.

Curious about what’s in store for 2017? Check out our recap video:

 

Whether your plans for 2017 include a large-scale website redesign, building a brand new website from scratch, launching an app, or simply refreshing a few of your key pages, we’d love to help you incorporate some of these trends!

 

Which design trends are you most excited about for 2017? 
Elaine Heinzman

Content Strategist and Information Architect

3 Last-Minute Holiday Tech Gifts

We acknowledge that it’s late in the gift-buying game, so if you procrastinated on your shopping for Christmas, Hanukkah, Kwanzaa, and/or Three Kings Day, Matrix Group has got you covered with three options for the gadget geek in your life.

Nixplay Iris digital picture frame

The Nixplay Iris is a sleek, high-resolution digital picture frame that you can update from your smartphone. It connects to Dropbox as well as the major social-media and photo-gallery platforms (Facebook, Instagram, Picasa, Flickr).

If your parents love to see the most current photos of their grandkids, you can use the Nixplay Mobile app to update the images they see on their Iris. Bonus: Click the Nixplay link above for a voucher code to get free delivery in time for the holidays.

 

Nonda ZUS phone charger and car locator

The Nonda ZUS looks more like something out of the new Star Wars film than a phone charger, but it has another, even better superpower: It automatically saves your car’s location whenever you park.

Are you the kind of person who can’t remember where you left your car? Use the ZUS app to find your vehicle, and connect your phone to the ZUS so your phone can recharge. 

Rocketbook WaveThe Rocketbook Wave is a traditional spiral-bound notebook with some pretty unconventional twists. It comes with a Pilot FriXion pen, which you use like a regular pen to take notes (and which you can buy in office-supply stores everywhere). The Rocketbook app lets you scan those notes and upload them to whichever cloud service you use (Google Drive, Dropbox, iCloud, Evernote).

The coolest part: When the Rocketbook Wave is filled up, you microwave it to clear out all the pages and use the notebook over and over.

Sherrie Bakshi

Director of Marketing and Social Media

Google’s New Mobile-Friendly Algorithm Rolls Out Today

Google rolled out its NEW mobile-friendly algorithm today.

Why is Google doing this? The world is mobile. With an estimated 63% of American adults using their phones to go online (Pew Research Center), Google, the world’s largest search engine, wants companies to get serious about their mobile strategies. Internet search concept

What does this mean? When searching on your devices, Google will highlight mobile-friendly in the search engines. More importantly, mobile-friendly websites will rank higher in mobile searches.

How does this impact your organization’s web strategy? For one thing, if you don’t have a mobile strategy, it’s time to get serious about one. It’s also a good time for those with mobile strategies to assess them.

Here’s how:

  • Start with your own analytics. When reviewing your analytics, go to Audiences>Mobile>Overview. You can see from what type of device visitors are accessing your website. To gather a sense of whether or not traffic has climbed among mobile devices over a specific period, simply select the “compare to” in the calendar box (top right hand corner) and adjust dates. You can customize the dates based on specific periods.
  • Use the mobile-friendly test tool. This tool crawls individual pages on your website and lets you know if a page is not mobile-friendly and why.
  • Make your current website responsive. These days many content management systems, including Sitefinity and WordPress, offer responsive templates to help web developers convert desktop sites to responsive.

Finally, if you haven’t redesigned your website in a few years, make sure that you budget for a responsive website.

Hassan Elhassan

Front End Web Developer

Tools to Test Your Website on Multiple Devices

A mobile marketing budget is imperative. While 2014 was considered the year of the mobile, imagine what we will see in 2015!  Matrix Group Creative Director Alex Pineda recently shared that one of the top design trends to watch out for in 2015 is the expansion of responsive design with the explosion of mobile devices with different screen sizes and resolutions.  What does that mean to you? Image of various devices showing website

Over the last few years, when it came to designing websites, we built and tested sites on phones, desktops and tablets with similar screen sizes. That’s no longer the case! With multiple devices ranging in different sizes and screen resolutions, you want to make sure you test your site in different devices. There are many tools available out there to do this, but our front end developers have a few that they prefer:

Google Chrome Device Mode & Mobile Emulation: Our primary way of testing and building websites, this tool not only allows us to test the site based on device, screen size and resolutions, but allows us to test the functionality and performance based on specific situations:

Responsinator.com: The site lets you view your site in multiple devices and sizes. Test your current site and see how it looks.

Responsive.is/: A critical thing to look at when testing the responsiveness of your site is the typeface and size. This site is a great resource to use to test your website.

What resources do you use to test your websites?  Share them with us.

Jaime Quiroz

Front End Developer

Building a Responsive Navigation: Big navigation on small screens

UI problem solving on mobile devices can be quite a challenge when it comes to navigation. A simple Google search for “Responsive navigation” will yield countless possible navigation formats that web developers have used so far.

We’ve recently taken on some responsive projects where we had to make some fairly large navigation work on mobile devices as well. One site in particular is The Catholic Health Association of the United States: http://www.chausa.org.

A long vertical navigation accessible through scrolling is what we aimed to accomplish in this case, allowing the user to navigate to just about any page on the site right from the home page.

Taking this a step forward, I’ve set up a demo of how this concept can work with an expanding navigation.

The main thing about approaching this setup is using a fixed navigation behind the content with an overflow-y: scroll rule. No third party JavaScript plugins required (other than jQuery) to add or remove some classes and handle the toggle of the sub menus.

The scrollbar itself is hidden by the overlapping content that’s pushed off to the right.

By toggling a class on the body, the content gets pushed aside to reveal the hidden navigation. The content doesn’t fully leave the page but remains somewhat visible for two reasons:

  1. It slightly overlaps the navigation behind the content and will hide the unwanted scrollbar from view
  2. it serves as a trigger to pull the content back into full view when clicked on

Since we are dealing with big navigation in this example, the content is fixed on the screen and does not scroll along with the navigation. Doing it this way makes it less distracting for the user. It also ensures that it stays in view in the event that the navigation becomes longer than the page itself.

No JavaScript is involved in the sliding of the content away from view, it’s just a simple CSS transition on the ‘Left’ property of the content container.

The +/- button is used to reveal additional sub menus in the navigation. This treatment gives the user two options on a given item with sub menu. They can:

  • click on the text to go to its landing page, or
  • click its expand button to see additional options within that section.

 

Have you worked on a big project optimized for mobile? Please share if you have!