Earn More Revenue With Firebase And AdMob

Firebase is a mobile platform that helps you quickly develop high-quality apps, grow your user base, and earn more money. In the slides below, we will focus on the growth part. In other words, we will talk about ways to acquire and engage the right users at the right time.
There are several features that Firebase is giving developers out of the box in order to help with growth:

• Notifications – Engage with users at the right moment
• App Indexing – Drive organic search traffic to your app
• Dynamic Links – Send users to the right place inside your app
• Invites – Empower your users to share your app
• AdWords – Acquire users with the reach of Google

For more, check the slides below. Btw, if you want to see what are the options to monetize your work (both on the web, Android, iOS and other platforms) join thousands of developers that took my Monetization course on Udacity.

Amp Overview Talk #YGLF

An overview of Accelerated Mobile Pages Project at YGLF 2016.
See how you can leverage this important open source project today in production and improve your sites’ performance and the happiness of your users.

From AMP To PWA

The slides from my talk today at Google IL office.
It’s all about building a great mobile experience for your users.
From AMP (=Accelerated Mobile Pages) as a starting point up to PWA (=Progressive Web Apps).
As a bonus, we also showed new APIs like: Payment API, One Tab Sign-in and Physical Web that expending the web even farther.

Progressive Web Apps – Noter

Progressive web apps are the future, and here is a demo that I built in order to feel the current challenges.
How about a little tool that let you take notes?
Yes, not too original, but still useful.

It is currently can be found with 2 versions:

1. Basic version – It contain service worker for offline, manifest and a simple text area. All the basic functionality, that allow you to take notes the are saved automatically with or without connection. I used jQuery and bootstrap to keep it simple and to make it easy to extended it in the future.
2. Full version with Firebase – Similar to the basic version, but this time, I added the ability to save the notes in the cloud (=firebase). You can add notes, edit current ones and (of course) delete the ones that you don’t really like. The text area was upgrades to a markdown editor. A simple one, but still something that will give you the ability to get a preview of the note in a markdown.
   You can use:
   User –  demo@demo.com
   Password – demo

See below how it will look like after you login.

It’s still “work in progress” and you can see at the current TODOs at the bottom of the code repository.

Challenges and Tips

You can see the main tips that I got from working on this demo in the image below.
The most important checkbox is “force update on page load” – It will make sure you are getting your new version and not the one that the service worker already cached.
Another good way to see what is going inside your service worker is to click on the link ‘sw.js’ above this checkbox.

 

So to wrap-up, the code for this demo can be found at Noter on github and the live demo.
Please try it on your Android and let me know if you find something that is broken or can be better.

Happy note taking and may you always write good and productive ones.

Building a Progressive Web App

I think the web platform is awesome.
Moreover, it got some impressive APIs that make it even more powerful. The web platform is easy to access (very low friction), no installs, easy distribution (without walled gardens), immediate redeployments and no single organization own it. Let’s see what do we mean when we are talking on progressive web apps.

Progressive Web Apps

• Fast loading – Because we know users love speed and for every delay we are lossing a smile (and a user).

• One click away from accessing content – You should have an icon on the screen and with one click you could get to your content (or task) and smile.

• Smooth animations and navigations – Good UX comes with these aspects.

• Re-engages with push notifications – In many cases, we wish to be able to notify users even when the browser is not open in-front of them. We can!

• Good experience on flaky network connections – Our web app is offline first, so we can deliver our content (just the deltas) on flaky networks much better/faster.

• Consistent experience across browsers – After all, we are talking on the web here. You can’t control from which device users will come to your work. So make sure, you serve them all.

PWAs are about the experience, no the tech: these apps _feel_ better and more app-like. The technology behind Progressive Web Apps is called “Service Worker”; it’s available only since mid 2015 and is seeing large, growing adoption. PWA is expected to be for mobile what AJAX meant for the desktop web.

Enabling app-like capabilities

At the foundational level, there are two core pieces of technology that enable PWAs:

Mobile Trends During 2015

Quick stats that shows why it’s a “mobile world”.
Time spend on mobile grows 117% year over year. One quick look at the image below will show that we have a new form factor that is taking all others in terms of growth.

 

Phablets are rocking

Phablets have become the unstoppable media consumption device. What a proof? Check the quarterly form factor distribution forecast (below).
Amazing. In the next 6 quarters, we might be in a place where phablets are 60% of all mobile devices.

Enable Users To Call From Your Web Site

On mobile devices, there is 99.65% chance that they have a calling capabilities.
It’s true that modern mobile browsers will automatically detect phone numbers and convert them to links, it’s a good idea to do this directly in your HTML code. It’s a great way to allow users to call your business with one click and the way to do it is with this simple tel: scheme:

Amazing coffee Service
<a href="tel:+972-3-123-3344">+972-3-123-3344</a>

The result will look like:

Click to Call

You can click on it in order to see the code in action.

Make Your Site Faster

We know that users prefer websites and applications that work fast. There is a lot of evidence that link performance to revenue. Let’s see what are main parts of the user experience that relate to the perception of ‘speed’ and how we can improve it.

RAIL performance model

RAIL is a user-centric performance model. Every web app has these four distinct aspects to its life cycle, and performance fits into them in very different ways. You can see in the image below the 4 main aspects and what are the time limits to each stage.

The TL;DR

• Focus on the user – the end goal isn’t to make your site perform fast on any specific device, it’s to ultimately make users happy.
• Respond to users immediately – acknowledge user input in under 100ms – In mobile always use touch events and not click events (yep, click events still got this 300ms delay on mobile browsers)
• Render each frame in under 16ms and aim for consistency. Users notice “jank” because in most cases it will ‘jump’ to their eyes.
• Keep users engaged – deliver interactive content in under 1000ms.

Make Your Web Forms More Efficient

Forms are the main ‘entry barrier’ to anything meaningful on the web. It might be a registration form, sign-up form or a shopping cart. In all of them, you wish to do the best in order to delight your users and lower the friction.
In the slides below, we will cover the best practices so your forms will rock.

The Latest From The Web

A lot of new interesting APIs that are pushing the web platform forward introduced with Chrome 43 (now in Stable). Let see the ones that are going to impact a lot of users.

• The Fetch API now allows developers to directly operate on and incrementally release the bytes of streamed network responses, in contrast to the equivalent XMLHttpRequest functionality that requires developers keep the entire in-progress stream response in memory.
• The Cache Storage API, previously only available in service workers, now provides developers full imperative control over their caching in the page context. This is huge! It will enable users to have better (=faster) experience in places where the connections are not good.
• Autofill and Autocomplete – People hate filling out web forms, especially on mobile devices, learn how to help them complete it up to 30% faster. (And yes! I wrote it).