Important CSS Grid terminologyīefore diving into the concepts of Grid it’s important to understand the terminology. Grid is one of the most powerful CSS modules ever introduced. Imagine defining the layout of your entire page, and then completely rearranging it to accommodate a different screen width all with only a couple lines of CSS. Your CSS can place them in any order, which makes it super easy to rearrange your grid with media queries. Similarly to flexbox, the source order of the grid items doesn’t matter. To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns and grid-template-rows, and then place its child elements into the grid with grid-column and grid-row. Internet Explorer 10 and 11 on the other hand support it, but it’s an old implementation with an outdated syntax. CSS Grid basicsĪs of March 2017, most browsers shipped native, unprefixed support for CSS Grid: Chrome (including on Android), Firefox, Safari (including on iOS), and Opera. So I won’t be covering the out-of-date Internet Explorer syntax (even though you can absolutely use Grid in IE 11) or other historical hacks. The intention of this guide is to present the Grid concepts as they exist in the latest version of the specification. Flexbox is also a very great layout tool, but its one-directional flow has different use cases - and they actually work together quite well! Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). CSS has always been used to layout our web pages, but it’s never done a very good job of it. Do this in conjunction with services such as Litmus.CSS Grid Layout (aka “Grid” or “CSS Grid”), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. Create email accounts across various services, and send emails to yourself. Make an email responsive if the design allows for it. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Account for mobile-friendliness, if possible.Don’t bother with JavaScript or Flash-those technologies are largely unsupported by email clients.Use only absolute links for images, and host those images on a reliable server.(Mailchimp will do this for you automatically.) Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif ”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements) Use element attributes (such as cellpadding, valign, and width) to set table dimensions.For more complicated layouts, you should nest tables to build complex structures. Code all structure using the table element.Much like with design, there are best practices to follow when coding HTML email. Don’t forget about the mobile experience! Is your email readable at arm’s length on a small screen? Will the images slow its load time on a mobile device? Are your links easy to press with a thumb?.Avoid elements that require Flash or JavaScript.Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.While these kinds of emails look pretty, they perform poorly. Don’t design an email that’s essentially one large, sliced-up image.Assume images will be initially blocked by email clients, or that certain images-background images, for example-will completely fail to load.Use grid-based layers and avoid complicated elements that require HTML floats or positioning. This will make them behave better within the preview-pane size provided by many clients. Emails should be 600-800 pixels maximum width. There are a few things to keep in mind when designing HTML email campaigns. Feel free to crank up a little TLC or Goo Goo Dolls to get into the spirit of things. You’re comfortable coding in and using HTML tables for structure, and working in coding standards that were state-of-the-art in 1999. This reference assumes you’re a front-end web designer with an intermediate working knowledge of HTML and CSS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |