Mobile Friendly.Find out all about it.Mobile Friendly vs Mobile Optimized vs Responsive Design: What You Will Need To Know About The Mobile Version of Your Website
Making a website mobile ready is Pretty high on the request list for companies and organizations creating a new site. However, there are a flurry of terms surrounding cellular. Mobile friendly, mobile optimized, and a newer term: reactive design. What’s the difference between them? Why is it important?

In fall 2012 Peter Sondergaard, Senior vice president at Gartner, a world-wide IT investigation and research company, projected that by 2014 there’ll be more web browsing from mobile devices than on traditional desktops or laptops. We have seen our own clients’ site analytics for mobile users jump from an average of 5-8percent in 2010 to 16-20% in 2011. 2012 is showing a similar increase. There’s absolutely not any doubt that mobile cannot be ignored.

With mobile devices ranging from Handhelds to tablets, understanding how your site will display on the variety of formats is critical. When terms like cellular friendly, mobile optimized, and responsive design appear in development discussions, you’ll know the difference.
MOBILE FRIENDLY WEBSITE
Mobile friendly refers to a Website That displays accurately between your desktop/laptop computer and a mobile device such as a handheld phone (iPhone, Android, Blackberry) or tablets (iPad, Kindle, Galaxy, etc.). While it will appear smaller on a telephone and might not work perfectly on a touchscreen tablet, a mobile friendly site will be perfectly functional. Many developers view mobile friendly as a”best practice” for all website developments.
Ensuring Your Site is mobile Friendly is crucial. As we discussed above, the percentage of mobile users is quickly rising. What are the essential features of a mobile friendly site?

Text-based telephone numbers, physical addresses, or email Addresses that can activate a call, directions, or email message from your mobile device
Slideshows or image rotators that operate without Flash support (Adobe Flash is not supported by Apple and a few other mobile devices)

Small image sizes to allow for rapid loading over Mobile connections–do not count on even a 3G connection

Here are some examples of mobile friendly websites:

MOBILE OPTIMIZED WEBSITE
A mobile optimized site is a far more advanced website. Mobile optimized means that the site will reformat itself to get a list of handheld or tablet devices. Larger navigation buttons, reformatted content, and otherwise optimized images appear if the user is on an iPhone or other apparatus.
Why reformat? Reformatting allows The site to readily engage a large cellular audience when key purchasing decisions come up. A growing number of consumers are turning to their mobile devices right from the shop. Having a site developed that allows the user to easily navigate and engage from the little screens of their handheld means reaching a decision quicker.
What are some Great formatting Elements that go into a mobile optimized site?
Simplified navigation which is”thumb” friendly with Large touchpoints, especially for critical contact info
Reduced graphics that don’t disrupt the quest for Critical details such as product listings or commoditized content
Avoid making users type unless absolutely necessary

Give users the option to view the desktop version of your site
Here are some mobile optimized Sites worth checking from your handheld:
RESPONSIVE DESIGN WEBSITE
As website design continues to Evolve, a fantastic form of development has come into play. Reactive design is a method of developing a site that is totally flexible regardless of device. As opposed to detecting a particular browser type or device type, the website automatically orientates itself depending on the screen size of the apparatus. A combination of reformatting and re-optimizing the website as a whole give a sensible flexibility beyond imagination.

Responsive design, while more Expensive to develop, is the wisest development investment if you’re dealing with a consumer or audience-base that is busy on mobile devices or need to make purchases on the go. Impulse purchases are obvious, but this is equally critical for commodity content such as blogs or news outlets.

WHAT ABOUT SMALL BUSINESS AND MOBILE WEB?
Mobile browsing–from tablets to Smartphones–is growing at an unprecedented rate. The consumer’s passion for immediate gratification of their informational needs requires effectively delivering your product (physical or intellectual) through the mobile web.

What about small business or a non-profit organization? Is cellular friendly good enough? Should an organization discuss a mobile optimized version? Will investing in a responsive design site bring a measurable return?
Exceptional questions with answers only you can provide. Every situation will be different, but give serious idea of what percent of your website visitors are on mobile devices? Google Analytics will tell you. What does your current site look like? Pull out your smart phone and find out.
If your eyes just flickered over To your smartphone and you don’t know the answer…that may already be your answer.
Mobile Optimization

Mobile optimization is the process of ensuring that visitors who Access your website from mobile devices have an experience optimized for your device.
What is Mobile Optimization?

Every year people spend more and more time in their mobile Tablets and devices, but many websites still aren’t made to account for different screen sizes and load times. Mobile optimization requires a look at site design, site structure, page rate, and much more to make sure you’re not inadvertently turning mobile visitors away.
Mobile SEO Best Practices

