Category Archives: HTML

Writing Less Damn Code

The better you understand the newest HTML and CSS, you’ll find that much of the code we write can be eliminated altogether

 

But it turns out the only surefire way to make performant Web Stuff is also to just write less. Minify? Okay. Compress? Well, yeah. Cache? Sounds technical. Flat out refuse to code something or include someone else’s code in the first place? Now you’re talking.

Read more from heydonworks.com

The future of loading CSS

With HTTP/2 asset pipelining, adding stylesheets directly above the html they affect gives you the quickest display of content from first byte.

 

It’s common to bundle all of a site’s CSS into one or two resources, meaning the user downloads a large number of rules that don’t apply to the current page. This is because sites can contain many types of pages with a variety of “components”, and delivering CSS at a component level hurts performance in HTTP/1.

This isn’t the case with SPDY and HTTP/2, where many smaller resources can be delivered with little overhead, and independently cached.

Read more from the source: jakearchibald.com

Responsive email design

The lessons I’ve learned for designing emails that look good on every device

  • Campaign Monitor explains a lot of these ideas that I’ve discovered through my own email projects:
  • Outlook respects widths only for table, tr, and td elements.
  • Outlook handles padding only for td elements.
  • You can add css targeted to Outlook using this block: <!–[if mso]><style>…</style><![endif]–>
  • You can insert a <link> element to get custom Google Fonts; just be sure that you use an mso block to specify a fallback font for Outlook; otherwise it will fall back to Times New Roman.
  • You can shrink content widths and images for iPhone Mail using media queries.
  • Always use 6-character hex values for colors (not 3 characters).
  • Lotus notes and Blackberry are lost causes.
  • You’ll have to deal with a sub-optimal experience for Gmail for Android. It suffers from most of the limitations of web-based Gmail.
  • Use Litmus.com for testing emails!
  • It is complex but possible to send multi-column emails using <table align”…”>.
  • Always provide a sensible plain-text mime part; Outlook and others use this plain text to construct the first-line preview. If not, you’ll see <doctype html><head>…

Read the guide at campaignmonitor.com

Other helpful resources:

http://templates.mailchimp.com/development/css/client-specific-styles/ http://templates.mailchimp.com/development/css/reset-styles/ http://templates.mailchimp.com/development/css/outlook-conditional-css/

Chrome Filmstrip & Improving Page Speed

Chrome has a hidden flag for capturing screenshots of your page at various stages of the page loading and rendering process

 

Damon Bauer writes:

You may have heard of the wonderful site, WebpageTest, when researching ways to improve your site performance. One of the most useful features (in my opinion) is the Filmstrip; it shows you incremental screenshots of the browser rendering your site, so you can see how quickly users are able to start consuming content. As of the past couple of months, you can enable similar functionality in Chrome!

Read more from the source: damonbauer.me

Google releases Material Design icons on Google Fonts

Google creates icons that use ligatures instead of CSS classes

 

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.

Instead of the syntax popularized by Bootstrap:
<i class=”icon icon-thing”></i>

Google Material Design icons use ligatures:
<i class=”material-icons”>thing</i>

It’s a boon to screen readers.

Read more at google.github.io

The Gooey Effect AKA Shape Blobbing using SVG

Try this cool effect that uses SVG Gaussian blur, a color matrix and color blend to make two circles join together like drops of liquid

Lucas Bebber is the originator of some of the most creative effects I’ve ever seen on the web. So much so I couldn’t resist

SVG filters have good support, but not all browsers support them being applied to regular DOM elements, notably Safari. However, they do work at least on Firefox and Chrome, even the Android version, and the filter degrades nicely if it doesn’t work. If you absolutely need the effect to work, consider using SVG elements instead of DOM elements.

Read more from the source: CSS-Tricks