If you've spent any time using Business Catalyst's Page Editor (Site Manager > Pages), you will no doubt have run into the issue of broken layouts.

The simple fact is that essentially all WYSIWYG (What You See Is What You Get) editors are ironically named, in that quite often what you see is NOT what you get.

Without getting into the technical aspects of website development, there are essentially two factors at play when editing a web page: content and layout. Web pages contain content that is wrapped within various HTML "elements" which are then positioned using CSS. Unfortunately, these elements aren't visible in WYSIWYG editors and if content across multiple elements is deleted, the elements will break and the editor will try to repair them, generally with unexpected results.

A Typical Layout-Breaking Scenario

You have a page with a number of columns and you want to replace some of the text in one of the columns and add an image to another. You delete some of the existing material and copy the new content you have already prepared from out of a MS Word document.

You hit save and publish and open the live page to admire your handiwork, only to find that your page no longer has the right number of columns or that the columns are in the wrong place. Maybe the font style, size and colour are incorrect as well and there are some unnecessarily large vertical spaces between your paragraphs.

You go back and attempt to rectify what you've done. It gets worse. You try again. And again. At the end of it all your page is a train wreck and you're pulling your hair out.

For this reason and a host of others, web developers work at a code level when building or updating a website, as editing the code that makes up a website - HTML and CSS - is always more efficient and reliable.

BC's InContext Editing (ICE) Platform

InContext Editing is an editing platform that displays your website as it appears online. It even allows you to navigate from one page to another using links and menu items (as you would on your actual site). Editing is as simple as clicking the "Edit" button that appears as you hover your cursor over editable elements on the page, making the required changes in the pop-up window that appears, and clicking the "Update" button.

If implemented in the right way, InContext Editing essentially isolates a web page's content from the HTML code, making it impossible for the above scenario to occur. This means that you as a user can get on with making website updates quickly and easily, secure in the peace of mind that you aren't going to break anything.

If you're interested in having indie.web implement InContext Editing on your website, let us know.