Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew...

31
Responsive HTML email and Drupal Mobile + Email + Drupal Drew Gorton

Transcript of Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew...

Page 1: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Responsive  HTML  email  and  Drupal

Mobile + Email + Drupal

Drew Gorton

Page 2: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Founder gortonstudios.com

Drew Gorton

Page 3: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)
Page 4: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Responsive  HTML  email  

~19%  of  email  messages  are  read  on  smartphones  or  tablets.  Source:  hBp://labs.mrss.com/mobile-­‐is-­‐hot-­‐is-­‐your-­‐organizaGon-­‐opGmized  

(Oct,  2011)  

NTEN  –  Cameron  Lefevre  hBp://www.nten.org/arGcles/2012/the-­‐age-­‐of-­‐mobile-­‐email-­‐has-­‐arrived-­‐

are-­‐you-­‐ready        

Human  Rights  Campaign:  •  Mobile  ~17%  of  subscribers  •  Mobile  ~5%  of  acGon  

Why?  

Page 5: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Pros  •  Simple  •  Lightweight  •  Worked  as  plain-­‐

text  •  Rendered  OK  on  

mobile  Cons  •  Outdated  look  •  Mistakes  easy  •  Inconsistent  with  

brand  

Page 6: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Pros  

•  Simple  •  Lightweight  

•  Works  as  plain-­‐text  

More  Pros!  •  OpGmized  for  

mobile  

•  Consistent  with  brand  

•  Clean  code  

•  Tested  across  email  clients  

Page 7: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Process  

•  Start  with  MailChimp  templates  •  Copy  in  your  website’s  styles    •  Add  CSS3  Media  Queries  

•  Test,  Test  and  Test  again  (Email  on  Acid)  

How we got there  

Page 8: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Start  with  a  solid  foundaGon  

Free  resources  at:  hBp://mailchimp.com/resources/  

Email  Jitsu  guide:  hBp://mailchimp.com/resources/guides/email-­‐jitsu    

Free  email  templates:  hBp://mailchimp.com/resources/html-­‐email-­‐templates    

MailChimp Templates & Resources  

Page 9: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Get  your  brand  right  

•  Open  Firebug  (or  other  code  inspector)  and  start  matching  elements  

•  Focus  on:  –  color  –  font-­‐family  –  font-­‐size  –  font-­‐weight  –  line-­‐height  

Copy your website  

Page 10: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Add  CSS3  @media  query  

@media screen and (max-width: 600px) { table.emailtable, td.emailcontent { width: 95% !important; } h1, h2, h3, h4 { text-align:center !important; } .nomob { display: none !important; } .header_content{ text-align:center !important; } a.footer_nav { 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; }

}

Normal Responsive HTML  

Page 11: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Mobile  TransformaGon  Normal Responsive HTML  

<a href="http://www.twitter.com/ncfr" class="footer_nav">follow on Twitter</a><span class="nomob"> | </span><a href="http://

www.facebook.com/ncfrpage" class="footer_nav">friend on Facebook</a><span class="nomob"> | </span><a href="-"

class="footer_nav">forward to a friend</a>!

Mobile  transformaGon  

Page 12: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Tools  

Email  TesGng  Service    hBp://www.emailonacid.com    

•  Cross-­‐client  email  tesGng  service  •  Shows  how  your  message  displays  in  70  combinaGons  

of  email  services,  browsers,  and  clients  •  Plus  code  analysis  and  spam  filter  tesGng  •  $35/month  for  unlimited  tesGng  

–  Discounted  for  longer  term  commitments  –  $2  -­‐  $5  per  test  a  la  carte  pricing  available  

Email on Acid  

Page 13: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Email  on  Acid  

Page 14: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Gotchas  

•  Some  webmail  clients  leh  jusGfy  them  •  Some  webmail  clients  center  them  •  Some  leh-­‐jusGfy  lists  &  center  the  content  •  Path  of  least  resistance  =  ditch  the  <ol>  tag,  go  w/  asterisks  &  line  breaks  instead  

