Mobile Forms

[ehmd]

I'm looking at developing some public facing forms which will be required to be used from both a desktop PC and mobile phones.

Are there any recommendations on the best way to approach this, e.g.

Develop separate forms for Desktop and Mobile or
single form with separate pages for desktop and mobile or
single form which can be used by both ?

Data updates will be performed via an Integration Service to separate this from the form functionality.


Thanks,


Mark

[Jon]

The following remarks are for Ebase V4.4. This is an active area of development at the moment and mobile-specific features will be introduced in future Ebase releases. There is no specific recommendation at this time from Ebase on how to develop forms for multiple devices. The answer depends on a number of factors such as: how sophisticated you would like the mobile UI to be, how much time you are prepared to invest in development etc.

The choice between separate forms and one form with device specific pages is relatively straightforward and is probably determined by the amount of duplication you would need. If this is relatively small, separate forms make sense. If it's larger, I would prefer one form - with V4.4 you can use the client.isMobile() method to detect a mobile device and then display the appropriate pages.

Another option is to have one form and use responsive templates so that the layout varies depending on the device type. This is a technically attractive solution as you have no duplication plus it also provides a way to support tablet devices. But it also has some negative aspects:

• o It takes longer to configure the templates. This is done with HTML controls to configure the layout sections.
  
  o The templates will use HTML5/CSS3 features that may give you compatibility problems with older browsers.

[alexmcclune]

Hi,

I am wondering if there is any update on this as we are about to being development requiring mobile device support.

I will be upgrading all our installations to v4.5 today. I have read the changes and nothing seemed to suggest any advice relating to responsive design.

EDIT ->>>>>>>>>>>>>>>>>>>>>>>

We have been playing around with responsive templates today and are happy we have got things working. Basically we downloaded a sample template and then built a basic form, within form properties we have referenced the style sheet from web resources / HTML section.

[Wai]

Yes, responsive templates are the recommended approach to getting your web applications on a mobile.

Using this approach, you can design and build your application as normal in Ebase.

Responsive templates use CSS3 media queries which allow you to adapt the styles and layout of your site to the device width or resolution.

You can change menus, hide or show parts of the page, scale the content, and change the layout.

Avoid using tables or displaying lots of table columns.
Avoid using inline styles. Use CSS classes and add these to your property sets instead.

[JoshuaW]

Thought you might appreciate this useful trick I've learnt,
I'm using v4.5.1

I wanted to show two column, but force the two column into a single column when in mobile.

To achieve this, place the two controls within a panel, then assign Custom layout to the panel. Add

Code: Select all

class="twocolumn"

to the control div tag within the velocity template.
ie:

Code: Select all

## Write all controls excluding Field Controls
<div class="twocolumn">$CONTROL</div>
#end

Then in the CSS add the following:

Code: Select all

.twocolumn
{
float:left;
padding-right:10px;
width: 450px;
}

And in another css file which I use to control the overall look and feel

Code: Select all

@media screen and (min-device-width:320px) and (max-device-width:480px),screen and (max-width:520px) {
.twocolumn {
float:none;
padding-right:0px;
width:100%;
}
}

Have fun!