Mobile Friendly.Find out all about it.

Description

Mobile Friendly vs Mobile Optimized vs Responsive Design: Everything You Need To Know About The Mobile Version of Your Site Making a website mobile prepared is Pretty high on the request list for companies and organizations creating a new website. But, there are a flurry of terms surrounding mobile. Mobile friendly, mobile optimized, and a newer term: reactive design. What is the difference between them? Why is it important?

Informations

• Publié par: whyardsherwood65
• Publié le: 29 novembre 2018
• Nombre de lectures: 0
• Licence : En savoir +
  Paternité, partage des conditions initiales à l'identique
• Langue: English

Extrait

mobile friendly.find out all about it.

Mobile Friendlyvs Mobile Optimized vs Responsive Design: Everything You Will Need To Know About The Mobile Version of Your Website

Making a website mobile prepared is Fairly high on the request list for businesses and organizations developing a new site. However, there are a flurry of terms surrounding cellular. Mobile friendly, portable optimized, and a newer term: reactive design. What's the difference between them? Why is it significant?

In fall 2012 Peter Sondergaard, Senior vice president at Gartner, a world-wide IT analysis and research firm, projected that by 2014 there'll be more internet browsing from mobile devices than on traditional desktops or laptops. We've seen our own customers' website analytics for mobile users jump from an average of 5-8% 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 selection of formats is crucial. When terms like cellular friendly, cellular optimized, and responsive design come up in development discussions, you'll know the difference.

MOBILE FRIENDLY WEBSITE

Mobile friendly describes 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 phone and may not work perfectly on a touchscreen tabletcomputer, a mobile friendly site will be perfectly functional. Many developers view mobile friendly as a"best practice" for all site developments.

Ensuring your website is mobile Friendly is crucial. As we discussed previously, the percentage of mobile users is rapidly increasing. What are the vital qualities of a mobile friendly site?

Text-based telephone numbers, physical addresses, or email Addresses that can activate a call, instructions, 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 picture sizes to allow for fast loading over Mobile connections--don't count on even a 3G connection

Here are some examples of mobile friendly websites:

MOBILE OPTIMIZED WEBSITE

A mobile optimized website is a far more advanced website. Mobile optimized means that the website will reformat itself to get a list of handheld or tablet devices. Larger navigation buttons, reformatted content, and otherwise optimized images look if the user is on an iPhone or other apparatus.

Why reformat? Reformatting allows The site to easily engage a large cellular audience when key purchasing decisions come up.

A growing number of consumers are turning to their mobile devices right in the shop. Having a site developed that enables 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 to a mobile optimized site?

Simplified navigation that is"thumb" friendly with Large touchpoints, especially for critical contact info

Reduced images that don't interrupt 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 portable optimized Sites worth checking out of your handheld:

RESPONSIVE DESIGN WEBSITE

As site design continues to Evolve, a fantastic type of development has come into play. Reactive design is a way of developing a site that is completely flexible regardless of device. Rather than detecting a specific browser type or device type, the site automatically orientates itself depending on the screen size of the device. A combination of reformatting and re-optimizing the site as a whole provide a practical flexibility beyond imagination.

Responsive design, while more Expensive to develop, is the wisest growth investment if you are dealing with a consumer or audience-base that's active on mobile devices or need to make purchases on the move. Impulse purchases are obvious, but this is every bit as critical for commodity content such as blogs or news outlets.

WHAT ABOUT SMALL BUSINESS AND MOBILE WEB?

Mobile surfing --from tablets to Smartphones--is growing at an unprecedented pace. The customer's enthusiasm for immediate gratification of the informational needs requires effectively delivering your product (physical or intellectual) via the mobile web.

What about small business or a non-profit organization? Is mobile friendly good enough? Should an organization discuss a mobile optimized version? Will investing in a responsive design website bring a measurable return?

Exceptional questions with answers only you can provide. Every situation will be different, but give serious thought of what percent of your site 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 do not know the answer...that may already be your solution.

Mobile Optimization

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

What is Mobile Optimization?

Every year people spend more and more time on their mobile Devices and tablets, but many websites still aren't designed to account for different screen sizes and load times. Mobile optimization requires a look at site design, site structure, page speed, and more to be sure you're not inadvertently turning away mobile visitors.

Mobile SEO Best Practices

If your site is already well optimized for search engines, there Are just a few additional things that you will need to consider when optimizing for mobile devices and Google's move to mobile-first indexing.

Page speed

Due to hardware and connectivity issues, page speed is even More important for mobile users compared to desktop users. Beyond optimizing images, you'll want to minify code, leverage browser caching, and decrease redirects. More information 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 mobile devices could not support all of These elements, so webmasters of mobile sites blocked one or all three. However, for the most part that is no longer true, and the Smartphone GoogleBot would like to be able to see and categorize the same 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 unique 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 on your user's telephone, which Means they will miss out on all of the fun. If you want to make special effects, use HTML5 instead.

Don't use pop-ups either

