Last week we told you about our new release which means that your WebEden website now has a mobile version suitable for smartphones and other mobile devices.
Mobile phone, smartphone or tablet?
One of the most complicated parts of this was making sure we built a version for all screen sizes – including tablets and mobile phones – and which detected whether the device was running Flash.
Broadly speaking, mobile phones will see the mobile HTML version, other devices without Flash (including the iPad) will see the desktop HTML, and any device with Flash installed will see the Flash version.
The Destop version of a WebEden website:
And the mobile version of the same site:
Mobile HTML Version
This is the first time we have built a mobile HTML version, so we’ve called it, erm, version 1.0! Its set up for small screen mobiles so all the content of your website is in a single column. Images are resized, links are larger to make them easier to press, and navigation uses a roll out menu. This makes the whole website easier to read and navigate.
This is definitely a work in progress. There are lots of things we’d like to do to improve it, and we’d like you to tell us how you want it changed too.
How the mobile version works
One of the reasons why people love WebEden is because you can use it to design in any way you like. We don’t restrict where you put your content and images, but allow you to drag them round the page and resize them until you’re happy.
That’s great from a design perspective, but because there’s often no formal architecture it make it challenging for us to write logical code that turns this unordered design into a formal structure for a mobile.
So for the mobile version we had to write an algorithm that analyses your free form design, makes sense of the order, and then lays it out in a single column. The code needs to make assumptions about what’s important and what’s not.
Columns and groups
In order to create a structure for each page we try to group objects which lie over the top of or near to each other (on the X and Y axis) into rows and columns.
Here’s a tip: Keep related content lined up, either in a line or on the Y axis, so it helps us group them correctly.
We assume the widest column on your website is the most important and display that highest on the page, with the other grouped content falling in a single column beneath.
Another Tip: Make sure your most important content is in the widest column.
Headers and footers
We then identify the header as content at appears above the site menu. As for the footer we use the placement of widgets such as the login button or the social media links as an indication of footer content. If you don’t have these then we assume the last row is the footer.
Tip number 3: Try testing the position of objects to help us correctly work out what goes in the header and footer.
There are some parts of your design that are there for pure aesthetics, and we ignore these for the mobile version. These include some images, empty text boxes, or items covered by other objects. Let’s say for example you place a coloured square behind some text. We make a decision that the text itself is the most important part of the design and render that in HTML, whilst leaving out the coloured square.
Tip 4: If you definitely want an image to show up in the mobile version then make sure it’s not covered by anything else.
We realise this isn’t perfect so are working to improve it for the next release.
The mobile HTML version of your website is fairly generic. For example, we use the HTML background colour and use that. We don’t apply additional styling to text or menu colour. Again, this is something we’ll improve next time around.
On the mobile HTML version the ‘menu’ button at the top will always display, even if you have hidden the menu from the page on your desktop site. This is important to make sure that users can always navigate the site.
Headlines for SEO (H1, H2 and H3)
At the moment the first ‘title’ text box on each page is set as the H1. Other ‘title’ text boxes are given H2. In the body text a bold line less than 120 characters is given H3.
That’s the basic intro to the mobile version of your website, how we make decisions about what goes where, and some guidance on how to change how it looks.
We really want to find out what you think of the mobile version, or if you are having any problems, so please leave a comment and let us know what you think.