Level 1 - Clients and Markup

Size: px
Start display at page:

Download "Level 1 - Clients and Markup"

Transcription

1 Level 1 - Clients and Markup

2 The design for the we ll build

3 In this level

4 The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources

5 An HTML base .html Front-end Foundations <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html Base</title> <meta name="viewport" content="width=device-width" /> </head> <body style="margin: 0; padding: 0;"> <!-- Content --> Journey Into Mobile </body> </html>

6 clients Web-based Client Native

7 HTML clients preprocess HTML In clients, HTML is altered by a preprocessor before they are rendered. Website HTML Determines how your HTML is displayed Rendering Engine Browser HTML Preprocessor Rendering Engine Client Changes your HTML

8 Preprocessors are your strongest opponents The preprocessor is intended to protect the client from harmful code. Power Moves Removes or changes HTML tags Removes or changes CSS Overrides styles with app CSS Changes the entire document structure Signature Move Removes all JavaScript

9 Gmail has the most aggressive preprocessor The popularity of Gmail dictates much of how HTML and CSS must be written. Power Moves Removes any <link> tags Overrides styles with app CSS Changes the entire document structure Signature Move Removes <style> tags

10 Adding content to an .html Base HTML content <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html Base</title> <meta name="viewport" content="width=device-width" /> </head> <body style="margin: 0; padding: 0;"> <img src=" </body> </html>

11 Images need to have absolute URLs .html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html Base</title> <meta name="viewport" content="width=device-width" /> </head> <body style="margin: 0; padding: 0;"> <img src=" </body> </html> Absolute URL For brevity in examples, we ll write like this: src= "stars.png"

12 Adding copy to an .html content <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html Base</title> <meta name="viewport" content="width=device-width" /> </head> <body style="margin: 0; padding: 0;"> <img src="stars.png"/> <h1>lucha Libre!</h1> <p>experience 3 Bone-Crushing Hours</p> </body> </html>

13 Code examples To focus on specific code, we ll use to represent additional code that isn t shown. .html Opening HTML <body style="margin: 0; padding: 0;"> <img src="stars.png"/> <h1>lucha Libre!</h1> <p>experience 3 Bone-Crushing Hours</p> </body> Closing HTML

14 Testing in a browser vs. an client The results will vary in clients with different preprocessors and rendering engines. .html Chrome rendering engine (Blink) <body style="margin: 0; padding: 0;"> <img src="stars.png"/> <h1>lucha Libre!</h1> <p>experience 3 Bone-Crushing Hours</p> Gmail s preprocessor Text styles are different

15 Inspecting elements with browser dev tools Right-click for developer tools

16 Inspecting our locally Default styles set by Chrome Our code

17 Our code in the Gmail web application Our code is way down here!

18 Our code after Gmail s preprocessor Styles from gmail.com inline body styles cached image H1 p

19 All your code are belong to clients Our inline styles are gone!

20 Writing CSS for s Without support for external stylesheets or <style> tags, inline styles must be used. CSS in a linked stylesheet CSS in a <style> tag Inline styles We ll use inline styles to create this header

21 Styling the image with inline styles .html <img src="stars.png" style=" background-color: #5b3885; display: block; max-width: 100%; padding: 12px 0;" width="600" /> <h1> <p> In Gmail, the image displays the styles Add a style attribute with CSS properties inline

22 Styling the H1 .html <h1 style=" color: #7fcce9; font-family: 'Arial Black'; font-size: 74px; line-height: 74px; margin: 0; text-transform: uppercase;" > Lucha Libre!</h1> Inline styles have a higher specificity than Gmail s stylesheet Reset styles are included inline

23 Styling the paragraph .html <p style=" background: #5b3885; color: #fcfbfd; font-family: 'Arial Black'; font-size: 26px; line-height: 26px; margin: 0; padding: 10px 0; text-transform: uppercase; "> Experience 3 Bone-Crushing Hours </p> Container, font, and reset styles

24 Content needs a container We want these aligned with an equal width

