Hand coded Emails in HTML and CSS, tested across the major Email Service Providers, designed to make it easy for user to engage with your company. Emails are mobile optimised and coded to the latest email standards.
Occasionally I do designs!
Appealing custom HTML websites, Landing Pages, Web Banners, Cross Browsing and Responsive Design, Wordpress, Joomla and Prestashop CMS.
Helping to producing visually engaging, innovative and functional mobile and web visuals. Photoshop manipulation skills, eye for detail and original ideas you will be designing stunning on-brand concepts for campaigns and promotions
Everything started with a passion for web technology, in particular HTML, CSS and Flash.
When I first started I did not know much about content management systems and would rely solely on my skills in HTML & CSS. I would hard code every aspect of the website and this gave confidence and flexibility in meeting my client’s needs. Having also a diploma in Art helped refine my touch as a designer adding to my skills the ability to develop web designs from scratch accompanied to creative design.
I consider myself versatile, reliable and professional. I always try to exceed client’s expectations ensuring excellent results in both development and design.
I believe that a developer must also be a designer in order to have a holistic view of the work from the technological point of view but also from the visual one.
I was responsible for creating HTML email modules using Salesforce Marketing Cloud for Ralph Lauren, working closely with a SFMC Technical we created 66 modules with Drag&Drop functionality split
in 2 business units, testing the emails across ESP using Litmus, troubleshooting and QA testing.
The modules included AMPscript in order to take the country, language, modules, exclusions, segmentations, copy, images and links dynamically from a CSV file having only one template. Together with SFMC Technical and Service Delivery Director have created an Excel project tabs called "Matrix", this project tabs is formed of 4 tabs that contains all the information about the campaign, from country to segmentations and more.
The goal of Matrix is to create 30 emails in no time and facilitate the client with email marketing campaigns.
I also contributed into creating Montblanc's HTML responsive email modules and creation of GIFs. I coded new interactive modules in order to increase open rates. The modules are actively used by Montblanc.
Occasionally I created evites for Burberry using a platform called Adzu property of Code worldwide (my department in RAPP).
I played a role as consultant for other RAPP's clients, I was suggesting what approach to use for particular client's request or if a particular effect or functionality was possible to be used in HTML emails and in case provide the code.
Responsibile for coding responsive and non responsive Global Email Marketing for HSBC Bank and Citigold Bank. Testing email across Email Service Providers using Litmus and fixing existing emails. I worked closely with designers and Account Managers
I have hand coded larger scale projects for clients such as SpaceNk, Timberland, Dogs Trust, Richer Sounds, Gorgeous Apartments, Starlight Childerns, Purple Parking, Meteor, Medihow and Display Block.
I was responsible of development and testing of hand coded HTML emails across all the major Email Service Providers (Hotmail, Yahoo-mail, Gmail) using Email On Acid. Creating HTML5 snippets. Fixing problems encountered in the functioning of the emails and functionality and appearance of an email, testing emails in different email providers & at diffrerent resolutions.
Co-ordinate with Central Marketing and relevant territories to ensure all localised copy and assets are received on time for each email campaign.
My main project was Timberland, I was responsible for hand coding Global Email Marketing, bespoke emails across Uk, Italy, France, Spain, Germany and Neatherlands, extended to 16 countries for specific campaigns like Christmas sales, Black Friday and local festivity.
To increase the production I coded custom HTML snippets for Timberland reducing the time of building, also creation of interactive emails with the 2018 trends like videos, animations or slides. For Timberland I have designed banners for third party agencies, testing emails across Email Service Providers using Email on Acid, testing emails on Desktop and Mobile, animated GIFs, Email Designs and Wireframes using Photoshop and Illustrator.
For SpaceNk UK & USA the assets were provided by in-house designers my job was to hand codeing HTML emails, generating tracking links, tested the emails across Email Providers using Email on Acid, Desktop and Mobile
Responsibile for working on a project called Marvolio’s Nostrum. For this project I contribute to hand coding the website in HTML5 and CSS3 and usign Boostrap for Responsive Design and Jquery animations, lightbox and HTML image maps as buttons.
Assist in developing company branded native Android and iOS compatible mobile apps using the EA Content Management System. Ensure visual images and multimedia files provided for the app are of a high standard and meets the Client and EA’s requirements. Support digital marketing activities, where required
Responsible for working on the project, designing newsletters and interacting on a weekly basis with marketing manager, sound engineer. Updating the website and music networks with new music release, designing graphics for Facebook and short videos for promoting the artists.
I have worked as a freelance creative. During this time I have restyled some exsisting websites, previously created
Responsible for working on a wide range of projects, designing appealing websites and interacting on a daily basis with graphic designers, back-end developers and marketers. I contributed into improving MobOffice CMS (property of the company) re-styling the HTML of the system, creating new HTML5 and CSS5 modules such as reservations forms, calendars and helped the CMS to compete with other agencies.
The improvements carried out benefited the company, customers and users. I introduced Responsive Design and in regards to social networks I also introduced software like Hootsuite
Kingolab is a small web boutique based in Pozzuoli, Naples. I worked as a freelance web/graphic designer. I was coding HTML websites mixed with Flash ActionScript2 animations
I started as a HTML developer, hand coding websites from scratch, creation of Flash animations or websites, coding of custom HTML features like photogallery, videogallery, slides show for small businesses my hometown, Naples.
WHAT IS POSSIBLE WITH RESPONSIVE DESIGN?
The possibilities are endless, but some common uses of responsive design techniques include:
percentage of email opens happen on mobile devices
percentage of people delete an email if it doesn’t look good on their mobile device
Times/day people look at their phones
A responsive email template is a template for email marketing designed to look great and function properly across any device. A responsive template will automatically adapt to any screen size, so whether the email is opened on a smartphone, tablet, or a computer, it will look great, function well, and be easy for the recipient to read.
Why is this such an important consideration for anyone conducting email marketing? Well, you know what really grinds my gears? When I open an email marketing campaign on my smartphone and have to pinch and expand to see the text.
It tells me that the sender didn’t take care in testing the email before it landed in my inbox, and that means they don’t care about my time or the quality of our interaction.
As a result, I don’t particularly care to do business with them.
In fact, 75 percent of subscribers admit they will delete an email if they can’t read it on a mobile device. In this day and age a lot of people rely on their smartphones to check email. And since emails are one of the top ways a lot of brands interact with their clients and followers, it’s important to keep this in mind and adopt responsive email design so that your message gets across clearly regardless of device type and screen size.
So, what is a responsive email template? In summary, a mobile-responsive email templates automatically adapt to the size of the screen they’re being displayed on so your email looks great, has a functional layout, and is easy to read regardless of your subscriber’s screen size.
And with over half of all email now opened on a mobile device, looking good on mobile is essential to delivering a quality message to your customers and subscribers.
Email interactivity allows brands to add a wide variety of elements to their messages—everything from image galleries and offer reveals to hamburger menus and add-to-cart functionality.
A majority of brands that have used interactivity have used it to add carousels and hamburger menus to their emails. On the other hand, review and rating submissions, add-to-cart functionality, and search bar entries have been used by relatively few brands.
Here are some more details and examples for some of those interactive email elements…
Interactive email is becoming more popular than ever. Using a carousel in an email can be a powerful tool, especially for mobile where vertical space is at a premium.
A familiar element in mobile apps, hamburger menus save valuable screen real estate, while still keeping navigation links handy. This has become the most pervasive interactive email element as it has been incorporated into mobile email designs across a number of large brands, including REI, Chili’s, Aeropostale, and Neiman Marcus.
This is a simple technique to show a brief animation of an object or text against a blank page and having the rest of the email “fade in” after the animation ends.
Sonic the Hedgehog Game in Email
One of the exciting possibilities of interactive email is games. Kristian Robinson of Two built two really cool versions of Sonic the Hedgehog games that you can play within an email. I was blown away with the slick execution of both these games as playing them had an authentic albeit brief experience.
In this version, the goal of the game is to jump and avoid the spikes at exactly the right moment. This technique uses two sets of CSS animations. The main (default) animation sequence has Sonic running into the spikes at the end. The alternate sequence takes over when the user taps on a “jump” button at the right time and has Sonic jumping safely over the spikes.
See the example.
First Person Runner
Not content with his earlier achievement, Kristian built a version of Sonic with a “first person” view. The goal of this game is to collect a bunch of rings before the time runs out.
The implementation used radio inputs to keep score and the build-out of a very elaborate path consisting of background image sprite animations.
see the example.
Although HTML email has been around for almost as long as the Web, email has often been regarded as the Web’s ugly stepchild. The inconsistent and outdated HTML support in email clients seem to reflect a mindset that as long as senders can place some images and text in an email, it’s enough. Why ask for more? Apparently, email is not a medium for innovation.
Recently, that perception began to change as designers began finding ways to implement interactive and dynamic content within email. These techniques not only captured recipients’ attention, they offered new and exciting creative avenues for email designers.
B&Q, a major UK retailer, attracted a lot of attention last year when the company sent a series of emails that featured fully interactive components using just HTML and CSS.
In a press release, Oracle, the developer of the campaigns coined the term “kinetic email” to refer to the techniques used. I personally like the term — “kinetic email” is catchy and appropriate.
However, what exactly is kinetic email? And while we’re talking about it, what isn’t kinetic? I’d like to offer my perspective on what kinetic email is and open a discussion to move email innovation forward.
As you can see from the example above, interactive hotspots, or user initiated information overlays are an effective way to deliver additional contextual information on an image.
See a Live Demo
Beginnings of Kinetic Email
In the past, although email clients such as Apple Mail had robust modern HTML and CSS support, the vast majority of email clients didn’t. This forced email designers to code for the lowest common denominator.
The launch of the iPhone changed everything. The iPhone email client, like Apple Mail, supported modern HTML5 & CSS3. However, the immense popularity and adoption of the iPhone – and later the similarly capable Android phones – gave designers a reason to create email designs tailored for the mobile screen. Using media queries, designers were able to create mobile optimized responsive layouts.
Once designers started to experiment with responsive layouts, they discovered CSS tricks that allowed email to be interactive and dynamic. In 2011, Campaign Monitor posted an article on implementing “progressive disclosure” in email where hidden email content in mobile could be selectively displayed when the recipient tapped on a button.
Isn’t kinetic just a different way to describe interactive email?
No. For two reasons – the term interactive email comes with some baggage and kinetic encompasses more than just interactivity.
Interactive email comes with baggage because various forms of technologies have been called “interactive email” – email that required users to install proprietary software to experience interactivity; emails that contain video and animated gifs; and emails with call-to-actions that spur the user to click to landing pages and do an interactive activity such as vote, take a survey, or play a game. I wouldn’t consider any of these true kinetic email.
I also believe that kinetic should include techniques that make an email dynamic but not necessarily interactive – such as CSS animation and transitions and time triggered display of content. Although video and animated gif images can be considered dynamic, I feel that kinetic should be limited to the use of CSS to dynamically control elements in email and not simply display dynamic media.
At the core, kinetic email encompasses interactive and dynamic designs in email that are implemented completely in HTML and CSS. Going further, we could categorize kinetic email into three distinct types:
Falling Snow (Kinetic Effect)
Creator: Wax Media for B&Q
Realtime External CSS Driven Twitter Feed (Kinetic)
At Retentiongrid they’re able to embed real-time content from Twitter, Facebook and Instagram into any email, if we are willing to have it in our clients email we can get in touch with Kevin Dykes (CEO), obviously they sell the script, but we can make our clients pay for it.
Anything that isn’t HTML or CSS, dynamic and supported natively by an email client is not kinetic.
Kinetic email is not:
Although kinetic email is not a substitute for a well-crafted and targeted campaign, when used appropriately kinetic email can bolster a brand’s message and increase the recipients’ engagement and delight.
We believe that kinetic email has the potential to attract new interest to email – especially from developers. Who knows? The email client developers at Google, Yahoo! and Microsoft might even begin to take HTML support seriously.
Using an animated GIF adds an element of delight to a campaign that isn’t typically possible with static email designs. A number of campaigns use animated GIFs for humor, and do so with great success.
Women’s clothing shop Ann Taylor LOFT used an animated present to create a sense of intrigue and get subscribers to click through to “unwrap” their gift.
Often, this bit of movement is enough to surprise a reader, trigger their interest, and get them to click through to a landing page. We used this trick in this email to promote our 2018 Email Client Market Share infographic.
But animated GIFs can be used for more than just gimmicks and humor. Email service provider MailChimp used animated GIFs in a series of emails to help explain its redesigned interface.
Not every email client supports animated GIFs. Outlook 2007, 2010 and 2013 won’t show the animation. Instead, they will show the first frame. To overcome this, many email designers ensure that vital information—perhaps a call-to-action, offer, or headline—is included in the first frame of the GIF.
If used too aggressively, it’s likely that many subscribers will become complacent with your GIFs and stop paying attention to them. Used sparingly, animated GIFs can surprise and delight subscribers. Used too frequently, the same subscribers may tire of them and become less likely to engage with your campaigns.
While animated GIFs don’t work everywhere, support across most email clients is exceptional. Animated GIFs work in all webmail clients and most desktop and mobile clients. The main exceptions are Microsoft Outlook 2007, 2010, and 2013, which all refuse to animate the GIF and instead displays only the first frame of the animation.
Apart from that, you can see that animated GIFs work beautifully on all other clients.
Choosing the right font for your email has never been too hard, considering the limited number of web safe fonts to choose from. But recently, things have changed. More and more email designers are pushing the boundaries and embracing the same development techniques that web designers have been using for years—implementing web fonts in their emails.
Web fonts allow web designers to be more creative with their typography, enabling them to choose non-standard fonts in their designs.
Web fonts are specifically designed and licensed for use on websites and mobile apps. A couple of web fonts you might be familiar with are Open Sans and Roboto. They have to be downloaded, and often purchased, from a web font supplier for use on your own computer. Email designers commonly use what are called web safe fonts in their emails. Unlike web fonts, web safe fonts are the default fonts found across the majority of different operating systems and devices. A few you might be familiar with are Arial, Times New Roman, Georgia, and Verdana.
As a marketer and designer, you know the pressure to stay on-brand in email, with colors, design, and—yes—typography. Locking important copy in images has been a standard practice in email design as a way of staying on brand and being creative. But “hiding” text in images limits the accessibility of the email because screen readers can’t read the text on the image.
Web fonts open up new avenues of creativity in typography, allowing email designers to be creative, accessible, and stick to your brand’s look and feel.
While web fonts don’t have universal support, here are the email clients where they are supported:
Native Android mail app (not Gmail app)
Because web fonts don't have universal support, i suggest to use system fonts, here’s the full list of safe fonts:
Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
Bookman Old Style, serif
Comic Sans MS’, cursive
Courier New, Courier, monospace
Impact, Charcoal, sans-serif
Lucida Console, Monaco, monospace
Palatino Linotype, ‘Book Antiqua’, Palatino, serif
Tahoma, Geneva, sans-serif
Times New Roman’, Times, serif
Trebuchet MS, Helvetica, sans-serif
The copy sizes best practice are:
Header: Design x2 font: 44px to 50px - HTML: 22px to 25px
Line-height: Design x2: font-size x 1.2
Body copy: Design x2: 28px to 32px - HTML: 14px to 16px
Line-height: Design x2: font-size x 1.5
There are various approaches to responsive email design but in my experience they can be broadly lumped into one of two categories.
The first is the Now What method. It goes like this:
With around half of all email opens taking place on mobile, it’s important to get responsive design right. Treat it as an integral part of the creative stage rather than an afterthought and email production becomes a far more streamlined experience.
Email is not the web. It’s the web’s finnicky cousin.
While web developers can capitalise on the latest HTML and CSS advancements, email developers live in a world of patchy support. That’s not to say it’s impossible to build mailings which work perfectly on all popular devices. It just takes some know-how. A significant part of that is understanding the ins-and-outs of CSS support.
Campaign Monitor undertook the ambitious project of testing and recording compatibility for every specific CSS property by email client. The outcome is their Ultimate Guide to CSS: a valuable reference for anyone involved in email design or production. Familiarity with CSS support makes it easier to craft email-friendly responsive designs from the ground up.
It’s common practice in responsive design to collapse from a multi-column layout on desktop to a single column on mobile. Such a composition makes the most of the available screen space.
The left column is normally stacked above the right when the blocks are rejigged for mobile. While that often makes sense, there are times when it’s appropriate to reverse the order instead. CSS makes it possible to set either stacking sequence by means of some succinct and reliable code.
Piling up items which previously sat side-by-side brings with it a few new considerations. Is the bottom of one section going to run into the top of the next? Let’s add some vertical spacing. Is text going to touch the sides of the screen on mobile? Better apply some padding.
Images which have padding or thick borders on desktop will have more impact on mobile when rendered at full screen width. Sometimes there’s extraneous detail which can be cropped out. By cutting images into three parts, you can drop the left and right slices on mobile and focus on the important part of an image. That’s a mobile-optimised picture without squandering data on alternate images.
Mistakes during the design stage can lead to delays when it comes time to code the email. Inconsistent sizing, misaligned items and unwanted anti-aliasing are common defects which may need attention.
The objective is pixel-perfect design. Achieve that and you’re on the right track for a flawless responsive email.
Columns and images are probably the first things which come to mind when constructing a responsive email but let’s not forget about the text. It’s a little too easy to set up a perfect reading experience for desktop and tablet users, only for it to fall apart on mobile.
As columns change size to accommodate screens of various widths, line breaks fall in different places. There’s an element of unpredictability which can lead to brand names being split over two lines or orphaned words sitting at the end of paragraphs. Fortunately, we can use non-breaking spaces and hyphens to group words and surmount these readability obstacles.
Email on Acid’s informative Email Accessibility Best Practices recommends a minimum font size of 14 pixels. If your copy ends up titchy on mobile, the obvious fix is to increase the original font size until it looks good on small screens. Depending on the design, that won’t always be convenient. A less obvious solution is to use the aforementioned image-cropping technique, thus reducing shrinkage on mobile. The adventurous could try placing web fonts over background images and proportionately scaling the text with viewport-width units.
It’s not unusual to see image-based headlines paired with text-based body copy. This comes with its own unique dangers. The wider the headline, the more dramatically it’ll be scaled down on mobile, yet the text below remains at its desktop size. This often leads to an odd visual mismatch whereby the headline is barely larger – or potentially even smaller – than the paragraph it precedes. By means of some clever image slicing, that headline could be stacked on mobile instead.
Next up: terms and conditions rendered at the base of an image. Hard enough to read on desktop and nothing more than a meaningless smudge on mobile. That’s an accessibility nightmare and raises the question if the terms and conditions are even legally binding. The solution for this one is simple: don’t do it. A live text-based footer is the sensible place for terms and conditions.
Readability always deserves to take precedence over pretty graphics. Revising a design can be a pain but if the end product is an email which looks great and can be understood by everyone, it’s worth it.
High density displays grant us crystal-clear screens and sharp imagery. They’ve been around for a while, so it’s no secret that high density-friendly images need to measure double the dimensions at which they’ll be displayed. Graphics saved at actual size are noticeably blurry on a high density device.
Catering for such screens seems straightforward. Simply produce the entire artwork at twice its desktop size and call it job done, right? Actually, there’s more to it.
Just because mobile phones are smaller than desktop monitors, that doesn’t necessarily mean all images will be reduced in size. Let’s say you have an image in a two column desktop layout which is expanded to full width on mobile. That picture might be 300 pixels wide on desktop but it’s about to expand to 414 on an iPhone Plus or Max. If your file is saved at less than 828 pixels, it’s not going to look as crisp as it could. For truly high density imagery, figure out the largest dimensions at which each picture will be displayed and size the image file accordingly.
Higher resolution images mean bigger file sizes of course. To prevent the kilobytes from ballooning out of control, it’s important to optimise images effectively. Significant savings can be made by running files through a bespoke image compressor.
Judging by what I see in my inbox, a lot of companies could benefit from some template maintenance. While the images throughout the body of the email are sharp, there are low-resolution logos and icons in the header and footer. These are probably components which pre-date widespread use of high density displays and nobody ever got around to updating them. The contrast of image quality is jarring and a blurry brand logo isn’t a promising way to begin an email. If I’ve just described your mailing templates, it’s worth setting aside some time to modernise these portions.
A mouse is precise and instinctive. It’s second nature to sweep through a page, using the pointer to identify and interact with on-screen elements.
A human fingertip jabbing at a touchscreen isn’t quite so accurate. Frustration ensues when links are small and clustered.
As a literal rule of thumb, links need to be easily pressed when a phone is operated with one hand. Coordinate your design so that buttons are clear, well-spaced and unambiguous.
Linked phrases set within paragraphs need to be of a sufficient font size so as to be pressed with ease. Avoid splitting such copy over two lines lest a single link be mistaken for multiple.
Buttons on mobile are at their user-friendliest when full width with generous padding. Their active area needs to cover the entire width and height, not just the text in the middle. Who’s to say if a customer will try again if they hit the dead zone on a badly coded button and nothing happens? Best not to take that chance.
A breakpoint is a preset screen value – usually width – at which different CSS rules are triggered. That’s how we establish alternative layouts for desktop and mobile. Let’s call it the backbone of responsive email.
There’s no limit as to how many breakpoints are present. It’s possible to target desktop, tablet and even specific models of phone based on their precise horizontal and vertical resolution. You could even set up a custom layout for any customers who fancy checking out your email in landscape mode.
One word: overkill. And now some more words: while multiple breakpoints are useful in web development, one is sufficient in most email development scenarios. Emails are usually no more than 700 pixels wide. An iPhone 4 has a logical horizontal resolution of 320 pixels. That’s a pretty narrow range of widths, so we don’t need a slew of breakpoints.
A size limit on style sheets is another reason to avoid multiple breakpoints in email. Some email clients will reject the style sheet once it reaches a certain number of kilobytes, scuppering the responsive code.
Fixed sizes on desktop and tablet, switching to fluid widths on mobile is a tried-and-tested setup. Simple, flexible, future-proof and powered by a single breakpoint.
There was a time when I would immediately seek out the ‘View Desktop Site’ link when accessing a website via my phone. Why? I knew that the default mobile experience would probably mean limitations on content and function. Zooming and scrolling around the desktop layout on a pocket-sized viewport may have been unwieldy but it was preferable to browsing a diluted website.
Those were the early days of the mobile internet revolution and fortunately things have improved significantly since then. That doesn’t mean we’re quite there yet. Just recently, I visited the website of a multinational corporation with the intention of subscribing to their email newsletter. No sign-up box was anywhere to be seen. It wasn’t until I pressed the miniscule ‘Full Site’ link buried in the footer that I found what I was looking for.
Going back a few years, I was in a position where our team sometimes worked with pre-coded mailings supplied by assorted digital marketing agencies. Some of these were first-rate. In fact, I have one of these agencies to thank for my first ventures into responsive email development.
At the other end of the spectrum was a hodgepodge of bad code and bad practice. I’d like to focus on a particular example: double-coded emails. We coined this term to describe mailings which included entirely separate desktop and mobile versions crammed into a single file. Rather than reshaping the content, everything was doubled up. We greeted double-coded emails with a dismayed groan.
The Adobe Preview CC mobile app lets you preview your phone and tablet designs on an iPhone or iPad live as you work. If you’re not already using it, you’re missing out! It’s a great app, and it assumes you’re working in 2x files:
When working at 2x you must double type sizes, stroke weights, etc.
Here are some examples:
Designing at 2x wins by a score of 4 to 2. Both workflows have their pros and cons, but I hope I’ve shown you that the benefits of designing at 2x outweigh the few downsides.
by Dan Rodney: Empowering People Through Technology
The displays of the iPhone 3 and iPhone 4 were both physically the same size, but the iPhone 3 was 320 pixels wide and the iPhone 4 was 640 pixels wide. The iPhone 4 had twice as many pixels (widthwise), so we call it a 2x display. Apple calls them Retina displays because the human eye can’t see anything higher resolution than these displays. The old concept of more pixels equals a bigger screen no longer applied! Now the additional pixels were being used to show more detail, rather than more stuff (as you’d see on a bigger screen).
When I first heard about this, I wasn’t sure how it would work. If I had designed a webpage to be 320 pixels wide (which used to be the full width of an iPhone 3) would it now only be half the width of the iPhone 4 screen? That wouldn’t be good, because the content would be too small at half the size! Luckily that wasn’t the case, because the 320 pixels that are coded into HTML/CSS no longer have a one-to-one relationship with all displays:
2x graphics are twice the pixel width of 1x graphics, but don’t think of them as bigger. They must occupy the same physical space, so the 2x pixels end up being smaller.
In the animation below, when the 2x image is twice the width of the 1x, both images have the same size pixels. This is not how we’re supposed to compare them! When the 2x image is scaled down so it’s the same physical size as the 1x, the pixels are smaller which creates a higher resolution image. This is the size the 2x image is supposed to be!
One last concept to keep in mind, is that resolution on the web is not always fixed. For example, an image’s resolution will change as it is scaled down to fit smaller devices. The resolution you see in Photoshop (such as 72ppi) is ignored by web browsers because the size of the image in the webpage determines its resolution. The size is determined by HTML/CSS code, so:
Most (if not all) of today’s mobile phones and tablets have 2x or higher resolution screens, so you may not need to create 1x graphics for mobile.
Some laptops and desktops have 2x screens, but most are still 1x. Therefore it’s best to create 2x for desktops.
There are even higher resolution 3x displays, but they don’t look better than 2x because of the limitations of your eye. Some people with lower vision can’t even tell the difference between 1x and 2x! For web graphics, 2x is the highest resolution you need. Anything greater than 2x will increase the filesize (and download time) without a noticeable improvement in visual quality.
VIDEO IN HTML EMAILS.
See the Pen Responsive Animated Carousel for Email
Responsive Animated Carousel with different animation
HTML carousel image with thumb (3 or 5 thumb)
See the Pen Rollovers for Mobile and Non-Mobile Email
See the Pen A floating tequila bottle with balloon effect.
See the Pen Bird sprite css