Happy Holidays!

First and foremost, I would like to wish all of Matexperience readers a Merry Christmas and a Happy New Year! Hopefully, 2019 was great for you and your mate brought you a lot of joy and comfort! It certainly was for me, and despite having a couple of unexpected setbacks that prevented me from publishing more content, overall the first full-fledged calendar year of Matexperience brought a lot of good things.

I hope that 2020 will bring you more great experiences with yerba mate, and in the meantime, I want to share with you some of the new changes that happened on our website over the last few weeks that you may have already noticed.

New improved search

One of the main changes that I wanted to make for quite a long time was implementing a fast real-time asynchronous search that makes navigating the website even more convenient. Now you can easily search any article on Matexperience by pressing the magnifying glass icon in the top navbar and typing what you’re looking for.

Results will appear immediately as you start typing. By default only the top 3 results are shown immediately, with more available by pressing Enter on your keyboard or a button under the results.

Google Custom Search was never great

Since Matexperience is a static website, I didn’t have a lot of choices when it comes to a website search implementation. For a long time I used Google Custom Search (GCS) as a search provider, since it was very straightforward to implement. However, GCS comes with a lot of drawbacks — it’s an old and heavy technology that does not give a lot of customization options to make search really convenient and useful with features like autocomplete. The other big drawback was a platform dependency, which means that all the pages of the website should be successfully indexed by Google in order to appear in search, and Google likes to always tinker their algorithms and criterias.

Faster and more convenient solution

The new search is powered by Fuse.js — an open source lightweight library that allows to build a much faster, real time search solution that is easily customizable, gives us full control over what pages are indexed and how they are indexed. Fuse.js ticked all the boxes and turned out to be much more convenient for use and implementation.

Mobile redesign

Matexperience was always mobile first, and I never needed to redesign how website looks and navigates on mobile devices. However recent trends show that hamburger menu is slowly becoming obsolete. Phones are getting bigger and taller, and reaching that hamburger at the top is getting harder with a single hand. With the release of buttonless iPhone X and Android 10, navigation on mobile devices is becoming more and more gesture-based, so pulling the hamburger menu from the side is also quite problematic on newest devices.

Introducing bottom navigation

Hamburger menu is now replaced with bottom navbar. Chances are you have already seen similar navigation design in many mobile apps, like YouTube or Reddit, so it should not be hard to get used to new mobile layout.

Bottom navigation makes it easy to browse the website with one hand, no matter what size is your mobile device. In order to compensate some of the screen real estate taken by two navbars, they become hidden during scroll down and visible on scroll up.

Refreshed look

Website and logo has been given a visual refresh — I felt that our signature purple and green colors needed more contrast and pop to make them stand out against each other and make them more catchy.

Homepage has also been given a redesign to reflect some of the values, missions and goals of Matexperience as well as to serve a purpose of introducing new people to our website and make it clearer to understand what it is all about — discovering yerba mate, and sharing our knowledge, experiences and passion with the whole world.