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!

Kevin Tomko

Associate Director

Tech News: Desktop, Mobile Updates to Google +

You know Google+ unveiled its new desktop redesign; now it’s revamped its mobile design.

We all know that Google+ has not had nearly the same popularity as Facebook, and there Google Plus Logoare lots of theories as to why.  But it seems the Google team thought that changing the interface to a Pinterest/Facebook hybrid would help its UX and general appeal.  Getting the mobile side of it in line with the desktop version will get it into the hands of the millions who access it via their phones and tablets, a demographic that is seeing a huge surge.

How do you feel about the new Google+ update?

KALQ: A New Way to Type on Smartphones

We all know QWERTY. We look at it almost every day – if not on our computers, then on our phones.  And how many times have you thought about sharing your terrible, hilarious auto-corrected message that only happened because you were trying to type – with your thumbs – and missed a letter or two? keyboard

Enter KALQ.  It’s an app that splits the keyboard in two, separating vowels and consonants and relegating less-used letters to the margins of your thumbs’ reach. Once users get a feel for it, researchers found they were 34% faster than their QWERTY counterparts.

Developers released KALQ on May 1, 2013, and it’s only available for Android at present, but it looks pretty exciting to smartphone users who are tired of having to apologize for texting something embarrassing to their mothers.

Read pre-release articles here and here.

Have you used the KALQ keyboard on your Android phone? What did you think?