Mobile Sites with MagicEdit

Discussion about MagicEdit features, modules, applications, and HowTos.

Mobile Sites with MagicEdit

Postby raw10 » Fri May 06, 2011 2:34 pm

Mobile is all the rage, and web designers are under pressure to deploy "mobile-ready" websites. What's the best way to do it? Do I have to redesign the whole site? Do I have to add my content in two places? Where do I start?

Like everything else we do here at MagicEdit, we wanted to build the system to make MagicEdit the easiest way to deploy a mobile-ready site. We just had a couple of requirements. First, if a particular page is requested by a mobile browser and doesn't actually have a "mobile-ready" version, the system will simply display the standard version. Second, the content on the mobile version of the page should match that on its counterpart full-sized page, but simply formatted properly for the smaller screen. And finally, the actual implementation of the mobile version of the site should be as simple and easy as possible.

The Basics

Here's how it works. You, the web designer, create the site as usual, but simply place any site files that are different for mobile in a folder called "mobile" inside the "pages" folder on your site (the "mobile" name is magic, so don't use that folder name for other purposes).

For example, if you have a different index.html file for mobile browsers, simply create a mobile version of the page, named identically, and store it in the "mobile" folder. When a browser requests a web page from the MagicEdit server, the server determines if the browser is mobile. If so, the server checks if the file is in the mobile folder and serves up that version if the file is there. If there is no file, the server looks for the requested page in the main site and serves up that version.

Recall that MagicEdit regions are "edit once change everywhere." If you have identically named (using me_name) regions in the mobile files, they will update when a content manager changes those regions in the full site.

Much of how the mobile site will function depends on the web designer. The designer could choose to replicate the entire site over to the "mobile" folder, then make the appropriate changes. If you are wondering about what changes to make and how, check out this article from ElementFusion. The basic thing to add to the head of your pages is this meta tag:

Code: Select all
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Using Includes

It is possible to create a mobile-ready version of a site with just a couple of files, assuming the site is architected properly. If you use server side includes (SSI) for the common elements on each page, you can simply place the include files that are different for the mobile version of the site inside the "mobile" folder. That way the MagicEdit server will simply serve up the mobile version of the include, when appropriate.

Useful Links

Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Return to MagicEdit Discusson

Who is online

Users browsing this forum: No registered users and 1 guest