Making a mobile ready site in 5 steps:

In our example we show you how to create a portrait version using a vertical scroller. For sure you can also build pages without a vertical scroller if you want.

Step 1.

Create a new edition or copy an existing one so that the content you may want to use is already in the edition.

In the editions settings you can choose the options mobile portrait or landscape view.  By also selecting tablets you will have the same view for smartphones and tablets.

edition-settings

The edition setting is automatically set to the correct dimensions to use for the chosen devices.

Portrait

Mobile alone >> width 320 pixels and height 548 pixels >  Portrait

Mobile and tablet >>  width 748 pixels and height 1024 pixels > Portrait

and landscape

Mobile alone >> width 548 pixels and height 320 pixels >  Landscape

Mobile and tablet >>  width 1024 pixels and height 748 pixels > Landscape

Your web page size is now correctly configured.

Create a specific interface for your mobile view. In our interfaces you have preset interfaces that are customizable. But feel free to build your own. How? Visit http://barisco.com/knowledge-base/video-tutorial-interfaces-22-design-custom-interface/

 

default-interface

Step 2.

To make the correct set up you need to execute following ateps:

add a scroller component to your page.  When you set the scroller component to top, bottom, left and right the scroll automatically covers the whole screen  When selecting the vertical function of the scroll and disable the horizontal function you make the page scrollable.

scroll-component

 

Step 3.

You can start adding content to your scroller. You can drag and drop existing layers in or out of the scroller component  or create new layers inside of the scroller.

The moment you position layers outside of the scroller component area,  the scroller becomes functional and you can preview the page.

Groups-in-scroller

 

If you need to place a substantial amount of content in the scroller, we advise you to build up your content in groups so that you can easily organize you content.

Another reason to use groups is that you can set the scroller to automatically arrange your content vertical or horizontal (Scroller Layout) so that your layers or groups will automatically appear under or next to each other.

In this case we set to vertical.

Scrolelr-vertikal

Using groups and a vertical setting  are convenient if you want to create a footer that is used on every page. You can copy this footer to each page and position it on the lowest level of your  groups.

You can use also build a footer in modular editing and store it in your library. Using drag and drop you can place the created footer on each page. If you edit the module, all placed footers will adjust accordingly.

Step 4.

The correct settings for the group and  text layers are left / right in the position settings.

scroll-text-settngs

The group or layer will then position itself to the full width of the screen.

The text will in this case adjust to the available space and automatically expand  if necessary.

Groups also have the option to set to vertical or horizontal layout so that layers after for example text layers automatically reposition themselves when text becomes longer or shorter.

vertical-group

 

Images can be set the same way so that they use the full width or even the total back ground of the scrollable area.

Note: If you want to have content that scrolls over a background  image, you need to place that image outside and under the scroller.

Step 5

In Barisco you can animate each layer or group that is added to your page. You can create the animation “start to play” when the layers are visible in the screen. You can enable this option by selecting the checkbox inside the animation toolsbars. When a layer in the group also the group needs to be set to play when visible. (You can set the group to No animation)

Play-When-visible

When this function is set the animation will start when it becomes visible in the scroller component on the page. The animation will start each time when it becomes visible.

You are now ready to build your own  mobile ready site!!

Some examples (please open in smartphone browser):

http://nieuwsbrief.onora.eu

http://www.kanosportmagazine.nl

http://emastermagazine.eur.nl/

http://newsletter.sixsenses.com