Customize Sakai Skin June 14, 2007 Julie Mai, Stanford University Gonzalo Silverio, University of Michigan

Agenda Survey results Examples of customized skins Getting started: where to begin? Default Sakai skin: what can be modified? Best practices Helpful tools and resources for customizing skin

Survey Goals Better understand the process of customizing out-of-the box skin: Who is doing this work How long is the process Tools and resources used Areas for improvement

Survey Results Number or respondents: 18 Wide range of skills –Instructional technologist, user support, graphic designer, webmaster, software engineer, UI developer –34% have minimal experience with X(HTML) and CSS, rely on WYSIWYG editor Types of modifications (based on v2.3.x): –53%: slight modifications to the layout, color scheme, typography; gateway page: major modifications –42%: complete rework of the default skin

Survey Results Time spent on customizing skin: –Varies depending on tasks: 1-3 days to > 1 week Tools used: –Dreamweaver, BBEdit, EditPlus, Notepad, TextMate, Photoshop, Fireworks, Firebug, CSS Viewer Suggestions for improvement: –“It works very well for us! It’s pretty good and straightforward” –“Since our instance of Sakai is shared between 19 schools, we want our overall brand to be part of the initial logon but individual sites are branded based on the sponsoring institution so each institution also has its own skin. It works well for us!”

Survey Results Suggestions for improvement (continued): –Improve documentation: nearly 50% didn’t know documentation existed (“Knowing about documentation would have helped”) make it more detailed: “to change the color of this link, go to line 45 in portal.css” “a simple explanation of UI changes between versions is most helpful for upgrading an institutional skin to a new Sakai version” –More variety in out-of-the-box skin templates that have different layouts –Have a Sakai tool for administrators that allow you to easily make CSS changes through a web interface –“Move away from frames would be nice”

Examples of Customized Skins Out-of-the-box Sakai skin (v.2.3.x)

Examples of Customized Skins Lubeck University of Applied Sciences, Germany

Examples of Customized Skins Yale University, USA

Examples of Customized Skins Stockholm University, Sweden

Getting Started Download “sakai-demo” at (pre-built Sakai with Tomcat and a simple configuration): TOMCAT_HOME/webapps/library/skin -tool_base.css default -portal.css -tool.css -access.css images

Getting Started Download skin documentation associated with each Sakai release in Confluence:  sakai_skin.doc (Changing the appearance of the Sakai Portal and Tools)  Other helpful documentation in Confluence:  sakai.properties (Sakai 2.4 Admin Guide - Branding and Identity)  ide+-+Branding+and+Identity  Sakai Skin Setup 

Default Skin Demo: What Can Be Modified Setting up sakai.properties settings Modifying the skin - demo of small / medium / large effort and change To follow remotely: –

Best Practices Save copy of default folder / backup your work Comment your local changes Develop for IE first and then for other more compliant browsers (IE 7 issues) Avoid overlapping background and foreground images Beware of float drops, inheritance, other flammable materials

Helpful Tools and Resources A good CSS editor Firefox extensions/add-ons: oFireBug: “Inspect” to understand relationship between markup/css oWeb Developer Toolbar: adds a menu and a toolbar with very helpful tools such as “Outline Block Level Elements”. oView Source Chart: display a page’s source code in a more readable format. HTML validator (also validates css) Production/Pilot Deployments of Sakai Worldwide: oView other skins for inspiration DG: User Interaction oSakai Discussion Group on User Interaction

Helpful Tools and Resources Web Typography: oWeb Style Guide: Typography oHTMLSource: Web Typography oElements of Typographic Style Applied to the Web oTypography for the Web Web Graphics: oWeb Style Guide: Graphics oWeb Graphics Basics Web Color: omoreCrayons oLynda.com web-safe color pallette

Questions? Suggestions?