It can be difficult and frustrating to attempt to close these on a mobile device. This might lead to a high bounce rate.

Design For the fat finger

Touch screen navigation can lead to accidental clicks if your Buttons are too big, too small, or in the path of a finger that's 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 using a mobile device. To show off your very best work in SERPS, be as succinct as possible (without sacrificing the quality of the data ) when creating names, URLs, and meta descriptions.

Use Schema.org structured data

Because of the limited screen space, a search result with abundant Snippets is even more likely to stand out than on a desktop. Read more about Schema.org structured data.

Optimize for local search

If your business has a local element, remember to optimize your Mobile content for local search. This includes standardizing your name, address, and phone 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'll make when setting up A website is deciding whether you want to use a responsive, dynamic serving, or separate website configuration. Each has its benefits and drawbacks. Google prefers responsive layout but supports all three options as long as you have set them up correctly.

Responsive web design

Responsively-designed sites use CSS3 media queries to serve the Same content to mobile and desktop users having a fluid grid and a flexible layout to automatically adapt to the size of a user's screen.

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 instruct browsers how to display content for a screen that's 420 or fewer pixels wide:

Code Sample

@media display and (max-width: 420px)

.class

[styles for This course here]

And to link to a separate stylesheet instead, put 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 Number of these media Queries so that users on miniature mobile displays, larger-than-average mobile screens, and even tablets can all see a site that looks designed for their apparatus.

Use a Google's Mobile Testing Tool to verify that your website is optimized for mobile.

Dynamic serving

If you do not have the resources for a complete site redesign or Want to display different content for mobile visitors than you do for desktop ones, one solution would be to use one URL to display different 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 example, if you're a restaurant that needs a mobile visitor (who might be drifting your neighborhood) to find a sampling of testimonials and a map to your location instead of your whole website.

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

Vary HTTP Header

GET /page-1 HTTP/1.1

Host: 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 from the Google Developers Blog.

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

Dynamic serving is not the perfect compromise that it might seem to be. For one, it depends on having an updated list of user agents, meaning every time a new mobile device comes to market that list needs to be updated. And it's not uncommon 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 totally custom content for mobile traffic. To avoid URL confusion, most parallel mobile sites use an"m" subdomain.

Parallel cellular sites can be as pristine as lively serving Websites at sending visitors to the right version, so make certain to make it simple for visitors who end up in the wrong place to click over to their preferred experience.

You'll also want to make sure Your site redirects are all in place and as Lean as possible to decrease page speed. And to prevent duplicate content issues, you'll need to install rel="canonical".

SEO Basics: How to improve your mobile site

Here's the thing: your Website should be mobile-friendly. In fact, this might just be your number one priority. If you wish to improve your mobile SEO, you must improve the performance of your website, plus you have to make sure that it offers users an superb mobile experience. In this search engine optimization basics article, you will find a summary of what you should do to boost your mobile website.

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 additional value for mobile users,

is instantly understandable for search engines.

Why is cellular 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 is now imperative that your site is mobile-friendly. If your site isn't, or not correctly, available for mobile users, you are likely to miss out on a decent ranking in the search engines and thus miss income. Therefore, you should do everything in your power to make the mobile version of your website as good as possible. In fact, it should be excellent!

Since the beginning of This year, Google uses the mobile version of the site to ascertain its rankings. If your site is not 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 do not have an adequate cellular version of your site yet, you best make a fully working one, rather as a responsive design. Google has a excellent getting started manual to get you going.

How to Increase your mobile website

To improve your Mobile SEO, you want to focus on a few things:

Make sure your Website is responsive

Improve your site speed

Don't 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 significant one is responsive design, which is the technology Google advocates. With a responsive design, your site lives on a single URL, making it easier for Google to understand and index it.

If you use WordPress, Odds are your motif is already responsive and can adapt to all screens. Be sure to check how your website scales in Google Chrome's Developer Tools. If it doesn't scale correctly, you should talk with your web developer about fixing it -- or pick a different theme.

Improve your site speed

One of the most Important things you can do to improve the cellular 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 years, and Google is increasingly focusing on fixing this frequent issue.

Optimize images

If there is one quick Win to increase your site speed, it is this: Boost your images. Do not load those 3000 x 2000 pixel HD images on your website. Scale them to the correct size and make them smaller using a tool such as ImageOptim or WordPress plugins like WP Smush.

Minify code

Every request your Site must make has an effect on site speed. You've got to work on reducing these orders. 1 way of accomplishing that is by minifying code. This means that your group and concatenate resources like JavaScript and CSS, and as a result, the browser needs to load fewer files, 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 are 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 fresh and dynamic content whenever it visits again. Again, this is something a plugin like WP Rocket can help you with. Or you can also do it yourself if you like.

Reduce redirects

A redirect contributes A visitor from one page that is requested to another, because the requested page was moved or deleted. While this contributes to a fantastic user experience if done well, the further redirects you use, the slower your site will be. Do not make endless redirects. Also, try not to keep links around there to deleted articles which are redirected to new ones. Always make direct links.

