8 STEPS TO CODE KILLER RESPONSIVE S
|
|
|
- Dominic Logan
- 8 years ago
- Views:
Transcription
1 8 STEPS TO CODE KILLER RESPONSIVE S THAT WILL MAKE YOUR S BEAUTIFUL
2
3 3 BUILD RESPONSIVE STEP BY STEP Steps to create a simple responsive template. (fluid image, main content, two columns section and footer) Learn to create flawless s step by step with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention to details. One simple line in your code can sabotage all your efforts in attain good results across all clients. To help you deal with all the frustration that comes with coding HTML we ve created this guide with simple steps to follow when coding design.
4 4 Responsive Template Aliquam erat volutpat pellentesque eleifend nunc eget diam convallis aliquam vitae vitae suspendisse tempus sed molestie enim lacus quis Button Your Title Aliquam erat volutpat pellentesque eleifend nunc eget diam. Your Title Aliquam erat volutpat pellentesque eleifend nunc eget diam. FACEBOOK TWITTER LINKEDIN
5 5 1 - DOCUMENT SET UP For every template that you code, you ll need to set up your document base structure the same way. Starting with a Doctype will inform the program what type of document it is and what HTML tags, set of rules and CSS to expect. Usually is used to distinguish versions of HTML languages, such as HTML or XHTML. If you re going to use Media Queries, you ll need to include the viewport meta tag on your s <head>. This will tell the browser to set the viewable area to the width of the device s screen. After the <head> tag, you ll need a body, where you ll place your content. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN transitional.dtd > <html xmlns= > <head> <meta charset= utf-8 > <meta name= viewport content= width=device-width > </head> <body> <!-- HTML Content Here --> </body> </html>
6 6 2 - CSS RESETS As clients render your in different ways, there is some hacks that can help to prevent some of them. You can reset some general styles and reset some client specific styles. You should place this resets in the end of your <body> instead of putting it in the <head> because some clients strip it out of the . </body> <style type= text/css > /* GENERAL STYLE RESETS */ body #bodytable {height: 100%!important; width: 100%!important; margin: 0; padding: 0; -webkitfont-smoothing: antialiased;} img, a img {border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;} /* Ensure that images don t have borders, text-decoration and unwanted spacings */ table, td {border-collapse: collapse!important;} /* Ensure that tables and cells don t have any extra spacing by specifying that borders should be collapsed*/ /* CLIENT SPECIFIC RESETS */.ReadMsgBody {width:100%;}.externalclass{width:100%;} /* Force Hotmail to display s at full width by targeting classes that the service adds */.ExternalClass,.ExternalClass p,.externalclass span,.externalclass font,.externalclass td,.externalclass div {line-height: 100%;} /* Force Hotmail to display normal line spacing by targeting classes that the service adds*/ #outlook a {padding:0;} /* Force Outlook to provide a view in browser message */ body, table, td, a {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */ table, td {mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */ img {-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */ /* ios BLUE LINKS */.apple-link a { color:#999999!important; text-decoration: none!important; } /* Handling ios blue links */ </style> </html>
7 7 The first line on General Style Resets as the purpose to avoid that clients add padding or spaces on your design. As some clients strip the <body> you ll need to create a class for your body table (step 3) and call it on the general style resets. <body> <table class= bodytable width= 100% border= 0 cellspacing= 0 cellpadding= 0 valign= top bgcolor= #f4f4f4 > </table> </body> 3 - BODY & MAIN TABLE To start, create a table 100% wide that works as the body to some clients that strip out the style from <body> tag. It s important to set all table s cellpadding and cellspacing to 0 to avoid unwanted spaces. Also, unless you want your tables to have a 1px black border, don t forget to set it to 0. The attribute valign will help to ensure the content inside this table will float to the top of the . <body> <table class= bodytable width= 100% border= 0 cellspacing= 0 cellpadding= 0 valign= top bgcolor= #f4f4f4 > <td align= center ></td> </table> </body>
8 8 Due to all different supports given by clients, building a responsive it s not an easy task. To make a fluid you nedd to create it out of percentages by setting max-widths or fixed-widths that turn flexible with media queries. Unfortunately both methods don t have full support. For instance max-width is not supported by Outlook 2007/10/13, Lotus Notes, AOL Desktop and Windows Mobile. On the other hand, media queries aren t supported by Gmail (both browser and mobile app), Outlook (browser and desktop) Windows Live Mail and AOL Mail. So we need to combine techniques in order to make our responsive in most inboxes. To get around the different support of clients, we re going to base our structure both on percentages, fixed-widths and max-widths. Inside your body table you re going to place three cells in a row. Using the HTML attribute, set the width for the center TD and leave the other two cells empty. The center TD is where you ll put your structure while the other two td cells have the purpose to give space around your content. clients tend to ignore empty cells, so you ll need to place a witch is used to represent a non-breaking space. <body> <table class= bodytable width= 100% border= 0 cellspacing= 0 cellpadding= 0 valign= top bgcolor= #f4f4f4 > <td align= ></td> <td width= 600 align= center ><!-- Tables Content Here --></td> <td align= ></td> </table> </body>
9 9 4 - FLUID IMAGE & MAIN CONTENT Inside the main table, on the 600 wide td, we re going to add our first table witch will allocate a fluid image. Set it s width to 100% and align it to center. Style the table with a max-width of 600. This is needed to some clients that doens t respect the td width such as Apple Mail. To make your image fluid, give it s <td> a fix width and a percentage width to the <img> and set it s height to auto to allow the image to resize according to the browsers width. Don t forget to give your image an alt text and to add the display: block; style command to avoid gaps around images. <body> <table class= bodytable width= 100% border= 0 cellspacing= 0 cellpadding= 0 valign= top bgcolor= #f4f4f4 > <td align= ></td> <td width= 600 align= center > <!-- ======= Fluid Image ======= --> <table width= 100% align= center border= 0 cellspacing= 0 cellpadding= 0 valign= top bgcolor= #f4f4f4 style= max-width: 600px; > <td width= 600 align= center ><img alt= Responsive s style= display:block; font-family: Helvetica, arial, sans-serif; font-size: 30px; color: #6f574e; border= 0 src= it/600x400 width= 100% height= auto /> </td> </table> <!-- ======= End Fluid Image ======= --> </td> <td align= ></td> </table> </body>
10 10 Our second table will contain three main rows - Title, Description and Button. Give empty space between the elements with empty rows and remember to always set the height on the <td> (you can also set spacing between content with padding on each <td> or for the whole table) <!-- ======= End Fluid Image ======= --> <!-- ======= Main Content ======= --> <table width= 100% align= center border= 0 cellspacing= 0 cellpadding= 0 valign= top bgcolor= #ffe8c4 style= max-width: 600px; > <td height= 40 ></td> <td align= center style= padding: 0px 40px 0px 40px; font-family: Helvetica, arial, sans-serif; font-size: 20px; text-transform: uppercase; font-weight: bold; color: #6f574e; >Responsive Template</td> <td height= 20 ></td> <td align= center style= padding: 0px 40px 0px 40px; font-size: 16px; font-family: Helvetica, arial, sansserif; text-align: center; line-height: 25px; color: #9f7b6d >Aliquam erat volutpat pellentesque eleifend nunc eget diam convallis aliquam vitae vitae suspendisse tempus sed molestie enim lacus quis </td> <td height= 20 ></td> <td align= center > <a href= # style= text-decoration: none; display: inline-block; padding: 13px 50px 13px 50px; fontsize: 20px; font-family: Helvetica, arial, sans-serif; line-height: 20px; border: none; background-color: #f76552; color: #ffffff; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; > Button </a> </td> <td height= 40 ></td> </table> <!-- ======= End Main Content ======= -->
11 11 Responsive Template Aliquam erat volutpat pellentesque eleifend nunc eget diam convallis aliquam vitae vitae suspendisse tempus sed molestie enim lacus quis Button 5-2 COLUMNS SECTION To build this section, we re going to build two columns side by side, that when in mobile devices will become stacked columns without needing media queries. Each one will have an image, title and text. Start by placing two 50% wide tables inside a 100% wide table. For this technic to work on some clients, you ll need to had some fixes to the <td> of your wrapper table and had some conditional code that you can see here:
12 12 Set each table width to 300px on inline style. Add also inline-block to allow the columns to become stacked depending on the browsers window width. <!-- ======= End Main Content ======= --> <!-- ======= 2 Columns Section ======= --> <table width= 100% align= center border= 0 cellspacing= 0 cellpadding= 0 valign= top bgcolor= #f0ecec style= max-width: 600px; > <td align= center style= text-align: center; vertical-align: top; font-size: 0; > <table align= center width= 50% border= 0 cellspacing= 0 cellpadding= 0 valign= top style= width: 300px; display: inline-block; > <td></td> </table> <table align= center width= 50% border= 0 cellspacing= 0 cellpadding= 0 valign= top style= width: 300px; display: inline-block; > <td></td> </table> </td> </table> <!-- ======= End 2 Columns Section ======= -->
13 13 Inside each 50% wide table, place some rows to allocate your content: <table align= center width= 50% border= 0 cellspacing= 0 cellpadding= 0 valign= top style= width: 300px; display: inline-block; > <td height= 40 ></td> <td align= center ><img src= alt= alt text height= auto width= 230 border= 0 align= center style= font-family: Helvetica, arial, sans-serif; font-size: 30px; color: #6f574e; display: block; ></td> <td height= 20 ></td> <td align= center color= #9f7b6d style= padding: 0px 40px 0px 40px; font-size: 20px; font-family: Helvetica, arial, sans-serif; text-align: center; font-weight: bold; color: #9f7b6d; > Your Title</ td> <td align= center color= #9f7b6d style= padding: 0px 40px 0px 40px; font-size: 16px; font-family: Helvetica, arial, sans-serif; text-align: center; line-height: 25px; color: #6f574e; > Aliquam erat volutpat pellentesque eleifend nunc eget diam. </td> <td height= 30 ></td> </table>
14 14 Responsive Template Aliquam erat volutpat pellentesque eleifend nunc eget diam convallis aliquam vitae vitae suspendisse tempus sed molestie enim lacus quis Button Your Title Aliquam erat volutpat pellentesque eleifend nunc eget diam. Your Title Aliquam erat volutpat pellentesque eleifend nunc eget diam.
15 FOOTER Footer follows the same structure as shown before. Just Place a new table 100% wide, set it s max-width and place your content inside. <!-- ======= 2 Columns Section ======= --> <!-- ======= Footer ======= --> <table width= 100% align= center border= 0 cellspacing= 0 cellpadding= 0 valign= top bgcolor= #f76552 style= max-width: 600px; > <td height= 20 ></td> <td align= center > <!-- Button --> <a href= # style= background-color:#c63623; color:#ff9a8d; text-decoration: none; font-weight: bold; padding: 12px 10px 10px 10px; font-size: 12px; font-family: Helvetica, arial, sans-serif; text-transform: uppercase; border-radius: 3px; >Facebook</a> <a href= # style= background-color:#c63623; color:#ff9a8d; text-decoration: none; font-weight: bold; padding: 12px 10px 10px 10px; font-size: 12px; font-family: Helvetica, arial, sans-serif; text-transform: uppercase; border-radius: 3px; >Twitter</a> <a href= # style= background-color:#c63623; color:#ff9a8d; text-decoration: none; font-weight: bold; padding: 12px 10px 10px 10px; font-size: 12px; font-family: Helvetica, arial, sans-serif; text-transform: uppercase; border-radius: 3px; >LinkedIn</a> </td> <td height= 20 ></td> </table> <!-- ======= End Footer ======= -->
16 16 Responsive Template Aliquam erat volutpat pellentesque eleifend nunc eget diam convallis aliquam vitae vitae suspendisse tempus sed molestie enim lacus quis Button Your Title Aliquam erat volutpat pellentesque eleifend nunc eget diam. Your Title Aliquam erat volutpat pellentesque eleifend nunc eget diam. FACEBOOK TWITTER LINKEDIN
17 MAKE IT RESPONSIVE The first step towards making your responsive is to include the viewport meta tag on your <head>. This will tell the browser to set the viewable area to the width of the device s screen. So if the screen s width is 480px, the browser window will be 480px, rather than showing your content zoomed out to fit the screen. <head> <meta charset= utf-8 > <meta name= viewport content= width=device-width > </head> Now we can continue by adding our media queries witch is a component of CSS. Place it on the <style> tag next to the CSS Resets (step 2). Media queries will detect the screen size of the device where the is being opened and then turn on different set of rules based on that screen size. There is no specific rule to determin breaking points. It depends on your individual design. Just start developing for small screen size and as you resize your browser window, to make it bigger, see when your layout starts to look weird or unstructured. Regardless of the resolution this is where you should create your first breakpoint. </body> <style type= text/css > /*MOBILE STYLES screen and (max-width: 600px) {.class {style rules} } </style> </html>
18 18 Let s start to optimize our button to mobile devices. We need to make it wider so it becomes easier to tap. Add a class to your button and then place it on your media querie so you can make the nedded alterations. <td align= center ><a class= mobile-button href= # style= text-decoration: none; display: inlineblock; padding: 13px 50px 13px 50px; font-size: 20px; font-family: Helvetica, arial, sans-serif; line-height: 20px; border:none; background-color: #f76552; color: #ffffff; > Button </a> screen and (max-width: 600px) { a[class= mobile-button ] { width: 60%!important; display: block!important; } } Responsive Template Responsive Template Aliquam erat volutpat pellentesque eleifend nunc eget diam convallis aliquam vitae vitae suspendisse tempus sed molestie enim lacus quis Aliquam erat volutpat pellentesque eleifend nunc eget diam convallis aliquam vitae vitae suspendisse tempus sed molestie enim lacus quis Button Button
19 19 Now let s make some alterations on our main-section. Let s hide the images in mobile with display:none so that users don t have to scrool too much. Also let s make the text more proiminent by inscreasing the font-size and change it s color. Don t forget to add classes to the respective elements. <td align= center class= mobile-hide ><img src= alt= alt text height= auto width= 230 border= 0 align= center style= font-family: Helvetica, arial, sans-serif; fontsize: 30px; color: #6f574e; display: block; ></td> <td height= 20 ></td> <td align= center class= mobile-text color= #9f7b6d style= padding: 0px 40px 0px 40px; font-size: 20px; font-family: Helvetica, arial, sans-serif; text-align: center; font-weight: bold; color: #9f7b6d; > Your screen and (max-width: 600px) { a[class= mobile-button ] { width: 60%!important; display: block!important; } td[class= mobile-hide ] { display: none!important; } td[class= mobile-text ] { font-size: 25px!important; text-transform: uppercase!important; color: #f76552!important; } }
20 20 YOUR TITLE Aliquam erat volutpat pellentesque eleifend nunc eget diam. Your Title Aliquam erat volutpat pellentesque eleifend nunc eget diam. YOUR TITLE Aliquam erat volutpat pellentesque eleifend nunc eget diam. FACEBOOK TWITTER LINKEDIN Your Title Aliquam erat volutpat pellentesque eleifend nunc eget diam.
21 TESTING When your over with coding your campaign, always test how your renders in different clients and browsers. For example, Outlook and Gmail renders your HTML and CSS differently. This will help you to look for bugs and main alterations you didn t plan. There are some platforms that helps you with this process. For example, Litmus let s you preview your campaign across 30+ clients and devices with screenshots. LITMUS TESTINGS DESKTOP CLIENTS Apple mail 7 Outlook 2011
22 22 MOBILE CLIENTS iphone 6 Plus Gmail App (Android) Windows Phone 8 ipad Mini
23 23 WEB-BASED CLIENTS Outlook.com (Explorer) Gmail (Firefox)
24 GET IN TOUCH AND FIND OUT HOW YOU CAN POWER-UP YOUR MARKETING PORTUGAL Rua Alfredo Allen, nº 455/461, Porto. Portugal P: FRANCE 60, boulevard du Maréchal Joffre, Bourg-la-Reine. France P: ITALY P.le Cadorna 10, Milano. Italy P:
GUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
Table of Contents Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Desktop PC and Apple Mac email applications... 4 Web and mobile device email readers... 5 Creating your
Making Responsive Emails
Making Responsive Emails Who Am I? Justine Jordan Wearer of Many Hats, Litmus @meladorri @litmusapp #CSSsummit litmus.com/lp/csssummit Sample HTML, slides, templates, frameworks, and other goodies. Disclaimer:
Email Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
How to Properly Compose E-Mail HTML Code : 1
How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Email Creator Coding Guidelines Toolbox
Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR
RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR RESPONSIVE EMAIL DESIGN According to stats from Litmus, in 2014 at least 53% of emails were opened on a mobile device. That is a huge increase from 2011 when the
The Da Vinci Coding: The Art of HTML
The Da Vinci Coding: The Art of HTML The Da Vinci Coding: The Art of HTML Design Author Graham Gnall LiveIntent Senior Platform Solutions Manager Contributing Editor Nick Dujnic Editors Julia Rieger Dave
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative
Level 1 - Clients and Markup
Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML
RESPONSIVE EMAIL DESIGN & DEVELOPMENT THE WHAT, WHY & HOW
RESPONSIVE EMAIL DESIGN & DEVELOPMENT THE WHAT, WHY & HOW December 2014 SUSANNA OLIVER Web Developer Denver Fargo Minneapolis 701.235.5525 888.9.sundog FAX: 701.235.8941 www.sundoginteractive.com Overview
Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7
Version 4.0.1 Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7 HOW THE SYSTEM WORKS... 7 THE TWO MAIN HTML EMAIL DESIGN OPTIONS FOR NEWZAPP...
Responsive Email Design
Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013 Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive
BlueHornet Whitepaper
BlueHornet Whitepaper Best Practices for HTML Email Rendering BlueHornet.com Page Page 1 1 2007 Inc. A wholly owned subsidiary of Digital River, Inc. (619) 295-1856 2150 W. Washington Street #110 San Diego,
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
Mobile Optimise your Emails. Code & examples to make your email campaigns mobile friendly
Mobile Optimise your Emails Code & examples to make your email campaigns mobile friendly Email Marketing Guide June 2013 CONTENTS Introduction...01 The Growing Importance of Mobile...02 Key Mobile Devices...03
Rhetorik Email campaign - Guidelines
Rhetorik Email campaign - Guidelines 18/06/2013 Version: 1.1 Table of contents 1. INTRODUCTION... 2 2. THE PROCESS... 2 3. WHAT WE NEED TO SET UP THE EMAIL BROADCAST... 2 3.1 Email campaign set up brief...
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
HTML Fails: What No One Tells You About Email HTML
HTML Fails: What No One Tells You About Email HTML 2 Today s Webinar Presenter Kate McDonough Campaign Manager at PostUp Worked with various ESPs: Constant Contact, Campaign Monitor, ExactTarget, Distribion
How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012
How to craft a modern, mobile-optimized HTML email template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 Our old email template Pros Simple Lightweight Worked as plain-text Rendered OK
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
How To Design An Email In Html (Html) And Html (Mailbox) Safely
24 WAYS to impress your friends At some stage in your career, it s likely you ll be asked by a client to design a HTML email. Before you rush to explain that all the cool kids are using social media, keep
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
Advanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
CSS for Page Layout. Key Concepts
CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
RESPONSIVE DESIGN FOR MOBILE RENDERING
WHITEPAPER RESPONSIVE DESIGN FOR MOBILE RENDERING DELIVER MOBILE-SPECIFIC CONTENT USING MEDIA QUERIES EXECUTIVE SUMMARY With the widespread adoption of smartphones and tablets, proper email rendering in
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
Full report on all 24 clients
1 of 6 3/15/2011 11:05 AM Campaign Monitor - Home Features Pricing Customers Resources Support Our Story Blog Sign Up Login Create an Account Tips & Resources Designing and building emails Designing an
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
Coding HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
RESPONSIVE EMAIL DESIGN
RESPONSIVE EMAIL DESIGN SELLIGENT The contents of this manual cover material copyrighted by Selligent. This manual cannot be reproduced, in part or in whole, or distributed or transferred by means electronic
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
Creative Guidelines for Emails
Version 2.1 Contents 1 Introduction... 3 1.1 Document Aim and Target Audience... 3 1.2 WYSIWYG editors... 3 1.3 Outlook Overview... 3 2 Quick Reference... 4 3 CSS and Styling... 5 3.1 Positioning... 5
CSS SUPPORT IN EMAIL THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIXEMAIL
CSS SUPPORT IN EMAIL THE PROBLEM WE SHOULD BE FIXING FIRST #LETSFIXEMAIL Standards are not usually standard 2 Standards are not usually standard 3 it can be funny. but not always. 4 on our panel ROS HODGEKISS
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
The Birth of Responsive Email Templates
The Birth of Responsive Email Templates The Birth of Responsive Email Templates The adoption of mobility solution at the enterprise level is simply becoming more relentless in order to engage more and
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
Eloqua Email 101. What is this and why should I read it?
DR Who? Definitive Results is a boutique marketing consulting firm based out of Leesburg, Virginia that specializes in helping Marketers accelerate their efforts using the technologies available to them
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
With mobile devices and tablets becoming popular for browsing the web, an increasing number of websites are turning to responsive designs to
With mobile devices and tablets becoming popular for browsing the web, an increasing number of websites are turning to responsive designs to seamlessly adapt to any screen resolution. Introduction... 2
Introduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
In this chapter, you will learn how to...
LEARNING OUTCOMES In this chapter, you will learn how to... Create a table on a web page Apply attributes to format tables, table rows, and table cells Increase the accessibility of a table Style an HTML
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
Magento Responsive Theme Design
Magento Responsive Theme Design Richard Carter Chapter No. 2 "Making Your Store Responsive" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
Create Your own Company s Design Theme
Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to
What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure
CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?
Mobile Portal Optimization
IBM Mobile Portal Accelerator Mobile Portal Optimization Approach & Techniques Version 0.3 KRISHNA C KUMAR, PRINCIPAL SOFTWARE ENGINEER, IBM MPA DEVELOPMENT/L3 SUPPORT, INDIA SOFTWARE LABS, BANGALORE HIGH
Responsive Web Design: Media Types/Media Queries/Fluid Images
HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
Creating Effective HTML Email Campaigns
Creating Effective HTML Email Campaigns This event is being recorded. You will receive a copy of the audio/video at the end of the presentation. 701 South Broad Street, Lititz, PA 17543 www.listrak.com
Responsive HTML email and Drupal
Responsive HTML email and Drupal Mobile + Email + Drupal Drew Gorton Drew Gorton Founder gortonstudios.com Responsive HTML email Why? ~19% of email messages are read on smartphones or tablets. Source:
Building Responsive Layouts
Building Responsive Layouts by Zoe Mickley Gillenwater @zomigi August 28, 2012 Responsive Web Design Summit What I do Books Stunning CSS3: A Project-based Guide to the Latest in CSS www.stunningcss3.com
Setting Up Your Website Using C# and C9
Setting Up Our Work Environments Setting Up Our Work Environments Create and account at GitHub github.com Setting Up Our Work Environments Sign into Cloud9 with your GitHub Account c9.io Setting Up Our
New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts
A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables
Mobile Web Site Style Guide
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
1 of 8 9/14/2011 5:40 PM
file:///z:/sites/gemini/public_html/westbendmarketingfirm.htm 1 of 8 9/14/2011 5:40 PM
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Emailmovers Limited, Pindar House, Thornburgh Road Scarborough, North Yorkshire, YO11 3UY Tel: 0845 226 7181 Fax: 0845 226 7183 Email: enquiries@emailmovers.com
ICE: HTML, CSS, and Validation
ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it
Looking Good! Troubleshooting Email Display Problems
E-mail Direct Mail Digital Marketing Sales Tools Funding Data Creative Services Looking Good! Troubleshooting Email Display Problems November 19, 2014 Today s Speaker Geoff Phillips Senior Editor & Email
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
Chapter 1: Outlook Isn t Going Anywhere... 2. Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3
Table of Contents Chapter 1: Outlook Isn t Going Anywhere... 2 Chapter 2: 17 Must-Know Tricks for Outlook 2007, 2010 & 2013... 3 Chapter 3: 3 Way to Remove Unwanted Gaps Between Tables... 12 Chapter 4:
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
Advanced Editor User s Guide
Advanced Editor User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
You can use percentages for both page elements and text. Ems are used for text,
By Megan Doutt Speaking broadly, responsive web design is about starting from a reference resolution, and using media queries to adapt it to other contexts. - Ethan Marcotte (creator of the term Responsive
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
mpdf Example 37. Barcodes Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
Principles of Web Design 6 th Edition. Chapter 12 Responsive Web Design
Principles of Web Design 6 th Edition Chapter 12 Responsive Web Design Objectives Recognize the need for responsive web design Use media queries to apply conditional styles Build a basic media query Create
Website Planning Checklist
Website Planning Checklist The following checklist will help clarify your needs and goals when creating a website you ll be surprised at how many decisions must be made before any production begins! Even
Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1
Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection
Table of Contents Desktop PC and Apple Mac email applications Web and mobile device email readers Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Quick look-up overview... 4 Desktop PC and Apple Mac email applications... 5 Outlook 2007-2016... 6 Content
Code View User s Guide
Code View User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
WHITEPAPER. Skinning Guide. Let s chat. 800.9.Velaro www.velaro.com info@velaro.com. 2012 by Velaro
WHITEPAPER Skinning Guide Let s chat. 2012 by Velaro 800.9.Velaro www.velaro.com info@velaro.com INTRODUCTION Throughout the course of a chat conversation, there are a number of different web pages that
HTML Tables. IT 3203 Introduction to Web Development
IT 3203 Introduction to Web Development Tables and Forms September 3 HTML Tables Tables are your friend: Data in rows and columns Positioning of information (But you should use style sheets for this) Slicing
Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Website Login Integration
SSO Widget Website Login Integration October 2015 Table of Contents Introduction... 3 Getting Started... 5 Creating your Login Form... 5 Full code for the example (including CSS and JavaScript):... 7 2
Viewports. Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk jquery EU, 28 February 2014
Viewports Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk jquery EU, 28 February 2014 or: Why responsive design works Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk jquery EU,
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
RESPONSIVE EMAIL DESIGN OUR GUIDE TO HELPING YOU GET STARTED
RESPONSIVE EMAIL DESIGN OUR GUIDE TO HELPING YOU GET STARTED CONTENTS What Is Responsive Design? 4 What About Email? 5 So What Are The Pros And Cons? 6 How Can I Build A Responsive Template? 7 Designing
EVENT PLANNING MYTHBUSTER. Building Pre-event Engagement: How to Make an Email Invite
EVENT PLANNING MYTHBUSTER Building Pre-event Engagement: How to Make an Email Invite YOUR STEP BY STEP GUIDE In reality, most events begin months before the doors open on the first day. The internet is
Web layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
A quick guide to... Effective HTML Messages
A quick guide to... Effective HTML Messages In this guide... Learn easy and effective ways to engage your subscribers, increase your click-through ratio (CTR), and get better results from your email marketing.
Atable is an orderly arrangement of data distributed across a grid of rows and
7 Tables and Layout Atable is an orderly arrangement of data distributed across a grid of rows and columns similar to a spreadsheet. In printed documents, tables commonly serve a subordinate function,
DESIGNING MOBILE FRIENDLY EMAILS
DESIGNING MOBILE FRIENDLY EMAILS MAKING MOBILE EMAILERS SELECT PLAN CONTEXT CONTENT DESIGN DELIVERY Before you go mobile For optimal usage PICTURES OF DESKTOP VS MOBILE SAME SAME BUT DIFFERENT EMAIL CLIENTS
AEGEE Podio Guidelines
AEGEE Podio Guidelines EUROPEAN STUDENTS FORUM Contains What is Podio?... 3 Podio vs Facebook... 3 Video Tutorial Podio Basics... 3 Podio for AEGEE-Europe... 3 How to get it?... 3 Getting started... 4
Caldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
TEMPLATE GUIDELINES OCTOBER 2013
TEMPLATE GUIDELINES OCTOBER 2013 CONTENTS Introduction... 4 Creative... 5 Template Dimensions & Image Headers... 5 Preview Pane & Positioning... 5 Graphics... 6 Optimization and File Size... 6 Background
How to Display Weather Data on a Web Page
Columbia Weather Systems Weather MicroServer Tutorial How to Displaying your weather station s data on the Internet is a great way to disseminate it whether for general public information or to make it
How to Create a Mobile Responsive Template in ExactTarget
How to Create a Mobile Responsive Template in ExactTarget This manual contains the following: Section 1: How to create a new mobile responsive template for a Business Unit/Artist Section 2: How to adjust
The. Design Toolkit. Design tips, code, and data for better email design
The Design Toolkit Design tips, code, and data for better email design Welcome, designers! Whether you re a tech-savvy coder, an engagement-focused marketer, or have a background in illustration and design,