Moonfruit Preview: Responsive Pages

Responsive Pages - Layout

The development of our responsive page feature is well on its way so we wanted to take the opportunity to give you a sneak peek of how the new interface is looking so far! Note that specifics are still being revised here and there so this may differ slightly to what is released in the coming months.


What are responsive pages?

The aim of responsive design is enabling a visitor to view the site at the optimal size on a wide range of devices – including a desktop PC, tablet or phone screen. The content is usually created within a flexible grid based layout, which when loaded on the device will rearrange and resize based on the screen it’s displayed on.


And now for the preview…

When you create a responsive page, you’ll enter a separate editor where you can start building the page elements.


Responsive Pages - Templates

First you will be able to add a container, which creates a row of content. You can choose from a selection of templates and layer these on top of each other to create your page design!


Responsive Pages - Grid

Layering rows will look something like this. You can build up your page layout using our placeholders, then move onto adding your personalised content. Everything you add will snap to fit the sections you create.


Responsive Pages - Editing

Each section can be edited individually.

  • Choose the content type e.g. text, images, apps.
  • Change styling e.g. fonts and background for a single column or entire row.
  • Swap or remove sections completely.


How will this integrate with my current website?

Responsive pages will be added in the same way as you would add a page currently, via the Pages tab. The responsive page editor will sit within the current editor when you choose this page type. During the first release you won’t be able to migrate your current pages to the responsive version, however we are aiming to make this possible in the future!


Got some feedback?

We’d really like to hear your thoughts on this feature as we develop it. You can add your suggestions via the dedicated thread in our feature request area.


More posts by this author

17 Responses to “Moonfruit Preview: Responsive Pages”

  1. luis

    Hiya, I like this feature and look forward to be using it in my clients website. my question is, will this be a new editor for the mobile editing that is currently used on moonfruit? and also when you create a new page will this adjust on all devices.


    • Charlotte

      Hi Luis, Responsive pages won’t have the default Mobile editor that you currently have. In the responsive page editor you will be able to preview how the site looks on a tablet or mobile by toggling to that device view. You should be able to see this in our first screenshot, running along the top of the editor. You’ll be able to make some changes to the appearance depending on device however the details of this haven’t been determined yet. All responsive pages will adjust on any device, whatever the screen size!

  2. tanja

    When you say new editor, it means that we cant use normal editor ? I mean once we add container, will we be able to add any shape or text on it like we did current editor ?

    • Charlotte

      Hi Tanja, When you add a responsive page the new responsive editor will load – so you won’t have access to the old editor when editing that page. You’ll still access the old editor when on non-responsive pages. During the beta release you’ll be able to add links, text and images however shapes, header and footer hasn’t yet been confirmed for this first release.

  3. tanja

    I have one more question. With responsive pages, will we be able to have full width header and footer ?

    • Charlotte

      Hi Sarah, The beta version is likely going to be for paid users only and will work as an opt-in release. This will give us the opportunity to gather feedback while we work on additional features for the next release. We will be opening registration for this shortly, so keep an eye out on our blog and social pages for updates.

  4. Clickerwayne

    Haha this should have been done a long time ago…Please include 100% (definitely not PX) width feature to make it more responsive in all devices and kindly add PHL Peso currency in the shop

  5. Mark

    +1 for the 100% width feature. Thank you for working on this moonfruit; the lack of responsive sites is the biggest single drawback to your system, and I’m hoping you nail this as you did with the flash to version 6 update. Full steam ahead please :)

  6. Steve

    Finally, Moonfruit!!! Yahoo!! Responsive is BADLY needed and will add serious punch to an already competent and solid website builder, so much appreciated by all. You say “in the coming months.” What date/month is responsive rolling out?

  7. Chris

    Great to see the progress on responsive sites as many have said this is a major fault with the moonfruit system over other site builders.
    Do we know a date yet of beta version release/particiaption etc?

  8. Bill

    Really looking forward to this, I can see you are making many changes to the programming of sites. Would like to see the shop pages able to be calibrated to things other than individual articles eg. tours and tickets plus multiple pricing and discounts for volume.Maybe asking a bit much at this stage but keep up the good work you’re getting better all the time


Add a comment

  • (will not be published)

More posts by this author