How to hide and show content on mobile devices

Hiding content on desktop and revealing mobile specific content can be really useful technique, if used sparingly. It enables us to “target mobile users” – at least ones who support media queries – properly, and serve them specific content.

A nice sensible example would be as a prompt to call a certain number from a mobile phone vs a desktop, but otherwise, there is a lot of debate about how necessary this really is. If the content is being hidden, the sender must ask themselves if it is needed at all.

If the email is designed mobile first, then we should be able to move, hide, reshape, and reorder content with ease. Revealing extra content should always be a very considered option. It is much better to consider redesigning that section to scale down for smaller screens.

A common viewpoint is mobile content should be stripped down, for quicker easier consumption “on the go” (think “snackable content”…”bitesize info”), but there are other contexts where actually mobile users may engage more with copy than anything else. There are no hard and fast rules in email, which is one of the main reasons it is such an interesting medium to work in. Choose what works for you.

First off why this technique shouldn’t be used:

1. Adds a lot of bloat to the email (extra code, extra weight).

2. This wont show up in a WYSIWYG editor, so can be hard for people who can’t “hand code” HTML to edit at a later date.

3. Requires user to update things in multiple places.

4. Where media queries are not read this won’t work: so if optimising without media queries (you maverick, you) remember you can’t hide on (or from) the Gmail app, yet.

That said, this is still a useful technique and worthy of a place in your email making toolbox (you do have an email making toolbox, right? Of course you do!). We have seen a few different ways employed –  here’s my personal favourite, which we have been using for quite some time now:

The HTML:

<!--REVEAL ON MOBILE-->

<!--[if !mso]><!-->

<table cellpadding="0" cellspacing="0" border="0" align="center" style="display:none;" class="show">
<tr style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="me">
<td class="themoney" align="center">

CONTENT

</td></tr></table>

<!--<![endif]-->

<!--END REVEAL ON MOBILE-->

The CSS:

@media only screen and (max-width: 640px) {
 
*[class=wrapto100pc] {width:100%!important; height:auto !important;}

*[class=hide] {display:none!important; width:0px !important;}

*[class=show] {width:100%!important; height:auto!important;display:table!important;}
 
*[class=me] {display:block!important; width:100%!important; max-height:inherit!important; overflow:visible!important;}

*[class=themoney] {display: block!important; width:100% !important;height:auto !important;text-align:center!important; float:none!important;}

}

Here is a working example:http://codepen.io/actionrocket/pen/cuFbf

Brief explanation:

1. Hide from Microsoft Outlook. We do this by using a conditional statement coupled with mso-hide:all clears that. See Conditional statements article for fuller explanation of this and why the statement which – itself is a comment – is commented out.

2. Use display:none to hide it from almost everywhere else…

3. Use max-height:0 to get around gmail (who really usefully doesn’t understand display:none).

4. Use overflow:hidden, width:0, float:left, etc.  - “throw the kitchen sink at it” approach to confidently hide and attempt to future proof the hide, with things like doctypes being stripped, last thing you need is bits of content leaking out. In email, its often a good idea to “double up” when you can.

To be fair, Justin Khoo from FreshInbox has written a really good article on this already, and his way is very similar.