Today’s objectives  Review CSS Selectors  Web Development process  Review: Layout and positioning  Measurement units  Images/Photoshop

RULES, SELECTORS, DECLARATIONS CSS

The Rule h1 {color : #c0c0c0; font-family : Arial; font-size : 2em; } Selector Declaration block Rule

The Declaration h1 {color : #c0c0c0; font-size : 2em; } p {font-family : Arial; } Brackets distinguish declarations | rules Colon separates property and values Semicolon separates declarations

TYPES OF SELECTORS CSS

Types of selectors  Tag or HTML Selectors: Page-Wide Styling  Class Selectors: Pinpoint Control  ID Selectors: Specific Page Elements/sections  Group Selectors: h1, h2, h3, h4, h5, h6 { color : #F1CD33; }  Child selectors: div > h1 {color : blue; }  Adjacent Siblings: h1+p {color : green;}  Attribute Selectors

Types of selectors | HTML | Tag h1 {color : #c0c0c0;} body {background-color : #FFFFFF;} p {padding : 10px;}

Types of selectors | Classes  Classes (apply to more than one type of element).mytext {font-family: Verdana; font-size: 14px;} Hello World Learning CSS

 Dependent Classes (when the class is applied to a specific tag -.hiLight only applies to h1 element) h1.hiLight {background-color : blue;} Hello World Types of selectors | Dependent Classes

Types of selectors | ID  ID selectors identify:  Major sections  Unique content | a rule to ONE element on a page.  Configured with #idname #banner { background-color : #FF00FF;}

Types of selectors | ID  Creates a rule for an id titled “banner”.  Red, large, italic font.  Applies to ID “banner” #banner { color : #FF0000; font-size:2em; font-style: italic; } Hello world!

HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.

HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday.

HTML Tree Ancestor to all tags Ancestor to h1, p, strong Siblings Child of Descendent of Descendent of and

HTML Tree  Ancestor: tag that wraps around another tag. ancestor of all other tags  Descendent: A tag inside one or more tags.  Parent: tag’s closest ancestor HOME  Child: tag directly enclosed by another tag. HOME…

Specificity | Descendent selectors  Specific descendent selectors override less specific selectors li a {color : green;} All anchors in line items are green ol li a {color : green;} Only anchors in line item in ordered lists are green

Selectors | Descendent selectors p.intro { color : red;} Hello World Any paragraph with.intro class will be Red. p.intro {color : red;} Hello World Any tag with.intro class that is in a tag will be Red.

Child selectors  div > h1 {color : blue; }  All heading 1 that are children of div will be blue. Hello world Hello everyone

Adjacent Siblings  A tag that appears immediately after another tag in HTML h1+p {color : green;} Paragraphs that are adjacent to heading 1 will be green.

ATTRIBUTE SELECTORS

Attribute Selectors  Format a tag based on any attributes it has. img [title] {border : solid 4px #EFEFEF;} All images with a title attribute will have a border

Attribute Selectors | ^ and $ Format external links: a[href^=" { color : yellow; } ^ - begins with Any link that begins with “ is yellow a[href$=".zip"] { color : green; } $ - Ends with Any link URL that ends with “zip” is green.

Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}  All images where src attribute contains “Ire” get a green, solid border.

Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}

Pseudo-Classes  a:link| a:link { color : #EFEFEF; }  a:visited | a:visited { color : #CCCCCC; }  a:hover| a:hover { color : # F33333; }  a:active | a:active {color : #B2F511;}  Hover: (these will also work)  h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }

Pseudo-Classes  Proper way to order four link pseudo-classes: 1. a:link { color: #F60; } 2. a:visited { color: #900; } 3. a:hover { color: #F33; } 4. a:active {color: #B2F511; }  If order is changed, the hover and active don’t work.

Pseudo-elements  :first-letter – p:first-letter {font-size : 2em; font-weight: bold; color: red;}  :first-line – p:first-line {font-size : 2em; font-weight: bold; color: red;}.hiLite:first-line { text-transform: uppercase; }

Pseudo-element | :first-child :first-child  the first of all children an OL may have. ol li:first-child { font-size:1.2em; } Item 1 Item 2 Item 3

Selectors   Type selectors to understand why they do

WEB DESIGN & DEVELOPMENT PROCESS

Development process  Developing a website generally involves: 1. Conceptualize and research. 2. Create and organize content. 3. Develop the “look and feel.” 4. Produce a working prototype. 5. Testing. 6. Launching the site. 7. Maintaining the site.

Development process Teague (2009): 1. Plan site 2. Build site 3. Deploy site 4. Iterate the process

Iterative design process 1. User Analysis: What to know about the users? 2. Task Analysis: What are users’ goals? Tasks? 3. Environment analysis: What are users’ surroundings and what impact do they have? 4. Recruiting users: Where can you find them? 5. Usability specifications: What specs will you choose for rating your site/software? McCracken, 2004

What is involved in the process? 1.Identifying needs and establishing requirements 2.Developing alternative designs to meet these needs 3.Building interactive prototypes that can be communicated and assessed 4.Evaluating what is being built throughout the process

Core characteristics of process 1.Users should be involved in the development of the project. 2.Specific usability and user goals need to be identified, clearly documented and agreed at the beginning of the project. 3.Iteration is needed through core activities.

PLANNING

Planning  Robbins (2007) suggests that b efore doing any development work, ask the client numerous questions related to:  resources,  goals, and,  audience – very important. Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Planning  Questions to ask clients during the research phase of design. Strategy  Why are you creating this web site?  What do you expect to accomplish?  What are you offering your audience?  What do you want users to do on your web site? And after they’ve left?  What brings your visitors back? Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Planning: Questions for clients General Site Description  What kind of site is it? (promotional? Informational?)  What features will it have?  What are your most important messages?  Who are your competitors? What are they doing right?  What could be improved upon? Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Planning: Questions for clients Target Audience  Who is the primary audience?  How Internet-savvy are they? How technically savvy?  What can you determine about user’s connection speed? Platform? Monitor size? Browser use?  How often do you expect them to visit your site?  How long will they stay during an average visit? Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Planning : Questions for clients Content  Who is responsible for generating original content?  How will content be submitted (process and format)?  How often will the information be updated (daily, weekly, monthly)? Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Planning : Questions for clients Resources  What resources have been dedicated to the project (e.g., budget, staff, time)?  Does site require content management system?  Who handles maintenance?  Is there a server for your site? Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Planning : Questions for clients Visual design  Envisioning a certain look and feel for the site?  Do existing standards (logos and colors) need to be incorporated?  Is site part of a larger site?  What are some other web sites you like?  What do you like about them?  What sites do you NOT like? Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Planning  Often large web development firms spend more time on researching and identifying clients’ needs than on any other stage of production.  They conduct case studies, interviews, and extensive market research. Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Planning  Must be clear about your expectations and resources early on in the process, particularly when attempting to work within a budget.

Analysis: Understanding problem So you examined:  Problem | Need | Context | Environment  Users  Tasks  Project Goals and objectives. Now, move to design

DESIGNING & PRODUCING

From Analysis/ Problem Space Conceptualizing design space Source:

Conceptualizing design space From Analysis/problem space to design space:  A thorough analysis or good understanding of the problem space helps inform the design space

Create and Organize Content  Collect and organize content  Always remember… Content is still king on the Internet

Plan site 1. Make sketches 2. Define site structure - 3. Decide page flow  Fixed width/fluid height  Fluid width/fluid height  Fixed width/fixed height  Fluid width /fixed height Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly.

Plan site 4. Make wireframes  Help in planning structure of pages  Serve as blueprints for development  Should include placement and measurement of elements in pixels  Wireframe Example Wireframe Example

Plan site | wireframes  Elements/information to include in wireframe:  Fixed/fluid layout  Widths  Heights  Margins/padding  Scrolls lines  Colors

Source: Heim, S. (2008), p. 190 Wireframes

Page size & Layout  Page layouts to accommodate users: Fixed width ( Fluid width ( Elastic – (

Plan site  Mood boards  Visual compositions (comps) Convey the visual design It is often useful to make alternative designs Photoshop/Illustrator, etc.

Flowchart symbols Source: Hannafin & Peck Blueprint/specifications

Flowcharts  Visio  PowerPoint

DESIGNING & PRODUCING Prototype | Model

Prototyping and construction Different kinds of prototyping low fidelity high fidelity Compromises in prototyping vertical horizontal

Macro Flowchart vertical

Macro Flowchart Horizontal

Flowchart Horizontal

Site Map Horizontal Vertical

Low-fidelity Prototyping Uses a medium which is unlike the final medium, e.g. paper, cardboard Is quick, cheap and easily changed Examples: Sketches of screens, task sequences, etc. Post-it notes Storyboards

Low-fidelity Prototype Source: Heim, S. (2008), p. 188

Prototypes Wireframe (web) Sketches of basic screen design and layout. Sketches of how users might progress through a task. Developed from flowcharts and low-fidelity prototypes Illustrator, PowerPoint, etc.

Source: Heim, S. (2008), p. 190 Wireframes

High-fidelity prototyping Uses materials that may be in final product. More like final system than low-fidelity. For a high-fidelity prototype, common environments include Adobe Flash and Visual Basic, Dreamweaver.

DESIGNING & PRODUCING Build site

Build  Cutting Chrome  Use background images  Transparent png  Photoshop/Illustrator, etc.  Use grids for layout (

Build  Create styles guide | Guide should include information about:  Topography – font families, sizes, styles  Colors – list colors used in site with hexadecimal and RGB values  List default styles – fonts, sizes, colors, backgrounds  Chrome – show images and file names.

Build  Prototype  Define HTML structure  Create CSS Organize CSS Segment or combine styles? - How will you handle this? Loading styles LINK? - How will you handle this?

TESTING & DELIVERY

Deploy  Alpha – site not released  Beta – site made available to public – not promoted.  Usability testing  Analytics  Iterations

LAYOUTS

Layouts  Fixed Width - regardless of the browser window’s width, the page content’s width remains the same.  Liquid. Design adjusts to fit the browser’s width  Elastic. A fixed width with type size flexibility.  Define page’s width using em values.  em changes size when the browser’s font size changes  Page width is based on the browser’s base font size.

</div Page Layout DIVs used often to section document DIVs given IDs CSS formats IDs or sections

Home About Buy Customer Service Page Layout Do not overuse DIVs If another element can be used, use it

1. BANNER 2. NAVIGATION 3. CONTENT 1.BANNER 2 3.CONTENT FLOAT LEFT L Normal Flow #nav {float : left;}

1.BANNER 2 3.CONTENT FLOAT RIGHT R Normal Flow 1. BANNER 2. NAVIGATION 3. CONTENT #nav {float : right;}

FLOAT Left & RIGHT 1.BANNER 3 4.CONTENT R 2 L Normal Flow (notice sequence of content) 1. BANNER 2. NAVIGATION 4. CONTENT 3. EVENTS #nav {float :left;} #events {float :right;} With left and right floats, content fills in the middle space

1.BANNER 4 3.CONTENT FLOAT Left & RIGHT R 2 LL 1. BANNER 2. NAVIGATION 3. CONTENT 4. EVENTS #nav {float :left;} #content {float :left;} #events {float :right;} Section 3 wraps to the right of section 2 Normal Flow (notice sequence of content)

1.BANNER 4. EVENTS 3.CONTENT Without Floats 2. NAVIGATION 1. BANNER 2. NAVIGATION 3. CONTENT 4. EVENTS Without floats, sections appear as they do in the normal document flow. Normal Flow (notice sequence of content)

Normal Flow | Box | Wrapper 1. BANNER 2. NAVIGATION 3. CONTENT 4. EVENTS Set properties at wrapper level to affect the properties of children of the wrapper.

Wrapper banner Nav Content Events Site Information

banner nav content events footer

LAYOUT | THE GOLDEN RATION

The Golden Ratio  Visual appeal based on ratio (i.e. The Golden Ratio).  Studies suggest the golden ratio plays a role in human perception of beauty.  A common ratio that is aesthetically pleasing. What is the number? Source:

The Golden Ratio  Take total width of your content area (e.g., 900px).  Divide that by  Divide 900px by 1.62 and get px.

The Golden Ratio = 555 px 900 PX

The Golden Ratio 900 PX 555 px 345 px

The Golden Ratio  Apply the Golden Ratio to other element's width in relation to its height or vice-versa.

The Golden Ratio W- 300 PX = 185 px H-185 PX

940PX 580PX

The Golden Ratio A + B B A Source: 1 : 1.67 = iPod

POSITIONING

Positioning  CSS offers four types of positioning:  Absolute  Relative  Fixed  Static

Absolute Positioning  Absolute :  Specify left, right, top, or bottom position.  Detached from normal flow of page.  Other elements fill-in the space left by an absolutely position element.  Absolutely positioned element is placed relative to the boundaries of its closest ancestor.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut abore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Position in Document Flow Absolute Positioning Original space in doc flow is filled in.

Relative positioning  Relative.  Element placed relative to its current position in the normal document flow.  Other elements do NOT fill in the space left in the document flow.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Position in Document Flow Relative Positioning Positioned Relative to its position in document flow

Positioning Rules  Element positioned relative to the browser window if:  it has an absolute position and  it’s not inside any other tag that has absolute, relative, or fixed positioning applied to it.  Element positioned relative to the edges of another element if:  it’s inside another tag with absolute, relative, or fixed positioning.

Fixed & Static Positioning  Fixed. Element is locked into place on the screen.  Static.  Normal positioning method – where an element appears in the normal document flow.

PADDING, MARGINS, AND BORDERS CSS

Padding, Margins, and Borders  Web browsers treat all html elements as boxes.  A tag is a box with content inside (text, graphic or other html element).

Padding, Margins, and Borders HELLO WORLD! TOP PADDING RIGHT PADDING LEFT PADDING BOTTOM PADDING TOP MARGIN BOTTOM MARGIN LEFT MARGIN RIGHT MARGIN RIGHT BORDER LEFT BORDER TOP BORDER BOTTOM BORDER Other Element

 Padding: space between the content and the content’s border.  Separates content from its border. HELLO WORLD! TOP BORDER PADDING Padding, Margins, and Borders

 Border: line drawn around each edge of the box.  Can be four sides, on any single side, or any combination of sides. HELLO WORLD! Padding, Margins, and Borders

Border style values:  none: Defines no border  dotted: Defines a dotted border  dashed: Defines a dashed border  solid: Defines a solid border  double: Defines two borders.  groove: Defines a 3D grooved border.  ridge: Defines a 3D ridged border.  inset: Defines a 3D inset border.  outset: Defines a 3D outset border. HELLO WORLD! Padding, Margins, and Borders

 Background-color: fills space inside border, including padding area.  Margin separates one element from another. Padding, Margins, and Borders

Margins HELLO WORLD! TOP MARGIN LEFT MARGIN RIGHT MARGIN Other Element BOTTOM MARGIN

 Padding adds space between the content, and the border.  Margins add white space (gutter) between elements. Padding, Margins, and Borders

 Four properties control padding: padding-top, padding-right, padding-bottom, and padding-left.  Four properties control margin edges: margin-top, margin-right, margin-bottom, and margin-left. margin-top : 5px; margin-right : 5px; margin-bottom : 5px; margin-left : 5px; padding-top : 5px; padding-right : 5px; padding-bottom : 5px; padding-left : 5px; padding: 10px 5px 5px 10px; margin: 0 10px 10px 20px; Padding, Margins, and Borders

margin-top : 5px; margin-right : 5px; margin-bottom : 5px; margin-left : 5px; padding-top : 5px; padding-right : 5px; padding-bottom : 5px; padding-left : 5px; padding: 10px 5px 5px 10px; margin: 0 10px 10px 20px; The order of the four values is: top, right, bottom, and left. TRouBLe - Top, Right, Bottom, and Left. Shortcut Padding, Margins, and Borders

 When value is 0, don’t need measurement unit (e.g., em, px).  Use margin: 0; instead of margin: 0px;.  When same value for all four sides, use a single value margin: 5px; Padding, Margins, and Borders

 When same value for both top and bottom and another value for left and right, use two values: margin : 0 2em;  Sets top and bottom margins to 0 ; left and right margins to 2ems. Padding, Margins, and Borders