Auch als Android-App erhätlich
Jetzt kostenlos runterladen
Auch als IOS-App erhätlich
Jetzt kostenlos runterladen

Creating a Responsive HTML Email ONLINE ANSCHAUEN: STREAMEN, LEIHEN ODER KAUFEN

Jetzt Creating a Responsive HTML Email bei Amazon Prime Instant Video als download kaufen.
Amazon Prime Instant Video Logo
Staffeln
1
1 Staffeln verfügbar

Staffel 1

In Flatrate
Nein
ansehen
Episode 1
Preview the final project
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Preview the final project - Inhaltsangabe:

In this course, we'll create an HTML email design with a layout that will adapt to various screen sizes.
Episode 2
About the exercise files
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - About the exercise files - Inhaltsangabe:

We'll walk through all the exercise files for creating the email. There are 5 folders: Starter file, Art templates, Snippets, Video and Final Project. These files can be used to follow along or use these files as a base for your own project.
Episode 3
Setting expectations about HTML email
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Setting expectations about HTML email - Inhaltsangabe:

Before we get started, we need to set some expectations: HTML emails are not web pages.
Episode 4
Beginning the project
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Beginning the project - Inhaltsangabe:

We'll begin by setting up our files and folders. To follow along in this course, you'll need to have an text editor and software for creating and sizing the graphics. Mac and Windows samples for text editors are shown. Some are free and some commercial. The source graphic files are Adobe Photoshop.
Episode 5
Creating the banner and background graphics
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Creating the banner and background graphics - Inhaltsangabe:

The first graphics we'll create are the banner and background. We'll be using Adobe Photoshop. We'll create the multiple sizes for our responsive layout.
Episode 6
Creating the content graphics
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Creating the content graphics - Inhaltsangabe:

Next we'll create the graphics for the content area of the email.
Episode 7
Setting up the base layout structure
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Setting up the base layout structure - Inhaltsangabe:

Back in our code editor, with the email.html file open, we'll start building our layout. Since most email clients don't support a full range of HTML and CSS, we need use tables. This does pose a challenge for responsive layouts. To get around this limitation, we'll put individual content into single cells, so we can move the entire table when the width changes.
Episode 8
Styling the table row for the logo
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling the table row for the logo - Inhaltsangabe:

We'll add some styling to the logo row and view the first part of our email in a browser.
Episode 9
Styling the table row for the headline
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling the table row for the headline - Inhaltsangabe:

To add the row for the headline, we'll go into our Snippets folder to copy and paste the values.
Episode 10
Styling the table row for the banner and content
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling the table row for the banner and content - Inhaltsangabe:

Let's continue building our email. We've setup Snippets for this as well, so we'll go into our folder to copy and paste.
Episode 11
Styling the table row for the promos
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling the table row for the promos - Inhaltsangabe:

We'll next work on our row for the promos. We'll go in our Snippets and find the code with need. Now in order for our promos to change position, we'll need to put them in their own table. As mentioned earlier, we have to wrap each section of the email in a single cell table in order to manipulate the position to fit various screen sizes. We will be doing this for the next couple sections as well.
Episode 12
Styling the table row for the callouts
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling the table row for the callouts - Inhaltsangabe:

Let's go back to our Snippets, copy the code and create the table row needed for the callouts.
Episode 13
Styling the table row for the footer
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling the table row for the footer - Inhaltsangabe:

Let's go back to our Snippets, copy the code and create the table row needed for the footer. We'll review in browser.
Episode 14
Styling anchor links as buttons
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling anchor links as buttons - Inhaltsangabe:

Now that we have our email built, let's go back to the anchor links and style them to look like buttons.
Episode 15
Creating a call-to-action button
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Creating a call-to-action button - Inhaltsangabe:

Now that we've created a button style, let's create a "Call to Action" button in the beginning paragraph.
Episode 16
Adding CSS media queries to your HTML email
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Adding CSS media queries to your HTML email - Inhaltsangabe:

We've now have built an HTML email, but it's not responsive... yet. We need to add CSS to begin to style and position our email content for various screen sizes. We'll set rules with important tags to override the width attribute on the table. We can then control the table width at any screen size.
Episode 17
Styling the headline and banner for smaller screens
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling the headline and banner for smaller screens - Inhaltsangabe:

Now we need to target and style the headline and banner row for smaller screen sizes.
Episode 18
Styling the content and footer for smaller screens
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling the content and footer for smaller screens - Inhaltsangabe:

Now we need to target and style the content and footer row for smaller screen sizes.
Episode 19
Styling the promos for smaller screens
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Styling the promos for smaller screens - Inhaltsangabe:

