Webeden Blog Softwate Update The mobile version of your WebEden Website

The mobile version of your WebEden Website

7 Replies

Softwate Update

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.

Ignored items

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.

HTML Design

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.

Mobile Menu

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 it

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.

  • Simon

    Can the mobile version be viewed on a PC/laptop?

  • http://www.gebsmoothvocals.co.uk Gebby

    Hi I am happy with the mobile version of my website but as my business is in promoting myself as a singer, it would be great if you could make it possible to listen to my audio tracks on the HTML version!

  • M12yyx

    hi is there any chance i can edit my mobile site because it does not look right on mobile version?

  • http://www.mobiddiction.com.au/ Mobile Website Design

    One of the most complex areas of this was making sure we designed a edition for all screen shapes while working to design mobile website

  • Apersaud

    Why is it that most websites are browsable on an ipad but webeden ones are not, what is different about the way browsable ones are built and web eden ones are built?

  • R8Gos

    The contact form doesn’t appear to render in the mobile version – can you help?

  • Phil Taylor

    Hi – I’ve used text blocks on my page to create headings which are separate to the text blocks beneath them. Unfortunately the mobile version has grouped my heading text blocks which are on the x axis and not kept the right heading with the associated text (y axis). Hope that makes sense. Maybe if you allowed editing of the mobile version to order text blocks this would overcome the problem?