Monday, December 9th, 2013

Fixing the forced body padding in Outlook 2007, 2010 and 2013

Testing a html email recently with a high percentage of recipients likely to be users of Microsoft Outlook I came across a bug where it’s not possible to overwrite the forced body padding in versions of outlook (which use MS Words rendering engine 2007, 2010, 2013).

This was breaking the design and causing unwanted whitespace on the left margin of the email. The offending versions of outlook support margin (including negative margin) but only support inline styles. So the fix/hack is to wrap the entire email in a wrapper table and apply negative margin to just the problematic email clients – using html ‘if statements’ as below.

<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>
<!--<![endif]-->

<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
 <tr>
   <td>
<![endif]-->
    <!-- YOUR CONTENT HERE -->
    </td>
  </tr>
</table>
Tuesday, April 17th, 2012

Using correct post heading tags on WordPress index/blog template

Generally in the WordPress loop we’ll create one snippet of code which is repeated on a blogs landing page showing your first 5 – 10 post snippets. The loop will output something like the below:

<article>
    <h2>Post Title</h2>
    <p>Post Excerpt…</p>
    <p><a href="">Read Full Article</a></p>
</article>

<article>
    <h2>Post Title</h2>
    <p>Post Excerpt…</p>
    <p><a href="">Read Full Article</a></p>
</article>

<article>
    <h2>Post Title</h2>
    <p>Post Excerpt…</p>
    <p><a href="">Read Full Article</a></p>
</article>

I’ve done this myself many times, but in an ideally world the heading tags would run in sequence: h1, h2, h3, h4, h5 and h6. Generally I’ve not worried too much about this – especially now as with HTML5 we can use more than one heading tag per page so long as it’s wrapped in it’s own article tag – though I have no idea how google views this.

Updating some code this afternoon I decided to make the article tags run in turn of authority and its actually ridiculously easy.

<?php if (have_posts()) :
 $postCount = 0; ?>
 <?php while (have_posts()) : the_post();
 $postCount++; ?>

                <?php if ( $postCount <= 6 ) { 
                    echo ('<h'.$postCount.'>');
                } else {
                    echo ('<p class="article-heading">');
                } ?>

<?php the_title(); ?>

                <?php if ( $postCount <= 6 ) { 
                    echo ('</h'.$postCount.'>');
                } else {
                    echo ('</p>');
                } ?>
<?php the_content('Read more'); ?>
<?php endwhile; ?>
<?php else : ?>
 <?php endif; ?>

All the code above does is count the post as they’re pulled from the database and use the appropriate heading tag ending up with a paragraph tag if we’re showing more than 6.

Job done. Feel free to copy paste and use on your own sites.

 

Thursday, January 5th, 2012

Different meta viewport tags for iPhone and iPad

Coding responsive designs I’ve often wanted to use the viewport meta tag for the iPhone but not for the iPad (or use it differently for the iPad) – today I stumbled across these iPad detection scripts by David Walsh.

Using this we can serve a specific viewport meta tag for the iPad, as I’ve done below.

<?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ( $isiPad ) { ?>
<?php // This is an iPad! ?>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0;">
<?php    } else { ?>
<?php // Not an iPad ?>
    <meta name="viewport" content="width=device-width; initial-scale=0.65; maximum-scale=1.0;">
<?php } ?>