#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Location
    Glendale AZ
    Posts
    240
    Rep Power
    98

    Learning "responsive" techniques


    Finally getting around to learning flexible layouts. Haven't done much for web design lately but regularly have to make HTML emails which have, up to this point, been simple, all JPG tables.

    I'm trying to find a solution that's a little more responsive, as well as easier on me, so I took a UDEMY course and learned a few things with image replacement and what not. Using @media I have provided alternate images for different sized viewports but the option given in the course I took, which may or may not be the best alternative, used background-image to apply the alternate image to the TD and making the natural IMG display: none. Seems like relying on that for email is asking for trouble?

    Most importantly, I learned you can use !important to change specific attributes of items. I suppose that if the email client is gonna be a problem it will be a problem at step 1 with @media so everything done to go responsive is moot anyways.

    So, this question is going to seem like a LAZY question but it's really about expedience... can't I simply scale the images and text I have in an HTML email using !important and produce the same results as all the image swapping options?

    Looking at my images the largest will not be much more than 100k and the difference between the full-, mid-, and small-size images is very little especially considering the power of the devices in use nowadays. Seems like a waste of time and space to save several versions of the same file when the difference is so small.

    With that said, this is SPECIFICALLY in relation to HTML Emails so I will continue my education on responsive WEB SITES...

    Mike
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Location
    Glendale AZ
    Posts
    240
    Rep Power
    98
    In researching my concerns and other methods I came across this snippet:

    Code:
    <style>
    img {content:url("http://www.MyWebSite.com/ImageSwap.jpg");}
    </style>
    Seems that the largest concern would still be the email client knowing what @media does but that would appear to render all the background-image stuff useless?
  4. #3
  5. Headless Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,977
    Rep Power
    9647
    There's a problem you have to face before any of this: email clients tend to be at least 5-10 years behind browsers when it comes to HTML and CSS support. That's why some emails are still designed with tables for layout and according to HTML 4, though that may be a bit overkill nowadays.
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Location
    Glendale AZ
    Posts
    240
    Rep Power
    98
    Originally Posted by requinix
    There's a problem you have to face before any of this: email clients tend to be at least 5-10 years behind browsers when it comes to HTML and CSS support. That's why some emails are still designed with tables for layout and according to HTML 4, though that may be a bit overkill nowadays.
    Yeah, I unfortunately figured that out several years ago when I started creating these table-based JPG layouts... I'm convinced that there will NEVER be a time that HTML will simply be HTML to whatever program or device is interpreting it.

    My problem is trying to find the happy medium of how much extra work to do without wasting time on more extra work that maybe 2% of the population would utilize.

    In further researching I've discovered that {content:url} is moderately or largely unsupported. So, I started back down the path of background-image and display:none while assigning width & height to each affected TD cell so that the background-image (hopefully) displays. If the email client chokes on this method then I guess they get the standard version of the email regardless of what it looks like...
  8. #5
  9. Headless Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,977
    Rep Power
    9647
    Rule of thumb is you can't rely on anything from HTML 5 or CSS 3, as well as many of the "fancy" CSS 2 features.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Location
    Glendale AZ
    Posts
    240
    Rep Power
    98
    Is @media CSS2 or 3? Not looking for fancy, just some adequate scaling. And... to that subject: If most phones nowadays are 1920x1080 then is relying on the pixel dimensions of the screen actually useful? Seems that checking PPI or density is a better move?
  12. #7
  13. Headless Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,977
    Rep Power
    9647
    @media is CSS 2.1. But if you're thinking of people reading their emails on their phone then I imagine you have even fewer features available.
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Location
    Glendale AZ
    Posts
    240
    Rep Power
    98
    Constant Contact says 35% mobile on one account and 39% on another...
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,134
    Rep Power
    4310
    Originally Posted by requinix
    @media is CSS 2.1.
    Yes, @media itself is CSS2, but that's only for media type, typically "screen" or "print". CSS3 added being able to check viewport width and height, aspect-ratio, resolution. etc.

    Comments on this post

    • Paul-Ninja agrees
  18. #10
  19. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Location
    Glendale AZ
    Posts
    240
    Rep Power
    98
    Gotcha... so if checking for resolution is in fact the better solution, I do not know that for fact, then I'm probably out of luck at least in relation to emails? Well, I guess attempting to fix it, even if it fails miserably, is better than not doing anything.

    P.S. Is the word wrap ever gonna get fixed in this dialog box?
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2007
    Location
    Glendale AZ
    Posts
    240
    Rep Power
    98
    Then imagine my surprise when I finally get a design that works in my browser and WeBuilder so I have Constant Contact send me a test email and the latest version of Outlook ignores everything but the main email. Scaling the email does nothing. Yeah, when it comes to Outlook nothing surprises me...
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,134
    Rep Power
    4310
    Originally Posted by big0mike
    P.S. Is the word wrap ever gonna get fixed in this dialog box?
    If you add a user-stylesheet to your browser (or a user style manager extension), you can fix that for yourself.

    https://addons.mozilla.org/en-US/firefox/addon/styl-us/
    https://addons.mozilla.org/en-US/firefox/addon/stylish/
    https://chrome.google.com/webstore/d...jfobafhncgmne/
    https://chrome.google.com/webstore/d...fgmeleoegfcffe

    Code:
    .cke_skin_kama textarea.cke_source {
    	white-space: pre-wrap !important;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo