Responsive Design.Find out all about it.

Mobile Friendly vs Mobile Optimized vs Responsive Design: What You Need To Know About The Mobile Version of Your Site

Making a website mobile ready is Pretty high on the request list for businesses and organizations developing a new website. However, there are a flurry of conditions surrounding mobile. Mobile friendly, portable optimized, and a newer term: reactive design. What is 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 company, estimated that by 2014 there will be more internet browsing from mobile devices than on conventional desktops or laptops. We've seen our own customers' website 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, knowing how your website will display on the selection of formats is crucial. When terms like cellular friendly, mobile optimized, and responsive design appear in development talks, you will know the difference.

MOBILE FRIENDLY WEBSITE

Mobile friendly refers to a site That displays right 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 is going to appear smaller on a telephone and may not work flawlessly on a touchscreen tablet, a mobile friendly website 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 above, the proportion of mobile users is quickly rising. What are the essential qualities of a mobile friendly website?

Text-based phone numbers, physical addresses, or email Addresses that can trigger 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 some other mobile devices)

Small image sizes to allow for rapid 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 for a list of handheld or tablet devices. Larger navigation buttons, reformatted content, and differently optimized images appear when the user is on an iPhone or other device.

Why reformat? Reformatting allows The website to readily engage a large cellular audience when key buying decisions come up. A growing number of consumers are turning to their mobile devices right in the shop. Having a website developed that enables the user to easily navigate and engage from the small screens of the handheld means reaching a decision quicker.

What are some Great formatting Elements that go to a mobile optimized website?

Simplified navigation which is"thumb" friendly with Massive touchpoints, especially for critical contact information

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 from your handheld:

RESPONSIVE DESIGN WEBSITE

As website design continues to Evolve, a fantastic type of development has come into play. Reactive design is a way of developing a site that's completely flexible regardless of device. As opposed to detecting a specific browser type or device type, the website automatically orientates itself based on the screen size of the apparatus. A blend 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 are managing 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 every bit as 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 enthusiasm for immediate gratification of their informational needs requires effectively delivering your product (physical or intellectual) via the mobile web.

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

Excellent 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 do not know the answer...that may already be your solution.

Mobile Optimization

Mobile optimization is the process of ensuring that people 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 made to account for different screen sizes and load times. Mobile optimization takes a look at site design, site structure, page speed, 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 that you will need to consider when optimizing for cellular devices and Google's move to mobile-first indexing.

Page speed

Because of hardware and connectivity issues, page speed is even More important for mobile users than desktop users. Beyond optimizing images, you'll want to minify code, leverage browser caching, and reduce redirects. More information on page speed can be found on our SEO Best Practices for Page Speed page.

Don't Block CSS, JavaScript, or graphics

In the old days, some portable devices couldn't support all of These components, so webmasters of cellular sites blocked one or all three. However, for the most part that's no longer true, and the Smartphone GoogleBot would like to have the ability to see and categorize the same content that users do. So don't hide it. These elements are also critical to helping Google understand if you've got 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 phone, which Means they'll miss out on all 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 attempt to close 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's trying to find the page to scroll.

Optimize titles and meta descriptions

Remember that you're working with less screen space when a user Searches using 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 names, 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'll make when setting up A site is deciding whether you would like to use a responsive, dynamic serving, or different site configuration. Each has its advantages and disadvantages. Google prefers responsive design but supports all 3 choices as long as you have set them up properly.

Responsive web design

Responsively-designed sites use CSS3 media queries to serve the Same content to desktop and mobile 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 instruct browsers how to display content to get a screen that is 420 or fewer pixels wide:

Code Sample

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

.class

[styles for This class here]

And to link to a separate stylesheet instead, put the next HTML in between your tags:

Code Sample

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

Responsive designs allow you to have a variety of these media Queries so that users on miniature mobile displays, larger-than-average mobile displays, and even tablets can all see a website that looks designed for their apparatus.

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 1 URL to display different sets of HTML and CSS based on which kind of device your visitor is using (also called detecting user agents). This can be useful, for example, if you are a restaurant who needs a mobile visitor (who may be drifting your neighborhood) to find a sampling of reviews and a map to your place instead of your full website.

