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.

Advertisement

Chrome 45 New Features

Time flies!
Since my last update on Chrome 44 we had the chance to see the market crash and quite a lot of new features that were baked into Chrome 45.
The main improvements you should take a closer look at:

• A set of new ES2015 features including:
  • Arrow functions – Arrow functions are always anonymous and effectively turn function (arguments) { expression } into arguments => expression.
  • New methods on Array
  • New methods on TypedArray
  • Object.assign() copies the values (of all enumerable own properties) from one or more source objects to a target object.
    It has a signature of Object.assign(target, ...sources)
• SMIL is deprecated – to learn more please check out the discussion.
• This (long time) bug is fixed.
• Web Bluetooth is now available in Chrome OS 45.
  It’s still in Developer Preview and the team is actively looking for developer feedback.

Chrome for Android Media controls
On Android, native apps can show media controls in a system notification when playing audio, making it easy for users to control audio while multitasking. Chrome 45 brings this capability to the web by showing a notification with media controls when audio is playing in web content. The controls will automatically show up when <audio> or <video> tags play audio longer than 5 seconds. It will look like this:

Sublime Text 2/3 – Packages And Shortcuts

I always start with the one package that allow to stay in sublime and improve it quickly: packagecontrol.io

Next on the line is the option to make our editor a bit more friendly with: SublimeCodeIntel It’s A full-featured code intelligence and smart autocomplete engine for Sublime Text. Few of the technologies that are supported:
JavaScript, SCSS, Python, HTML, Ruby, Python3, XML, HTML5, Perl, CSS, Node.js, Tcl, TemplateToolkit and (of course) PHP.
From here there are many options.
Few the I’ve found useful:

• Git
• Emmet
• Terminal
• ColorPicker
• SublimeREPL
• LiveReload – Make your life easier with this live reload ability. It will save you a lot of clicks on the ‘reload’ button (or cmd+r).
• MarkdownPreview – I love markdown and this one is making me more productive with it.
• JSLint – If you are writing some javascript, this one is a must.
• DocBlockr – Create a new documentation block with a quick click. And yes, it will extract that function’s parameter information and pre-fill it in your documentation block. nice, no?
• Soda Theme – just to keep up with the cool kids on the block.

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.

Chrome 44 New Features

Chrome 44 is now in stable channel and there are many updates and improvements:

• Improvements to Notifications API and promoted add to homescreen.
• The Push API has undergone several minor breaking changes in order to keep up to date with the evolving specification.
• A new implementation of multi-column layout, solving historic issues with incorrect column balancing.
• Developers should now use the scroll attributes of document.scrollingElement instead of document.body as the latter has several well known issues.
• ES6 extended Unicode escape sequences allow developers to use the extended set of Unicode characters in JavaScript string literals, where previously characters whose escape sequences contain more than four hexadecimal values were unable to be denoted.
• What a quick summary? you got it all in under 4 min video!

And there are a lots of other improvements and security fixes.

What is hot and new on the web?

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).

Web Forms Best Practices

Here are some of the rules that will help you build better forms. As we know, it’s a mobile world, so we wish our forms to be responsive and mobile first by nature. Let’s see how to do it right.

Use big font size and provide easily touch buttons

Here it’s simple, when you have doubt, make things bigger and check. In other words, you wish your fonts to look great both on mobile and desktop. For mobile, a rule of at least 16px will be a good start. Why? because it’s big enough in most cases for mobile. Plus,  this minimum size will prevent all iPhones from zooming into the fields. For buttons and touch areas, start with at least a size of 32px for the input field height. This will ensure it’s not too small. However, check it both on mobile (few devices from 4″ to 6″) and on larger screens (=desktop or large tablets). Both Foundation and Bootstrap gives you a default size for such elements that is good for mobile.

Take advantage of Autofill

This will enable your users an easy way to complete forms with pre-populated data.  Look for opportunities to pre-fill information you already know (e.g. Geolocation to fill the zip code), or may anticipated to save the user from having to provide it. For example, pre-populate the shipping address with the last shipping address supplied by the user. See it in action at: greenido.github.io/form-example.html

3 Principals To Increase Revenue In Games

1. Focus on the users that love to play

You wish to promote certain items (e.g. gems, levels, arms etc’) at the right situation for the ‘heavy gamers’. It is these gamers that spend the big bucks, just have one look at the graph below to appreciate it. The challenge is to identify these players and to find the right situations. Check your analytic tools to find out segments of users that are out of the normal distribution curve. In the graph below you can see an illustration for what we wish. Focus on the all the Whales.