Web Forms Best Practices

The Tree

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: Continue reading

business, webdev

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.

game-users-whales 2015-05-29 12.33.04 Continue reading

Chrome, JavaScript

What’s New On The Web And Chrome

In tslack-logohe last post about powerful new APIs we talked about Service Worker, notifications, push and more. This week we got some other news, videos, slides and a new slack channel for web developers that you should take part in.

New Stuff Around The Web

  • Google Tone is an experimental Chrome extension for sharing the URL of the current tab with other computers by using audio!
    Yes, it does not use Bluetooth, NFC or WiFi: it only sends audio waves. “Google Tone turns on your computer’s microphone (while the extension is on) and uses your computer’s speakers to exchange URLs with nearby computers connected to the Internet.”
  • Can web apps be as smooth and slick as native? YES!
    Paul Lewis made a web app to show how. The app uses all the latest goodies, including Service Workers, ES6 Classes and Fat Arrow functions, and Promises.
    Check out his blog post here for all the details!
  • The best (new) show in town about best practice tools.
  • Another new location we maintaining to hold all the news around web development: and if you like medium we got a new channel there as well.
  • Polymer 0.9 library is released!
    The 0.9 release is very similar to 0.8, with many of the “experimental” 0.8 features now officially supported.
    Full release notes for 0.9, including the breaking changes from 0.8, are available on the Polymer site.
  • Two new videos from talks that Paul Lewis and Jake Archibald gave last week:

Continue reading

Chrome, webdev

Mobile Sites Improvements – Push Your PageSpeed Score Up

In the past, I wrote about ways to improve your mobile website.
In this short post, we will focus on one tool that could help you move the needle. PageSpeed Insights is a free tool for developers to check how their site performs out in the wild. It also got a good API so you could use it during your build process.

Here are the current results I see on my projects’ site: Continue reading

Chrome, webdev

Chrome’s Market Share And Service Worker

According to Stat Counter in the past 3 months Chrome made a progress in market share. It’s now got ~31% world wide. But if we dive a bit deeper into the chart below we can see that the situation on mobile is even better.


Take into consideration that Chrome + Android + UC Browser + Opera is ~70% of the market it’s a great news for web developers in terms of APIs. I hope to see soon the power of Service Worker and Push notifications in many more browsers. It’s the start of a new wave of web apps that look and feel similar to native apps. Continue reading


Valuation Vs Terms #startupTips

The startup bridgeYoung entrepreneurs (at age or at heart – It doesn’t matter) are very sensitive about valuation or in their eyes: “how much I’m going to get diluted”. After doing several deals both as co-founder and as investor, it became clear to me that it’s the wrong thing to focus on. Moreover, in such an early stage of a startup, no one can do a valuation. It’s all guesses. So the numbers and the arguments over them are ridiculous. What I do find important, are the terms. The ‘little’ details in the term sheet that will drive the future outcomes.

Terms matter

You need to understand what is the meaning of each basic concept like: liquidation, participation, ratchets and preferred shares.
Let’s have a quick look. Continue reading

business, Chrome

Auto Complete Attribute Will Improve Your Profit (And Forms)

Hands full (with grapes)

Autofill in Chrome

Chrome has a great new Autofill feature that as a developer you’ll want to add to your websites for Chrome to use. Other browsers are sure to follow too. The first time you fill out a form, Chrome automatically saves the contact information that you enter, like your name, address, phone number, or email address, as an Autofill entry. You can store multiple addresses as separate entries. Moreover, Chrome can save your credit card information, with your explicit permission. When you enter credit card information on a form, Google Chrome asks you at the top of the page whether you’d like to save the information. Click “Save info” if you’d like the credit card to be saved as an Autofill entry.

Later, when you start filling out a form, the Autofill entries that match what you’re typing will appear in a menu. Select an entry to automatically complete the form with information from the entry. Chrome also saves the text you’ve typed in specific form fields. The next time you fill out the same field, text that you’ve typed in the past appears in a menu. Just select the text you want to use from the menu to insert it directly into the field.

In Chrome, you get a full support for the autocomplete attributes . All we need to do is to make sure we are leveraging them. You will improve your checkout process and make your users 6.73 times happier. Since autocomplete is part of the standard (WHATWG HTML) you know that other browsers will support it as well.

The autocomplete attributes can be accompanied with a section name, such as:

  • shipping given-name
  • billing street-address

This is recommended because it will make your form easier to understand and fill. The browser will auto complete different sections separately, and not as a continuous form.
Continue reading