25 Adding a container .html <div style=" margin: 0 auto; max-width: 600px;"> <img > <h1 > <p > </div> The content is contained and the container is centered

26 Centering the text .html <div style=" margin: 0 auto; max-width: 600px; text-align: center; "> <img > <h1 > <p > </div> Text is now centered

27 Adding a background .html <div style=" background-color: #211f31; background-image: url('bgtexture.png');"> <div > <img > <h1 > <p > </div> </div>

28 Testing, testing, testing

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 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

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

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

More information

GUIDE TO CODE KILLER RESPONSIVE EMAILS

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

More information

Responsive HTML email and Drupal

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:

More information

8 STEPS TO CODE KILLER RESPONSIVE EMAILS

8 STEPS TO CODE KILLER RESPONSIVE EMAILS 8 STEPS TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 BUILD RESPONSIVE EMAIL STEP BY STEP Steps to create a simple responsive email template. (fluid image, main content, two

More information

Looking Good! Troubleshooting Email Display Problems

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

More information

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 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

More information

CST 150 Web Design I CSS Review - In-Class Lab

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

More information

The Essential Guide to HTML Email Design

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

More information

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 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

More information

Outline of CSS: Cascading Style Sheets

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

More information

Introduction to Adobe Dreamweaver CC

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

More information

JJY s Joomla 1.5 Template Design Tutorial:

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

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

{color:blue; font-size: 12px;}

{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:

More information

Web layout guidelines for daughter sites of Scotland s Environment

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

More information

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 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,

More information

MCH Strategic Data Best Practices Review

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

More information

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS 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

More information

Making Responsive Emails

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:

More information

Fast track to HTML & CSS 101 (Web Design)

Fast track to HTML & CSS 101 (Web Design) Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of

More information

Responsive Web Design: Media Types/Media Queries/Fluid Images

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.

More information

Web Design and Databases WD: Class 7: HTML and CSS Part 3

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

More information

Email Campaign Guidelines and Best Practices

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

More information

CSS for Page Layout. Key Concepts

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

More information

How to Properly Compose E-Mail HTML Code : 1

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

More information

HTML TIPS FOR DESIGNING

HTML TIPS FOR DESIGNING This is the first column. Look at me, I m the second column.

More information

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

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

More information

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS

More information

The Essential Guide to HTML Email Design

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

More information

Web. Programming. Hans- Pe0er Halvorsen, M.Sc. h0p://home.hit.no/~hansha/?page=sojware_development

Web. Programming. Hans- Pe0er Halvorsen, M.Sc. h0p://home.hit.no/~hansha/?page=sojware_development h0p://home.hit.no/~hansha/?page=sojware_development Web O. Widder. (2013). geek&poke. Available: h0p://geek- and- poke.com Programming Hans- Pe0er Halvorsen, M.Sc. 1 Web is the Present and the Future 2

More information

DESIGNING MOBILE FRIENDLY EMAILS

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

More information

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28 CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline

More information

Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1

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

More information

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure

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?

More information

RESPONSIVE EMAIL DESIGN BY COMMUNIGATOR

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

More information

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified

More information

Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20

Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20 Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20 This document includes best practices around responsive web design (RWD) when developing hybrid applications. Details on each checklist

More information

Email Creator Coding Guidelines Toolbox

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

More information

Principles of Web Design 6 th Edition. Chapter 12 Responsive Web Design

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

More information

ITNP43: HTML Lecture 4

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

More information

Chapter 1. Introduction to web development

Chapter 1. Introduction to web development Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Load a web page from the Internet or an intranet into a web browser.

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

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...

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file. Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded

More information

Flare Tips and Tricks. Tips and tricks. Importing content Lists. Variables and snippets Condition tags Printed documentation WebHelp.

Flare Tips and Tricks. Tips and tricks. Importing content Lists. Variables and snippets Condition tags Printed documentation WebHelp. Flare Tips and Tricks Scott DeLoach scott@clickstart.net t t t Founder, ClickStart Certified Instructor, Flare RoboHelp Captivate Author, MadCap Flare for RoboHelp Users 2007 ClickStart, Inc. All rights

More information

Going Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps. JK (JayaKumar Pedapudi) Principal Consultant NTT DATA, Inc.

Going Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps. JK (JayaKumar Pedapudi) Principal Consultant NTT DATA, Inc. Going Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps JK (JayaKumar Pedapudi) Principal Consultant NTT DATA, Inc. Introduction. Learning Points. What is Responsive Design and its Role? Design

More information

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here

More information

Designing HTML Emails for Use in the Advanced Editor

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

More information

CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types

CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining

More information

Web Developer Jr - Newbie Course

Web Developer Jr - Newbie Course Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance

More information

ICE: HTML, CSS, and Validation

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

More information

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation

More information

Web Design with CSS and CSS3. Dr. Jan Stelovsky

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

More information

Microsoft Expression Web Quickstart Guide

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,

More information

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016

More information

RESPONSIVE DESIGN FOR MOBILE RENDERING

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

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

More information

You can use percentages for both page elements and text. Ems are used for text,

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

More information

Coding Standards for Web Development

Coding Standards for Web Development DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as

More information

Eloqua Email 101. What is this and why should I read it?

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

More information

Links Getting Started with Widgets, Gadgets and Mobile Apps

Links Getting Started with Widgets, Gadgets and Mobile Apps Widgets, Gadgets, and Mobile Apps for Libraries: Tips, Code Samples, Explanations, and Downloads Michael Sauers Technology Innovation Librarian Nebraska Library Commission msauers@nlc.state.ne.us Jason

More information

CIS 467/602-01: Data Visualization

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

More information

Responsive Web Design Creative License

Responsive Web Design Creative License Responsive Web Design Creative License Level: Introduction - Advanced Duration: 16 Days Time: 9:30 AM - 4:30 PM Cost: 2197 Overview Web design today is no longer just about cross-browser compatibility.

More information

Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design

Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s

More information

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Using JQuery to Make a Photo Slideshow This exercise was modified from the slideshow

More information

24 WAYS to impress your friends

24 WAYS to impress your friends 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

More information

Full report on all 24 clients

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

More information

WordPress and HTML Basics

WordPress and HTML Basics WordPress and HTML Basics Intro: Jennifer Stuart Graphic Design background - switched to Web Design (1998) Started blogging in 2001 Became Interested in Javascript, PHP, etc. 2004 - Moved to WordPress

More information

Creating a Resume Webpage with

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

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main

More information

Responsive Email Design

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

More information

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer HTML5 & CSS3 ( What about SharePoint? ) presented by @kyleschaeffer The Agenda HTML5 What is it? What can it do? Does SharePoint do HTML5? CSS3 What is it? What can it do? Does SharePoint do CSS3? HTML5

More information

Coding HTML Email: Tips, Tricks and Best Practices

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.

More information

Interactive Data Visualization for the Web Scott Murray

Interactive Data Visualization for the Web Scott Murray Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding

More information

BEYOND RESPONSIVE. by Marcus Morba (drupal.org/user/710680 = mori) Sunday 24 November 13

BEYOND RESPONSIVE. by Marcus Morba (drupal.org/user/710680 = mori) Sunday 24 November 13 BEYOND RESPONSIVE by Marcus Morba (drupal.org/user/710680 = mori) 1 my first responsive mobile experience was in 2004 2 2 target devices target resolutions: 240 x 320 and 480 x 640 one code base for layout

More information

Mobile Web Site Style Guide

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

More information

Responsive Web Design (RWD) Building a single web site for the desktop, tablet and smartphone

Responsive Web Design (RWD) Building a single web site for the desktop, tablet and smartphone Responsive Web Design (RWD) Building a single web site for the desktop, tablet and smartphone An Infopeople Webinar November 13, 2013 Jason Clark Head of Digital Access & Web Services Montana State University

More information

Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.

Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved. Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved. Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism

More information

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.

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

More information

Garfield Public Schools Fine & Practical Arts Curriculum Web Design

Garfield Public Schools Fine & Practical Arts Curriculum Web Design Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and

More information

January 18, 2015 STNMAST2008. to code. 1day

January 18, 2015 STNMAST2008. to code. 1day LEARN to code IN January 18, 2015 1day MAKE YOUR OWN APP: part one CREATE AN APP IN A DAY If you can t code, you ll be left in the past so snap to it Coding is no longer a geeks hobby: it s everywhere.

More information

Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.

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

More information

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6 Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration

More information

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you

More information

THE SAS OUTPUT DELIVERY SYSTEM: BOLDLY TAKE YOUR WEB PAGES WHERE THEY HAVE NEVER GONE BEFORE! CHEVELL PARKER, SAS INSTITUTE INC.

THE SAS OUTPUT DELIVERY SYSTEM: BOLDLY TAKE YOUR WEB PAGES WHERE THEY HAVE NEVER GONE BEFORE! CHEVELL PARKER, SAS INSTITUTE INC. THE SAS OUTPUT DELIVERY SYSTEM: BOLDLY TAKE YOUR WEB PAGES WHERE THEY HAVE NEVER GONE BEFORE! CHEVELL PARKER, SAS INSTITUTE INC. Copyright 2012, SAS Institute Inc. All rights reserved. Overview Mobile

More information

Web Design and Development ACS-1809. Chapter 9. Page Structure

Web Design and Development ACS-1809. Chapter 9. Page Structure Web Design and Development ACS-1809 Chapter 9 Page Structure 1 Chapter 9: Page Structure Organize Sections of Text Format Paragraphs and Page Elements 2 Identifying Natural Divisions It is normal for a

More information

Using Style Sheets for Consistency

Using Style Sheets for Consistency Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point

More information

CHAPTER 10. When you complete this chapter, you will be able to:

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

More information

Responsive Design Best Practices

Responsive Design Best Practices Responsive Design Best Practices Heather Shore Account Director Silverpop Harlan Cayetano Sr. Email Specialist Silverpop Yin Mac Program Manager Silverpop Andrea Shyrock Production Manager Alchemy Worx

More information

Creating Web Pages with Dreamweaver CS 6 and CSS

Creating Web Pages with Dreamweaver CS 6 and CSS Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding

More information

ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2

ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2 HTML, XHTML & CSS: Introduction, 1-2 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers

More information

Training Studio Templates Documentation Table of Contents

Training Studio Templates Documentation Table of Contents Training Studio Templates Documentation Table of Contents Loading the TrainingStudio Solution... 2 Architecture... 3 Big Picture... 4 Lesson Directory... 6 index.htm... 6 Styles... 16 backgroundstyles.css...

More information

Advanced Editor User s Guide

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

More information

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

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

More information

Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.

Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,

More information

Table of Contents Find out more about NewZapp

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

More information

Create Webpages using HTML and CSS

Create Webpages using HTML and CSS KS2 Create Webpages using HTML and CSS 1 Contents Learning Objectives... 3 What is HTML and CSS?... 4 The heading can improve Search Engine results... 4 E-safety Webpage... 5 Creating a Webpage... 6 Creating

More information

Introduction to Web Development

Introduction to Web Development Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:

More information

Web Browser. Fetches/displays documents from web servers. Mosaic 1993

Web Browser. Fetches/displays documents from web servers. Mosaic 1993 HTML5 and CSS3 Web Browser Fetches/displays documents from web servers Mosaic 1993 Firefox,IE,Chrome,Safari,Opera,Lynx,Mosaic,Konqueror There are standards, but wide variation in features Desktop Browser

More information

HOW Interactive Design Conference 2013

HOW Interactive Design Conference 2013 HOW Interactive Design Conference 2013 Photoshop to HTML Chris Converse Use this QR code to get the mobile schedule for this conference. Get session and speaker info, lunch ideas, and links for getting

More information