Displaying different content based on the user agent is called Dynamic serving and it's 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

(... rest of HTTP response headers...)

Example in 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 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 list needs to be updated. And it's not uncommon for desktops and mobile devices to be wrongly served with the HTML for another device. Read more about common pitfalls.

Separate mobile URL

Another option is to create a second, parallel site for cellular users. This lets you create completely custom content for mobile traffic. To prevent URL confusion, most parallel mobile sites utilize an"m" subdomain.

Parallel cellular sites can be as imperfect as dynamic serving Websites at sending visitors to the right version, so make certain to make it easy 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'll need to set up rel="canonical".

SEO Basics: How to improve your mobile site

Here is the thing: your Website should be mobile-friendly. In actuality, this might just be your number one priority. If you want to boost your mobile SEO, you must improve the operation of your website, plus you need to be sure that it offers users an excellent mobile experience. In this search engine optimization basics article, you'll find a summary of what you should 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 needing 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 offers the finest possible presentation of your content to a mobile device user. Since our world is increasingly mobile-oriented, it has become imperative that your website is mobile-friendly. If your site is not, or not correctly, available for mobile users, you are going to lose out on a good ranking in the search engines and so miss income. Therefore, you should do everything in your power to make the mobile version of your site as good as possible. In actuality, it should be excellent!

Since the start of This year, Google uses the mobile version of the site to determine its rankings. If your site is not up to scratch, or if you present less content on your mobile site, you'll have a tough time getting a good ranking. If you don't have an adequate mobile version of your site yet, you best make a fully working one, preferably 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 site is responsive

Improve your site speed

Don't block JavaScript, HTML and CSS code

Don't 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 Strategies to make your website available for mobile users. The most important one is responsive design, which is the tech Google advocates. With a responsive design, your website resides on one URL, which makes it easier for Google to understand and index it.

If you use WordPress,
Chances are that your theme is already responsive and can adapt to all screens. Make certain to check how your website scales in Google Chrome's Developer Tools. If it does not scale properly, you should speak with 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 improve 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 is one quick Win to increase your site speed, it's this: Boost your images. Do not load these 3000 x 2000 pixel HD images on your site. Scale them to the proper size and make them smaller using a tool such as ImageOptim or WordPress plugins like WP Smush.

Minify code

Every request your Site has to 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 resources like JavaScript and CSS, and because of this, the browser has to load fewer files, leading to a faster site. This sounds difficult to implement, but a plugin such as WP Rocketcan look after all your caching needs.

Browser caching

By using browser Caching, you're telling the browser that page elements that don't change often can be saved inside its cache. This way, the browser only has to download fresh and dynamic content whenever it visits again. Again, this is something a plugin such as WP Rocket can assist you with. Or you can also do it yourself if you like.

Reduce redirects

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

Do not block assets like JavaScript, HTML and CSS

We have said it before, And we're going to keep saying it: Don't block assets like JavaScript, HTML and CSS. Doing this makes it harder for Google to access your site and that could lead to bad rankings. Check your Google Search Console to determine 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 changes. Typography can make or break the user experience of your site.

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 unnatural or hard. Repair it.

Choose the Right viewport

The viewport Determines the width of the page for the device used to see it. By specifying a suitable viewport, you make sure that visitors with particular devices get the ideal version of your site. Fail to do this, and you may just show your desktop site to a small-screen smartphone user -- a significant no-no.

Do not use interstitials or pop-ups

Starting this year, Google will penalize sites that use big pop-ups or interstitials to promote newsletters, sign-up forms or ads. These often get in the way of the consumer quickly accessing the content they requested. Do not use these, but if you have to, be sure that you abide by Google's rules.

Test your site and inform Google about it

Before you start Working on your own mobile SEO, you need to run a Mobile-Friendly Test on Google to determine 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 tell Google about it so that it can be assessed and indexed. Use Search Console to remain on top of the operation of your site.

Investigate Google AMP

Accelerated Mobile Pages (AMP) is a new initiative by Google and others to get web pages to load super fast on mobile devices. By wrap your content in particular HTML code, you can optimize the pages in a way that Google can use to give them special treatment. Pages are cached by Google and presented with a stripped down presentation to make sure it gets delivered at moderate speed.

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

