How To Create a Mobile-Ready Site

Designing a website that works seamlessly on both full-sized screens and mobile devices can be pretty tough to do. Content that fits just fine on a large screen may not quite work on smaller devices, and doing the work to detect the mobile browser and serving up the correct files can be tricky.

If you've used MagicEdit, you know that our philosophy is to choose a method of doing something that is going to work in the vast majority of situations, and then provide a really easy way for web designers to use it. And that's exactly what we've done to let web designers create mobile-ready sites.

This How-To will show you how to utilize a couple of "best practices" and MagicEdit's mobile functionality to rapidly deploy a mobile-ready version of an existing MagicEdit site using only a couple of extra files.

MagicEdit mobile page process

Getting Started

The first thing is to understand how MagicEdit deals with pages that are requested from mobile devices. As you can see from the flowchart on the right, if the server sees a mobile device requesting a particular file, it first checks to see if that file lives in the "mobile" folder (this would be in the "pages/mobile/" folder under your site). If the file is not there, the standard version of the file is served up instead.

Now, suppose we build our pages using server side includes to take care of the content that is identical on each page. You might have a page structure that looks something like this:

<!--#include file="top.html"-->

... content that is unique to this page ...

<!--#include file="bottom.html"-->

The "top.html" file includes things like your page <head>, the header, site navigation menu, and any page wrapper elements, and the "bottom.html" file closes the page out, including any footer elements. Now you can create any number of pages and just put the content unique to that page inside the two includes.

Using server side includes in conjunction with MagicEdit's mobile functionality provides a powerful means of replacing only the portions of each page that need to change for mobile devices. Any element in any page can have a mobile and a standard version by simply placing it in an include file with both a standard and a mobile version of the include.

So, once the pages in your site are all using your global include files, you're most of the way to making your site mobile-ready!

Adding and Updating the Mobile Files

The next step is to simply create the "mobile" folder on your site. Make sure to add the folder under the "pages" folder.

Once the "mobile" folder is there, copy your global includes into it. Now you can modify those include files to be specific to the needs of mobile devices. You should also create a mobile version of your stylesheet(s), and for ease of management go ahead and place it in the "mobile" folder as well. Here are a few tips for setting up the mobile version of your site.

1. Prevent Users from Zooming

Mobile browsers typically scale the site down to make it easy to see the whole page, but then you can't read any text. You typically want to prevent users from zooming in and out on the mobile site. To do this, simply include the following meta tag in the head of your mobile global include file:

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

2. Fix up the Site Width

One challenge with mobile sites is the width. Most smart phones will allow screen flipping, so one minute your site is viewed at 320 pixels wide, and the next it's at 480 pixels (or whatever the phone's specs are). To support the widest variety of use cases, make your mobile site fluid width. This is actually really easy since you want to build the site with a single column; simplify your site into elements that stack one on top of the other, then remove any widths on most block level elements and your site should magically fit.

3. Dealing with Paths

When MagicEdit replaces a file with one in the "mobile" folder, the relative path remains the path of the original file, not the file in the "mobile" folder. That means that if you create your mobile style sheet in the "mobile" folder, you will need to include "mobile/" in the path, even though the file that is calling it lives in the "mobile" folder. Your stylesheet declaration would look something like this:

  <link rel="stylesheet" href="mobile/style.css" type="text/css" />

Alternatives to the Include Method

Using the server-side include method outlined here is certainly not the only way to make your site mobile-ready. We just think it's a simple and powerful way to do it without having to modify every single file on your site. However, you could also simply clone your whole site over to the "mobile" folder and make any formatting updates separately there across all of the pages.

One advantage of using MagicEdit here is that if you maintain the correct me_name on all MagicEdit elements and regions, the mobile site will automatically update when you make edits on the main site. This leverages MagicEdit to make sure your mobile site directly matches the content of the standard site.

The Demo Site

To see how this could all work, check out our sample site:

View Sample Site

You can download a .zip of the mobile-ready template below and get started on making your site mobile-ready!