Responsive Email Design While phone screen sizes have been steadily increasing over the years along with screen resolution, it can be tempting to include more and more images in your emails. But a word of caution: While images can bring an extra wow factor to your emails, images should always be thoughtfully added with accessibility and mobile load times top of mind. In this chapter, we’ll look at some techniques that take advantage of supported CSS properties like background-image. These techniques will not only allow you to display mobile-optimized images throughout your designs, but ensure they look crisp at any width. Using background images for better headers Support and the use of background images have been on the rise in the last couple of years thanks in part to increased CSS support utilizing all the benefits that media queries can bring. One benefit of the increased support is the ability to put live text on images. Background images and live text Let’s see how this is done. So let’s put it all together.
Pixel-Based Websites: Resources, Tutorials, And Examples Designing a web interface using pixel-style artwork is relatively obscure compared to modern trends. You really need to dig through a handful of websites on the Internet to find some good examples; it’s hard but not impossible. In this article I’ve collected a mega-compilation of everything you’ll need for pixel-based website design. There are dozens of healthy tutorials for beginners and experts alike. I’ve also included some handy tools and resources which you can play around with to explore the topic further. Recommended Reading: 30 Excellent Pixel Art Tutorials For Pixel Lovers Resources These are some unique development resources for web scripts and digital graphics. Spritely I have grown accustomed to working with open source code. The whole plugin is powered by JavaScript and HTML/CSS; no Flash or any other backend language is required. The current stable release version is 0.6.1 which is moderately updated. FatPixels SmartSprites Squidfingers BG Patterns The Spriters Resource Tutorials
35 Outstanding HTML Email Newsletter Templates Email marketing and newsletters are a critical part of the marketing plan of many businesses large and small. If you’re not already using email marketing for your own business or offering services for your clients, this is certainly an area to explore. One of the aspects of email marketing is the design of the email itself. While most email list managers will offer some free templates and/or a WYSIWYG editor for designing your own email, there may be times when these options don’t meet your needs. Fortunately, there is a large selection of HTML email templates available for purchase at very reasonable prices. Metro – $18 Market – $18 Karma – $15 Oceanic Email – $16 Modern Business 3 Light – $15 Corporate Newsletter Template V1 – $12 Versatile Newsletter 2 – $15 Rich Typography Email Template – $9 Elegance – HTML Email Template – $10 Storesletter – $15 Leaf – $16 Business – $18 Modern Business 4 HTML Email Template – $10 Clean Mail – $17 La Mode – $15 Mobilized-1 – $18 Shop News Email Template – $18
Elastic Transcoder Get Started with AWS for Free Amazon Elastic Transcoder's Free Tier includes up to 20 minutes of transcoding each month. Transcode up to 20 minutes of content each month for free. Read more. Amazon Elastic Transcoder is media transcoding in the cloud. We're excited to let you know that starting today you can use Amazon Elastic Transcoder to generate partial excerpts of content, or "clips," from your source media. You can immediately get started with clip generation by using the Amazon Elastic Transcoder API or the AWS Management Console. Amazon Elastic Transcoder manages all aspects of the transcoding process for you transparently and automatically. Like other Amazon Web Services, there are no contracts or monthly commitments for using Amazon Elastic Transcoder — you simply pay based on the minutes you need to transcode, and resolution of the content transcoded. Getting Started with Amazon Elastic Transcoder (5:28) Amazon Elastic Transcoder is designed to be easy to use.
Bulletproof email buttons | Campaign Monitor Data URIs explained One of the most frequently requested browser features in recent memory is data URI support. There’s been a fair amount written about data URIs recently: my colleague Stoyan Stefanov has written a couple of posts about data URIs, and my former colleague Hedger Wang also penned a post about how to use data URIs in IE. Surprisingly, there’s still a lot of misunderstanding and confusion about data URIs, what they are, how they work, and why you’d ever want to use one. URI, not URL URL is short for uniform resource locator, which is a combination of protocol (how to retrieve the data) and the address at which a given resource exists. Every URL is also a URI, which is short for uniform resource identifier. Data URI format The data URI format is pretty simple and is spelled out in RFC 2397 (which actually is short enough that you can read it all). data:[<mime type>][;charset=<charset>][;base64],<encoded data> In this format, data: is the protocol of the URI, indicating that this is a data URI.
Optimizing your email for mobile devices with the @media query Designing for the mobile web is nothing particularly new - or rare. With pretty much every decent handset available providing the “full web” experience, there are really not a lot of popular sites left that don’t include a mobile stylesheet for small screens. It seems that mobile stylesheets haven’t proven to be quite as popular in email, despite the advantages they provide to devices that make use of the @media query. Lets take a look at optimizing your HTML email for mobile, including the finer points of using @media in Campaign Monitor. Why optimize HTML email for mobile? To be honest, viewing HTML email on a mobile device can be plain fiddly. By creating a separate set of styles to be used by devices that recognize the @media query, you can optimize your emails in a similar fashion to how web pages are being optimized for the mobile today. How does this work? We’ve done it before, but lets walk through Panic software’s example again. Lets walk through this.