Tag Archives: mobile

Your emails, optimized for every screen with responsive design

Posted by Pierce Vollucci, Associate Product Manager, Gmail and Steve Bazyl, Developer Programs Engineer, Google Apps

When you send emails, your recipients might read them on a computer, tablet, or phone—or more likely, all three. However your message might look different on all these devices. Later this month, you’ll be able to use CSS media queries with Gmail to ensure that your message is formatted the way you intended, whether it's viewed on a computer, a phone in portrait mode, or a tablet in landscape mode. You’ll be able to change styles based on width, rotation, and resolution, allowing for more responsive formatting to optimize your email for every device.

Example of an email before and after responsive design

In discussions with email designers, these supported CSS rules were identified as the most useful media queries to support responsive design. This is just one part of an overall effort to expand CSS support in Gmail and to give email designers more control over how their messages are rendered. For example, the CSS below applies the color red when the screen width exceeds 500px. 

@media screen and (min-width: 500px) {
  .colored {
    color:red;
  }
}

You can find the full list of supported CSS rules in the developer documentation. We hope this reference helps you create more feature-rich, responsive email for users. Happy formatting!

How to get started with Accelerated Mobile Pages

Interested in Accelerated Mobile Pages but not sure how to get started? AMPlifying your site for lightning speed might be easier than you think.

If you use a Content Management System (CMS) like WordPress, Drupal, or Hatena, getting set up on AMP is as simple as installing and activating a plug-in. Each CMS has a slightly different approach to AMPlifying pages, so it’s worth checking with your provider on how to get started.

On the other hand, if your site uses custom HTML, or you want to learn how AMP works under the hood, then check out the AMP Codelab for a guided, hands-on coding experience designed to take you through the process of developing your first pages. The Codelab covers the fundamentals:

  • How AMP improves the user experience of the mobile web
  • The foundations of an AMP page
  • AMP limitations
  • How AMP web components solve common problems
  • How to validate your AMP pages
  • How to prepare your AMP pages for Google Search

Once you are done with the basics, why not geek out with the Advanced Concepts Codelab?

Have you tried the Codelabs or added an AMP plugin to your site? Share your feedback in the comments below or on our Google Webmasters Google+ page. Or as usual, if you have any questions or need help, feel free to post in our Webmasters Help Forum.


Posted by Tomo Taylor, AMP Community Manager

What is AMP?

Users today expect mobile websites to load super fast. The reality is that it can often take several seconds. It is no surprise that 40% of people abandon a website that takes more than 3 seconds to load. To reduce the time content takes to get to a user’s mobile device we started working on the Accelerated Mobile Pages Project, an open source initiative to improve the mobile web experience for everyone.


Accelerated Mobile Pages are HTML pages that take advantage of various technical approaches to prioritize speed and a faster experience for users by loading content almost instantaneously.

Later this year, all types of sites that create AMP pages will have expanded exposure across the entire Google Mobile Search results page, like e-commerce, entertainment, travel, recipe sites and many more. Visit the “Who” page on AMPProject.org for a flavour of some of the sites already creating AMP content and try the demo at (g.co/ampdemo) to see AMP versions of pages labeled with The AMP Logo.

In advance of AMP expanding in Google Search, over the next few weeks we’ll be posting pointers to help you #AMPlify your site. Follow along with the #AMPlify hashtag on G+ and Twitter.


Have you already built AMP pages for your site? Share your feedback in the comments below or on our Google Webmasters Google+ page. Or as usual, if you have any questions or need help, feel free to post in our Webmasters Help Forum.

Posted by Tomo Taylor, AMP Community Manager

The Need for Mobile Speed

Cross-posted from the DoubleClick for Publishers Blog
Today, we’re excited to share insights from a new study on how mobile speed can impact user engagement and publisher revenue. As people’s expectations for mobile experiences have grown, simply loading on a mobile device is no longer enough. Mobile sites must be fast and relevant.
Unfortunately, based on our analysis of 10,000+ mobile web domains, we found that most mobile sites don’t meet this bar: the average load time for mobile sites is 19 seconds over 3G connections.1 That’s about as long as it takes to sing the entire alphabet song!2
Slow loading sites frustrate users and negatively impact publishers. While there are several factors that impact revenue, our model projects that publishers whose mobile sites load in 5 seconds earn up to 2x more mobile ad revenue than those whose sites load in 19 seconds.3 The study also observed 25% higher ad viewability4 and 70% longer average sessions5 for sites that load in 5 seconds vs 19 seconds.
That’s why we’ve been so focused on mobile-first solutions to help publishers succeed — from our participation in the nearly year old AMP project, to our launch of a scalable native advertising solution, to our investment in products that help publishers increase revenue while minimizing latency.
Never before has mobile speed been more important.


