Monday, June 23, 2008
Tuesday, February 19, 2008
Wednesday, February 6, 2008
email blast test site
http://www.campaignmonitor.com/testing/
Shows your email blast in many different email clients.
Great tool.
Shows your email blast in many different email clients.
Great tool.
styles_print.css
/*
Table of Contents:
Typography
Navigation
Forms
Layout
*/
/* TYPOGRAPHY
------------------------------------------------------------ */
/* NOTE: Typography for form elements is in the FORMS section */
h1 {
margin:0;
font-style: italic;
color: #009900;
font-size: 2em;
}
h2 {
font-size: 1.25em;
}
#content p {
font-size: .75em;
}
#content ul li {
font-size: .75em;
margin:0 0 10px 0;
}
#content ul li ul li {
font-size: 1em;
margin:0 0 10px 0;
}
#content ol li {
font-size: .75em;
margin:0 0 10px 0;
}
#content ol li ol li {
font-size: 1em;
margin:0 0 10px 0;
}
#content ol li ul li {
font-size: 1em;
margin:0 0 10px 0;
}
.itineraryHeader {
width:100%;
color:#FFFFFF;
background:#779CAE;
margin:10px 0 5px 0;
padding:4px;
font-weight:bold;
font-size:1em;
display:block;
}
#navigation p {
color:#fff;
text-align:center;
font-weight:bold;
font-size: .75em;
margin:0 0 25px 0;
}
/* NAVIGATION
------------------------------------------------------------ */
#navigation ul {
margin:0;
padding:0 0 0 15px;
list-style:none;
}
#navigation ul li {
text-transform:uppercase;
line-height:15pt;
margin:13px 0 13px 0;
}
#navigation ul li a {
color:#000000;
font-size:15pt;
font-weight:bold;
}
#navigation ul li a:link {color:#000000; text-decoration:none;}
#navigation ul li a:visited {color:#000000; text-decoration:none;}
#navigation ul li a:hover {color:#E7AD65; text-decoration:underline;}
#navigation ul li a:active {color:#000000; text-decoration:none;}
.additionalInfo {
background:#F3C160;
border:#000 2px dashed;
margin:50px 15px 15px 15px;
padding:4px;
text-align:center;
font-size:.75em;
}
/* FORMS
------------------------------------------------------------ */
form {
padding:0;
margin:0;
}
form p {
position:relative;
}
.feedback {
position:absolute;
margin-left:10em;
left:235px;
top:0;
right:0;
font-size:12pt;
color:#FF0000;
}
.feedbackHidden {
display:none;
}
* html .feedback {
/* Settings for IE 6 and below only */
width:15em;
margin-left:0;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size:12pt;
}
input:focus {
background-color: #FFFFCC;
}
label {
float:left;
width:10em;
font-weight:bold;
}
.formButton {
background: #D48F6B;
border: 2px solid #000000;
font-size:12pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000000;
padding: 3px;
margin: 2px;
}
.formButton:focus {
color: #FFFFCC;
background-color: #D48F6B;
}
/* LAYOUT
------------------------------------------------------------ */
body {
background-color: #C9CDD3;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
}
#site-wrapper {
width:739px;
margin: 0 auto;
text-align: left;
}
#header-container {
display:none;
}
#content-container {
display:inline;
width:739px;
clear:both;
background:#FFFFFF url(../images/right_bg.gif) top right repeat-y;
}
#navigation {
display:none;
}
#content {
width:600px;
padding:5px;
float:none;
}
#footer-container {
display:none;
}
Table of Contents:
Typography
Navigation
Forms
Layout
*/
/* TYPOGRAPHY
------------------------------------------------------------ */
/* NOTE: Typography for form elements is in the FORMS section */
h1 {
margin:0;
font-style: italic;
color: #009900;
font-size: 2em;
}
h2 {
font-size: 1.25em;
}
#content p {
font-size: .75em;
}
#content ul li {
font-size: .75em;
margin:0 0 10px 0;
}
#content ul li ul li {
font-size: 1em;
margin:0 0 10px 0;
}
#content ol li {
font-size: .75em;
margin:0 0 10px 0;
}
#content ol li ol li {
font-size: 1em;
margin:0 0 10px 0;
}
#content ol li ul li {
font-size: 1em;
margin:0 0 10px 0;
}
.itineraryHeader {
width:100%;
color:#FFFFFF;
background:#779CAE;
margin:10px 0 5px 0;
padding:4px;
font-weight:bold;
font-size:1em;
display:block;
}
#navigation p {
color:#fff;
text-align:center;
font-weight:bold;
font-size: .75em;
margin:0 0 25px 0;
}
/* NAVIGATION
------------------------------------------------------------ */
#navigation ul {
margin:0;
padding:0 0 0 15px;
list-style:none;
}
#navigation ul li {
text-transform:uppercase;
line-height:15pt;
margin:13px 0 13px 0;
}
#navigation ul li a {
color:#000000;
font-size:15pt;
font-weight:bold;
}
#navigation ul li a:link {color:#000000; text-decoration:none;}
#navigation ul li a:visited {color:#000000; text-decoration:none;}
#navigation ul li a:hover {color:#E7AD65; text-decoration:underline;}
#navigation ul li a:active {color:#000000; text-decoration:none;}
.additionalInfo {
background:#F3C160;
border:#000 2px dashed;
margin:50px 15px 15px 15px;
padding:4px;
text-align:center;
font-size:.75em;
}
/* FORMS
------------------------------------------------------------ */
form {
padding:0;
margin:0;
}
form p {
position:relative;
}
.feedback {
position:absolute;
margin-left:10em;
left:235px;
top:0;
right:0;
font-size:12pt;
color:#FF0000;
}
.feedbackHidden {
display:none;
}
* html .feedback {
/* Settings for IE 6 and below only */
width:15em;
margin-left:0;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size:12pt;
}
input:focus {
background-color: #FFFFCC;
}
label {
float:left;
width:10em;
font-weight:bold;
}
.formButton {
background: #D48F6B;
border: 2px solid #000000;
font-size:12pt;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000000;
padding: 3px;
margin: 2px;
}
.formButton:focus {
color: #FFFFCC;
background-color: #D48F6B;
}
/* LAYOUT
------------------------------------------------------------ */
body {
background-color: #C9CDD3;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
}
#site-wrapper {
width:739px;
margin: 0 auto;
text-align: left;
}
#header-container {
display:none;
}
#content-container {
display:inline;
width:739px;
clear:both;
background:#FFFFFF url(../images/right_bg.gif) top right repeat-y;
}
#navigation {
display:none;
}
#content {
width:600px;
padding:5px;
float:none;
}
#footer-container {
display:none;
}
styles_screen.css
/*
Table of Contents:
Typography
Navigation
Forms
Layout
*/
/* TYPOGRAPHY
------------------------------------------------------------ */
/* NOTE: Typography for form elements is in the FORMS section */
/*Pratt East Home */
h1 {
margin:10px;
font-style: bold;
color: #1c587a;
font-size: 2em;
}
h2 {
margin:0;
color: #537f0c;
font-size: 1.25em;
}
h3 {
font-size: 1.25em;
color: #537f0c;
font-style: bold;
}
h4 {
font-size: 0.95em;
color: #000000;
}
b{
font-size:1.0em;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-weight:bold;
}
b2{
font-size:0.75em;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-weight:bold;
font-style:italic;
}
#content p {
font-size: 0.75em;
}
#content pp {
font-size: 0.75em;
background-color: #FFFF33;
}
#content ul li {
font-size: .75em;
margin:0 0 10px 0;
}
#content ul li ul li {
font-size: 1em;
margin:0 0 10px 0;
}
#content ol li {
font-size: .75em;
margin:0 0 10px 0;
}
#content ol li ol li {
font-size: 1em;
margin:0 0 10px 0;
}
#content ol li ul li {
font-size: 1em;
margin:0 0 10px 0;
}
.itineraryHeader {
width:95%;
color:#FFFFFF;
background-color:#537f0c;
margin:10px 0 5px 0;
padding:4px;
font-weight:bold;
font-size:1em;
display:block;
}
#navigation p {
color:#fff;
text-align:center;
font-weight:bold;
font-size: .75em;
margin:0 0 25px 0;
}
/* NAVIGATION
------------------------------------------------------------ */
#navigation ul {
margin:0;
padding:0 0 0 15px;
list-style:none;
}
#navigation ul li {
text-transform:uppercase;
line-height:.78em;
margin:13px 0 13px 0;
}
#navigation ul li a {
color:#fff;
font-size:.78em;
font-weight:bold;
}
#navigation ul li a:link {color:#fff; text-decoration:none;}
#navigation ul li a:visited {color:#fff; text-decoration:none;}
#navigation ul li a:hover {color:#fff; text-decoration:none;}
#navigation ul li a:active {color:#fff; text-decoration:none;}
#navigation p a:link {color:#fff; text-decoration:none;}
#navigation p a:visited {color:#537f0c; text-decoration:none;}
#navigation p a:hover {color:#fff; text-decoration:none;}
#navigation p a:active {color:#537f0c; text-decoration:none;}
.additionalInfo {
color:#537f0c;
background:#ced8c2;
border:#fff 2px dashed;
margin:50px 12px 25px 12px;
padding:4px;
text-align:center;
font-size:.75em;
font-weight:bold;
}
#content a:link {color:#537f0c; text-decoration:underline;}
#content a:visited {color:#537f0c; text-decoration:underline;}
#content a:hover {color:#fff; text-decoration:none; background:#537f0c;}
#content a:active {color:#fff; text-decoration:none; background:#537f0c;}
/* FORMS
------------------------------------------------------------ */
form {
padding:0;
margin:0;
}
form p {
position:relative;
}
.feedback {
position:absolute;
margin-left:10em;
left:235px;
top:0;
right:0;
font-size:.75em;
color:#FF0000;
}
* html .feedback {
/* Settings for IE 6 and below only */
width:15em;
margin-left:0;
}
.feedbackHidden {
display:none;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
}
input:focus {
background-color: #FFFFCC;
}
label {
float:left;
width:10em;
font-weight:bold;
}
.formButton {
background: #537f0c;
border: 2px solid #AEB3A4;
font-size:.75em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
padding: 3px;
margin: 2px;
}
.formButton:focus {
color: #fff;
background-color: #ff9900;
}
/* LAYOUT
------------------------------------------------------------ */
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size: 1em;
}
#site-wrapper {
width:738px;
margin: 0 auto;
text-align: left;
}
#header-container {
width:738px;
height:201px;
clear:both;
background: url(../images/header.jpg) top left no-repeat;
}
#content-container {
display:table;
width:738px;
clear:both;
background:#ced8c2 url(../images/nav-bg.gif) top left repeat-y;
}
#navigation {
margin:0;
padding:0;
width:138px;
background: url(../images/nav-bg.gif) top left repeat-y;
/*background-color: #FFF200 top left repeat-y; */
float:left;
}
#content {
padding:0 86px 0 15px;
width:490px;
float:right;
background: url(../images/body_bg.gif) top left repeat-y;
background-color: #ced8c2;
background-position:0px 0px;
}
.itemImage {
float:right;
margin:0 0 15px 15px;
border: #000 1px solid;
}
.itemImage-left {
float:left;
margin:0px 15px 0px 0px;
border: #000 1px solid;
}
#footer-container {
width:738px;
height:50px;
clear:both;
background: url(../images/footer.gif) top left no-repeat;
}
Table of Contents:
Typography
Navigation
Forms
Layout
*/
/* TYPOGRAPHY
------------------------------------------------------------ */
/* NOTE: Typography for form elements is in the FORMS section */
/*Pratt East Home */
h1 {
margin:10px;
font-style: bold;
color: #1c587a;
font-size: 2em;
}
h2 {
margin:0;
color: #537f0c;
font-size: 1.25em;
}
h3 {
font-size: 1.25em;
color: #537f0c;
font-style: bold;
}
h4 {
font-size: 0.95em;
color: #000000;
}
b{
font-size:1.0em;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-weight:bold;
}
b2{
font-size:0.75em;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-weight:bold;
font-style:italic;
}
#content p {
font-size: 0.75em;
}
#content pp {
font-size: 0.75em;
background-color: #FFFF33;
}
#content ul li {
font-size: .75em;
margin:0 0 10px 0;
}
#content ul li ul li {
font-size: 1em;
margin:0 0 10px 0;
}
#content ol li {
font-size: .75em;
margin:0 0 10px 0;
}
#content ol li ol li {
font-size: 1em;
margin:0 0 10px 0;
}
#content ol li ul li {
font-size: 1em;
margin:0 0 10px 0;
}
.itineraryHeader {
width:95%;
color:#FFFFFF;
background-color:#537f0c;
margin:10px 0 5px 0;
padding:4px;
font-weight:bold;
font-size:1em;
display:block;
}
#navigation p {
color:#fff;
text-align:center;
font-weight:bold;
font-size: .75em;
margin:0 0 25px 0;
}
/* NAVIGATION
------------------------------------------------------------ */
#navigation ul {
margin:0;
padding:0 0 0 15px;
list-style:none;
}
#navigation ul li {
text-transform:uppercase;
line-height:.78em;
margin:13px 0 13px 0;
}
#navigation ul li a {
color:#fff;
font-size:.78em;
font-weight:bold;
}
#navigation ul li a:link {color:#fff; text-decoration:none;}
#navigation ul li a:visited {color:#fff; text-decoration:none;}
#navigation ul li a:hover {color:#fff; text-decoration:none;}
#navigation ul li a:active {color:#fff; text-decoration:none;}
#navigation p a:link {color:#fff; text-decoration:none;}
#navigation p a:visited {color:#537f0c; text-decoration:none;}
#navigation p a:hover {color:#fff; text-decoration:none;}
#navigation p a:active {color:#537f0c; text-decoration:none;}
.additionalInfo {
color:#537f0c;
background:#ced8c2;
border:#fff 2px dashed;
margin:50px 12px 25px 12px;
padding:4px;
text-align:center;
font-size:.75em;
font-weight:bold;
}
#content a:link {color:#537f0c; text-decoration:underline;}
#content a:visited {color:#537f0c; text-decoration:underline;}
#content a:hover {color:#fff; text-decoration:none; background:#537f0c;}
#content a:active {color:#fff; text-decoration:none; background:#537f0c;}
/* FORMS
------------------------------------------------------------ */
form {
padding:0;
margin:0;
}
form p {
position:relative;
}
.feedback {
position:absolute;
margin-left:10em;
left:235px;
top:0;
right:0;
font-size:.75em;
color:#FF0000;
}
* html .feedback {
/* Settings for IE 6 and below only */
width:15em;
margin-left:0;
}
.feedbackHidden {
display:none;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
}
input:focus {
background-color: #FFFFCC;
}
label {
float:left;
width:10em;
font-weight:bold;
}
.formButton {
background: #537f0c;
border: 2px solid #AEB3A4;
font-size:.75em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
padding: 3px;
margin: 2px;
}
.formButton:focus {
color: #fff;
background-color: #ff9900;
}
/* LAYOUT
------------------------------------------------------------ */
body {
background-color: #e8e8e8;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size: 1em;
}
#site-wrapper {
width:738px;
margin: 0 auto;
text-align: left;
}
#header-container {
width:738px;
height:201px;
clear:both;
background: url(../images/header.jpg) top left no-repeat;
}
#content-container {
display:table;
width:738px;
clear:both;
background:#ced8c2 url(../images/nav-bg.gif) top left repeat-y;
}
#navigation {
margin:0;
padding:0;
width:138px;
background: url(../images/nav-bg.gif) top left repeat-y;
/*background-color: #FFF200 top left repeat-y; */
float:left;
}
#content {
padding:0 86px 0 15px;
width:490px;
float:right;
background: url(../images/body_bg.gif) top left repeat-y;
background-color: #ced8c2;
background-position:0px 0px;
}
.itemImage {
float:right;
margin:0 0 15px 15px;
border: #000 1px solid;
}
.itemImage-left {
float:left;
margin:0px 15px 0px 0px;
border: #000 1px solid;
}
#footer-container {
width:738px;
height:50px;
clear:both;
background: url(../images/footer.gif) top left no-repeat;
}
site design class - CSS - Guideline - Petra
Website Cut Guidelines
EMAILS
Travel Site Construction
Websites for the Travel department are typically standard fare, thus allowing designers and programmers to quickly implement a new site with fairly minimal changes. Before getting started it’s probably best to poke around an existing site and see how the graphics and layouts are currently cut and set up so that when you view the Photoshop template it will make a little more sense.
Website Construction
Websites are constructed using a CSS
based layout and presently renders well across the main browsers (IE6, IE7, Firefox). All files carry an ASP extension as SSI includes are used to include common elements such as navigation, headers, footers across all pages. Separate CSS files have been developed to make the sites automatically printer-friendly.
Typical New Website Process
Quick Overview
1. Make changes in Photoshop template
2. Send comp for approval
3. Copy an existing site into new folder on server (URL and new site folder generated by Sal)
4. Cut new gfx in Photoshop and save over existing files in the new site folder (see screenshot at end of document)
5. Make changes to CSS
6. Update page titles and page text
7. Hand-off to Travel dept for Contribute edits / programming
Details
1.) Photoshop Template
Located in this folder, the Photoshop template (siteDesign.psd) is broken down into 4 main sections: Header, Navigation, Body, Footer. Masks have been applied to each group to allow you to drop elements into each folder and maintain the site dimensions. If you turn guides on (Ctrl + :), you can see where the cut lines are for each section/graphic. When making a new site you primarily need to change colors and swap a few photos or logos out for updated versions.
2.) CSS
When updating the CSS file, it is broken down into various sections which are detailed at the top of the file. The layout section isn’t changed all that much, except when doing unique things like background images. Primarily, the Typography section will be where most of the changes are made.
NOTE: Travel sites that are sent out to be designed often follow a different standard. Sites that have previously had this done are VPMC trips and Sprees as well as a few others. In this case, it’s best to look at the previous versions and see how things like printable formats navigation (esp. when the nav is Flash based) were implemented.
3.) Weather Page
The weather pages use a system provided by Weather.com to display the forecast for a location. This bit of code should appear at the top of the weather.asp file, before the DOCTYPE declaration:
<%@LANGUAGE="VBSCRIPT"%>
And then we use this bit of code to implement the weather.xsl file:
<%
Dim mm_xsl: Set mm_xsl = new MM_XSLTransform
mm_xsl.setXML "http://xoap.weather.com/weather/local/MXQR0138?cc=*&dayf=6&par=1013457486&prod=xoap&key=cf8cb2834a5209c9"
mm_xsl.setXSL "weather.xsl"
Response.write mm_xsl.Transform()
%>
The first red portion in the above code is the part that needs to be changed depending on the travel location. This can be found by looking going to weather.com and looking up the city (in this case, Cancun, Mexico). Once you pull up the location’s weather page, look at the URL to determine the location code:
http://www.weather.com/outlook/travel/businesstraveler/local/MXQR0138?from=search_city
Adjusting the value of the variable (second red portion) ‘dayf’ in the above code (in this case, 6) determines the number of days of weather that will be shown on the page.
EMAILS
For each site, there are generally two email formats that are used: the congratulatory email and the general email. The general email is pretty much the same as the congratulatory email without the interior border. These emails are stored in the site’s respective folder in separate folder “emails”. Below, the cutting of the congratulatory email is detailed.
EMAILS
Travel Site Construction
Websites for the Travel department are typically standard fare, thus allowing designers and programmers to quickly implement a new site with fairly minimal changes. Before getting started it’s probably best to poke around an existing site and see how the graphics and layouts are currently cut and set up so that when you view the Photoshop template it will make a little more sense.
Website Construction
Websites are constructed using a CSS
based layout and presently renders well across the main browsers (IE6, IE7, Firefox). All files carry an ASP extension as SSI includes are used to include common elements such as navigation, headers, footers across all pages. Separate CSS files have been developed to make the sites automatically printer-friendly.
Typical New Website Process
Quick Overview
1. Make changes in Photoshop template
2. Send comp for approval
3. Copy an existing site into new folder on server (URL and new site folder generated by Sal)
4. Cut new gfx in Photoshop and save over existing files in the new site folder (see screenshot at end of document)
5. Make changes to CSS
6. Update page titles and page text
7. Hand-off to Travel dept for Contribute edits / programming
Details
1.) Photoshop Template
Located in this folder, the Photoshop template (siteDesign.psd) is broken down into 4 main sections: Header, Navigation, Body, Footer. Masks have been applied to each group to allow you to drop elements into each folder and maintain the site dimensions. If you turn guides on (Ctrl + :), you can see where the cut lines are for each section/graphic. When making a new site you primarily need to change colors and swap a few photos or logos out for updated versions.
2.) CSS
When updating the CSS file, it is broken down into various sections which are detailed at the top of the file. The layout section isn’t changed all that much, except when doing unique things like background images. Primarily, the Typography section will be where most of the changes are made.
NOTE: Travel sites that are sent out to be designed often follow a different standard. Sites that have previously had this done are VPMC trips and Sprees as well as a few others. In this case, it’s best to look at the previous versions and see how things like printable formats navigation (esp. when the nav is Flash based) were implemented.
3.) Weather Page
The weather pages use a system provided by Weather.com to display the forecast for a location. This bit of code should appear at the top of the weather.asp file, before the DOCTYPE declaration:
<%@LANGUAGE="VBSCRIPT"%>
And then we use this bit of code to implement the weather.xsl file:
<%
Dim mm_xsl: Set mm_xsl = new MM_XSLTransform
mm_xsl.setXML "http://xoap.weather.com/weather/local/MXQR0138?cc=*&dayf=6&par=1013457486&prod=xoap&key=cf8cb2834a5209c9"
mm_xsl.setXSL "weather.xsl"
Response.write mm_xsl.Transform()
%>
The first red portion in the above code is the part that needs to be changed depending on the travel location. This can be found by looking going to weather.com and looking up the city (in this case, Cancun, Mexico). Once you pull up the location’s weather page, look at the URL to determine the location code:
http://www.weather.com/outlook/travel/businesstraveler/local/MXQR0138?from=search_city
Adjusting the value of the variable (second red portion) ‘dayf’ in the above code (in this case, 6) determines the number of days of weather that will be shown on the page.
EMAILS
For each site, there are generally two email formats that are used: the congratulatory email and the general email. The general email is pretty much the same as the congratulatory email without the interior border. These emails are stored in the site’s respective folder in separate folder “emails”. Below, the cutting of the congratulatory email is detailed.
Subscribe to:
Posts (Atom)