If your site is already well optimized for search engines, there Are just a few additional things which you need to consider when optimizing for mobile devices and Google’s move to mobile-first indexing.
Page speed
Because of hardware and connectivity issues, page rate is even More important for mobile users than desktop users. Beyond optimizing images, you will want to minify code, leverage browser caching, and decrease redirects. More info on page speed is found on our SEO Best Practices for Page Speed page.
Don’t Block CSS, JavaScript, or images
In the old days, some portable devices couldn’t support all of These elements, so webmasters of mobile sites blocked one or all three. However, for the most part that’s no longer true, and the Smartphone GoogleBot wants to have the ability to see and categorize the identical content that users do. So don’t hide it. These elements are also vital to helping Google understand if you have a responsive site or a different mobile solution.
Site design for mobile

Mobile devices are simplifying and revolutionizing the ways sites are designed. “Above the fold” no longer has meaning in a world where we scroll endlessly

Don’t use Flash
The plugin may not be available in your user’s phone, which Means they’ll miss out on all of the fun. If you wish to create special effects, use HTML5 instead.
Don’t use pop-ups either

It can be difficult and frustrating to try and shut these on a mobile device. This might result in a high bounce rate.
Design For the fat finger
Touch screen navigation May Lead to accidental clicks if your Buttons are too big, too small, or in the path of a finger that is trying to get the page to scroll.
Optimize titles and meta descriptions

Remember that you’re working with less display space when a user Searches with a mobile device. To show off your very best work in SERPS, be as concise as possible (without sacrificing the quality of the information) when creating titles, URLs, and meta descriptions.
Use Schema.org structured data

Due to the limited screen area, a search result with rich Snippets is much more likely to stand out than on a desktop. Read more about Schema.org structured data.
Optimize for local search

If your company has a local element, remember to optimize your Mobile content for local search. This includes standardizing your name, address, and telephone number and including your city and state name in your site’s metadata. More info on local SEO can be found here.
Mobile site configuration
Probably the most important decision you will make when setting up A site is deciding whether you want to use a responsive, dynamic serving, or different site configuration. Each has its advantages and disadvantages. Google prefers responsive design but supports all three choices as long as you have set them up correctly.
Responsive web design

Responsively-designed websites use CSS3 media queries to serve the Same content to mobile and desktop users using a fluid grid and a flexible layout to automatically adapt to the size of a user’s display.
Responsive designs use media queries to target the design based on screen width, orientation, and resolution. For example, you could use the following CSS to teach browsers how to display content to get a screen that is 420 or fewer pixels wide:
Code Sample

@media screen and (max-width: 420px)
.class
[styles for This course here]

And to link to a separate stylesheet instead, place the following HTML in between your tags:

Code Sample
=”” type=”text/css” media=”screen and (max-device-width: 480px)” rel=”stylesheet”>

Responsive designs Let You have a variety of these media Queries so that consumers on miniature mobile screens, larger-than-average mobile displays, and even tablets can all see a site that looks designed for their devices.

Use a Google’s Mobile Testing Tool to confirm that your website is optimized for mobile.
Dynamic serving
If you don’t have the tools for a complete site redesign or Want to display different content for mobile visitors than you do for desktop ones, one alternative would be to use one URL to display unique sets of HTML and CSS based on what type of device your visitor is using (also called detecting user agents). This may be useful, as an instance, if you’re a restaurant who wants a mobile visitor (who may be drifting your neighborhood) to find a sampling of testimonials and a map to your location rather than your full website.

Displaying different content based on the user agent is known as Dynamic serving and it is done using the Vary HTTP header, which looks like this:
Vary HTTP Header

GET /page-1 HTTP/1.1
Host: http://www.example.com
(. . .rest of all HTTP request headers…)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(… remainder of HTTP response headers…)
Example in the Google Developers Blog.

Simply put, this means that the content displayed will vary Depending on the user agent requesting the page.

Dynamic serving is not the perfect compromise that it might look to be. For one, it relies on having an updated list of user agents, meaning every time a new mobile device comes to market that record needs to be updated. And it’s not unusual for desktops and mobile devices to be wrongly served with the HTML for the other device. Read more about common pitfalls.
Separate mobile URL

Another option is to create a second, parallel site for mobile users. This lets you create completely custom content for mobile visitors. To avoid URL confusion, most parallel mobile sites utilize an”m” subdomain.
Parallel cellular sites can be as imperfect as dynamic serving Sites at sending visitors to the perfect version, so be sure to make it simple for visitors who end up in the wrong location to click over to their favorite experience.
You will also want to make sure that your site redirects are all in place and as Lean as possible to decrease page speed. And to avoid duplicate content issues, you will need to set up rel=”canonical”.
SEO Basics: How to improve your mobile site
Here’s the thing: your site should be mobile-friendly. In actuality, this could just be your number one priority. If you wish to improve your mobile search engine optimization , you must improve the performance of your website, plus you need to be certain it offers users an superb mobile experience. In this SEO basics article, you’ll find a summary of what you need to do to improve your mobile site.
When is a website mobile-friendly?
A site is mobile-friendly when it:

loads properly on a mobile device like a Smartphone or tablet,

loads lightning fast,
Presents content in a readable fashion, without Users having to pinch and zoom,

Offers ample room to navigate by touch,
Offers added value for mobile users,

is instantly understandable for search engines.
Why is mobile SEO important?

Mobile SEO makes sure Your mobile site gives the best possible presentation of your content to a mobile device user. Since our world is increasingly mobile-oriented, it has become imperative that your site is mobile-friendly. If your site isn’t, or not correctly, available for mobile users, you are going to lose out on a decent ranking in the search engines and thus miss income. Therefore, you ought to do everything in your power to make the mobile version of your website as good as possible. In actuality, it ought to be excellent!
Since the beginning of This year, Google uses the mobile version of the website to ascertain its rankings. If your site isn’t up to scratch, or if you present less content on your mobile website, you will have a difficult time getting a good ranking. If you don’t have an adequate cellular version of your site however, you best make a fully functioning one, rather as a responsive design. Google has a excellent getting started manual to get you going.
How to improve your mobile website
To improve your Mobile SEO, you want to focus on a few things:
Make sure your site is responsive

Improve your site speed

Do not block JavaScript, HTML and CSS code
Do not use interstitials or pop-ups
Don’t use too many redirects
Choose the correct viewport
Verify mobile-friendliness
Tell Google about your site
Responsive design
There are multiple Ways to make your site available for mobile users. The most important one is responsive design, and this is the tech Google advocates. With a responsive design, your site lives on a single URL, which makes it easier for Google to understand and index it.

If you use WordPress, Odds are your theme is already responsive and can adapt to all displays. Be sure to check how your website scales in Google Chrome’s Developer Tools. If it does not scale correctly, you should speak to your web developer about fixing it — or pick a different theme.

Improve your site speed
Among the most Important things you can do to enhance the mobile SEO of your website is to enhance the loading speed of the website. Time and time again, studies show that people leave sites that load slowly, often never to return again. Speed has been a ranking element for many years, and Google is increasingly focusing on fixing this common issue.
Optimize images
If There’s one quick Win to improve your site speed, it is this: optimize your images. Do not load those 3000 x 2000 pixel HD pictures on your site. Scale them to the proper size and make them smaller using a tool such as ImageOptim or WordPress plugins such as WP Smush.
Minify code
Every request your Site must make has an impact on site speed. You’ve got to work on reducing these orders. 1 way of doing this is by minifying code. This means that your group and concatenate assets like JavaScript and CSS, and because of this, the browser has to load fewer documents, leading to a faster site. This sounds difficult to implement, but a plugin such as WP Rocketcan take care of all your caching requirements.
Browser caching
By using browser Caching, you’re telling the browser which page elements that don’t change frequently can be stored inside its cache. In this way, the browser only has to download new and dynamic content whenever it visits again. Again, this is something a plugin like WP Rocket can assist you with. Or you can also do it yourself if you prefer .
Reduce redirects
A redirect leads A visitor from one page that is requested to another, because the requested page was moved or deleted. While this leads to a fantastic user experience if done well, the further redirects you use, the slower your site will be. Don’t make endless redirects. Also, try not to keep links around that point to deleted posts that are redirected to new ones. Always make direct links.
Don’t block resources like JavaScript, HTML and CSS
We’ve said it before, And we’re going to keep saying it: Don’t block resources like JavaScript, HTML and CSS. Doing so makes it harder for Google to get your website and that could lead to bad rankings. Check your Google Search Console to see whether you’re blocking tools.
Improve legibility
Make sure that your mobile site is perfectly readable on mobile devices. Use different devices to check if your typography is in order and, when necessary, make adjustments . Typography can make or break the user experience of your website.

Improve tap target sizes
Folks hate it when Their finger can’t hit a button, link or menu item without fault. Sometimes designers haven’t given sufficient thought about the dimensions of the buttons. Mobile users get frustrated when navigation is unnatural or hard. Repair it.
Choose the correct viewport
The viewport Determines the width of this webpage for the device used to see it. By specifying a correct viewport, you make sure that visitors with particular devices get the right version of your website. Fail to do so, and you may just reveal your desktop website to a small-screen smartphone user — a significant no-no.
Do not use interstitials or pop-ups
Starting this year, Google will penalize websites that use large pop-ups or interstitials to market newsletters, sign-up forms or ads. These often get in the way of the user quickly accessing the content they requested. Don’t use them, but if you must, be sure you abide by Google’s rules.
Test your site and tell Google about it
Before you start Working on your mobile SEO, you need to run a Mobile-Friendly Test on Google to see where you should start. During your work, you should keep testing to see if you make progress. If your website is optimized, you want to tell Google about it so that it can be checked and indexed. Use Search Console to remain on top of the performance of your site.
Investigate Google AMP
Accelerated Mobile Pages (AMP) is a new initiative by Google and others to find webpages to load super fast on mobile devices. By wrap your content in special HTML code, you can optimize the pages in ways that Google can use to give them special treatment. Pages are cached by Google and introduced with a stripped down presentation to be certain it gets delivered at moderate speed.
AMP is still Relatively new, but growing quickly. Nearly every website can benefit from integrating this technique. For those who have a WordPress site, it is not hard to get started; just install the official plugin. This takes care of most of the setup. You can find more information about Google’s guidelines.
Conclusion

Mobile is the future, but that future is now. Do whatever you can to fix your mobile website and make it perfect, not only in Google’s eyes, but, more importantly, your visitor. Mobile SEO is not just about great content and a flawless technical presentation, but more about creating a user experience to die for. Once you’ve achieved that, you are on your way to the top!
In 2016, the inevitable happened, and mobile overtook desktop as the main device used to access sites . This didn’t come as a huge surprise since, as far back as 2015, Google reported that more searches were conducted on mobile than on any other device category.
In many businesses, this may be conservative and, In the agency I head up in the united kingdom, Bowler Hat, our B2C clients are seeing around 85 percent of all site sessions conducted on mobile devices.
Suffice it to say, cellular has well and truly arrived. However, while responsive design has existed for some time now and is fairly well-established, the majority of sites tend to fall down on usability. That is, the majority of sites continue to be built for desktop and then dialed back for mobile. That form-fill that was mildly annoying on desktop computer is an absolute pig on mobile. Even if it’s responsive.
This is not good enough in the mobile-first world We’re rushing toward in 2017.
In this Report, I am going to look at the way you Can ensure you’re really optimizing for mobile users. We’ll look at the fundamentals of responsive page and design speed, but we will also look beyond this at user experience tailored to mobile devices. We’ll then wrap this up with a mobile optimization checklist that you can use to identify optimization opportunities.
Our goal here is to go the extra space to Create fully mobile-focused sites; to delight our customers and drive conversions; to utilize cellular optimization to develop a tactical edge over the competition. And, of course, Google wants to pleasure cellular users so we can enhance engagement and search-engine ranking variables and also benefit from enhanced SEO. Better for users. Better for search engines. Win-win.
What Google wants

At this time of year, many SEOs are looking Forward, and, referring to an SEO best practices post for 2017, Google’s Gary Illyes complimented those who
The following are three key Stats I have lifted from Google’s promotional materials that clearly illustrate the value of cellular optimization:

Today, more people search on mobile phones than computers.
People are five times more likely to Leave a site if it is not mobile-friendly.
Over half of mobile users will leave a Website if it takes longer than three seconds to load.

Because more people search on mobile than on Computers, mobile generates more page views. If your site isn’t mobile-friendly, users are less likely to stick around. And if your site is slow, they may not even wait for the page to load.
Add from the unreliability of cellular data networks Here and your site needs to be a mean, lean mobile-friendly machine, or you may not even get a shot at that client.
The mobile-first index

The complete nail in the coffin for a Desktop-first approach to sites and search is your mobile-first index. Adopting this philosophy makes sense as more searches occur on mobile compared to desktop. Yet, at the present time, ranking is still primarily based on the desktop version of a site.
When this happens, the content and links of your Mobile website, along with any other variables — speed, user experience and so on — will be the key drivers of your search engine visibility. Desktop will likely still be a factor, but it will be in a secondary capacity. Mobile first.
The writing’s on the wall here, folks — mobile Has been significant for a good while now, but 2017 is the year that it will become the key factor in your search for improved positions and conversion rates from website visitors.