3...2...1… gone

Slow page load times are a big blocker:
  • 53% of visits are likely to be abandoned if pages take longer than 3 seconds to load6
  • One out of two people expect a page to load in less than 2 seconds7
  • 46% of people say that waiting for pages to load is what they dislike the most when browsing the web on mobile devices8

We all know this first hand — if you’re looking for something on your phone, how long will you wait if the page takes more than a few seconds to load?
The three major factors that slow down mobile sites are file size, the number of server requests, and the order in which the different elements of the page are loaded. We found:
  • The average size of the content on mobile sites is 1.49 MB, which takes 7 seconds to load over 3G connections9
  • Mobile pages make an average of 214 server requests, and nearly half of all server requests are ad-related10

Getting up to speed

There are many tools out there to help diagnose the problem and fix it. We recommend a 3-step process to speed up mobile sites:
  • Assess the current performance of the site using tools like PageSpeed Insights, Mobile-Friendly Test, and Web Page Test.
  • Execute changes that eliminate bulky content, reduce the number of server requests, and consolidate data and analytics tags. Switch up the element order and select the minimum number of pieces to show above the fold first — styling, javascript logic, and images accessed after the tap, scroll or swipe can be loaded later.
  • Monitor performance after making changes and run A/B tests to regularly audit the setup of your site, flagging and removing anything that adds latency.

You should also investigate open source solutions like Accelerated Mobile Pages (AMP) and Progressive Web Apps.
To learn more about our study and the steps you can take to improve the experience on your mobile site, check out our guide, “The Need for Mobile Speed” [g.co/MobileSpeed]
Posted by Alex Shellhammer & Juliette Neel
Publisher Marketing

1 Webpagetest.org, Sampled 11.8K global mWeb homepage domains loaded using a fast 3G connection timing first view only (no cached resources), February 2016
2 NPR, “Keep Flu At Bay With A Song”, April 2009
3 Google Data, Aggregated, anonymized Google Analytics and DoubleClick AdExchange data from a sample of mWeb sites opted into sharing benchmark data, n=4.5K, Global, June 2015 - May 2016
4 DoubleClick for Publishers, Google Active View ad viewability for 10.7K mWeb homepage domains with >70% measurable ad viewability, Global, February 2016
5 Google Data, Aggregated, anonymized Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, n=3.5K, Global, March 2016
6 Google Data, Aggregated, anonymized Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, n=3.7K, Global, March 2016
7 Akamai Technologies - 2014 Consumer Web Performance Expectations Survey
8 Google Webmaster Central Blog, "#MobileMadness: a campaign to help you go mobile-friendly", April, 2015
9 Webpagetest.org, Sampled 11.8K global mWeb homepage domains loaded using a fast 3G connection timing first view only (no cached resources), February 2016
10 Webpagetest.org, Sampled 11.8K global mWeb homepage domains loaded using a fast 3G connection timing first view only (no cached resources), February 2016

Source: Inside AdSense


The need for mobile speed.

Today, we’re excited to share insights from a new study on how mobile speed can impact user engagement and publisher revenue. As people’s expectations for mobile experiences have grown, simply loading on a mobile device is no longer enough. Mobile sites must be fast and relevant.

Unfortunately, based on our analysis of 10,000+ mobile web domains, we found that most mobile sites don’t meet this bar: the average load time for mobile sites is 19 seconds over 3G connections.1 That’s about as long as it takes to sing the entire alphabet song!2

Slow loading sites frustrate users and negatively impact publishers. While there are several factors that impact revenue, our model projects that publishers whose mobile sites load in 5 seconds earn up to 2x more mobile ad revenue than those whose sites load in 19 seconds.3 The study also observed 25% higher ad viewability4 and 70% longer average sessions5 for sites that load in 5 seconds vs 19 seconds.

