Rapid Web Implementation using CSS2

1
Rapid Web Implementation using CSS2

• Maureen Murphy Rod Potter
• York University, CNS Development Services

2
The Story

• Who we are and what we do
• A new kind of project
• Development process
• Implementation
• CSS techniques and examples
• Problems work-arounds
• Resources
• Future Plans

3
Strategy / Background

• Our central web service provides webspace for
  1500 Faculty members, academic and
  administrative departments and student clubs.
• Interactive quizzes, maps and screensavers for
  Admissions, configuring blogs and bulletin
  boards, trouble-shooting HTML and scripting
  issues, implementing websites using Yorks web
  standards and a building a number of guerilla
  content management systems for various
  departments.
• In addition we host our top level home and
  navigation pages on this server.

4
Yorks Internal / External Webs

• In the spring of 2004 it was decided that York
  would investigate the advantage of hiving off a
  separate "External" website that would be
  designed to meet the needs of future students

5
A Different Kind of Project Team

• CNS Development Staff
• Admissions
• Marketing and Recruitment
• VP Student Services
• Chief Communications Officer and Communications
  staff
• Chief Information Officer
• Project Manager
• IBM (information architecture and design)

6
Our Web Development Process

• Project Planning
• Defining scope Determining resources Defining
  roles Setting timelines
• Information Architecture
• Content inventory interviews with information
  providers, key stakeholders, students and alumni,
  Develop hierarchy and labeling
• Page Design
• Navigational design, page grid structure,
  graphical elements
• Implementation Planning
• Determine tools, techniques, resources
• Build

7
Information Architecture
8
Page Design
9
Page Design
10
But how to implement?

• Basic HTML with included headers, footers, etc.
• Proprietary features of an HTML editor such as
  Dreamweaver templates or (shudder) Frontpage
  shared borders.
• Within the span of 4 weeks, configure a content
  management system and pour in all new content
• A combination of CSS with included common
  elements and HTML content areas. (XHTML
  Transitional)

11
CSS in Action

• Layout management
• Content Area
• Menu management / rollovers
• Issues and work-arounds

12
Layout Management

• 4 different layouts each using a different html
  template.
• But still just one CSS file used for positioning.

13
Layout Management
noinnernav.html
main.html
In one .css file (simplified) content
position relative left 161px width
410px content_extrawide position
relative left 10px width 710px
div
div
ltdiv idcontentgt
ltdiv idcontent_noinnernavgt
div
div
div
Example gtgt
wide.html
extrawide.html
div
div
ltdiv idcontent_extrawidegt
ltdiv idcontent_widegt
div
Example gtgt
14
Content Area

• Easily migrated from existing sites using cut
  and paste.
• Allowed for table layouts
• Maintained class names i.e. classheader.

Content
15
Menu Management

• Goals
• Make menus easy to manage using simple include
  statements.
• Implement desired rollover or image swap effect
  with out requiring script.
• Set and maintain menu states to provide visual
  feedback that would show users which page they
  had selected.

16
Menu Management

• In .html file
• ltbody bgcolor"FFFFFF" class"life fs"gt
• In navlist.txt file (simplified)
• ltli id"life"gt
• lta href"http//www.yorku.ca/web/
• futurestudents/life/"gt
• Student Life
• lt/agt
• lt/ligt

lt!--include virtual"/web/includes/global_nav.tx
t" --gt
lt!--include virtual"/web/includes/navlist.txt"
--gt
Example gtgt
17
Menu Management

• In .css (simplified)
• body.fs futurestudentslink background
  url(futurestudents-c.gif) no-repeat
• body.life life font-weightbold

lt!--include virtual"/web/includes/global_nav.tx
t" --gt
lt!--include virtual"/web/includes/navlist.txt"
--gt
Menu and Content Management via CSS
18
Issues and Work-Arounds

• There were many issues with Mac IE.
• Mac IE issues with dual selectors
  http//dhtmlkitchen.com/learn/css/multiclass/index
  2.jsp
• We found Mac IE worked when we changed the order
  in which body class tags were specified.
• Poor CSS support in Win IE? Given the set of CSS
  features we used, we did not have problems with
  IE 6.
• We gleefully bounce Netscape 4.x users to a
  please upgrade your browser page.

19
CSS Resources

• We had played with examples from a number of CSS
  sites including the following
• http//www.csszengarden.com/
• http//www.alistapart.com/
• http//www.zeldman.com/

20
Future Plans

• Possible integration with CMS (WebPal)
• Improve accessibility and add print-specific
  stylesheets
• Leverage "Generated content" when IE CSS
  compliance improves
• Your ideas and examples?