No  bullet  points  or  numbered  lists  

Page 15: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Gotchas  

•  GMail  and  Yahoo  Mail  default  paragraph  (<p>)  tags  to  align  center  align  when  viewed  in  Internet  Explorer  

•  Other  browsers  sGll  align  paragraphs  leh  •  ?!?  •  Forcing  the  alignment  leh  fixes  it  

<p  align=”leh”>    

Page 16: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

GeneraGng  HTML  emails  with  Drupal

Email  Clients  

Absolute  Paths  (Links  and  Images)  

Drupal’s  Smarts  

Normal theming with some problems  

Page 17: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

GeneraGng  HTML  emails  with  Drupal

Create  a  Content  Type  

Theme  it  

Create  and  Send  (repeat)  

Process  

Page 18: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

GeneraGng  HTML  emails  with  Drupal

Email  Clients  

Absolute  Paths  (Links  and  Images)  

Drupal’s  Smarts  

Problems  

Page 19: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Problem:  Email  Clients  

Page 20: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Problem:  Email  Clients  

Page 21: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

#FAIL  <img  src=“../images/logo.png”  />  <a  href=“arGcle”>Read  More</a>  

OK  <img  src=“hBp://www.ncfr.org/sites/default/themes/ncrf_theme/images/

logo.png”  />  <a  href=“hBp://www.ncfr.org/secGon/arGcle”>Read  More</a>  

URL  FuncGon  hBp://api.drupal.org/api/drupal/includes!common.inc/funcGon/url  D6/D7:  url($path,  array('absolute'  =>  TRUE));  

Problem:  Absolute  Paths  for  Links  and  Images  

Page 22: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Problem:  Drupal’s  Smarts  

•  What  modules  are  installed?  

•  What  permissions  does  this  user  have?  – Am  I  logged  in?  

–  Can  I  edit  this  page?  – What  acGons  can  this  user  take?  

•  SoluGon:  Stooopid  Theming  

Page 23: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

GeneraGng  emails  with  Drupal

Create  a  Content  Type  

Theme  it  

Send  it  

Process  

Page 24: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Create  a  Content  Type  

Page 25: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

IdenGfy  and  configure  your  fields  

Page 26: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Theme  it

Copy  the  HTML  from  the  email  template  

Drop  in  your  content  variables  

Leave  out  the  tabs,  smarts,  etc.  

Stoopid  

Page 27: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Theme  it

