1. Markup

Here are some tips to help you structure your desktop markup to better serve your mobile adaptation.

Tip #1: Wrap content into a container whenever possible

Mobify uses jQuery-style selectors to select content from the desktop page and uses IDs and classes to style that content. When the content does not have wrappers, it becomes difficult to select on it and to individually style those elements.

Difficult:

<div>
Zip-Up Track Jacket<br>
<br>
- price: $39.99<br>
- color: black<br>
<br>
<button>Add To Cart</button>
</div>

If we want to move the price, we have to some tricky JavaScript regular expressions to pull it out, since you can’t directly access it with a CSS selector.

Tip #2: Use classes and IDs that relate to your content

Similar to the previous point, selecting on specific pieces of content is hard when you don’t have classes and IDs. It makes it a lot easier to the Mobify side if the desktop markup is semantic and valid.

A better version of the previous example:

<div class="product">
    <h3>Zip-Up Track Jacket</h3>

    <ul>
        <li class="price"><span class="label">price</span>: <span class="value">$39.99</span></li>
        <li class="color"><span class="label">color</span>: <span class="value=">black</span></li>
    </ul>

    <button class="addtocart">Add To Cart</button>
</div>

Now, it’s easy to select on the price, color and title, using the appropriate classes.

Tip #3: Make sure your classes and IDs stay consistent

On some .NET sites, classes and IDs automatically change every time a new build is deployed. If there is a way to ensure that the classes and IDs stay more consistent, this will make it a lot easier on the Mobify side.

Example:

<div id="oftB-priceShell">
    <span class="oftB-price">Price: $49.99</span>
    <button class="oftB-addtocart">Add To Cart</button>
</div>

On the next deploy:

<div id="afoW-priceShell">
    <span class="afoW-price">Price: $49.99</span>
    <button class="afoW-addtocart">Add To Cart</button>
</div>

Because the IDs and classes keep changing, it becomes much harder to select on content and to style it consistently.


2. Images

Here are some suggestions for your design team to make images work better on mobile.

Tip #1: Try removing text from images

When images get resized to the small viewport of a smartphone screen, the text shrinks, decreasing readability. Try removing text from the image whenever possible, and include the text on the page instead.

Desktop:

Small text on desktop

Mobile:

Small text on mobile

Tip #2: Use tag rather than CSS background images

Try including images as actual elements if they need to be reused on mobile. If your image exists as a background image in one of your desktop CSS files, this will be more difficult to reuse. By default, we strip out all desktop CSS, since most of it doesn’t work as expected on mobile.

Tip #3: Consistent filename relationship between lower and higher resolution assets

On mobile, sometimes we need to access higher-resolution images for retina displays. Also, the mobile design might require high-resolution images than what appear on desktop on page load. To solve this, having a consistent filename relationship helps with your development process.

For example, on some sites, you can access larger assets with a suffix:

Small:

<img src="shirt-s.png" />

Large:

<img src="shirt-l.png" />

Or you can modify it in the query string:

320px image:

<img src="shirt.png?width=320" />

600px image:

<img src="shirt.png?width=600" />

Tip #4: Avoid using image maps

Image maps rely on specific image dimensions, which work well on desktop, but don’t lend itself to mobile. The mobile viewport is smaller than on desktop, so the image will be resized down to fit it. As a result, the image map targets will be incorrect on mobile. You might have to do some tricky JavaScript recalculating to make the targets work on mobile.

Tip #5: Avoid splitting images into grids (e.g. tables)

An old-school technique was to slice up large images and to fit them into a table to produce pixel-perfect designs. This doesn’t translate well to mobile, since we have to reconstruct these separate images into a smaller viewport.


3. JavaScript

Tips for your developers to handle JavaScript on mobile.

Tip #1: Dynamic content (created by AJAX/JavaScript) is harder to transform

With Mobify, you can select on content that exists in the View Source view and template it out on mobile. Content that is dynamically generated by AJAX or JavaScript will run after the Mobify template has been generated. As such, it is harder to manipulate that content before it gets rendered out to the browser.

Tip #2: Expose JavaScript methods so that they can be overwritten

