Moonfruit Lounge

A major part of the last release was addressing the way your site is displayed on different devices. A key part of this was the mobile HTML view, but more than that we had to put in place a plan to cater for all devices that let us decide which version they should see based on their screen size and Flash capabilities. Generally mobile devices will see the mobile HTML, while large non-Flash devices (e.g. iPad) will see the desktop HTML and Flash enabled devices will see the Flash. As the new Andriod tablets start hitting the market in larger volumes this year, we'll see how they perform and choose either the Flash or non-Flash view appropriately as the default.

Snooty fox website

Snooty fox on 3 HTML devices

Snooty fox on Galaxy Tab (Andriod with Flash)

Mobile HTML

So version 1.0 of our mobile HTML is now live. It is optimised for small screen mobile devices in that the content of each page is ordered in a single column for ease of reading, images are resized for the device size, links are made larger for ease of use and the navigation uses a roll out menu leaving more space for the content.

It's definitely a version 1.0 for us because we already have a list of improvements we want to make, but we also want to gather your feedback to understand things you think it doesn't do well and get ideas on other improvements you'd like to see.

How it currently works

When you build a site with us you are allowed to lay out your content in any way you like. You can move any object to any position, you can layer objects on top of each other and you can change the colour, size or rotation of nearly anything. This is great as a free form design package, but it can be hard to see what the underlying 'structure' of the page is. As a human looking at your site it's obvious, but as a piece of code 'looking' at your site and trying to figure out what is important and what isn't, then it's not always easy.

The challenge for us in creating this mobile version was to write an algorithm that analyses your Flash page, 'understands' the logical order of your content and then lay this out in a single column for mobile. The code seeks to prioritise the 'important' content and make sure this is displayed without 'noise'. So our code makes a few assumptions about what is important and how objects relate to each other.

Columns, groups, headers and footers

To create a structure for your content we try to group things into rows and columns and then identify a header and a footer. When we look at an individual page the content of that page is combined with the content of the page master so we look at all objects together.

We first attempt to group objects that are related. This includes objects which overlay each other, or objects in close proximity to each other through the x or y axis.

TIP: If content is related, keep it lined up (e.g. Look at the x or y positions to keep them in a line) and this will help us group them correctly.

Using this technique we can identify rows and columns of content within your site. When we have to display this in a single column for mobile then we need to choose which column is the primary content (should be displayed first). We assume that the widest identified column is the key content and display this one first, then the other columns.

TIP: Make your most important content part of the widest column.

We also attempt to identify the 'header' and the 'footer' from the page and page master content. The 'header' is defined as any content that appears above the site menu, or in the case where you don't have a menu then the first 'row' is deemed to the be header. Similarly for the footer, we use the placement of certain widgets (e.g. the 'welcome/login' widget or the social media links widget) as indications of the start of the footer, or in the absence of these the last row is then deemed to be the footer. We may add explicit 'guides' for the header and footer in the future.

TIP: Experiment with the position of objects to help correctly define your header and footer.

Items that are ignored

We ignore some 'images' or empty text boxes if they are covered up by other objects. The reason we do this is that some objects are only on your site to create a visual division based on the Flash layout which will be different in the single column layout. For example putting a coloured square behind some text may be part of your design on the Flash site, but for the HTML version the text is most important and the square should be rendered as a separate image. So if you have an image or empty text box underneath other objects they will not be shown in the HTML.

TIP: If there is an image you think should be shown but isn't, make sure it's not covered by something else.

This is one area will will try to improve in future releases including one idea that may give you a specific flag on objects to say whether they should or shouldn't appear in the HTML version. We would preset these, but you could override them.

Design

At the moment the design of the mobile HTML version is reasonably generic. We take your HTML background colour and use this, but we don't apply any additional styling to text colour or menu colour for example. We experimented with taking some settings from your site and applying these (e.g. Menu colours) but found that because people build menus differently we couldn't be certain these settings were correct. Some sites looked great, some were unusable. We will work on improving this in future releases, perhaps adding specific settings for mobile styling.

Menu

For the mobile HTML, the 'menu' button at the top will always display at the top of your site even if you have 'hidden the menu from this page'. This is to ensure there is always a way to navigate the site. The menu will display all pages in your site except those that are 'hidden from the menu'.

SEO rules (H1, H2 and H3)

The first 'title' text box that appears on your page is marked up as an H1 title. Any other 'title' text boxes are marked as H2. In your body text if you have a line at the beginning of the text box that is bold and less than 120 characters long this is deemed to be an H3 title. All other text is just text.

And that's about it. I hope that makes some sense and please let us know if you have any questions.

Following the successful roll out of the New Toolbar for all new customers late in October, and the positive feedback from customers using it, we are now planning to phase out the old 'basic' and 'advanced' Toolbars from 1st Feb 2010.

We wanted to give you long enough to play with the New Toolbar (if you haven't already) as well as provide further feedback to us about what could make it better for you before this switch-over date. We have already received valuable feedback during the beta phase from you that helped us shape changes for the current release. We want to make sure we give further opportunity before the final version becomes the only version.

New Moonfruit Toolbar

So why are we doing this? Read on, read on...

Members only areas or client only areas can be useful ways of providing privileged information to a select group of your site visitors. This can allow you to create better relationships with these people and use your website to present or distribute information privately with a guest list that you directly control. It’s one of the features that makes Moonfruit unique among other website builders, and extremely powerful.

We've also been asked about 'paid membership'. By using Groups to create a set of VIP members it is possible to charge a fee before adding a member to that group, though this has to be done manually. So here’s how to do all of these things.

So, it's been a month or so since we released the alpha (early testing) version of the HTML widget. We've had nearly 250 people download and try out the widget in our website builder from our site labs.moonfruit.com, so we know you've been using it. But the thing we want to know is what have you been using it for?

Because our tool can be used in so many ways, the choices can often be mind-boggling. Each tool has a number of different ways that it can be customised to make it look the way you want and do the things you do, but sometimes you don't know what you want until you see it! So that's why we present to you the show homes. Here you'll find real examples of how tools can be used to stimulate your creative imagination...