Conclusion

Mobile is the future,
but that future is now. Do whatever you can to fix your mobile site and make it perfect, not only in Google's eyes, but, more importantly, your visitor's. Mobile SEO is not only about great content and a flawless technical demonstration, but more about creating a user experience to expire. Once 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 did not come as a huge surprise since, 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 UK, Bowler Hat, our B2C customers are seeing up to 85 percent of all website sessions conducted on mobile devices.

Suffice it to say, mobile has well and truly arrived. However, while responsive design has existed for a while now and is fairly 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 cellular. That form-fill that has been mildly annoying on desktop computer is an absolute pig on mobile. Even if it is responsive.

This is not good enough in the mobile-first world We're rushing toward in 2017.

In this article, I am going to look at how you Can make certain you're truly optimizing for mobile users. We will consider the essentials of responsive design and page rate, but we'll also look beyond this at user experience tailored to mobile devices. We will then wrap this up with a mobile optimization checklist which 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 advantage 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

Listed below are three key Stats that I have lifted from Google's promotional materials that clearly illustrate the importance of mobile optimization:

Today, more people search on mobile phones than computers.

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

More than 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 is not 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 in the unreliability of mobile data networks Here and your site has to be a mean, lean mobile-friendly machine, or you may not even get a shot at that client.

The mobile-first index

The absolute nail in the coffin for a Desktop-first approach to websites 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 website .

When this happens, the links and content of your Mobile site, along with any other variables -- rate, 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, people -- 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 barrier is the way forward, and doing this before your rivals will put your website in better stead.

Mobile-friendly approach

Our primary focus in gaining this advantage would be to Look at just how we deliver mobile-friendly content. There are three possible approaches::

Responsive web design

Dynamic content

Separate URLs (mobile website )

Responsive Site 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 isn't a new idea. But, we still see sites which are technically responsive while not providing a solid experience for mobile users.

Ultimately, responsive design is just a small Part of producing 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 use these tools while developing Your new site and use Search Console to keep tabs on problems throughout the life span of the site.

Search Console looks at the following mobile usability issues:

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

Viewport not configured --
The viewport metatag helps browsers in scaling a page to suit a specific device.

Fixed-width viewport -- This
Problem 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 rather than fixed widths.

Small font size -- This
Is a scaling issue and requires users to pinch the display to zoom in.

Touch elements too close -- This is a common usability issue where it is too tough 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 looking for and reporting on to webmasters.

Optimizing your site to remove these issues may Have positive effects on the way the usability of your website is rated by Google and certainly has positive implications 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 looking for quick answers. A page that may load relatively fast on a WiFi network may not be quite so snappy on a cellular data network. 4G has delivered some great speed improvements, but coverage (in the UK, at least) is not something which may be relied upon.

There are, however, a range of best practices for Improving page speed and, once more, Google has come to our aid with the PageSpeed insights tool. This enables us to easily assess how quickly our pages load and get some pointers on what we can do to improve.

Page rate 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 tiny local B2C business named Vinyl to Digital, which consented for me to use them as a case study.

Here is the output from Google's testmysite.withgoogle.com tool:

We Can see some clear 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
All these are rather simple tasks. There exist plugins which will tackle the vast majority of this without any costly development time.

We could also see an overview of page loading times Within Google Analytics in the Behavior > Site Speed report.

Here We can see that average page load is almost four minutes, which is above the ideal 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 from the PageSpeed Insights tool and finding a faster hosting partner could likely 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 only 20 percent of the campaign.

We also can't talk about mobile page speed without considering Accelerated Mobile Pages (AMP). AMP was designed to allow the often slow, clunky and annoying mobile internet to load immediately anywhere.

Be fast. It makes your users and search engines happy.

Page speed resources:

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

Website Test -- https://testmysite.withgoogle.com/

Google Analytics -- https://support.google.com/analytics/answer/1205784?hl=en

Make the Web Faster -- https://developers.google.com/speed/

AMP Pages -- https://www.ampproject.org/