How to craft a modern, mobile-optimized HTML template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012

Transcription

1 How to craft a modern, mobile-optimized HTML template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012

2 Our old template Pros Simple Lightweight Worked as plain-text Rendered OK on mobile Cons Outdated look Lots of junk code = error characters Inconsistent with website 2

3 Our new template Pros Simple Lightweight Works as plain-text More Pros! Preheader text Optimized for mobile (ios) Consistent with website Clean code Tested across clients 3

4 How we got there Three major resources made this possible: MailChimp (free templates and guide) Cameron Lefevre (NTC session on optimizing for mobile) on Acid (testing service) 4

5 MailChimp Free resources available at: Jitsu guide: -jitsu Free templates: 5

6 Theming the template Open your website s Style Guide page, start Firebug, and start matching elements Focus on: color font-family font-size font-weight line-height 6

7 Mobile optimization Cameron Lefevre is my hero NTEN blog post introducing the issue: NTC session notes (include code samples): 7

8 screen and (max-width: 600px) { table. table, td. content { width: 95%!important; h1, h2, h3, h4 { text-align:center!important;.nomob { display: none!important;.headercontent{ text-align:center!important; a.ba footernav { display: block!important; font-size: 14px!important; font-weight: bold!important; padding: 6px 4px 8px 4px!important; line-height: 18px!important; background: #dddddd!important; border-radius: 5px!important; margin: 10px auto; width: 240px; text-align: center; By defining alternate styles in the CSS for devices based on their maximum screen width, some elements can be transformed or hidden to make for a more user-friendly format 8

9 screen and (max-width: 600px) { table. table, td. content { width: 95%!important; h1, h2, h3, h4 { text-align:center!important;.nomob { display: none!important;.headercontent{ text-align:center!important; a.ba footernav { display: block!important; font-size: 14px!important; font-weight: bold!important; padding: 6px 4px 8px 4px!important; line-height: 18px!important; background: #dddddd!important; border-radius: 5px!important; margin: 10px auto; width: 240px; text-align: center; Defines when mobile styles get called This query applies format on screens up to 600px wide Main table gets re-sized from 600px down to 95% of the screen s width 9

10 screen and (max-width: 600px) { table. table, td. content { width: 95%!important; h1, h2, h3, h4 { text-align:center!important;.nomob { display: none!important;.headercontent{ text-align:center!important; a.ba footernav { display: block!important; font-size: 14px!important; font-weight: bold!important; padding: 6px 4px 8px 4px!important; line-height: 18px!important; background: #dddddd!important; border-radius: 5px!important; margin: 10px auto; width: 240px; text-align: center; Header tags and header content get centered when viewed on mobile nomob is used to hide elements on mobile 10

11 screen and (max-width: 600px) { table. table, td. content { width: 95%!important; h1, h2, h3, h4 { text-align:center!important;.nomob { display: none!important;.headercontent{ text-align:center!important; a.ba footernav { display: block!important; font-size: 14px!important; font-weight: bold!important; padding: 6px 4px 8px 4px!important; line-height: 18px!important; background: #dddddd!important; border-radius: 5px!important; margin: 10px auto; width: 240px; text-align: center; Transforms styling in the footer navigation when viewed on mobile. In particular, this code takes ordinary text links and turns them into easy-to-press buttons. 11

12 @media query example Mobile transformation <a href=" class="ba footernav">follow on Twitter</a><span class="nomob"> </span><a href=" class="ba footernav">friend on Facebook</a><span class="nomob"> </span><a href="-" class="ba footernav">forward to a friend</a> 12

13 on Acid Cross-client testing service Shows how your message displays in 45 combinations of services, browsers, and clients Plus code analysis and spam filter testing $35/month for unlimited testing Discounted for longer term commitments $2 - $5 per test a la carte pricing available 13

14 on Acid 14

15 Don t use bullet points (or numbered lists) Some webmail clients left justify them Some webmail clients center them Some left-justify lists & center the content Path of least resistance = ditch the <ol> tag, go w/ asterisks & line breaks instead 15

16 <p align= left > GMail and Yahoo Mail default paragraph (<p>) tags to align center align when viewed in Internet Explorer Other browsers still align paragraphs left Why? I don t know. Forcing the alignment left fixes it 16

17 Preheader table needed a background color Although it s already defined in the CSS, Yahoo Mail doesn t show it With the repeating blue stripe at the top of our template, that resulted in dark text on a dark background 17

18 Voila! This was not a short process Took a lot of work and dozens of tests to get it right End result looks pretty darn good though, and stays looking good across all of the popular clients 18

19 Additional resources