Mobile Portal Optimization
|
|
- Joan Patterson
- 8 years ago
- Views:
Transcription
1 IBM Mobile Portal Accelerator Mobile Portal Optimization Approach & Techniques Version 0.3 KRISHNA C KUMAR, PRINCIPAL SOFTWARE ENGINEER, IBM MPA DEVELOPMENT/L3 SUPPORT, INDIA SOFTWARE LABS, BANGALORE
2 HIGH LEVEL APPROACH Identify the screens for different device categories 3 Different variants of UI created for different categories of devices Create a Global Styles (to be included in most of the pages portlets). This is NOT THEME File Identify styles that should go into <nativemarkup> for <nativemarkup> wrapped code Identify generic global styles as CSS Create ViewPort.jsp for including in the portlet JSPs for devices which supports viewports (This is needs to be included at the Aggregator JSP Level) Modify/Create MCS Artifacts Add/Modify Portlet JSPs/java Classes [Avoid any device/model specific Conditions ] Modify Default XDIME Aggregator JSPs/Themes
3 GLOBAL STYLES
4 Creating Global Styles - I 1. In what format the Global Styles to be created? JSP format as Style/CSS.jsp, which can be included in the required portlet jsp pages 2. Why globalstyles.jsp to be used instead of Global Theme based on MCS Themes? By default, WEMP has global themes which comes out of box with XDIME Aggregator as wp_styles.mthm wp_styles.mthm takes care of rendering Aggregator related themes/styles Every XDIME/JSP or the canvas can be styled using a single mcs theme file (*.mthm file) In case if we place all the styles configured globally in a single theme, it is not be possible add local themes (themes for minor changes which is specific for a particular page) as a layout canvas element of XDIME cannot have more than one theme file. 3. Where this should be included? To be included within Common.jsp or default.jsp of the XDIME Aggregator 4. Contents of the Global Styles? <style type= text/css >.. </style> With CSS Styles with ID Selectors and Class Selectors Identified common styles across all pages
5 Creating Global Style - II 6. Global Styles & Nativemarkup? It is a good practice to include Nativemarkup rendering as a separate JSP, say nativecss.jsp and include 7. Types of Contents of nativecss.jsp <nativemarkup targetlocation= html.head expr= true() ><style type= text/css >..</style></nativemarkup> <nativemarkup targetlocation= html.head expr= device:getpolicyvalue( layoutengine ) = Webkit ><style type= text/css >..</style></nativemarkup> Use Correct MCS expressions in the expr attribute of nativemarkup element, this will save the page from unneccssary CSS rendering from nativemarkup on the final markup on the device 8. Global Styles Fonts Set the font properties globally in the style jsp and include the same in the required pages. Say body{ font-family: RonniaBasicLight; font-size:110% } Set the font-size as body selector e.g. body{ font-size: 100% }, this will ensure all the font-size globally is the default browser font size rendering. Locally these font-size can be handled when there is a reduction in size or increase in font size Any variations over the font style or settings needs to be handled locally in theme files for the specific XDIME/JSPs
6 Creating Global Style - III 9. Global Styles Colors & Background Colors Maximum used Colors, Font colors, background colors, background images (both image components or images) needs to be added to the Global Styles jsp Examples : Grey and White background, Green backgrounds, Maximum used Font colors, Heading Text Color, Button Styling, Form controls, etc. 10. Identify the common styling across all pages and create Global Styles jsp and for elements which occurs every page uniformly. Say button styled red on all pages Sample globalstyles.jsp <style type= text/css > body{margin:0;padding:0;font-family:ronniabasiclight,sans-serif; font-size:100% }.stylered{color:red;}.black{color:#000000;}.white{color:#ffffff;}.blue{ color:#000000;}.grey{ background:grey;}.white{background:#ffffff;}.itembkgroundg{}.itembkgroundw{}.buttongrey{} #numvalidate{-wap-input-required:true;-wap-input-format:nnnnnnnnnn;} adimage{ width:100%; display:block } podimage{ width:100%; display:block }.inputboxstyle{ }.marqueestyle{ } </style>
7 Creating Global Style - IV 11. Conditional handling of Global Styles for variants Using globalstyles_240px.jsp, Using globalstyles_320px.jsp Using global styles conditionally w.r.t to device screen size can be an example to handle well coarse grained styling for different styling variants Sample nativeglobalstyles.jsp /*here <nativemarkup> comes within the XDIME JSP */ <style type= text/css > table{border-collapse:collapse;} </style> Sample nativeglobalstyles.jsp OR <nativemarkup expr= true() targetlocation= html.head > <style type= text/css > table{border-collapse:collapse;} </style> </nativemarkup> <nativemarkup expr= device:getpolicyvalue( pixelsx ) >= 240 targetlocation= html.head > <style type= text/css > table{border-collapse:collapse;} </style> </nativemarkup>
8 VIEWPORTS
9 Considering Viewports - I 1. What is viewport.jsp? For information on what is viewport, refer Apple Documentation ( ence/safariwebcontent/usingtheviewport/usingtheviewport.html) Similar to global themes inclusion as JSP, viewports needs to be included in the Aggregator level JSPs This exists for only highend devices only It is a simple meta tag element with viewport configured. Different vendors follow different view port standards. So kindly refer vendor specific sites. Following are the vendors uses viewport for rendering/controlling the rendering on their high resolution devices Include viewport conditionally for All Apple products, Windows Mobile 5, 6, Windows Phone OS 7/7.5, Blackberry, Android Device specific configuration is unavoidable as viewport is proprietary Certain level of generalization can be performed using mcs-functional expressions effectively 2. Where should we use viewport.jsp? Aggregator level (include as JSP based on conditions using mcs-expressions) 3. Is this must to use? YES. Mandatory 4. What if viewport settings are not used? Pages will look inappropriate to the size of the screen and rendering will look small
10 Considering Viewports - II 5. How should we include viewports? 5. Include viewports using nativemarkup and mcs-expressions 6. Example Code Viewports.jsp <nativemarkup targetlocation= html.head expr= device:isinstanceof( Apple ) > <meta name= viewport width= device-width /> </nativemarkup> <nativemarkup targetlocation= html.head expr= device:isinstanceof( RIM-OS ) > <meta name= viewport width= device-width; user-scalable= no /> </nativemarkup> <nativemarkup targetlocation= html.head expr= device:isinstanceof( Windows PhoneOS 7.5 ) > <meta name= viewport width= device-width; user-scalable= no /> </nativemarkup> 7. This file can be modified if there is any new viewport setting is recommended by device manufacturers.
11 LAYOUTS
12 Creating Layouts - I 1. Can we use global layouts? NO, It is not possible 2. Points to be remembered while creating layouts Create layouts without empty grids Avoid using unnecessary nested grids (for e.g. using 1 X 1 Grid for adding a pane) Use style classes required for grid/panes in Format Attributes Avoid Variants of layouts (unless required) Create generic variants with default variant For different class of UI different layout can be created. Say homepagesimple.mlyt, homepagemedium.mlyt, homepagecomplex.mlyt for simple, medium and complex page variants of a home page respectively Conditionally use the layouts in the portlet jsp as follows <canvas layoutname= <%= layoutname %> type= portlet > </canvas> Identify common patterns and use it as layouts and its contents. This will reduce the size of the layouts Make sure column width is set correctly for the grids Try to avoid not include static panes within Form of the layout Do not use any Spacer panes
13 Creating Layouts - II 3. Using Spatial Iterators Row-wise or column-wise iteration should be handled using spatial iterator settings instead of separate panes with two iterations Use :odd & :even pseudo class selectors for alternate row styling (background, fonts, foreground etc.) 4. Using regions Use of regions in layouts enables reuse of layout. Identify common patterns and use regions to plugin the layout patterns on the pages Do not use too much of regions. Use regions if the layout pattern is quite big, for small patterns like 1 or 2 panes do not use regions, instead of reducing complexity it increases meaninglessly 5. Customizing Aggregator Layouts Optimize the aggregator layouts By default the aggregator layouts have spatial iterators in the header for displaying multiple levels of headers. In case if the implementation doesn t need multiple headers remove the same. Maintain Single Variant (or single set of layouts) for Aggregator Layouts, as the aggregator generally renders a logo in header and footer with some default text on all pages
14 MCS THEMES FOR PORTLETS
15 Using Local Themes 1. What are local themes? Themes added to the portlet JSP in the canvas element for theme= attribute is termed as local theme Local theme affects only the particular canvas on the specific XDIME/JSP only A single theme file can be reused on multiple JSP canvas 2. Scenarios where local themes has to be used? In general, restrict all styling to the global themes/css If there is a specific change only for a particular page, then use the local mcs theme for incorporating the changes Example: If the overall font family to be displayed is Arial, and for a particular page, specifically for a heading if the font-family has to Verdana create a class selector in the local theme and add the font-family as verdana and use the same in the JSP. In this case, that particular heading will be styled with font-family from the local theme/css, since local theme has more preference than global A single theme file can be reused on multiple JSP canvas 3. Any alternate to local themes? <style> elements with or without <nativemarkup> can be included in any XDIME page When using <nativemarkup> make sure the rendering is not going to happen for all pages unnecessarily, i.e. use right conditions- otherwise whether the styles will be used or not it will be rendered on to the final device specific markup and increases the page size unnecessarily
16 IMAGE COMPONENTS
17 Creating Image Components - II 1. How to create image components? Since different screen sizes are capable of rendering different image sizes, it is recommended to create image components generic for different sizes For example, logo_240.mimg, logo_320.mimg This needs to be conditionally handled based on the screen usable width from the device repo (similar to handling layouts) Every image component should be created with image pointed to generic variant 2. Points to be noted in creating image components? Add alt= attribute with suitable text, if there is no text required at least empty string for the alt attribute in the <img> xdime tag should be used (MANDATORY) Use forward slash (/images/test.jpg) to point the images in the image component, by default it adds with backward slash Make sure the image file is browsed and located for image component. This will avoid wrong format/dimensions/etc. In every image component, use generic variant for 3 types of image formats to suit all devices (png, jpg, gif) MPA will choose the best image for the device runtime 3. Don'ts in creating image components 1. Do not edit image components with text editor use always GUI editor 2. Do not use variants 3. Do not use backward slash to point to the image file 4. Do not manually change the file format listed in the image component after pointing to the image 5. Do not change the file extension of image and set it as a different file format
18 Creating Image Components - II 4. Using images (without image components) When using images directly from a remote server, creating image component may not be applicable. So use <img> with url attribute instead of src Use alt attribute When the remote server image is static and fixed (which is not going to change at all) image components can be used with settings as image Location set to Remote Server or URL Context locate the same in the Image component editor
19 Some Important Tips 1. For Tables 1. In general, unlike PC in mobile web, the table border is not much used because of size restrictions. So always use border-collapse style for table with CSS selector 2. <nativemarkup> can be used to render the border-collapse on all the pages (set this in nativeglobalstyles.jsp once. 3. Do not set this in local themes/css 4. Important While using Tables with percentage, old nokia devices rendering is not perfect because of XHTML MP handled by nokia browsers in a mysterious way. So try to use % for low end device when required (say device usable Width less than 240px) 2. Image within Table 1. Do not use any text-align property for images as it will cause gaps above and below images on certain devices 2. Use img { display:block } to avoid white spaces above and below images when used within tables td element 3. Dynamic Style parameters 1. Use <style> element for dynamic style parameters 2. Say if you want to pass percentage dynamically use as follows <style type= text/css > div.header{ height:<%= headerheight %>px }</style>
20 Thank You
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 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 informationDesigning portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development
Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development By Kenji Uchida Software Engineer IBM Corporation Level: Intermediate
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 informationBase template development guide
Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento
More informationMicrosoft 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 informationDreamweaver 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 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 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 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 informationHTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
More informationCSS 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 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 informationWeb 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 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 informationSkills for Employment Investment Project (SEIP)
Skills for Employment Investment Project (SEIP) Standards/ Curriculum Format For Web Design Course Duration: Three Months 1 Course Structure and Requirements Course Title: Web Design Course Objectives:
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 informationWeb 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 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 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 informationKentico 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 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 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 informationCoding 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 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 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 informationCHAPTER 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 informationLooking 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 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 informationDESIGNING 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 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 informationHow To Design An Email In Html (Html) And Html (Mailbox) Safely
24 WAYS to impress your friends At some stage in your career, it s likely you ll be asked by a client to design a HTML email. Before you rush to explain that all the cool kids are using social media, keep
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 informationHTML 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 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 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 informationireview Template Manual
ireview Template Manual Contents Template Overview... 2 Main features... 2 Template Installation... 3 Installation Steps... 3 Upgrading ireview... 3 Template Parameters... 4 Module Positions... 6 Module
More informationSaving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4
CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...
More informationRIT Message Center Compose and Send Messages
RIT Message Center Compose and Send Messages Table of Contents Table of Contents... 2 Logging into Message Center... 3 Category Display... 3 Message Center: Create a Message... 4 Create a New Message without
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 informationLearning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins
Learning Web Design Third Edition A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer Niederst Robbins O'REILLY Beijing- Cambridge Farnham Koln Paris Sebastopol -Taipei -Tokyo CONTENTS
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 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 informationFortis Theme. User Guide. v1.0.0. Magento theme by Infortis. Copyright 2012 Infortis
Fortis Theme v1.0.0 Magento theme by Infortis User Guide Copyright 2012 Infortis 1 Table of Contents 1. Introduction...3 2. Installation...4 3. Basic Configuration...5 3.1 Enable Fortis Theme...5 3.2 Enable
More informationAgenda2. User Manual. Agenda2 User Manual Copyright 2010-2013 Bobsoft 1 of 34
Agenda2 User Manual Agenda2 User Manual Copyright 2010-2013 Bobsoft 1 of 34 Agenda2 User Manual Copyright 2010-2013 Bobsoft 2 of 34 Contents 1. User Interface! 5 2. Quick Start! 6 3. Creating an agenda!
More informationDevelopment 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 informationResponsive 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 informationUsing and creating Crosstabs in Crystal Reports Juri Urbainczyk 27.08.2007
Using and creating Crosstabs in Crystal Reports Juri Urbainczyk 27.08.2007 Using an creating Crosstabs in Crystal Reports... 1 What s a crosstab?... 1 Usage... 2 Working with crosstabs... 2 Creation...
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 informationEloqua 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 informationAd Hoc Reporting. Usage and Customization
Usage and Customization 1 Content... 2 2 Terms and Definitions... 3 2.1 Ad Hoc Layout... 3 2.2 Ad Hoc Report... 3 2.3 Dataview... 3 2.4 Page... 3 3 Configuration... 4 3.1 Layout and Dataview location...
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 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 informationOfficial JSN Epic PRO v2.0 Configuration Manual version for Joomla! 1.5.x
Official JSN Epic PRO v2.0 Configuration Manual version for Joomla! 1.5.x This documentation included in the JSN Epic PRO Pack is release under Commercial Proprietary license and not intended for public
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 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 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 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 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 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 Portal User Guide. Version 6.0
Web Portal User Guide Version 6.0 2013 Pitney Bowes Software Inc. All rights reserved. This document may contain confidential and proprietary information belonging to Pitney Bowes Inc. and/or its subsidiaries
More informationOracle Business Intelligence Publisher: Create Reports and Data Models. Part 1 - Layout Editor
Oracle Business Intelligence Publisher: Create Reports and Data Models Part 1 - Layout Editor Pradeep Kumar Sharma Senior Principal Product Manager, Oracle Business Intelligence Kasturi Shekhar Director,
More informationHow To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
More informationThe 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 informationSage CRM. Sage CRM 2016 R1 Mobile Guide
Sage CRM Sage CRM 2016 R1 Mobile Guide Contents Chapter 1: Introduction to Sage CRM Mobile Solutions 1 Chapter 2: Setting up Sage CRM Mobile Apps 2 Prerequisites for Sage CRM mobile apps 3 Enabling users
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 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 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 informationMaking Web Application using Tizen Web UI Framework. Koeun Choi
Making Web Application using Tizen Web UI Framework Koeun Choi Contents Overview Web Applications using Web UI Framework Tizen Web UI Framework Web UI Framework Launching Flow Web Winsets Making Web Application
More informationUnderstanding Responsive Web Design (RWD) & Environment Aware Component Design Version: 2013.11.21
Understanding Responsive Web Design (RWD) & Environment Aware Component Design Version: 2013.11.21 Contents Contents Checklist Planning Responsive Web Design Overview What is responsive design? When should
More informationThe Da Vinci Coding: The Art of HTML
The Da Vinci Coding: The Art of HTML The Da Vinci Coding: The Art of HTML Design Author Graham Gnall LiveIntent Senior Platform Solutions Manager Contributing Editor Nick Dujnic Editors Julia Rieger Dave
More informationTEMPLATE GUIDELINES OCTOBER 2013
TEMPLATE GUIDELINES OCTOBER 2013 CONTENTS Introduction... 4 Creative... 5 Template Dimensions & Image Headers... 5 Preview Pane & Positioning... 5 Graphics... 6 Optimization and File Size... 6 Background
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 informationWEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
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 informationWeb Publishing Basics 2
Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What
More informationDreamweaver and Fireworks MX Integration Brian Hogan
Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The
More informationcss href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family
technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL
More informationEditing the Web Template Files
Editing the Web Template Files This tutorial describes the process of editing the PHP files to make global changes to the layout, color, font, and text within the CONTENTdm Web templates. This documentation
More informationDESIGN RESPONSIVELY 2012-08-18 DRUPAL CAMP CT RESPONSIVE WEB DESIGN AND DRUPAL PROJECT. Monday, August 27, 12
PROJECT DESIGN RESPONSIVELY RESPONSIVE WEB DESIGN AND DRUPAL DATE CLIENT 2012-08-18 DRUPAL CAMP CT SHAUN GORNEAU WEB STRATEGIST WEB SITE DESIGNER + DEVELOPER DRUPAL: THEMER, ARCHITECT + DEVELOPER SHAUN
More informationMobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00
Course Page - Page 1 of 12 Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Description Responsive Mobile Web Development is more
More informationThemes and Templates Manual FOR ADVANCED USERS
Manual FOR ADVANCED USERS Table of Contents Introduction... 3 Key Information... 3 Portal Structure... 4 Portal Structure: Template... 5 Overview... 5 1) Editing a Portal Template... 6 2) Adding a Portal
More informationCreative Guidelines for Emails
Version 2.1 Contents 1 Introduction... 3 1.1 Document Aim and Target Audience... 3 1.2 WYSIWYG editors... 3 1.3 Outlook Overview... 3 2 Quick Reference... 4 3 CSS and Styling... 5 3.1 Positioning... 5
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 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 informationThe Birth of Responsive Email Templates
The Birth of Responsive Email Templates The Birth of Responsive Email Templates The adoption of mobility solution at the enterprise level is simply becoming more relentless in order to engage more and
More informationFUNCTIONAL OVERVIEW VERSION: 1.0
FUNCTIONAL OVERVIEW VERSION: 1.0 DATE: 01.04.2015 Table of contents Innovations / changes in Shopware 5 3 Details technical updates 6 Details Shopware Responsive Template 7 2 Innovations / changes in Shopware
More informationPage 1. 1.0 Create and Manage a Presentation 1.1 Create a Presentation Pages Where Covered
Page 1 Study Guide for MOS Objectives in Microsoft PowerPoint 2013 Illustrated 1.0 Create and Manage a Presentation 1.1 Create a Presentation creating blank presentations 6 creating presentations using
More informationSE Ranking www.intellectsoft.co.uk Report
SE Ranking www.intellectsoft.co.uk Report Jul-31, 2015 - Aug-06, 2015 Intellectsoft UK http://www.intellectsoft.co.uk/ Aug-06, 2015 2/22 Intellectsoft UK (www.intellectsoft.co.uk) Report summary... 3 Rankings
More informationUse the Microsoft Office Word Add-In to Create a Source Document Template for Microsoft Dynamics AX 2012 WHITEPAPER
Use the Microsoft Office Word Add-In to Create a Source Document Template for Microsoft Dynamics AX 2012 WHITEPAPER Microsoft Office Word Add-Ins Whitepaper Junction Solutions documentation 2012 All material
More informationAppendix H: Cascading Style Sheets (CSS)
Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of
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 informationUsing Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
More informationCitrix 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 informationTHE 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 informationFundamentals of Web Design (One Semester)
Fundamentals of Web Design (One Semester) In this course students are introduced to the basics of web page design. Topics include information about the World Wide Web, copyright and e Commerce as well
More informationCustomising Your Mobile Payment Pages
Corporate Gateway Customising Your Mobile Payment Pages V2.0 May 2014 Use this guide to: Understand how to customise your payment pages for mobile and tablet devices XML Direct Integration Guide > Contents
More informationPrinciples 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 informationEnd User Guide SharePoint Web Parts Site Creation Package
End User Guide SharePoint Web Parts Site Creation Package SharePoint Web Parts User Guide / Table of Contents Page 1 of 3 Table of Contents Cover Table of Contents... 2 Site Creation Plus (Site Builder
More informationHow To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For
How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this
More information