Responsive Web Design: Media Types/Media Queries/Fluid Images
|
|
- Arabella Lawson
- 8 years ago
- Views:
Transcription
1 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. Examples of HTML <link> method: URL to CSS file <link rel = "stylesheet" href = "path/all-devices.css" media = "all"> This is equivalent to: <link rel = "stylesheet" href = "path/all-devices.css"> <link rel = "stylesheet" href = "path/screen.css" media = "screen"> All types of devices Stylesheet used for: Colour computer monitors <link rel = "stylesheet" href = "path/print.css" media = "print"> Printers <link rel = "stylesheet" href = "path/aural.css" media = "aural"> Webpage readers <link rel = "stylesheet" href = "path/braille-tactile.css" media = "braille"> Webpage to tactile Braille devices <link rel = "stylesheet" href = "path/braille-printer.css" media = "embossed"> Webpage to Braille printers <link rel = "stylesheet" href = "path/handheld.css" media = "handheld"> Handheld devices <link rel = "stylesheet" href = "path/projector.css" media = "projection"> Projectors <link rel = "stylesheet" href = " path/teletype.css" media = "tty"> Teletypes and terminals <link rel = "stylesheet" href = " path/tv.css" media = "tv"> TV devices <link rel = "stylesheet" href = " path/screen.css" media = "screen, tv, projection"> Devices listed using a comma as separator. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 1
2 HTML Media Types HTML Media Types Examples of HTML <link> method that includes a media query Stylesheet used for: <link rel = "stylesheet" href = "path/devices.css" media = "(min-width: 10em)"> Devices with minimum width of 10em <link rel = "stylesheet" href = "path/devices.css" media = "(max-width: 90em)"> Devices with maximum width of 90em Example of HTML <link> method for older browsers Stylesheet used for: <!--[if lt IE 9]> <link rel = "stylesheet" href = "path/devices.css"> <![endif]--> Older browsers (in this case IE 9 or older) that do not understand media queries. These browsers get fixed-width layouts. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 2
3 CSS 2/3 Media Query rules Mr Kruyer s list of CSS Media Queries for maximum speed to different devices. Examples of CSS method Media types Media expressions/(features) Assumed to be all unless specified (color) (monochrome) all (min-width: 20em) screen (max-width: 30em) print (orientation: portrait) (orientation: landscape) (device-width: 480px) Notes: 1/ Older browsers recognise media types so do not use these if you do not want the query to be applied. 2/ Hide styles from non CSS 3 browsers using keyword: all and (color) This is equivalent screen and (color) and, not only Only understood by devices with modern browsers. Older browsers ignore these. They refer to viewport size, colour capabilities orientation etc. These four keywords are used to join multiple expressions. Note:, = or CSS code applied to: All types of devices that support colour. Your CSS rules would only be applied to modern browsers. Only colour computer monitors. Your CSS rules would be applied to both modern and older browsers. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 3
4 @media screen and (color: (min-width: 20em) and (max-width: (min-width: 20em), (orientation: not (orientation: only screen and (min-width: 20em) /* Place your CSS 3 rules here any and (max-width: 320px) and (orientation: portrait) /* Place your CSS 3 rules here */ Only supports computer monitors with 256 colours. CSS rules would be applied to both modern and older browsers. All types of devices that have a minimum width of 20em and maximum width of 30em. Applied to modern browsers only. All types of devices that have a minimum width of 20em or screen in landscape mode. Applied to modern browsers only. All types of devices that are not in portrait mode. Applied to modern browsers only. Only computer monitors that have min. width of 20em (Useful when blocking older browsers that don t support media features.) Any device that has max. width of 320px and screen in portrait mode. (Useful when blocking older browsers that don t support media (min-width: 20em) and (max-width: (min-width: 30.01em) and (max-width: (min-width: 40.01em) and (max-width: (min-width: 50.01em) and (max-width: (min-width: 60.01em) All types of devices delivering five different CSS rules depending on the minimum width and maximum width of the device. C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 4
5 CSS 2: (min-width: 700px) body font-size: (min-width: 800px) body font-size: (min-width: 900px) body font-size: (min-width: 1000px) body font-size: (min-width: 1100px) body font-size: 200%; All types of devices delivering five overlapping (increasing) font sizes depending on the (increasing) width of the device. Mr Kruyer s table for delivering fluid foreground/background images using CSS CSS code for fluid inline or background images /* For fluid inline image use the following four properties/values: */ img max-width: 100%; vertical-align: middle; border: 0; image-rendering: optimizequality; CSS lines explained: 1. Image can be reduced but never larger than original size. 2. Image centred within the line of surrounding text. 3. Removes blue image border of older browsers. 4. Improves image quality for Firefox. (Use optimizespeed lower quality but faster loading.) C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 5
6 CSS 3: Backgrounds /* Background cropped on left and right with height constant: */.responsive-crop-bg-image width: 100%; height: 300px; background-image: url(../images/pic.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; contain scales image keeping aspect ratio to fit inside area. cover scales image keeping aspect ratio to cover area. Clipping can occur. Clipping does not happen in the second CSS background image rule as the boxheight (i.e. bottom padding) is set to maintain the background image aspect ratio. /* Background scaled maintaining aspect ratio: */.responsive-scalable-bg-image width: 100%; padding-bottom: 50%; background-image: url(../images/pic.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; Notes: 1/ Tiling can occur if the image height or width is fixed unless background-repeat: no-repeat; is included. 2/ Aspect ratio = 50% For my pic.jpg image: Height = 300px Width = 600px 300/600 = 50%.container max-width: 600px; margin: 0 auto; border: 1px solid red; C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 6
7 The HTML code for the above CSS 3 code: Screen dumps: <div class = "container"> <h1>fluid background images</h1> <p>the container's maximum width is set to 600 pixels and has a 1 pixel red border.</p> <div class = "responsive-crop-bg-image"></div> <p>this top background image will have the left and right sides cropped when the webpage is resized down. When scaled up the image</p> <div class = "responsive-scalable-bg-image"></div> <p>this second background image will scale down with the aspect ratio maintained when the webpage is resized down.</p> </div> Before scaling down: webpage width > 600px After scaling down: webpage width < 600px C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\responsive-web-design.docx Page 7
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 informationYou 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 informationResponsive 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 informationWeb 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 informationResponsive and Adaptive Web Design. Responsive & Adaptive websites-respond to the user s device by showing an optimized view.
Responsive and Adaptive Web Design Responsive & Adaptive websites-respond to the user s device by showing an optimized view. Web Design Assumptions Are Changing Rapidly Making a desktop layout small is
More informationWeb 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 informationWhat 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 informationWeb 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 informationChapter 8 More on Links, Layout, and Mobile Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 8 More on Links, Layout, and Mobile Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes Code relative hyperlinks to web pages in folders within a website Configure a hyperlink
More informationBuilding 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
More informationIntroduction 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 informationCREATING 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 informationEssential 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 informationIBM Worklight: Responsive Design for Mul8- Channel Applica8on Development
IBM Worklight: Responsive Design for Mul8- Channel Applica8on Development Please Note IBM s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at
More informationGoing 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 informationJJY 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 informationUsing 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 informationWeb 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 informationContents. 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 informationMagento 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
More informationCSS 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{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 informationResponsive Web Design. birds of feather
Responsive Web Design birds of feather Approaches to Mobile Development 1. No Mobile Approach 2. Native Mobile Applications 3. Mobile Websites 4. Responsive (universal) design No Mobile Approach Website
More informationInspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.
More informationCreate 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
More informationWhy? Mobile. 0Your content is no more than 3 taps away from Angry Birds. 0 Many people access your website via smartphones and other mobile devices
Why? Mobile 0 Many people access your website via smartphones and other mobile devices 0Your content is no more than 3 taps away from Angry Birds Image src: http://www.angrybirds.com/ It is 2013? 0 Which
More informationLast 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 informationBEYOND 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 informationCSS - Cascading Style Sheets
CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External
More informationHow 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 informationWe 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 informationThis 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 informationEmail 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 informationOutline 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 informationWeb Publishers Group. Tuesday 13 March 2012
Web Publishers Group Tuesday 13 March 2012 Responsive Web Design Mobilising the Internet Scott O Brien Technical Web Coordinator ANU Marketing Office 3 Responsive web design Designing a website in a manner
More informationLevel 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
More informationCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) W3C standard for defining presentation of web documents (way documents are displayed or delivered to users typography, colours, layout etc) Presentation separated from content
More informationITNP43: 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 informationGUIDE 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 informationHTML 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 informationART 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 informationViewports. 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,
More informationBasics 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 informationRESPONSIVE 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 informationCST 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 informationWeb Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17
Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been
More informationThe 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 informationResponsive 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 informationHow and Why to Use Media Queries
How and Why to Use Media Queries Cristoffer Carlberg Department of Computing Science Umea University, Sweden id09ccg@cs.umu.se Abstract. The possibility to make websites responsive and self adjusting to
More informationICE: 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 informationRESPONSIVE 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 informationMobile 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
More informationEmail 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 informationResponsive Web Design for Libraries: Beyond the Mobile Web
Grand Valley State University ScholarWorks@GVSU Books and Contributions to Books University Libraries 3-1-2013 Responsive Web Design for Libraries: Beyond the Mobile Web Matthew Reidsma Grand Valley State
More informationSelectors in Action LESSON 3
LESSON 3 Selectors in Action In this lesson, you will learn about the different types of selectors and how to use them. Setting Up the HTML Code Selectors are one of the most important aspects of CSS because
More informationWeb 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
More informationCaldes CM2: Marketing Emails Support Document v1.12
Caldes CM2: Marketing Emails Support Document v1.12 Caldes Enterprise software can be used to send out marketing email. Due to the nature of these being bespoke designs, Caldes make a one off charge to
More informationLaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview
Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and
More information8 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 informationMaking 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 informationWeb Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
More informationHow to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008
How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008 To do this tutorial you will need Flash 8 or higher, Dreamweaver 8 or higher. You will also need some movie clips
More informationCOMMONWEALTH 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 informationBuilding Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 Framework Michael Slater and Charity Grace Kirk michael@webvanta.com 888.670.6793 1 Today s Presenters Michael Slater President and Cofounder of Webvanta
More informationFETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3
IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets
More informationCreate 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 informationStyle & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
More informationHOW 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 informationWeb 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:
More informationWith 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
More informationResponsive Web Design in Application Express
Insert Information Protection Policy Classification from Slide 13 1 Responsive Web Design in Application Express using HTML5 and CSS3 Shakeeb Rahman @shakeeb Principal Member of Technical Staff Oracle
More informationDesigning 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 informationFurther web design: Cascading Style Sheets Practical workbook
Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these
More informationDesigning CSS Layouts for the Flexible Web. July 18, 2009 The CSS Summit Zoe Mickley Gillenwater
Designing CSS Layouts for the Flexible Web July 18, 2009 The CSS Summit Zoe Mickley Gillenwater A little about me Author of Flexible Web Design: Creating Liquid and Elastic Layouts with CSS Author of lynda.com
More informationFull 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 informationWeb 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 informationInterspire Website Publisher Developer Documentation. Template Customization Guide
Interspire Website Publisher Developer Documentation Template Customization Guide Table of Contents Introduction... 1 Template Directory Structure... 2 The Style Guide File... 4 Blocks... 4 What are blocks?...
More informationDifferent Screen Size, Different Design
6 Different Screen Size, Different Design It s no secret or surprise that the variety of ways people browse the web is increasing. People may view your web pages on widescreen TVs, desktop computers, netbooks,
More informationWhite Paper Using PHP Site Assistant to create sites for mobile devices
White Paper Using PHP Site Assistant to create sites for mobile devices Overview In the last few years, a major shift has occurred in the number and capabilities of mobile devices. Improvements in processor
More informationAdvanced 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 informationProfessional & Workgroup Editions
Professional & Workgroup Editions Add a popup window for scheduling appointments on your own web page using HTML Date: August 2, 2011 Page 1 Overview This document describes how to insert a popup window
More informationTable 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 informationCSS : petits compléments
CSS : petits compléments Université Lille 1 Technologies du Web CSS : les sélecteurs 1 au programme... 1 ::before et ::after 2 compteurs 3 media queries 4 transformations et transitions Université Lille
More informationResponsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3 Ben Frain Chapter No. 3 "Embracing Fluid Layouts" In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter
More informationCREATING RESPONSIVE UI FOR WEB STORE USING CSS
CREATING RESPONSIVE UI FOR WEB STORE USING CSS Magdalena Wiciak Bachelor s Thesis May 2014 Degree Programme in Information Technology Technology, communication and transport DESCRIPTION Author(s) WICIAK,
More informationResponsive 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 informationJoomla! template JSN Mico Customization Manual
Joomla! template JSN Mico Customization Manual (for JSN Mico 1.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative Commons
More informationCREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be
More informationFile types There are certain image file types that can be used in a web page. They are:
Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner
More informationMCH 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 information1. About the Denver LAMP meetup group. 2. The purpose of Denver LAMP meetups. 3. Volunteers needed for several positions
1. About the Denver LAMP meetup group 1.Host a presentation every 1-3 months 2.Cover 1-3 related topics per meeting 3.Goal is to provide high quality education and networking, for free 2. The purpose of
More informationWRITE BETTER HTML BY WRITING BETTER CSS
WRITE BETTER HTML BY WRITING BETTER CSS THE ROYAL WE Chris Coyier @chriscoyier BETTER? 1 Less of it 2 More Semantic 3 More Accessible 4 Futureproof // Speed // Maintainability // SEO // Happy People 123
More informationHow 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 informationHTML5 & 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 information01/42. Lecture notes. html and css
web design and applications Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications ( WebApps
More informationTimeline for Microsoft Dynamics CRM
Timeline for Microsoft Dynamics CRM A beautiful and intuitive way to view activity or record history for CRM entities Version 2 Contents Why a timeline?... 3 What does the timeline do?... 3 Default entities
More informationRecommendations for Websites Optimization for Mobile Devices Using Mobile Centric CSS. February 2014 Update
Recommendations for Websites Optimization for Mobile Devices Using Mobile Centric CSS February 2014 Update Is Mobile SEO Required Now? In a Google Smartphone User study, mobile searches will make up 25%
More informationMaking Textual Webpage Content Responsive
Making Textual Webpage Content Responsive Web page content can be quickly broken down into the following categories: 1) Textual Information 2) Image based information 3) Video information i.e. videocasts
More informationLet's Dig Into the Omega Theme October 27, 2012. http://bit.ly/omega-training http://bit.ly/omega-tips
Let's Dig Into the Omega Theme October 27, 2012 http://bit.ly/omega-training http://bit.ly/omega-tips brought to you by Kendall Totten Bachelors in Communication Technology & Graphic Design from Eastern
More informationAdobe Illustrator CS6. Illustrating Innovative Web Design
Overview In this seminar, you will learn how to create a basic graphic in Illustrator, export that image for web use, and apply it as the background for a section of a web page. You will use both Adobe
More information