| imodules.com It’s a Mobile World Out There, Shouldn’t Your be as Well? Presented by Chris Smith, Manager of Design Services

I solemnly swear to … Show you options for creating mobile templates Show you how to make tables responsive Deconstruct some CSS Probably lose you in the code Give you enough of the basics to find your way out of all that code Explore some development tools and resources that will help you build successful templates

You know what’s in your pocket … and you know what you do with it

Methods for our mobile madness Narrow Template Max width is <= 500px You rely on the mobile device to auto-fit your (as the native Android mail app laughs in your face) Auto-fit s are easy enough to read without pinching & zooming

Methods for our mobile madness Mobile Aware (Friendly) Max width is determined by mobile devices not desktop applications Font sizes and buttons are optimized for mobile devices Desktop and mobile render the exact same

Methods for our mobile madness Fluid Layout Width is % based so the will stretch to any size Max-width is used to restrict the overall size (there is not 100% support for max- width) Some work will be needed to make image width’s change but most styles stay the same

Methods for our mobile madness Responsive Maximize your real estate Optimize content for desktop & mobile separately Feel like an “ god” when you pull it off

How do you make a table play like a div?

Just shove it to the side Table alignment method …

Or shove it to the (other)side Table alignment method …

… or put it’s cells into a block Display Block style td {display:block;} /* be very specific and only target the td */

Quick tips before we jump into the fun stuff

First thing’s first, make it flexible! Set up the basic structure of your template to allow content to be shifted around Keep it clean, keep it simple and for the love of sanity keep the images out of your template structure! … if you can

Those pre-generated layouts are … meh Choose the Mobile Ready layout that best fits with your basic structure Always start with the “Create New” design template

Where the wild things are …

In the magical land of Custom CSS So what’s in there? 1. Client Specific Styles Forces Outlook into submission 2.Reset Styles Standard resets that help even the playing field 3.Mobile Styles Media queries! (most everything you do will be in here)

Uh, that is totally not how you do only screen and (max-device-width: 720px) { td[class="mobileHeaderCell"] { display:block !important; } } Thanks to Yahoo you’ll get to become real familiar with Attribute Selectors. Yahoo Mail basically styles the highest priority, essentially rendering your mobile on desktop … not cool Yahoo, not cool. Luckily, attribute selectors put the blinders on Yahoo so that your mobile styles only show up where you want them to.

The pitfalls of [Attribute Selectors] Attribute selectors are very specific by nature. This makes it harder to produce re-useable CSS for your . Normally to target a you would do something like:.large {font-size:18px;} To do the same thing in you have to do: span[class=“large”] {font-size:18px!important;}

* & ~ are going to blow your mind *[class=“large”] = Any element with only the class “large” on it: td[class*=“large”] = Any where any part of the class name contains the word large: td[class~=“large”] = Any where multiple classes are present and one of the class names is “large”:

* & ~ are going to blow your mind You can also combine them get even more flexibility! *[class~=“large”] = Any element where multiple classes are present and contains the class name “large” in the string:

Need more only screen and (max-device-width: 720px) { td[class="mobileHeaderCell"], td[class="mobileColumnCell"], td[class="mobileFooterCell"], td[class="mWidth"] { display:block !important; } table[class="mobileHeaderWidth"], table[class="mobileColumnWidth"], table[class="mobileFooterWidth"], td[class="mobileHeaderCell"], td[class="mobileColumnCell"], td[class="mobileFooterCell"] { width:480px!important; } *[class="mWidth"] { width:100%!important; } only screen and (max-device-width: 720px) { td[class*="mobile"], td[class~="mWidth"] { display:block !important; } *[class*="mobile"] { width:480px!important; } *[class~="mWidth"] { width:100%!important; } }

Every good build starts with the foundation Here is my go-to table structure for every bit of content that I set up: Article Title Body copy

Images not responsive, no problem If your image tag looks something like this: Then add this class to it: Make sure your CSS contains this only screen and (max-device-width: 720px) { img[class=“mFullImage”] { width:100%!important; height:auto!important;} }

Not the only one adding images, try this Change your CSS to look like only screen and (max-device-width: 720px) { td[class~=“mFullImage”] img, img[class=“mFullImage”] { width:100%!important; height:auto!important;} }

Not the only one adding images, try this Be sure to coach the admins on the best way to update images when you set them up this way. Edit the content block the image is in Right click the image Select “Properties” Use the image manager within properties to change the image Now the new image will replace the old image exactly in the same spot

Development tools are not your kids, so go ahead and pick your favorite!

Some of my favorite tools Sublime Text For it’s clean interface and code snippet functionalitysnippet Firefox browser It’s developer tool plays nicer with max-device-width Quickly generate placeholder images for testing One stop testing for all the major readers

Need a little more help? Must have resources for anyone building mobile templates th_ -snippets.zip

| imodules.com Questions?