Why Your Local Business Website Needs to Be Mobile-Friendly

Are you still running your local business with a website that was designed in or 2009 or Before? If so, it’s time to update your website to meet google mobile-friendly algorithm released On April 21, 2015.

What Does “mobile-friendly” Mean?

“Mobile-friendly” means that your local business website delivers an optimum user experience, no matter what device a visitor may be viewing it from. If people who visit your site from a mobile device need to zoom in or pinch their screens in order to navigate, or if the exact same version of the site that displays for desktop computers shows up on a mobile device, then your site is not optimized for mobile use.

Why Should You Care?

US smartphone penetration is up to 75% as of the end of 2014. Late last year, mobile traffic exceeded desktop traffic for the first time. And according to Nielsen, 87% of mobile users used their mobile device for shopping activities like searching for a product or service, pricing comparisons, or brick & mortar address search.

Beside Usage, read what google says

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.

What Makes a Site mobile-friendly?

• It avoids use of software that doesn’t work on phones (like Flash). 
• It makes links and buttons large enough and far enough apart to be easily clicked with a finger. 
• It uses text that can be easily read without zooming. 
• It sizes content so there’s no horizontal scrolling needed and no zooming required.

How do I know if my website is mobile-friendly?

It is actually really simple to test your local business website and check whether it is mobile friendly or whether you need to upgrade it. I recommends the following tools:

Google Mobile-Friendly Test – this is dead-easy, all you need to do is input the URL of the website you would like to check, hit the blue “analyze” button and the tool will determine whether your site is mobile-friendly, or whether you need to make improvements. It will also show you a mobile site preview.

Google Search Console Mobile Usability Report – you can use this as long as you have signed up for Webmaster Tools. The report will list any errors in mobile usability that your site has (or report none as below…). Related: How to Fix Common Mobile Usability Issues

Mobile Responsive Design Testing – This is a cool tool designed by StudioPress for checking your mobile-friendliness. Put in your website URL and see how it looks across different devices.

How to Get a mobile-friendly Website?

If you’ve done the tests as above and found that your business website is not mobile-friendly, here are a few steps for getting your site up to scratch:

Create a Mobile Version of Your Current Site: While this is a simple way to bring your site into compliance, it requires you to have two separate websites. It can be difficult to update two sites, and users may get frustrated if they find less content or information available on the mobile version versus the desktop.

Use Mobile Plugins on Popular CMS Platforms: The most popular website content management systems — Wordpress, Joomla, or Drupal — all have bolt-on solutions to make your site mobile-friendly without needing two separate versions. Some include additional ways to customize the mobile experience to not only provide the content, but incorporate other features best used on mobile devices.

Use a Mobile-first Responsive Design: The solutions above are just stopgaps until you can redesign your site by deploying a mobile-first strategy using responsive web design practices.

Designing the site with a mobile-first approach requires planning about how it will be used on mobile devices — an exercise that helps prioritize what content goes on the site. It also begs the question that, if it isn’t needed on mobile, then should it be on the desktop version?

Responsive design furnishes the best possible experience at the mobile level but allows for enhancements to the site’s design and functionality as it increases in screen size.

Final Thoughts

If your Local Business Website is fully optimized for mobile devices, you will likely to see some organic ranking and visitors. If you want to optimize your business website for local maps ranking read my Local SEO Guide.

Fundamentals of Responsive Web Design

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Websites need to work across multiple devices, screen sizes, and browsing contexts. Web designs need to be responsive to these variables, providing an optimal viewing experience for each scenario.

This article covers Fundamentals of Responsive Web Design like screen density, fluid grids, and responsive images, as well as actual design strategies that guide you from website mock-up to testing.

Rule of Thumb:

Configure the Viewport: 

A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.

Pages optimized to display well on mobile devices should include a meta viewport in the head of the document specifying width=device-width, initial-scale=1.

Designing for multiple screen:

Designing web sites to fit multiple resolution screen size is a very important web design principle.

Most browsers in mobile devices scale down webpages to make them fit the viewport. Since we want to rearrange stuff with CSS3 media queries instead ,we prevent this by using a simple meta tag that tells the browser to use the device width without any scaling. This is the meta tag that goes in the <head>.

You can use Modernizr to add support for CSS3 in older browsers, and at the same time get HTML5 support and other stuff such as feature detection with media queries and conditional resource loading. Or – to only add support for media queries – you can include this script in the <head>.

Media Queries for Standard Devices:

A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We've rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.

If you're looking for a comprehensive list of media queries, this repository is a good resource.

Use fluid grids:

Grids provide structure to your website, while using relative units can provide fluidity to that structure. Fluid grids are defined using a maximum width for the design; whereas the grid contained therein, is defined using relative widths and/or heights, instead of pixels. This allows the widths and heights to adjust accordingly in relation to the parent container. In other words, as the size of the screen your website is being viewed on gets smaller or larger, your site will adjust accordingly.

Build Responsive forms:

Don’t hide forms on smaller devices anymore. Making a responsive form is essential to meeting mobile user expectations.

Optimizing site performance:

Website visitors expect the same type of experience on their mobile device as they do on their computers.

So now, not only do you have to think about how a website performs in various computer web browsers, you also have to think about optimizing a website for the many types of mobile devices. This is where responsive web design comes into play. Responsive web design (RWD) involves creating a site that adjusts depending on what type of device is doing the viewing. The text can be scaled down, to offer only the main text and images.

It’s important to note, though, that just because a site has responsive web design and looks good on a certain device, it does not necessarily mean that it will load faster. And just because it loads faster on a mobile device, does not mean a visitor or customer will stay on it longer.

Ways to Optimize Your Website

• Get a dedicated server
• Use a CDN
• Compress images and text

Creating flexible HTML Layout:

I've been thinking a lot about screen resolution lately and how the use of fluid width websites is the best way to accommodate all visitors screen resolutions. The alternative, static width websites, have to make a choice. You can optimize for 800px width, the lowest common denominator, and give up the use of several hundred pixels of width for users with larger screens. Or, you can optimize for 1024px and just make your 800px visitors horizontal scroll. Anything wider than 1024px is too much for static width sites, in my opinion.

I think the best possible scenario is to make a fluid width site that accomodates everyone. Here is what I think would be the "Perfect" fluid width layout:

• Works in all major browsers 
• Shrinks to 780px This accommodates users with 800x600 resolution, with no horizontal scroll! 
• Grows to 1260px This accommodates users with 1280x768 resolution and everything in between. 
• This accommodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long. 
• Sidebars are of "equal height" to the main content 
• Page content is centered for users with even higher resolutions.

Testing responsive design:

There are plenty of responsive design testing tools in the internet, you can try Google's mobile-friendly design testing tool.