If we need to override certain pieces of JavaScript to extend their functionality on mobile, it helps to have those methods exposed. This way, we can manipulate content that gets generated by JavaScript.

For example, here is a desktop method that updates the cart icon count and adds a class to temporarily highlight it.

window.Util.updateCartCount = function(number) {
    var $cartIcon = $('#cartIcon');
    $cartIcon.html('Cart: ' + number);
    $cartIcon.addClass('highlight');

    setTimeout(function() {
        $cartIcon.removeClass('highlight');
    }, 2000);
};

We want to reuse this functionality on mobile, except we don’t want the 'Cart:’ text on mobile - just the number. We can extend the function to do this:

_updateCartCount = window.Util.updateCartCount;

window.Util.updateCartCount = function(number) {
    // run the original updateCartCount logic
    _updateCartCount.apply(this, arguments);

    // we don’t want to “Cart:" text in the mobile icon, so let’s fix that here
    $('#cartIcon').html(number);
}

Tip #3: Separate presentation logic from business logic

On mobile, the general pattern is that we want to keep all of the existing business logic for a site, but we usually want to rewrite most of the presentation layer. If the scripts for this are kept separate, we can exclude the presentation logic and write mobile-specific presentation logic instead.

Tip #4: Try putting inline scripts into a file when possible

We can save on resource loading and processing time by excluding scripts that are not crucial for the mobile experience. It is easier to uniquely identify a script if it has a file name, as opposed to an inline script.


4. Design/CSS

Suggestions for your designers on how to write desktop CSS to work well on mobile.

Tip #1: Avoid inline styles

Inline styles on elements are usually not useful on mobile and often create design problems. Wherever possible, try removing inline styles and replacing them with a semantic class instead.

Tip #2: Use descriptive content-related classes and IDs, and use semantic markup

Sometimes, you can get away with using general classes to style your content on desktop, but not having descriptive identifiers can be tricky on mobile.

Example desktop markup:

<div id="body">
    <div class="row top">...</div>
    <div class="row bottom">
        <span class="span24"><img src="banner.jpg" /></span>
        <span class="span6"><img /></span>
    </div>
</div>

Selecting on the banner image now looks something like this:

$('#body > .row.bottom > .span24 img');

While this works, it is quite a brittle selector that could easily break in the future with desktop markup changes.

Tip #3: Ask for a desktop style guide

Getting a good understanding of the different styles that are used on desktop will give you a head start with mobile styling. Once you have established the desktop conventions, you can create mobile versions of each style to serve as a basis for your design.


5. Content

Tips on structuring your content.

Tip #1: Make sure global elements exist on every page

If your mobile design includes a particular element that needs to be included on every page (e.g. header and footer elements), make sure they exist on every page on desktop. In a pinch, you can hard-code that content on mobile, but it’s not the most desired solution.

Tip #2: Group related content together

For example, if you have a two-level navigation, make sure that the second level elements are grouped together with their respective headers to make it easier for you to work with on mobile.

Harder:

<ul id="navigation">
    <li><a href="/men">Men</a></li>
    <li><a href="/women">Women</a></li>
</ul>
…
…
<div>
    <a href="/women/pants">Women’s Pants</a>
    <a href="/women/shirts">Women’s Shirts</a>
</div>
<div>
    <a href="/men/pants">Men’s Pants</a>
    <a href="/men/shirts">Men’s Shirts</a>
</div>

There is no clear way of associating the second-level navigation with the first-level navigation, so it’s hard to bring them together in the mobile design.

Easy:

<ul id="navigation">
    <li>
        <a href="/men">Men</a>
        <ul>
            <li><a href="/men/pants">Men’s Pants</a></li>
            <li><a href="/men/shirts">Men’s Shirts</a></li>
        </ul>
    </li>
    <li>
        <a href="/women">Women</a>
        <ul>
            <li><a href="/women/pants">Women’s Pants</a></li>
            <li><a href="/women/shirts">Women’s Shirts</a></li>
        </ul>
    </li>
</ul>

The second-level navigation is grouped with the top-level navigation, making it easy to work with on mobile.

Other examples:

