Phone 0508 OPENBOX

The OpenBox Blog


This is the OpenBox blog where you'll find news, talk, opinion, tips and tricks about OpenBox.


id = "FBMainForm_24688929" action="/open/blog.html" method = "post" onsubmit = "return false" >
Postings New Entry  

Welcome the “Year of Mobile” with Responsive Web Designs
by OpenBox on 

Smartphones and tablets are catching up on desktops and laptops as a primary way to access the internet, and it is clear that one size - or website - no longer fits all. Websites should display optimally on every device.

The new OpeBox responsive web designs (RWD) address this issue, by adapting to device-specific requirements. With “flexible” images and fluid grids, content and layouts automatically resize to fit the screen. Images and galleries grow and shrink, the content elements and copy reflow themselves. The end result - website visitors enjoy an optimal browsing experience on smartphones, tablets and desktops.

All you need to do to switch to a RWD version of their current design is to simply re-apply it.

OpenBox Responsive Designs at a Glance
The most important RWD behavior that you will notice is the transformation of the main website navigation into a mobile-friendly version for all screens with width size of 600px or less.


The main menu, page image and top navigation adapt to the device screen size

All Text & Image and Form elements also feature responsive behavior. The website fonts become smaller; images, tables and horizontal lines scale to fit the width of the device screen. The section tabs, CTA buttons and galleries also get resized automatically.

Beside element scaling, RWDs feature fluid layouts. Page columns and section element columns fall one below another and snap to the width of the mobile device. 


Section columns get rearranged for optimal user experience on smaller screens  

You can take advantage of this responsive design feature by using sections or page columns instead of tables, where possible. Even though the text inside the tables will get scaled and will reflow itself according to the screen width, the table columns will not fall one below another as section columns will. See below examples comparing tables to sections in desktop and mobile view.


Images and text get scaled and reflowed, but since the table columns are not rearranged, they become quite narrow.


Although the content looks the same in desktop view, it is nested inside sections instead of a table. The mobile view of the same page is much more readable.

The last type of RWD behaviour aims at simplifying the page interface and layout to result in an user-friendly website version for tablets and mobile phones.

RWD and Dedicated Mobile Presence
The new responsive web designs are a perfect solution for the majority of sites as RWD lower your maintenance load significantly, support a single URL and an offer optimized user experience across devices. But still there are websites that require a dedicated mobile presence. SiteKreator’s Mobile Home Page application provides the best solution for web visitors with specific mobile browsing needs. Local service provides, shops, restaurants and other brick-and-mortar businesses can significantly reduce bounce rates by maintaining a dedicated mobile home page. It ensures lightning-fast load times and provides action-oriented interface with buttons to the most needed pages on the go, such as Business hours and Location.

Pricing and Availability
OpenBox Responsive Designs replace the standard OpenBox designs and are available with your subscription.

Hide Comments     Permalink     Add Comment

Mobile homepage
by OpenBox on 


Mobile Home Page application allows you to have a home page for mobile device users, and add buttons directing users to several other pages optimized for mobile viewing. Mobile Home Page application works alongside Page Usher application. Mobile pages use the ready-made Mobile design layout. Application becomes available in Add Content after install.


Create your new Mobile Home page as you normally create a page. Choose Mobile Layout for it from Page Appearance. Set it for Mobile redirecting in your Page Usher application controls. Add Mobile Home application on page.The Mobile Home Page properties will open. Use it to Define the buttons that should appear in the dialpad grid.

By default you have these buttons: a Call us, Email us and Link to desktop site.

Call us button will display a separate button for quickliy placing a call to your company number. Check the checkbox next to it to activate it and to enter the phone number.

Email us button will display a separate button for quickliy emailing your company email address. Check the checkbox to activate it and enter the email address to be used by your visitors. Clicking the button will open their default mailing programs, with a message ready to be written and sent.

Full site link button will display a small link to the desktop version of the site at the bottom of the application. You have the option to customize the text displayed on that button. Set the link target of the button, usually the Home page of the desktop version of the site, or other landing page.

Next, you should define the dialpad buttons that will appear in the Mobile Dialpad. On the browser on their mobile devices your visitors will see different buttons leading to different pages, on a Mobile layout. You may setup a mobile version of any page of your site, and direct your visitors there through the buttons of the Mobile Dialpad. you have the option to add icons. Here how the buttons appear on page:


By default you have these buttons: a Call us, Email us and Link to desktop site.

Call us button will display a separate button for quickliy placing a call to your company number. Check the checkbox next to it to activate it and to enter the phone number.

Email us button will display a separate button for quickliy emailing your company email address. Check the checkbox to activate it and enter the email address to be used by your visitors. Clicking the button will open their default mailing programs, with a message ready to be written and sent.

