Today, we're going to learn how to set up a website that can be easily edited via your iPhone and the Pagelime mobile app. If you're unfamiliar with Pagelime, it's an incredibly easy-to-use CMS that makes the process of editing a website as easy as possible.

Pagelime Basics

Pagelime is unique in that it allows you to design and code your website in plain HTML first, and add the Pagelime editable CSS tags as the last step in the process. Once your site is finished, you can go through the site and add "class=cms-editable" and a unique ID to any elements in your HTML that you want to be editable. Pagelime takes care of the rest.

An Example Situation

For this article, I'm you…and you are perhaps a web designer that makes websites for local businesses, law firms, restaurants, etc. So I make a lot of well designed 6-7 page brochure sites.

So I was pitching a restaurant for their web business, and I downloaded a lovely template from ThemeForest with the amazingly descriptive title of "Restaurant Website 01". It just so happened to have everything our client was looking for.

I've decided to use Pagelime because my client doesn't make many drastic changes, but when he does (let's call him Chef Tony) he wants to be able to do them himself. Let's say that I was competing with a few other developers for the contract, and I sold Tony on being able to update his recipe of the month, his employee of the month, and a daily Paella dish photo from his iPhone. Needless to say Tony was impressed. Tony is rarely impressed; so now we have to deliver on our Paella updating promises!

Digging in!

On our template's homepage, we can see there are quite a few areas on the page that I'll need to make editable. Since making things editable with the Pagelime mobile app is no different than with the Pagelime web app, we go about adding the editable classes to the different parts we're interested in.

Here's the markup for the welcome message.

<div class="headingrow">
	<h1>Welcome to our website</h1>
	<p>Lorem ipsum dolor sit…</p>
</div>

We're going to make the p tag editable with Pagelime. Since we're using the mobile app, we'll also give it a descriptive title.

	<p id="welcome" class="cms-editable" title="Welcome Text">Lorem ipsum dolor sit…</p>

Here's the next section:

<div class="subheadingrow">
	<h2>Employee of the month - Jenny Smith</h2>
	<img class="leftalign"src="images/home-image-sample1.gif" alt="" />
	<p>Tasty and fullfiling, … </p>
</div>

I want to make the headline, the promo image and the main content itself editable.

	<h2 id="eomtitle" class="cms-editable" title="EOM Headline">Employee of the month - Jenny Smith</h2>
	<img id="eomimg" class="leftalign cms-editable" title="EOM Image" src="images/home-image-sample1.gif" alt="" />
	<p id="eomtext" class="cms-editable" title="EOM Text">Tasty and fullfiling, … </p>

The Recipe of the month section mirrors the above format exactly, so we make the same changes to that block of HTML.

Finally we make the image in the upper left corner editable:

<img id="changer" class="cms-editable" title="Changing Image" src="images/changer.png" />

This doesn't affect the site layout in any way, and only a couple moments to code. Pretty sweet so far! If we open the site in the Pagelime web app, we now see that all of our elements are editable.

Now I've delivered the first version of the site to Chef Tony, and he can download the Pagelime Mobile App here:

He can log in with his email and password, and he'll see his site on the dashboard:

At this point, he has the ability to edit the site, manage images, view documents, use Google Analytics, and even make new pages and templates. For the purposes of this article, we're only going to deal with editing the Site and Images.

Clicking on Edit Site brings you to the Select Page screen where Tony can choose the homepage for editing:

The next screen provides you with a list of the editable areas we defined earlier.

Clicking on "EOM Headline" will allow us to change the employee of the month text. Tony makes it Chef Tony, because he just so happened to cook a mean Paella today. We tap "Done," switch to "Preview," and can now see now the 'employee of the month' section has now, indeed, been updated to "Chef Tony."

We're now going to update the Changer Image. To do so, we're going to use the "Edit" view. We tap the button in the subnav which brings up a preview of the website with green overlays. The overlays show you what's editable and can be tapped to open that region - similar to the live editing in the Pagelime web app.

This gives us a preview of the image we're changing. We now have the option of taking a live picture on the fly, choosing an image from our phone, or choosing an image stored in the Pagelime image manager. For this tutorial, I'll take a picture of a Paella, and then use the auto-cropper tool, which allows us to proportionally scale and crop our image to match the dimensions of the editable image on the site.

We can now check the preview and see how it looks before clicking publish…

When we check the actual website…

… we see that everything has been updated -- all from our phone! No real technical knowledge is needed, and you have an awesome bit of client candy to help upsell your clients and make more money. (We won't tell Tony he forgot to update his Employee of the Month Photo.)

So there you have it: a website integrated with a CMS with the added benefit of iPhone - on the fly - updating! Go make a glass of Limeade, enjoy the spring air, and the smell of all the extra green you'll be making.