That’s why we’ve been so focused on mobile-first solutions to help publishers succeed — from our participation in the nearly year old AMP project, to our launch of a scalable native advertising solution, to our investment in products that help publishers increase revenue while minimizing latency.

Never before has mobile speed been more important.

3...2...1… gone

Slow page load times are a big blocker:

  • 53% of visits are likely to be abandoned if pages take longer than 3 seconds to load6
  • One out of two people expect a page to load in less than 2 seconds7
  • 46% of people say that waiting for pages to load is what they dislike the most when browsing the web on mobile devices8

We all know this first hand — if you’re looking for something on your phone, how long will you wait if the page takes more than a few seconds to load?

The three major factors that slow down mobile sites are file size, the number of server requests, and the order in which the different elements of the page are loaded. We found:

  • The average size of the content on mobile sites is 1.49 MB, which takes 7 seconds to load over 3G connections9
  • Mobile pages make an average of 214 server requests, and nearly half of all server requests are ad-related10

Getting up to speed

There are many tools out there to help diagnose the problem and fix it. We recommend a 3-step process to speed up mobile sites:

  • Assess the current performance of the site using tools like PageSpeed Insights, Mobile-Friendly Test, and Web Page Test.
  • Execute changes that eliminate bulky content, reduce the number of server requests, and consolidate data and analytics tags. Switch up the element order and select the minimum number of pieces to show above the fold first — styling, javascript logic, and images accessed after the tap, scroll or swipe can be loaded later.
  • Monitor performance after making changes and run A/B tests to regularly audit the setup of your site, flagging and removing anything that adds latency.

You should also investigate open source solutions like Accelerated Mobile Pages (AMP) and Progressive Web Apps.

To learn more about our study and the steps you can take to improve the experience on your mobile site, check out our guide, “The Need for Mobile Speed” [g.co/MobileSpeed]

Posted by Alex Shellhammer & Juliette Neel
Publisher Marketing

1 Webpagetest.org, Sampled 11.8K global mWeb homepage domains loaded using a fast 3G connection timing first view only (no cached resources), February 2016
2 NPR, “Keep Flu At Bay With A Song”, April 2009
3 Google Data, Aggregated, anonymized Google Analytics and DoubleClick AdExchange data from a sample of mWeb sites opted into sharing benchmark data, n=4.5K, Global, June 2015 - May 2016
4 DoubleClick for Publishers, Google Active View ad viewability for 10.7K mWeb homepage domains with >70% measurable ad viewability, Global, February 2016
5 Google Data, Aggregated, anonymized Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, n=3.5K, Global, March 2016
6 Google Data, Aggregated, anonymized Google Analytics data from a sample of mWeb sites opted into sharing benchmark data, n=3.7K, Global, March 2016
7 Akamai Technologies - 2014 Consumer Web Performance Expectations Survey
8 Google Webmaster Central Blog, "#MobileMadness: a campaign to help you go mobile-friendly", April, 2015
9 Webpagetest.org, Sampled 11.8K global mWeb homepage domains loaded using a fast 3G connection timing first view only (no cached resources), February 2016
10 Webpagetest.org, Sampled 11.8K global mWeb homepage domains loaded using a fast 3G connection timing first view only (no cached resources), February 2016

3 easy tips to build a relationship with your audience

Drawing new visitors to your site is only half of the battle. Having a plan for them to follow once they get there is the key to encouraging repeat visits and building a meaningful relationship with your readers.

To engage user-focused design for your site, it’s important to consider the following:


1. Keep It Simple

Gating desirable content can be a great way to learn more about visitors by prompting them to fill out a form or sign up for your newsletter to access it. However, roughly 67% of users will abandon an effort to obtain information or purchase something online if there are too many steps to take. Make sure your users get what they need in as few steps as possible. Matched content is another way to keep visitors from checking out too soon by increasing your odds of presenting them with content they are directly interested in.

2. Identify User Moments

People often look for inspiration and ideas while they complete a task online. Anticipating your visitors’ needs can help you set up your site to better serve them so you can capture and capitalize on these important moments. Whether they are purchasing something or just browsing, presenting this information in the right format can greatly increase the amount of time they spend on your site. 



For example, if you’re an eCommerce site selling chocolates, having recommendations alongside each product such as gift boxes, complementing candy, and drink pairings can get your site visitor thinking about the holidays or gifts for their loved ones.

3. Create engaging Calls to Action 

Bold “sign up” buttons and friendly prompts or reminders move visitors to take action. From bold colors and text to exaggerated size and other visual clues, there are a number of ways to make these important actions stand out on your site and even fun for users to engage with. In fact, our own AdSense team tested different campaign graphics on our marketing campaigns and saw higher implementation and engagement rates.
 

To learn more about familiarizing your audience with your brand, check out the AdSense Guide to Audience Engagement.


Posted by Jay Castro
From the AdSense Team

Source: Inside AdSense


Optimize your content for mobile to #drawthecrowds


Throughout the summer, fans are looking for great content, regardless of whether they’re viewing it from a desktop, tablet or mobile device. Did you know that 1/3 of followers used more than one screen to follow the 2012 Olympic games?[1]

With this in mind, think about whether your content is mobile-optimized and easily accessible for your users in the moments that matter. If they receive a link on their smartphone but are unable to view the content because it’s not mobile-optimized, it’s easy for them to feel frustrated with the poor user experience. On the other hand, If the users are delighted with the content and their first visit to your site is a positive one, they’re more likely to share your content and come back again.

If you already have a mobile optimized site, don’t forget that you can grow your earnings potential by understanding which mobile ad sizes are most effective for you. Finally don't forget these 4 important tips to maximize your earnings with AdSense:

  1. Swap out the 320x50 ad units for 320x100 for a potential RPM increase.
  2. Place a 320x100 ad unit just above the fold or peek the 300x250 -- that is, place a small portion of the ad unit just above the fold (ATF).
  3. Use the 300x250 ad unit below the fold (BTF) mixed in with your content.
  4. Prevent accidental clicks on enhanced features in text ads by moving ad units 150 pixels away from your content.


Is your site mobile ready for the summer? 

Download the #AdSenseGuide to Mobile Web Success to learn more. Are you new to AdSense? If so, sign up now and turn your passion into profit.


Posted by Barbara Sarti, AdSense Account Associate

[1] Google internal data

Source: Inside AdSense


Amplify your content with social

Social media is more than just vacation photos and stories about babies, it’s about sharing experiences and creating interactions with people.

Content on social media can instantly reach millions of users and create thousands of online stories. Do you remember the social media storm that Ellen DeGeneres created with a single photo? Her selfie from the 2014 Oscars started a global conversation and has since been added to Google’s 2014 web culture guide. Her content holds the win for the most retweeted tweet with more than 3M retweets, 6.8M site embeds, and even temporarily led to Twitter going down.

Big events like the Oscars create opportunities for publishers to interact with users through both original content and viral content. This summer, users will be searching, sharing, and consuming content like never before. Be sure to examine your content strategy, and find ways to spark conversations on social channels or, contribute to an existing digital conversation.



How can AdSense Publishers participate in big events? If you're new to AdSense, you can sign up now and turn your passion into profit.

  1. Include editorial coverage around topical events.
  2. Make sure your content is easy to consume and share.
  3. Create a social media strategy around a big event.


Here are four tips to help jumpstart your social media strategy:

  1. Know your audience. Trigger an emotional response from your viewers by humanizing your brand.
  2. Be social to win on social by creating relationships with your users.
  3. Don’t be afraid to follow the leaders and the trends. If there’s social proof behind it, do it.
  4. Use tools to help you create great content.


More on the fourth tip, here are a few tools to help you #drawthecrowds through social channels:

  • Buffer is a well-known tool used by social media marketers. It helps streamline your social media management.
  • Pablo is a tool created by Buffer that is “the simplest way to create beautiful images that fit every social network perfectly”.
  • Canva is another image creating tool that can help you create visual content on a budget.
  • Feedly can help you organize and read relevant content in your industry to help fuel your content creation.
  • Google Trends is a widely used tool to help you identify key trends happening around the world.
  • IFTTT is a popular tool used to streamline many tasks. For example, here’s a pre-built recipe that will automate the process of tweeting each new wordpress blog post.


According to the New York Times, 68% of users share [online content] to give people a better sense of who they are and what they care about. To amplify your content this summer, be sure to create content that resonates with your audience.


New to AdSense? Sign up now and turn your passion into profit. Let us know your thoughts on Twitter @AdSense.

Posted by Barbara Sarti and Jay Castro from the AdSense team

Source: Inside AdSense


AMP your content – A Preview of AMP’ed results in Search

It's 2016 and it's hard to believe that browsing the web on a mobile phone can still feel so slow with users abandoning sites that just don't load quickly. To us — and many in the industry — it was clear that something needed to change. That was why we started working with the Accelerated Mobile Pages Project, an open source initiative to improve the mobile web experience for everyone.

Less than six months ago, we started sending people to AMP pages in the “Top stories” section of the Google Search Results page on mobile phones. Since then, we’ve seen incredible global adoption of AMP that has gone beyond the news industry to include e-commerce, entertainment, travel, recipe sites and so on. To date we have more than 150 million AMP docs in our index, with over 4 million new ones being added every week. As a result, today we’re sharing an early preview of our expanded AMP support across the entire search results page --not just the “Top stories” section.

To clarify, this is not a ranking change for sites. As a result of the growth of AMP beyond publishers, we wanted to make it easier for people to access this faster experience. The preview shows an experience where web results that that have AMP versions are labeled with The AMP Logo. When you tap on these results, you will be directed to the corresponding AMP page within the AMP viewer.


AMP in Search Preview

Try it out for yourself on your mobile device by navigating to g.co/ampdemo. Once you’re in the demo, search for something like “french toast recipe” or music lyrics by your favorite artist to experience how AMP can provide a speedier reading experience on the mobile web. The “Who” page on AMPProject.org has a flavor of some of the sites already creating AMP content.

We’re starting with a preview to get feedback from users, developers and sites so that we can create a better Search experience when we make this feature more broadly available later this year. In addition, we want to give everyone who might be interested in “AMPing up” their content enough time to learn how to implement AMP and to see how their content appears in the demo. And beyond developing AMP pages, we invite everyone to get involved and contribute to the AMP Project.

We can’t wait to hear from you as we work together to speed up the web. And as always, if you have any questions, please visit our webmaster forums.


Posted by Nick Zukoski, Software Engineer

AMP your content: A preview of AMP’d results in Search

Cross-posted from the Webmaster Central blog


It's 2016 and it's hard to believe that browsing the web on a mobile phone can still feel so slow with users abandoning sites that just don't load quickly. To us -- and many in the industry -- it was clear that something needed to change. That was why we started working with the Accelerated Mobile Pages Project, an open source initiative to improve the mobile web experience for everyone.

Less than six months ago, we started sending people to AMP pages in the “Top stories” section of the Google Search Results page on mobile phones. Since then, we’ve seen incredible global adoption of AMP that has gone beyond the news industry to include e-commerce, entertainment, travel, recipe sites and so on. To date we have more than 150 million AMP docs in our index, with over 4 million new ones being added every week. As a result, today we’re sharing an early preview of our expanded AMP support across the entire search results page --not just the “Top stories” section.

To clarify, this is not a ranking change for sites. As a result of the growth of AMP beyond publishers, we wanted to make it easier for people to access this faster experience. The preview shows an experience where web results that that have AMP versions are labeled with The AMP Logo. When you tap on these results, you will be directed to the corresponding AMP page within the AMP viewer. 

AmpBlueLinksDemo_v3_garciarobert (1).gif
AMP in Search Preview

Try it out for yourself on your mobile device by navigating to g.co/ampdemo. Once you’re in the demo, search for something like “french toast recipe” or music lyrics by your favorite artist to experience how AMP can provide a speedier reading experience on the mobile web. The “Who” page on AMPProject.org has a flavor of some of the sites already creating AMP content.

We’re starting with a preview to get feedback from users, developers and sites so that we can create a better Search experience when we make this feature more broadly available later this year. In addition, we want to give everyone who might be interested in “AMPing up” their content enough time to learn how to implement AMP and to see how their content appears in the demo. And beyond developing AMP pages, we invite everyone to get involved and contribute to the AMP Project.

We can’t wait to hear from you as we work together to speed up the web. And as always, if you have any questions, please visit our webmaster forums.

Posted by Nick Zukoski, Software Engineer

Source: Inside AdSense