The tablet experience
Touch Ready
The London theme was specifically designed to address the tablet user. With responsive rules and the re-redesign of the most common controls, such as buttons, tables and screen actions, London is able to provide a complete user experience in the most common touch devices.
Fat fingers
Tablets are now part of our lives and whether we like it or not, if our web applications are not optimized for these devices, we might not be giving our users the best experience. A major difference, other than the screen size, is that tablet users don't have a keyboard nor a mouse, instead they use their clumsy fingers.

To overcome this limitation buttons, links, actions and rows size have been increased to be large enough for tablet users to avoid clicking in the wrong options.
Now it's up to you
We have done our part in creating a theme that in general follows the good design patterns for tablet users. Now that you are going to use it to build your own tablet ready applications, there is still some concerns that you should know:

- By default, leave some space between all clickable areas. It can be quite difficult to hit a certain link with your fingers, especially if you have another one really close by, and chances are that your users will sometimes click the wrong one and get frustrated;
- Don't use small fonts as the text will be barely visible on smaller devices. Try to keep the 14px as your minimum font size and only use a smaller one if you have a really good reason;

- Avoid adding too much media elements to your screens, it can cause loading issues. Remember to always test your screens in real scenarios, using the tablets over a WIFI or 3G network;

- Forms are really hard to fill on touch devices, so keep them as simple as possible. Don't ask for unnecessary information and use touch friendly inputs such as toggle buttons.

- Tablet users don't have hover behaviors, so don't use tooltips or any other elements that might require a hover effect to trigger it. You can still use hover styles for the desktop users, e.g. highlight a button or a link, but keep it strictly secondary.
Infinite scroll
Infinite, continuous or endless scroll, they all refer to the technique of making the browser auto load new content when the user is reaching the bottom of the page. This will avoid the use of pagination, which in some cases can be a benefit. See it in action in one of our page samples.
The Benefit
- Keep the user's focus on the content by automatically loading more. The user will not have to think where to find the pagination, how many pages there are and where to click to see the next page.
The Downside
- Users with dial-up connections or poor mobile data plans will have a worse experience as the page continuously loads for more content when reaching the end of the screen;
- Some users might also suffer from a lack of orientation or feel confused not knowing where they really are or missing what they are looking for;
- The footer of the page will only be visible when the user has scrolled the entire list.
How to use infinite scroll on your projects?
1. Simply remove the pagination and table counters originally created by scaffolding and place the InfiniteScroll web block in the same place. This web block will detect when the user is reaching the end of the screen and, in that case, trigger a notify event. 
2. Assign the OnNotify action from the InfiniteScroll web block to the RefreshTable event, which was also created automatically by scaffolding, and set both parameters to false as you are not reseting the filters nor the pagination.
3. Create a screen variable - e.g. NumberOfRows - that will store the number of rows that are currenly being shown to the user. This variable will increase each time you are going to load more records. Set its default value for the number of rows you initially want to display, e.g. 20.
4. On the RefreshTable action, change the logic to increase the NumberOfRows (e.g. NumberOfRows + 20) if you are not resetting the pagination or filters. If you are resetting the filters or pagination, set the NumberOfRows to its initial value.
5. Finally, go to the table record and set the Line Count, in the property panel, to the NumberOfRows variable and the Start Index to 0. This will set the table record to always show items from the start (zero), displaying as many rows as the variable NumberOfRows is.
Optimizing inputs
When building applications for mobile devices (tablets or smartphones), there are certain properties that you can use to improve the user experience. These devices are ready to optimize the user input based on what they perceive the user is going to need. A good example is an input  where the user needs to enter a number. When done correctly, the device will understand that the user will input a number and display the numeric keyboard and not the regular one.
 Note: The following examples are targeted for tablet/smartphone users. If you are testing this screen on a desktop browser, you should expect the normal behavior in all inputs.
Keyboard types
Numeric keyboards
For numeric values, you need to set the input type property to Number and the device will display the numeric keyboard for the user.
Even for decimal values you can set the input type to numeric and the device will display the corresponding numeric keyboard.
Other keyboard types
The same rule applies for the other input types: Text, Email. The device will optimize the displayed keyboard for the appropriate user input improving the user experience.
Use the device camera
If you want your users to upload a photo - which can replace the scanning of document - you can easily take advantage of the mobile device capabilities, in particular, the camera. This is done by using an HTML 5 property - accept - which you need to add into your file upload widget extended properties.
Extended Properties
name: accept
value: "image/*;capture=camera"
Turn off autocorrect and autocapitalize
By default, mobile devices think they are very intelligent to the point of correcting everything you input. Everywhere. But sometimes you are required to input words that are not that common in the device's dictionary, which makes those smart mechanisms a really painful user experience. The same applies for the auto capitalization of words - some times you really just wished to input as you please.
There are actually good news for you. By setting the extended properties autocapitalize and autocorrect to false you can easily disable these two features off in your inputs.
Click here to see your activities