Let's move onto the promos. The promo are a bit more complex and do require more styles so we can stack and reposition the graphics and text.
Episode 20
Rearranging the callouts for medium screens
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Rearranging the callouts for medium screens - Inhaltsangabe:

For the callouts for medium screens, we're going to rearrange them into a grid. We'll add one more property, "clear". This will ensure the third table in the grid aligns to the left in case the second table has too little content in the callout.
Episode 21
Stacking the callouts for small screens
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Stacking the callouts for small screens - Inhaltsangabe:

The medium arrangement for the callouts won't work for small screen. We'll need to stack them. We'll set these rules for the text and graphics for each of the callouts. Then we'll do one last thing and set the margin and padding to zero. This will make the design go edge to edge for small screens.
Episode 22
Adding inbox preview text
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Adding inbox preview text - Inhaltsangabe:

If your email client supports showing you preview text in your inbox, it will look for the text inside the HTML first. So in order to be able to customize the preview text, we'll need to place a hidden DIV so the email clients sees that first before the email text.
Episode 23
Adding animation to your HTML email
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Adding animation to your HTML email - Inhaltsangabe:

If you'd like to add animation to your email, there are email clients that do support animated gifs. We'll explore this option by adding an animated gif and some pointers to be able to use the animated gif file even if the email client doesn't support it.
Episode 24
Using web fonts with your HTML email
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Using web fonts with your HTML email - Inhaltsangabe:

You might want to use custom fonts, as some email clients will support it. You'll want to use fonts through services that supply CSS tags. We'll be using Google fonts as our sample.
Episode 25
Adding HTML5 video into HTML email
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Adding HTML5 video into HTML email - Inhaltsangabe:

We'll look to incorporate HTML5 video in your email. We'll create a video folder same level as our email file. Then we'll go grab the video sample files from the Exercise Folder. Then we'll replace the promos with the video. We'll review in the browser and show our testing results of the email clients that do and don't support video. We'll also take a look at the email on mobile devices.
Episode 26
Encoding and embedding Base64 images
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Encoding and embedding Base64 images - Inhaltsangabe:

Another way to specify graphics and embed them into in HTML, is to encode them. Basically, we will specify the graphics as ASCII code. We'll show you how.
Episode 27
Validating your HTML code
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Validating your HTML code - Inhaltsangabe:

Before we send out our email or load it into a third party CMS for deployment, we'll want to validate our code to be sure it's as clean as possible. We recommend using a free tool by the W3C called "The Markup Validation Service". This will show you any missing tags or malformed code.
Episode 28
Suggestion for Yahoo! Mail incompatibilities
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Suggestion for Yahoo! Mail incompatibilities - Inhaltsangabe:

The issue is Yahoo! Mail does not support media queries. So the medium and small screen rules are not being supported. If you need your email layout to work in Yahoo! Mail, we'll show you some suggestions and work arounds.
Episode 29
Suggestions for Blackberry 5 layout correction
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Suggestions for Blackberry 5 layout correction - Inhaltsangabe:

The issue with Blackberry 5 is it does not support media queries. The tags do not extend the full width. If you need your email layout to work in Blackberry 5, we'll show you some suggestions and work arounds.
Episode 30
Suggestion for supporting Lotus Notes 6.5, 7, and 8.5
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Suggestion for supporting Lotus Notes 6.5, 7, and 8.5 - Inhaltsangabe:

If you need to support Lotus Notes 6.5, 7, and 8.5 there are several considerations for many tags. We'll give you suggestions for some work arounds, and strongly suggest testing any adjustments.
Episode 31
Planning alternate layouts
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Planning alternate layouts - Inhaltsangabe:

So now that we've built this layout, you'll probably want to create your own. We'll explain why we created the email this way and make suggestions on how to create alternate layouts to make your own.
Episode 32
Where to go from here
Mieten
Kaufen
SD 0.99 €
HD 0.99 €
ansehen

Creating a Responsive HTML Email - Where to go from here - Inhaltsangabe:

Remember to set expectations: HTML emails are not web pages and have limitations. Experiment and test combinations of HTML and CSS for alternate layouts. Find out more online from resources such as Campaign Monitor for tips and best practices.

Creating a Responsive HTML Email - stream

serie, Laufzeit: 0 Min, Genre: Keine Angabe
Original Titel Creating a Responsive HTML Email
Genre Keine Angabe
Altersfreigabe Keine Angabe
Veröffentlicht Keine Angabe
Hauptdarsteller Keine Angabe
Regisseur Keine Angabe
Drehbuch Keine Angabe
Produziert von Keine Angabe
Sprache Deutsch
Stichworte Keine Angabe
Angelegt 2016-05-12