D4912 – Website Rebranding, Day 1 Impact clarification

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

Cascading Style Sheets
Cascading Style Sheets
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
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.
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.
D4912 – Website Rebranding, Day 1 Impact clarification June 2006 V4.0.
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.
กระบวนวิชา 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.
Site Modules > Page Builder Access the Page Builder module through the Site Modules top navigation link. Access Page Builder from the Site Modules navigation.
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
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
ITP 104.  While you can do things like this:  Better to use styles instead:
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
CITY UNIVERSITY / Vysoká Škola Manažmentu.:IS Information Systems :. © Martina Cesalova, 2005 MS FRONTPAGE 4 1. Create a folder on L/BSBA/IS330/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.
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 Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Web Site Development - Process of planning and creating a website.
Microsoft Expression Web 3 – Illustrated Unit G: Designing Site Navigation.
REEM ALMOTIRI Information Technology Department Majmaah University.
Mr. Rouda’s CSCI 101 sections. Format of Every Page my page this is the body.
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.
Cascading Style Sheets (CSS) Internal Style Sheets Classes
Compatible with the latest browsers; Chrome, Safari, Firefox, Opera and Internet Explorer 9 and above.
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Web Development & Design Foundations with HTML5 7th Edition
Do you want to make info graphics for the US Election?
Web Development & Design Foundations with HTML5 8th Edition
Basics of Website Development
Advanced CSS BIS1523 – Lecture 20.
Web Development & Design Foundations with HTML5
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.
Web Development & Design Foundations with HTML5 7th Edition
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.
Links.
Affiliate Brand Guidelines
Creating a Webpage with External CSS
Web Development & Design Foundations with HTML5 8th Edition
Web Development & Design Foundations with H T M L 5
Links.
New Semantic Elements (Part 1)
Multipage Sites.
Presentation transcript:

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

Document change log Version Date Change Made Pages impacted 3.0 6/24 Logo replaced with updated logo that includes “Together with Nextel” tagline 3, 4, 5, 6, 7 4.0 7/8 Revised verbiage in footer to match new Brand-approved names. 7 Added information on the minimum size & clearance required for new Sprint logo 9 7/10 Added UE webserver URL (link to helpful page that includes CSS information, coded example of compliant page, logos, etc.) 10

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 Day 1 Sprint.com sprint.com/personal/ sprint.com/business/ sprint.com/about/ sprint.com/contact/

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, #000000 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/

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 Current 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) Day 1 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)

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 email 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 29 px 23 px 23 px

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: #333333 Link: #148AB2 Must show as hyperlink (underlined) Background = gradient image Area below the footer includes the copyright Color of text (non-link): #666666 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) V 4.0 clarification: footer text is aligned left V 4.0: Link verbiage & order of links changed per final Brand decision. sprint.com/legal/privacy.html sprint.com/legal/copyright.html sprint.com/contact/ sprint.com/legal/terms.html sprintstorelocator.com

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

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

Additional Information Helpful information stored on the UXD web page http://uewebserv.intranet.sprintspectrum.com:12983 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