Documentation
Barisco Helpcenter
Video Tutorial – How to use Interactions
Using free background patterns in Barisco
How to prepare designs in Photoshop for Barisco
Video Tutorial – Explanation of Barisco’s editor user interface
Video Tutorial – How to use the scroller
Video Tutorial – How to create overlays or pop-ups
Video Tutorial – How to create groups
Video Tutorial – How to use the Position & Size panel
Free interface templates in Barisco
Different interfaces for different platforms.
What features are not supported in Internet Explorer?
How can I optimize the load time of my project?
Why do fonts appear differently across different browsers and de
How to add your own domain name?
Does Barisco support Android?
How to duplicate pages to a different edition
Video Tutorial – Interfaces 2/2 – How to design a custom interfa
Video Tutorial – Interfaces 1/2 – Using default interfaces
Release 2.0.0.0
Optimize your publication for SEO
Direct Share to Social Media Channels
Embed your Project
DOOH (Narrowcasting)
Release 2.1
Improved Group settings for desktop and mobile views using one U
Improvements Release 2.2.5
How to create pixel perfect mobile web pages without coding?
Making a mobile ready site in 5 steps:
Reset your Profile
Animate Layers in the Scroll when Visible
Use now animated GIF in Barisco.
Integrating YouTube video’s in your Barisco projects is easy!
How to create a landing page or vertical scrolls in a page.
Release 2.0.1.0
Implement Youtube original player (control)
New! Dimensional scrolling features for landing pages micro site
UX improvements
Orientation options on publication settings
New Features for creating templates in the restricted editing
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.
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
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.
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.
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.
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.
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.
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)
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://www.kanosportmagazine.nl
http://emastermagazine.eur.nl/
http://newsletter.sixsenses.com