Build Responsive HTML Email Templates with HTML Tables & CSS - 2023

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ต.ค. 2024

ความคิดเห็น • 36

  • @w3newbie
    @w3newbie  9 หลายเดือนก่อน

    Hey guys, I've just released my completely new and updated "HTML Email Mastery Course" for 2024 with the latest HTML Email concepts. I'm excited to release it, this is the best course I've ever made. Check it out here:
    ➢ w3newbie.com/email-course/ (coupon link for Udemy)

  • @1987RX7TII
    @1987RX7TII ปีที่แล้ว +1

    This was incredibly helpful. I'm a front end developer but have only entered into the game knowing modern HTML5 w/ flexbox and grid to help me do layouts. I did not have much experience using table based layouts or XHTML but recently had to do my first HTML formatted email.

  • @w3newbie
    @w3newbie  2 ปีที่แล้ว +6

    Hey guys, this may be the last HTML email video on this channel as I have a new channel on the email topi specifically. So please subscribe here for more email content: th-cam.com/users/ResponsiveHTMLEmail

    • @tanzilatarannum9241
      @tanzilatarannum9241 2 ปีที่แล้ว

      Is it only compatible for Gmail or outlook also?

  • @gauravpalande
    @gauravpalande 2 ปีที่แล้ว

    My two column content are stacking one below the other . Not sure what am I doing wrong. Any idea?

    • @w3newbie
      @w3newbie  2 ปีที่แล้ว +1

      As long as your CSS matches for the columned sections it should be fine, stacking on top then aligning at full width with responsive html email columns.

  • @gatosalamanca
    @gatosalamanca ปีที่แล้ว

    Thanks, you're the best

  • @NeverSeenBefo31
    @NeverSeenBefo31 2 ปีที่แล้ว +1

    So So Good bro Thankyou so much

  • @jasonshin7197
    @jasonshin7197 2 ปีที่แล้ว +2

    Thanks for your tutorial!
    I just wonder that is there any tips for the Outlook mobile app(ios, android especially)?
    I tried "ghost table" and body[data-outlook-cycle] solutions, but both are not working or outdated.

    • @Ali-zc9tc
      @Ali-zc9tc ปีที่แล้ว

      Same here I tried everything but it is not responsive in mobile, I'm also using outlook unfortunately, did you find any suitable solution for that?

  • @manueltierrablanca529
    @manueltierrablanca529 2 ปีที่แล้ว +1

    great :)

  • @julienvier981
    @julienvier981 2 ปีที่แล้ว +4

    Great tutorial but the files in the zip folder are from a different tutorial... can you update the download link?

    • @w3newbie
      @w3newbie  2 ปีที่แล้ว

      Thanks for letting me know! I got the number wrong, it's #10 (not 9):
      m.w3newbie.com/e/tut-10.zip

  • @CrazyCodingChannel
    @CrazyCodingChannel 2 ปีที่แล้ว

    Cool tutorial, like

    • @w3newbie
      @w3newbie  2 ปีที่แล้ว

      Thank you! Cheers!

  • @tfmurphhk
    @tfmurphhk 2 ปีที่แล้ว +1

    I believe I followed this course accurately, step by step... but when I finished it looked very much like it was supposed to EXCEPT the three column area is not responsive. All three items (Email Design, Email Marketing and Development) are stacked on top each other, regardless of the width. Is there somewhere that the actual final code is shown, so I can find my error? I have looked and looked at MY code, and can not find my error. TIA, Tom

    • @tfmurphhk
      @tfmurphhk 2 ปีที่แล้ว +1

      Disregard, I found the error of my ways. Now all is good! Thanks so much for all of this, will now move on to your class.

    • @skitini1
      @skitini1 2 ปีที่แล้ว +1

      @@tfmurphhk could you share the error and fix for my education?

    • @Ali-zc9tc
      @Ali-zc9tc ปีที่แล้ว

      I'm facing the same issue can you please send me the solution

  • @danielaviles1712
    @danielaviles1712 2 ปีที่แล้ว +2

    Hey, thanks for the video ! Im confused about the center tag tho I thought it doesn't work with html5 and when I try to find alternatives I can't find anything

    • @oscarliljekvist7031
      @oscarliljekvist7031 2 ปีที่แล้ว +1

      I am wondering the same thing, hopefully he responds soon.

    • @danielaviles1712
      @danielaviles1712 2 ปีที่แล้ว

      @@oscarliljekvist7031 lets try asking on his other channel

    • @w3newbie
      @w3newbie  2 ปีที่แล้ว +1

      Hi, HTML5 rules don't apply to HTML Email. We're using XHTML. :)

  • @Ghostfancoder
    @Ghostfancoder 2 ปีที่แล้ว +1

    I noticed the email looks different in my gmail account. Is there a reason why?

    • @w3newbie
      @w3newbie  2 ปีที่แล้ว

      It should look the same as the email template tested in the tutorial. I'm wondering if there was something missing. Feel free to elaborate more on what's going on with your HTML email template design in Gmail.

  • @tanzilatarannum9241
    @tanzilatarannum9241 2 ปีที่แล้ว +1

    Is it only compatible for Gmail or outlook also?

    • @w3newbie
      @w3newbie  2 ปีที่แล้ว

      Gmail yes but for Outlook it would need conditional statements to be properly formatted. Check out my website responsivehtmlemail.com and there is a page on conditional statements.

  • @williamsshakesaspear4714
    @williamsshakesaspear4714 2 ปีที่แล้ว

    Does your paid course teach what it takes to be hired as an email developer by employers? If so, what is it that your paid course teaches that you free tutorials do not? I'm considering buying your course.

    • @w3newbie
      @w3newbie  2 ปีที่แล้ว

      The course is more advanced template building with testing inside of an email client testing program while building for Outlook compatibility. It doesn't cover career/job placement but I hope to release an update that has this.

  • @jazzhead335
    @jazzhead335 2 ปีที่แล้ว

    How would one size down the social images?

  • @hollycow8171
    @hollycow8171 2 ปีที่แล้ว

    42:20 you didnt show us how to make 3 column responsive. is it using media query or any trick without media query.

    • @w3newbie
      @w3newbie  2 ปีที่แล้ว

      We don't need media queries for responsive tables, please see the CSS in this section.

  • @jazzhead335
    @jazzhead335 2 ปีที่แล้ว

    Is this email responsive in Outlook?

  • @boxsewangomtasewa7172
    @boxsewangomtasewa7172 2 ปีที่แล้ว

    gd

  • @zalexstudios
    @zalexstudios 2 ปีที่แล้ว

    Hi! it's easy template! Try to like this: Oh! I cannot add link!

    • @zalexstudios
      @zalexstudios 2 ปีที่แล้ว

      Let's try more difficult template!!!