Full site link button will display a small link to the desktop version of the site at the bottom of the application. You have the option to customize the text displayed on that button. Set the link target of the button, usually the Home page of the desktop version of the site, or other landing page.

Next, you should define the dialpad buttons that will appear in the Mobile Dialpad. On the browser on their mobile devices your visitors will see different buttons leading to different pages, on a Mobile layout. You may setup a mobile version of any page of your site, and direct your visitors there from the buttons on the mobile dialpad:
Hide Comments     Permalink     Add Comment

Advanced Navigation options
by OpenBox on 

As part of an ongoing effort to increase the customization options of your site, we are now introducing Advanced Options   for allNavigation Areas and Navigation Items.  




When you enable the Advanced options in the Navigation Areas you will have access to some of the less frequently used options like Menu Alignment and Sub-Menu Appearance.

Enabling the Advanced options in Navigation Items properties reveals the Mouse Over Text, Color and custom image options. Also in this mode you can specify whether your links will open in the Same Window, New Window, or a Lightbox pop-up. By default all internal links will open in the same window and all external links will open in a new window, but with the new Advanced settings you can now change that.
 
 
Hide Comments     Permalink     Add Comment

Text and Image Editor Improvements
by OpenBox on 

We are very excited to announce the release of second batch of improvements in the most often used component in OpenBox: the Text and Images editor. The goal of this release was to simplify the management of images for novice users, while at the same time unleash the power of the web to more experienced users.


At first sight you will notice the image properties panel is significantly simplified with just three settings: Image Size, Caption and Alignment. But with the simple flip of the Advanced switch, you get all the options available before plus a lot more in the newly redesigned panel.
Another major improvement in this release is the ability to set a different image that will appear when you roll-over an image, and what transition effect  should be used between these two images. Having roll-over images can greatly increase the interactivity of your web site, and can be used to create attractive call-to-action buttons. See example of this feature in action below (roll-over the image) as well as on this demo page.

 
In addition to the rollover image options, we are also introducing a new stock image library which will allow you to use stock images and icons on any of your pages. You can choose one of several collections of images and filter the images in a collection by keywords.

Once the stock image has been added in the Text and Image editor, you can use it as any normal image, except that you can’t edit it.

Learn more about the new Library features, and how to create rollover images in just a few clicks by following our detailed tutorial and in these examples.


Hide Comments     Permalink     Add Comment

Text & Editor improvements
by OpenBox on 

Today we are very exited to announce the release of second batch of improvements in the most often used component in OpenBox: the Text and Images editor. The goal of this release was to simplify the management of images for novice users, while at the same time unleash the power of the web to more experienced users.


At first sight you will notice the image properties panel is significantly simplified with just three settings: Image Size, Caption and Alignment. But with the simple flip of the Advanced switch, you get all the options available before plus a lot more in the newly redesigned panel.

Another major improvement in this release is the ability to set a different image that will appear when you roll-over an image, and what transition effect (if any) should be used between these two images. Having roll-over images can greatly increase the interactivity of your web site, and can be used to create attractive call-to-action buttons.

In addition to the rollover image options, we are also introducing a new stock image library which will allow you to use stock images and icons on any of your pages. You can choose one of several collections of images and filter the images in a collection by keywords.

Once the stock image has been added in the Text and Image editor, you can use it as any normal image, except that you can’t edit it.

Learn more about the new Library features, and how to create rollover images in just a few clicks by following our detailed tutorial.
 
Hide Comments     Permalink     Add Comment

Applications
by OpenBox on 
Today we will talk about the Application platform that will let you add a raft of new functionality to your site within minutes, all without any coding. The Application platform comes with several built-in applications like social media widgets, a voting poll and Google maps and more will come in the near future.



You can install these applications from Control Panel > Applications. Choose the application you want to add and click "Install".

Below is an overview of the first few applications that we have released today.


AddThis button makes sharing easy by adding a AddThis button to your site.
Facebook social plugins let you add "Like" button, Activity feed and other Facebook widgets to your site.
Google maps lets you add and embed a Google map to your site. You just specify the address and the size of the map.
Image zoom lets your visitors see a large versions of any image on your site by clicking on the image. In order for this to work, the images inside Text and Image element and have to be scaled to a smaller size image.
Page rating application displays a floating control at the bottom of a site's pages that lets users rate pages on the site using a star-rating system.
Snap Shots application adds Snap Shots for all links on your site.  With Snap Shots, users can mouse-over links to get the most appropriate shot of content for that link.
Twitter profile widget lets you display Twitter updates on your site.
Voting poll lets you display a single question and a number of answers on your site, along with result-statistics.

Applications are currently available for all our Business Premium and Deluxe subscribers. If your current plan does not include these features, you can always upgrade from Control Panel > My Account > Change Plan.

 

  
Hide Comments     Permalink     Add Comment