One app, multiple devices
Responsive Layout
The London theme was build with Tablets in mind and is responsive to make sure it takes the most of the device used. This means that the look & feel will adjusts dynamically to the screen size based on the behaviours defined in the new CSS. 
Responsive web design
According to Forrester Research, responsive web design is a natural evolution of the web - and it’s here to stay (More than Hype: Determining when to use Responsive Web design). The advantage of the OutSystems Platform is that it enables the creation of responsive applications even without advanced JavaScript or CSS expertise.
OutSystems grid
The theme is based on the grid technology released on version 8 of the OutSystems Platform. The theme redefines the grid size accordingly to the available screen size. To preview the responsive behavior, resize your browser window and see how the grid adapts itself to it.
< 764px (Smartphone)
>= 764px (Tablet Portrait) < 1024px
>= 1024px (Tablet landscape & Desktop)
12 col
6 col
6 col
3 col
9 col
3 col
3 col
3 col
3 col
How to use the responsive grid
By default the London responsive grid is active on all your screens which use the Layout_London, unless you use a different Layout for your screens. In this case you can still enable the responsive grid by adding the class Responsive to the Content div.

The London grid is based on the default values  -  columns 60px wide and a gutter of 20px between them - which shouldn't be changed for a correct behavior.
<div class="Content ThemeGrid_Wrapper Responsive"> ... </div>
Hidden in devices
If you need to hide certain areas of your application in some devices, the London theme provides the necessary classes (HiddenInDesktop, HiddenInPortrait, HiddenInSmartphone, ShowOnlyInMobile) to achieve that. You can even combine those classes to hide those areas in more than one situation.
Style:
HiddenInDesktop
Style:
HiddenInDesktop
Style:
HiddenInPortrait
Style:
HiddenInPortrait
Style:
HiddenInSmartphone
Style:
HiddenInSmartphone
Style:
ShowOnlyInSmartphone
Style:
ShowOnlyInSmartphone
  Please note that the content is still downloaded to the user's browser, but hidden from view. It will not reduce the page size and an advance user can even inspect the page and discover the hidden areas if he wishes to, so have your server logic prepared for such situations.
How can you create your own responsive rules?
You just need to place your custom CSS inside a media query corresponding to the scenario you want to customize. By default, the CSS is being applied to all devices, but then you can override it for portrait tablet and smartphone devices (the rules are defined by the order in you in your CSS documents).
/* Portrait Tablet */
@media screen and (max-width: 1023px) { ... }

/* Smartphone */
@media screen and (max-width: 764px) { ... }
Menu
Build your menu just like you normally do in an OutSystems application. The London theme will automatically transform it to a right side panel below the 1024px and display it with a slide animation, just like a native application.
If you create your own layout instead of using the Layout_London, you can add this behavior to it by dragging the web block MenuSlider to your header. This webblock will display the menu icon when in tablet or smartphone and display the menu when clicked.
By default the menu is displayed on the right side of your screen, but you can move it to the left by adding the class LeftMenu to a container enclosing the Application_Menu container, in your Menu Web Block.
Menu
Style: LeftMenu
Style: Application_Menu
Responsive tables
Tables are a common element in most applications and it's a quite complex problem to adapt them to smarthphone screens where the size is very limited. It's always difficult to select which columns are going to be visible on those devices and which aren't, that is why we opt to do that selection for you: At start, only the first column is visible but you can always expand to see the remaining ones.
90% smartphone...
London is not a smartphone specific theme, but because it follows the uses design patterns, you can still make your application work properly on those devices' screens. The OutSystems grid columns are transformed into rows, making each column stack on top of the other and use the available screen completely. Buttons and images are also expanded to fit the available resolution, making them easy to touch/click on.
Go 100% smartphone
For a better smartphone experience it is advisable to build your smartphone-only application, using the London Mobile theme, where you can thoroughly address the smartphone paradigm.
Click here to see your activities