Add  a  template  suggesGon  file  for  per-­‐content-­‐type  pages:  Drupal  6:            funcGon  yourthemename_preprocess_page(&$vars)  {          if  (isset($vars['node']))  {              //  If  node  type  is  "newsleBer",  it  will  pickup  "page-­‐newsleBer.tpl.php".              $vars['template_files'][]  =  'page-­‐'.  str_replace('_',  '-­‐',  $vars['node']-­‐>type);          }      }      Drupal  7:          funcGon  yourthemename_preprocess_page(&$vars)  {          if  (isset($vars['node']-­‐>type))  {              //  If  node  type  is  "newsleBer",  it  will  pickup  "page-­‐newsleBer.tpl.php".              $vars['theme_hook_suggesGons'][]  =  'page-­‐'  .  str_replace('_',  '-­‐',  $vars['node']-­‐>type);          }      }  

Files and Code  

Page 28: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Theme  it

Copy  your  email  template  and  add  the  page-­‐level  content  /  variables  

– Title,  logo…  

page-newsletter.tpl.php  

Page 29: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Theme  it

Theme  &  Preprocess  your  nodes  

Render  out  the  content  using  acceptable  low-­‐grade  newsleBer  

HTML  

node-newsletter.tpl.php  

Page 30: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Send  it

Copy-­‐Paste  that  HTML  to  your  tool  (MailChimp,  Listserv,  etc).    

TEST!  

   Drupal  can  send  your  email  newsleBer  directly  -­‐-­‐  but  YIKES  (I  click  submit  and  20,000+  people  get  an  email?!?!)  

Manual Send = Better  

Page 31: Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Responsive  HTML  email  and  Drupal Questions?

Drew Gorton Gorton Studios NodeSquirrel


FINAL PERFORMANCE REPORT - Texas...Charles Criscione*, Mary Gorton Janecka, Toby Hibbitts, and Lee Fitzgerald ... *Email: ccriscione@bio.tamu.edu Department of Biology 3258 TAMU Texas

FINAL PERFORMANCE REPORT - Texas...Charles Criscione*, Mary Gorton Janecka, Toby Hibbitts, and Lee Fitzgerald ... *Email: [email protected] Department of Biology 3258 TAMU Texas

NE-3A Conclave 2011 at Camp Gorton

NE-3A Conclave 2011 at Camp Gorton

INTERVIEW OF GARY GORTON - Stanford University Interview of Gary Gorton, May 11, 2010 6 more background on -- MR. GORTON: Well, yes. I mean we, at the time I sat next to a guy who

INTERVIEW OF GARY GORTON - Stanford University Interview of Gary Gorton, May 11, 2010 6 more background on -- MR. GORTON: Well, yes. I mean we, at the time I sat next to a guy who

Nathaniel M Gorton Financial Disclosure Report for 2011

Nathaniel M Gorton Financial Disclosure Report for 2011

FY 2019-2020 Linda Gorton Mayor

FY 2019-2020 Linda Gorton Mayor

Nathaniel M Gorton Financial Disclosure Report for 2009

Nathaniel M Gorton Financial Disclosure Report for 2009

GORTON BIO

GORTON BIO

West Gorton 03/03/2011

West Gorton 03/03/2011

Essential Software Architecture Ian Gorton CS590 – Winter 2008.

Essential Software Architecture Ian Gorton CS590 – Winter 2008.

Mark Gorton – Director TRADITIONAL NORFOLK POULTRY LTD

Mark Gorton – Director TRADITIONAL NORFOLK POULTRY LTD

Shipbroking and Chartering Practice 4ed 1995 Gorton 1850449716

Shipbroking and Chartering Practice 4ed 1995 Gorton 1850449716

Susan Gorton NASA RVLT Research - University of California ...

Susan Gorton NASA RVLT Research - University of California ...

Gorton and Metrik

Gorton and Metrik

Gorton, Nathaniel M. - Judicial Watch · 2019. 7. 26. · Nathaniel M. Gorton NMG/seh . Gorton, Nathaniel M. Report Required by the Ethics . AO JO FINANCIAL DISCLOSURE REPORT . Rev.

Gorton, Nathaniel M. - Judicial Watch · 2019. 7. 26. · Nathaniel M. Gorton NMG/seh . Gorton, Nathaniel M. Report Required by the Ethics . AO JO FINANCIAL DISCLOSURE REPORT . Rev.

DM B4 Gorton Amendment Fdr- Draft Correspondence Re Gorton Amendment 322

DM B4 Gorton Amendment Fdr- Draft Correspondence Re Gorton Amendment 322

BALLARAT, BENDIGO, CASEY, CORIO, COX, FLINDERS, GORTON ...

BALLARAT, BENDIGO, CASEY, CORIO, COX, FLINDERS, GORTON ...

Advanced Configuration Management In Drupal 8 … · Advanced Configuration Management In Drupal 8 AUG 2017. SOFTWARE ARCHITECT Mike Potter Email: mpotter@phase2technology.com Drupal.org:

Advanced Configuration Management In Drupal 8 … · Advanced Configuration Management In Drupal 8 AUG 2017. SOFTWARE ARCHITECT Mike Potter Email: [email protected] Drupal.org:

Nathaniel M Gorton Financial Disclosure Report for 2008

Nathaniel M Gorton Financial Disclosure Report for 2008

FY 2021-2022 Linda Gorton Mayor

FY 2021-2022 Linda Gorton Mayor

Gorton - Regulating Shadow Banking System

Gorton - Regulating Shadow Banking System