Do not 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 if 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 break or make the user experience of your website.

Improve tap target sizes

People hate it when Their finger can not hit a button, link or menu item without any fault. Sometimes designers haven't given sufficient thought about the dimensions of the buttons. Mobile users get frustrated when navigation is hard or unnatural. Fix it.

Choose the correct viewport

The viewport Determines the width of the webpage for the device used to view it. By specifying a suitable viewport, you make sure that visitors with specific devices get the right version of your website. Fail to do this, and you might just reveal your desktop site to a small-screen smartphone user -- a big no-no.

Do not use interstitials or pop-ups

Beginning this year, Google will penalize sites that use big pop-ups or interstitials to promote newsletters, sign-up forms or advertisements. These often get in the way of the consumer immediately accessing the content they asked. Don't use these, but if you must, be sure that you abide by Google's rules.

Test your site and inform Google about it

Before you start Working on your mobile SEO, you should run a Mobile-Friendly Test on Google to see where you should begin. During your work, you should keep testing to see if you make progress. If your site is optimized, you want to inform Google about it so that it can be checked and indexed. Use Search Console to stay 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 wrapping your content in particular 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 make sure it gets delivered at light speed.

AMP is still Relatively new, but growing rapidly. Nearly every website can benefit from incorporating this technique. If you have a WordPress site, it is not hard to get started; just put in the official plugin. This takes care of most of the installation. You may find more details on Google's guidelines.

Conclusion

Mobile is the future, but that future is now. Do everything you can to repair 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 demonstration, but more about creating a user experience to die for. As soon as you've achieved that, you are on your way to the top!

In 2016, the inevitable happened, and mobile overtook desktop as the primary device used to access sites . This didn't come as a huge surprise because, as far back as 2015, Google reported that more searches were conducted on cellular than on any other device category.

In many businesses, this may be conservative and, At the agency I head up in the united kingdom, Bowler Hat, our B2C clients are seeing up to 85 percent of all website sessions conducted on mobile devices.

Suffice it to say, cellular has well and truly arrived. Yet, while responsive design has been around for some time now and is quite well-established, the majority of sites have a tendency 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 is an absolute pig on mobile. Even if it is responsive.

This is not good enough at the mobile-first world We are racing toward in 2017.

In this Report, I am going to look at the way you Can ensure you are really optimizing for mobile users. We'll look at the essentials of responsive design and page speed, but we'll also look beyond this at user experience tailored to mobile devices. We will then wrap up this 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 users and drive conversions; to utilize cellular optimization to develop a tactical edge over the competition. And, of course, Google wants to delight mobile 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 a 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 mobile optimization:

Today, more people search on cellular phones than computers.

People are five times more likely to Leave a site if it isn't mobile-friendly.

More than half of mobile users will abandon 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 website is slow, they might 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 might not even get a shot at that customer.

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 happen on mobile than desktop. Yet, at the moment, ranking is still primarily based on the desktop version of a site.

When this happens, the links and content of your Mobile website, along with any other factors -- speed, user experience and so on -- are 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 component in your quest for improved positions and conversion rates from website visitors.

The good news is that this represents a chance For those 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 ahead, and doing so before your rivals will put your website in better stead.

Mobile-friendly approach

Our first focus in gaining this advantage is to Look at just how we provide mobile-friendly content. There are three possible approaches::

Responsive web design

Dynamic content

Separate URLs (mobile website )

Responsive website design is Google's recommended Way to tackle mobile-friendly sites 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 isn't a new idea. However, we still see sites that are technically responsive while not providing a strong experience for mobile users.

Finally, responsive design is Only a small Part of creating truly mobile-friendly sites.

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 use -- Most Mobile browsers do not render Flash and, as such, you might want to use more modern technologies.

Viewport not configured -- The viewport metatag helps 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 Doesn't fit the window, and a User has to scroll. This can be fixed with relative instead of 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 is 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 looking to crack down on in 2017.

These are the key technical elements that Google Is searching for and reporting on to webmasters.

Optimizing your Website to eliminate these issues may Have positive effects on how the usability of your site is graded by Google and certainly has positive consequences for users. Again, win-win.

Mobile optimization resources:

Mobile-Friendly Websites -- https://developers.google.com/webmasters/mobile-sites/

Mobile-Friendly Test -- https://search.google.com/search-console/mobile-friendly

Mobile Usability Report -- https://support.google.com/webmasters/answer/6101188?hl=en

Page speed

Page rate is important on all devices, but it Can be critically important on mobile when users are out and about searching for quick answers. A page that may load relatively fast on a WiFi network might not be quite so snappy on a cellular data network. 4G has delivered some fantastic speed improvements, but coverage (in the UK, at least) isn't something which can be relied upon.

There are, however, a range 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 readily assess how quickly 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:

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

https://testmysite.withgoogle.com/ -- the more attractive front end

To show how this works, I will share Details below for a small local B2C business named 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: