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.
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.
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.
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?
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.
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 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:
It slightly overlaps the navigation behind the content and will hide the unwanted scrollbar from view
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.
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!
We all know that Google+ has not had nearly the same popularity as Facebook, and there are 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.
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?
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.