Web Council - June 21, 2012

• Updating and changing main page to be responsive
• Also updating the header/footer wizard, making it easier to customize menus
• Updating brand a little

• Data comes from the Office of Planning and Budgeting's (OPB) Space Inventory Management (SIMS) database
• Joint project of OPB and UW-IT

• More detailed information is at https://wiki.cac.washington.edu/display/spacews/Space+Web+Service+Client+Documentation

• Near real-time getting data from SIMS DB
• Mapping possibilities
• Consistent access control
• Understands REST API, x-linking, multiple formats

• Business rules
  • No campus facility address available
  • sensitive room types removed
  • occupant persons not shown
• All Web Service Access must be approved by the Data Custodian (OPB)
  • Uses UWCA certs (apps) UW NETID (persons)

• Could this be the basis of a a campus wide room reservation and status system?
• Room reservations often are subject to funny little local rules
  • Such local rules are not in SWS
  • Does provide the organization or people who administer each room
• Would be nice to get the room schematics (available from classroom services) with room information
• Finders that could be built
  • Peoplefinder
  • Printerfinder

• UI architectural lead for all communication technology at Getty
• Work on taking comps to implementation
• Twitter @anotheruiguy

• The SASS Way - http://thesassway.com/
• SASS and Compass in Action by Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis - http://www.manning.com/netherland/
• Seattle SASS & Compass Meetup - http://www.meetup.com/SASSlang/
  

• "I want to write less code so I can write more code"
• Developers are really good at nuts and bolts functionality
  • They do not like CSS, it does not work like many other languages
  • CSS designed for simplicity; an optimum approach in 1994; start at the top, work way to the bottom, cumulative result is what happens
    • All other languages have evolved
    • Keep adding features to CSS but simple structure has not changed
• Syntactically Awesome Stylesheets SASS
  • developed 2008 by Hapton Catlin, Nathan Weizenbaun, Chris Eppstein
  • Chris created Compass as an Blueprint-like implementation of SASS
  • Rails 3.1 comes with SASS
    • SASS is not exclusive to Rails
      • SASS is breaking out into other environments (ASP, etc.)
  • You write SASS, run it through a processor, generates CSS
• Installing SASS
  • SASS is dependent on Ruby
  • Comes as a Ruby Gem
  • Compass is the same
• GUI apps that use SASS
  • Compass
    • compass.app
    • http://compass.handlino.com/
      • Works on mac, linux, pc
      • built in to ruby web server
      • LiveReload support
      • Compass extensions support
  • SCOUT
    • http://mhs.github.com/scout-app/
  • CodeKit
    • http://incident57.com/codekit/
  • LiveReload
    • http://livereload.com/
• Editors that support SASS
  • http://sass-lang.com/editors.html
• Process for using SASS
  • Create a SASS folder
  • Create a SASS file
  • Run process
  • outputs CSS
• Compass functions
  • Generates data URIs that embed graphics in CSS as binaries
  • Manages assembly of sprites
  • Updates CSS when SASS is updated
  • Simplifies background gradients
    • Instead of entering six or seven properties
    • Mixins - like a method or function
      • You just give parameters, it generates the specifics
• SASS and SCSS
  • (Sassy CSS) SCSS is a CSS-extension syntax that comes with SASS 3
  • Stuff you can do
    • Nesting
      • Instead of repeating selector series over and over in many rules, you can enclose a set in one rule
    • Parent references
      • Uses & special character
      • Can include browser (ie7)
    • Managing code duplication between stylesheets for different views
    • Variables
      • Can define variables to contain values, such as colors
      • Define values for each variable, then use variable name in SASS anywhere where that that value is needed
    • Mixins w/arguments
      • Like a function, accepts arguments
      • Define function, then use mixin with argument, then generate CSS

International Student Services Responsive Redesign - Joel Walters, Admissions

• New design will replace the current fixed design at http://iss.washington.edu/
  • Draft site is available at http://iss.zapto.org/
  • Will go public soon
• The ISS site is being converted to a responsive design, using Drupal 7 and the Zen theme and Zengrids responsive grid system
  • http://drupal.org/project/zen
  • http://zengrids.com/
• Why move to a responsive design?
  • Fixed width is not mobile friendly
  • "Content like water" Josh Clark (http://globalmoxie.com/) - Think about your content so it can flow across screen sizes
  • Less work to maintain than multiple sites
  • Site has seen a rapid growth of mobile visits
  • Time to think about mobile responsive themes
• Implementation
  • Drupal 7, Zen 5 responsive base theme
  • Zengrids.com HTML5
  • Mobile First = Content First = User First
  • High-DPI logo, buttons - Retina optimized
  • CSS-only collapsible search, main menu
  • Responsive slides on homepage responsiveslides.js
• Plans
  • Testing across browsers (Want to test with the browsers that account for 99% of the site visits)
  • User testing, iterative design refinements
  • Expect to go public within two weeks
• More about responsive design work
  • Everyone should visit http://futurefriend.ly/ - "Acknowledge and embrace the unpredictability of the future!"
  • Working a Drupal 7 responsive starter theme with UW look and feel