D4912 – Website Rebranding, Day 1 Impact clarification June 2006 V4.0.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 3 – Web Design Tables & Page Layout
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Quiz #3 - CSS Lecture Code: Get Neighbors’ URLs for MP1
Cascading Style Sheets
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
HyperText Markup Language (HTML) Uses plain text to add markup instructions to a file. If you can't produce it with a standard keyboard, it can't go into.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Session 4: CSS Positioning Fall 2006 LIS Web Team.
SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.
Need to define two things: › The destination › Something to click on to get there  Tag is click here  Can be text, special character or image (next.
1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:
Unit 20 - Client Side Customisation of Web Pages
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
Designing a Classroom Web Site Using NVU Beginning Level.
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
Images in HTML PowerPoint How images are used in HTML.
NASRULLAH KHAN.  Lecturer : Nasrullah   Website :
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Tutorial 4: Working with Hyperlinks. Objectives Session 4.1 – Place bookmarks on a Web page – Create a link to a bookmark – Create a link to another Web.
 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
IT Introduction to Website Development Welcome!
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Images. Intro What is it? Getting your image Inserting Moving Resizing Cropping.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
Web Site Development - Process of planning and creating a website.
REEM ALMOTIRI Information Technology Department Majmaah University.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.
Revision Webpage design HTML.   FACE  Attributes  Marquee  Define the following terms.
Cascading Style Sheets (CSS) Internal Style Sheets Classes
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Do you want to make info graphics for the US Election?
Images in HTML PowerPoint How images are used in HTML
Introducing the World Wide Web
Links. Links Links Need to define two things: The destination Something to click on to get there Tag is click here Can be text, special.
Chapter 7 Page Layout Basics Key Concepts
Web Development & Design Foundations with HTML5 8th Edition
IBM Kenexa BrassRing on Cloud Responsive Apply: Visual Branding Tool
Fixed Positioning.
Creating a Webpage with External CSS
Links.
D4912 – Website Rebranding, Day 1 Impact clarification
Multipage Sites.
Images in HTML PowerPoint How images are used in HTML
Presentation transcript:

D4912 – Website Rebranding, Day 1 Impact clarification June 2006 V4.0

Document change log VersionDateChange MadePages impacted 3.06/24Logo replaced with updated logo that includes “Together with Nextel” tagline3, 4, 5, 6, /8Revised verbiage in footer to match new Brand-approved names /8Added information on the minimum size & clearance required for new Sprint logo9 4.07/10 Added UE webserver URL (link to helpful page that includes CSS information, coded example of compliant page, logos, etc.)10

Page 3 Topics for Discussion Global Navigation –Sites that use the correct current global nav (shown below) will need to: Add “Contact Us” (new URL shown below in green); change “About Sprint” to “About Us” Note that text changes and URL changes are not made by the CSS update. They must be made by development and/or content management systems. –Online typography, online color system detailed in Sprint Online Visual System Guidelines –Clicking on the global nav fully transitions the user to the new URL (does not open it in a new window) Sprint.com sprint.com/personal sprint.com/business Sprint.com/about Current Sprint.com sprint.com/personal/ sprint.com/business/ sprint.com/about/ sprint.com/contact/ Day 1

Page 4 Topics for Discussion Global Navigation for non CSS-compliant sites –Header is always 100% of window width. Header (global nav, logo & tabs or tab area) is 108 px high –Global Nav text is Trebuchet MS, 11px, # –11 px space between navigational name (i.e. “Personal”) and vertical pipe (“|”) –Logo size = 258px x 79px Do not put references to width, height and border attributes in the image element alt="Sprint" –Clicking on the global nav fully transitions the user to the new URL (does not open it in a new window) Sprint.com sprint.com/personal/ sprint.com/business/ sprint.com/about/ sprint.com/contact/

Page 5 Topics for Discussion Primary Navigation (tabs) – Sprintpcs.com –Sprintpcs.com tabs will change as indicated below –Other sites must change tabs to reflect new look & feel ONLY No other sites but Sprintpcs.com are required to change their primary tabs Current Day 1 Sprintpcs.com sprintpcs.com/mypcs* www1.sprintpcs.com/explore/ExploreHome.jsp sprint.com/business Sprintpcs.com/support (*manage1.sprintpcs.com if user times out on Manage) Current Sprint.com/personal/wireless/ Sprint.com/personal/wireless/support/ Sprint.com/personal/wireless/manage/ EXCEPT within Manage application. Within Manage, URL remains the same as today (manage1.sprintpcs.com)

Page 6 Topics for Discussion Primary Navigation (tabs) – tab construction & behavior –If CSS-compliant, new CSS will change tab look & feel for pcs sites –For other sites such as business, new tabs will have to be created Background images will need to be created by applications. If no design resources are available, requests can be made to UXD -Request needs to state application name and tab names -Requests should be sent to Prashanth via –Behavior/colors: Tabs (active): Font: TheSans Plain, 14px, #000000, white background. Tabs (inactive): Font: TheSans Plain, 14px, #999999, gradient background. Tabs (hover): Font: TheSans Plain, 14px, #666666, gradient background. –Spacing between each tabs' text and tab wall is 23px for all NON-PCS websites. –Tab height = 29 px. If application does not have tabs, tab area must still be part of header 23 px 29 px

Page 7 Universal footer Footer –Links shown below –Footer is always 100% of window width –Link color/behavior same as overall body link color/behavior Trebuchet MS 11px Link visited: #5C609E Link hover: # Link: #148AB2 Must show as hyperlink (underlined) –Background = gradient image –Area below the footer includes the copyright Color of text (non-link): # Background color: #F1F1F1 Text is Trebuchet MS 11px Text is aligned to the left –Clicking on the links fully transitions the user to the new URL (does not open it in a new window) sprint.com/legal/privacy.html sprint.com/legal/copyright.html sprint.com/contact/ sprint.com/legal/terms.html sprintstorelocator.com V 4.0: Link verbiage & order of links changed per final Brand decision. V 4.1 clarification: copyright footer text is aligned right

Page 8 Other colors Containers –Text: 11 px Trebuchet MS, white (#FFFFFF) –Background: #59639C –Exterior Border color: # –Interior Border color: #CCCCCC

Page 9 Additional Information Logo – Clear space and Minimum Size Source: June 22 Sprint Visual Identity Interim Guidelines

Page 10 Additional Information Helpful information stored on the UXD web page – –Provides CSS info and instructions, links to documentation, instructions on how to build the header if your application does not call the common.css files, provides alternative logos