Group related <label> and <input> elements together or use the for attribute to link them. Group form validation errors with the input that has the error. It’s harder to work with when all errors are listed at the top, or if the error elements are floating at the end of the <body> section and absolutely positioned near the input.

Tip #3: Use standard browser elements when possible

Try to use standard browser elements instead of special replacement modules. For example, there are plugins that create fancy dropdowns, rather than using the standard browser <select> element. Typically, the user experience for these fancy dropdowns suffers on mobile because users expect the default <select> behavior.

A potential solution is to deliver both to the browser, but show/hide the appropriate experience depending on the device.

Tip #4: Deliver full text to browser and truncate in CSS

Sometimes we need to add truncate text using an ellipsis for design purposes. It’s problematic when the ellipsis is delivered in the original desktop HTML, since that ellipsis might be in the wrong place when displayed on mobile.

Here is a resource that explains more about how to truncate text in CSS: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Tip #5: Avoid using tables with many columns

Tables that have many columns (e.g. more than 5) don’t lend itself well to mobile. Because the viewport is much smaller, the columns end up becoming very small. The usual approach here is to use JavaScript to merge columns together. While this is usually possible to deal with, it can be a challenging process.

Tip #6: Try to use an <iframe> that lives on the same

domain as the parent

A common design request is to make iframes full-height on mobile, so that you don’t have awkward scrolling issues. The best way to do this is to have the <iframe> live on the same domain as the parent. This way, the <iframe> can call JavaScript in the parent to resize it to the correct height.

Also, make sure that the <iframe> has the Mobify tag as well.


6. Templates

Ways to improve your templating on mobile.

Tip #1: Include easy ways to identify a template

Mobify classifies pages on your site by template and allows you to have different logic for each template. Therefore, it is important to accurately identify what template we are on.

Body classes are very useful for this:

<body class="product_page">...</body>

Elements that unique to the template are also great:

<div id="home_slideshow">...</div>

Tip #2: Blocks should have consistent content structure

You should be able to expect what content is going to appear in a given block. If it changes a lot between different pages with the same template, it can be hard to accurately design across all variations.

For example, here’s a product page with a list:

<body class="product_page"><div class="info">
        <ul><li>...</li></ul>
    </div>
</body>

Another variation of the product page has a video instead:

<body class="product_page"><div class="info">
        <video>...</video>
    </div>
</body>

And another variation with a table:

<body class="product_page"><div class="info">
        <table><tr><td>Price:</td><td>$49.99</td></tr></table>
    </div>
</body>

It’s hard to catch all these variations without very thorough testing.

Tip #3: Make sure that one-off pages are uniquely identifiable

Some pages are designed specifically to be used once and not reused as a template. To make it easier to work with these types of pages, make sure that there is a good way to identify it.

Example:

<div id="july_2013_giveaway">...</div>

7. Using Third-Party Modules

Tips on third-party modules to ease development of your mobile site.

Tip #1: Don’t use multiple types of the same module

For consistency, it is best to use the same modules throughout a given site. We have found that some sites have used multiple modules to achieve similar effects, which can make it difficult to work with. For example, if a site uses both Lightbox and Fancybox to create modals, you will have to duplicate your work on mobile to handle both situations.

Tip #2: Try to avoid modules that generate lots of markup and CSS

Be careful when using third-party modules that generate a lot of markup and CSS. Sometimes they use a lot of inline styles to make sure that their styles are preserved. It can be more challenging to re-style these modules for mobile.

Tip #3: Get a good understanding of ad/analytic tag requirements

Try to find out what information is necessary for the site’s ad or analytics tags. Some organizations have specific requirements when it comes to how ad/analytics tags are handled on mobile.

For example, if you need some particular IDs or pieces of content like price, subtotal, or tax, make sure that this is accessible somewhere on the page in a consistent manner.

Easy:

<div>Subtotal: $<span id="subtotal">29.99</span></div>

You can find the subtotal with $('#subtotal’).text();

Hard:

<div>Subtotal: $29.99</div>

It is much harder to find the subtotal now because we don’t have unique identifiers for this element. Also, once you find the element, you need to do some regular expressions to separate the text and the subtotal.

Last Edited