The good news is that this represents a Opportunity For people who really put in the work to develop an advantage over their competition. It will take work, but climbing over this obstacle is the way forward, and doing so before your rivals will place your website in better stead.
Mobile-friendly approach
Our first focus in gaining this advantage would be to Look at just how we provide mobile-friendly content. There are three possible approaches::

Responsive web design
Dynamic content
Separate URLs (mobile site)
Responsive website design is Google’s recommended Way to tackle mobile-friendly websites and, as such, is the approach you should take unless you have very strong reasons not to.

Reactive design has been around for a while, so This is not a new concept. But, we still see sites that are technically responsive while not providing a solid experience for mobile users.
Ultimately, responsive design is just a small Part of creating truly mobile-friendly websites.
Mobile optimization

Google has a number of tools for testing for mobile usability and, beyond that, Search Console has A mobile usability report that details problems on a page-by-page level.
You should utilize these tools while developing Your new website and use Search Console to keep tabs on issues throughout the life of the site.
Search Console looks at the next mobile usability issues:

Flash usage — Most Mobile browsers do not render Flash and, as such, you might want to use more modern technologies.

Viewport not configured — The viewport metatag aids browsers in scaling a page to match a specific device.

Fixed-width viewport — This Difficulty attempts to circumvent mobile design with fixed width pages and is best shelved when a responsive design is adopted.

Content not sized to viewport — Here the page content does not fit the window, and a User must scroll. This can be fixed with relative rather than fixed widths.

Small font size — This Is a scaling issue and requires users to pinch the screen to zoom in.
Touch components too close — This is a frequent usability issue where it’s too hard to tap a given element without also hitting the neighboring element.

Interstitial usage — A Full-screen pop-up often represents poor user experience on a mobile device and is something that Google is seeking to crack down on in 2017.

These are the key technical elements that Google Is searching for and reporting on to webmasters.
Optimizing your site to remove these issues may Have positive effects on how the usability of your website is graded by Google and certainly has positive consequences for users. Again, win-win.

Mobile optimization resources:

Mobile-Friendly Websites — developers.google.com/webmasters/mobile-sites/
Mobile-Friendly Test — search.google.com/search-console/mobile-friendly

Mobile Usability Report — support.google.com/webmasters/answer/6101188?hl=en
Page speed
Page rate is significant on all devices, but it Can be critically important on mobile when users are out and about looking for quick answers. A page that may load relatively quickly on a WiFi network might not be quite so snappy on a cellular data network. 4G has delivered some great speed improvements, but policy (in the UK, at least) isn’t something that can be relied upon.
There are, however, a Selection of best practices for Improving page speed and, once again, Google has come to our aid with the PageSpeed insights tool. This enables us to easily assess how fast our pages load and get some pointers on what we can do to improve.

Page speed insights is now built into the Mobile-Friendly test:

search.google.com/search-console/mobile-friendly

testmysite.withgoogle.com/ — the more attractive front end

To show how this works, I will share Details below for a small local B2C business called Vinyl to Digital, which consented for me to use them as a case study.
Here’s the output from Google’s testmysite.withgoogle.com tool:

We Can see some obvious recommendations for technical improvements here:

Eliminate render-blocking JavaScript and CSS in above-the-fold content.
Enable compression.
Optimize images.
Minify CSS.

Leverage browser caching.

This is a WordPress site and, as such, most of These are rather simple tasks. There exist plugins that will tackle the vast majority of this without any costly development time.

We can also see an overview of page loading times Within Google Analytics in the Behavior > Site Speed report.
Here We can observe that average page load is nearly four seconds, which is above the perfect two- to three-second loading period. We can also see that almost half of this is attributed to the average server response time.
Making the basic improvements in the PageSpeed Insights instrument and finding a faster hosting spouse could probably get the loading time down to around two seconds.

The main takeaway here is that you can get Accurate metrics on loading time and clear insights on what you can do to improve things. You’ll need to customize this to your own CMS or strategy, but you can often get 80 percent of the results with just 20 percent of the campaign.
We also can’t talk about cellular page speed without considering Accelerated Mobile Pages (AMP). AMP was designed to allow the often slow, clunky and frustrating mobile web to load instantly anywhere.
Be fast. It makes your users and search engines happy.

Page speed resources:
Mobile-Friendly Evaluation — search.google.com/search-console/mobile-friendly
Website Evaluation — testmysite.withgoogle.com/

Google Analytics — support.google.com/analytics/answer/1205784?hl=en
Make the Web Faster — developers.google.com/speed/

AMP Pages — http://www.ampproject.org/