Chrome

Password Forms That Browsers Love

There are two types of common forms that you see every day on (almost) every website: Sign-up and Sign-in. If you want to improve your users experience and allow them to fill these forms quickly and efficiently, this post is for you.

You can help ensure that browsers’ password management functionality can understand your site’s sign-up, sign-in. All it take is a ‘touch’ of a change for your password forms by enriching your HTML with a bit of metadata.

Here are the rules to follow: Continue reading →

Chrome

High Conversion Web Forms

Last week, my new course “Building High Conversion Web Forms” was launch on Udacity. I had the pleasure to work with Cameron Pittman on this course and I hope you are going to like the outcome.

Let’s take one (I promise not two) step back, and think about forms. If you think on any meaningful experience on the web today, you will find out that it comes with a form. It might be a shopping cart, registration form, survey or even every login form. If it’s valuable, most probably it got a box that wish someone will fill it with information. Whether it’s a form made of text boxes, toggles, buttons, checkboxes, or touchable widgets, web developers need to be purposeful about forms to make users happy and increase conversions.

In our course, you’ll learn best practices for modern forms. It’s not just ‘watching’ videos. You’ll practice your skills along the way with a few self-directed projects, including an e-commerce checkout and an event planner app! As a special bonus, you’ll also watch a series of interviews with Luke Wroblewski, Google Product Director.

Continue reading →

Chrome, Design

Design Better Forms

25%-metric-on-forms TL;DR

Make your forms as short as possible. The best form is no form. If you must have ‘few’ fields, make sure you optimized for Autofill with the right autocomplete attributes. As you can see in the image above, it’s moving the needle, for real.
Now, if you have another 4 minutes, here are few points to think while you are designing you next form. Continue reading →

Chrome

Chrome, Firefox And Edge/IE Will Soon Drop RC4 Encryption

What is RC4?

RC4 is a stream cipher designed in 1987 that has been widely supported across browsers and online services for the purposes of encryption. Multiple vulnerabilities have been discovered in RC4 over the years, making it possible to crack within days or even hours.

It’s good news that all the major browsers are going to drop it and move forward to a better cipher.

When?

Continue reading →

Chrome, JavaScript, webdev

Chrome 47 Updates And Web News

Input Device Capabilities: Chrome 47 has a new feature that makes it easier to understand the how users interact with your site: InputDeviceCapabilities! DOM input events are an abstraction above low-level input events, loosely tied to physical device input (e.g., click events can be fired by a mouse, touchscreen, or keyboard). However, there is a problem: there is no simple method to obtain the details of the physical device responsible for an event. In addition, certain types of input can generate further “fake” DOM input events for compatibility reasons. One such fake DOM event happens when a user taps a touch screen (such as on a mobile phone); it not only fires touch events but, for compatibility reasons, mouse events as well. The new InputDeviceCapabilities API provides details about the underlying sources of input events this come to helps with problems when supporting both mouse and touch input. Read More: developers.google.com/web/updates/2015/10/inputdevicecapabilities

Adding a Splash screen for installed web apps – Over the past year we saw an effort in the Chrome team to let developers build sites and apps that feel like they are installed on the user’s system. The home screen launch process on Android is a great first step. In Chrome 46 on Android, we got the background_color that removes any delay and paints the screen with a solid color until the browser is ready to paint something from the web page. This was a good addition, yet it still didn’t look fully like an app. Now in Chrome 47 on Android, Beta these days as of October 2015, we are introducing the concept of a “splash screen”. Have a look:

Continue reading →

Chrome

Use House Ads To Improve Your Revenue

As developers and entrepreneurs, we have mountains of data.
Data that could change your business and move it forward. However, there is so much data that it’s overwhelming in some cases. Life force you, in some cases, to ignore it. But that’s the wrong path to follow! You wish data that is actionable and moving your revenue forward.

The freemium model was one of the reasons to a huge disruption in the data world. We see it clearly in the gaming market. For game developers, the need to understand users through data is particularly acute. In the past 2 years, we learn that everyone is a gamer: there were 1.78B gamers worldwide as of August [Source] and the number keep moving up. Since we are talking here on free installation, we do need to make money after the users installed our game. It will be good

Now, because users act differently the foundation of any monetization strategy should be your analytics.
There will be segments in your userbase that will:

Pay for In-App Purchases
Click on ads
Engage with certain types of ads (e.g. full-screen video)

A custom monetization strategy for each user means you are maximizing your revenue. There are few (new) tools in AdMob to help you to do this. It’s call ‘audience aware’ because it will tailored the right solution to the right user at the right time. Continue reading →

Chrome, JavaScript, webdev

Chrome 46 Updates

Performance

Hot from the oven: AMP project!
The web today is many things: an application platform, an e-commerce platform, a content platform, a gaming platform, and so much more. The AMP project decided to focus entirely on static content as it lends itself to more radical optimization approaches that are easier to apply across the board.
It’s all on Github so join the party. Btw, you can see the WordPress moving into producing AMP pages.
Tools like ‘srcset’ allow developers to serve an optimized image variant in a responsive way, but it can be cumbersome and inefficient to use in practice. Developers can now negotiate with the server (resource selection with client hints) to download the best image variant for a device using straightforward HTTP request headers. These headers communicate DPR, Viewport-Width, and the intended display width of the resource being fetched to the server.
Sites can specify origins that Chrome should preconnect to in order to improve performance.

Service Worker

Cache.addAll() is now supported, removing the need for polyfills enabling bulk interactions with the cache.
The Fetch API now supports Request.redirect, allowing more control over redirects.
Resource Timing extensions to the Performance interface are now available without prefixes.
As part of our continuing policy to remove powerful APIs on insecure origins, the Cache API is now restricted to HTTPS.

Continue reading →

Chrome

Google Search Updates

Helping hacked sites reconsider – A successful reconsideration is the last step a hacked website owner will need to go through to let Google know the site is now safe for users. You can see what is the progress in the way Google handle these requests here.

Mobile – As of September 1st, Google updated the Mobile-Friendly Test to indicate that sites should avoid showing app install interstitials that hide a significant amount of content on the transition from the search result page. The Mobile Usability report in Search Console will show webmasters the number of pages across their site that have this issue. If you have a site that is not connected to Search Console, I recommend you to connect it, it’s a great way to keep track on your site’s health and get important messages from Google.
For more read here. Continue reading →

Chrome, HTML5, mobile, webdev

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. Continue reading →

Chrome, JavaScript, mobile, webdev

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.

Continue reading →

Ido Green

Thoughts To Remember

Category Archives: Chrome

Password Forms That Browsers Love

High Conversion Web Forms

Design Better Forms

Chrome, Firefox And Edge/IE Will Soon Drop RC4 Encryption