Customize Sakai SkinJune 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 http://sakaiproject.org (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) https://source.sakaiproject.org/svn/reference/trunk/docs/architecture/

• Other helpful documentation in Confluence: sakai.properties (Sakai 2.4 Admin Guide - Branding and Identity) http://bugs.sakaiproject.org/confluence/display/DOC/

Sakai+2.4+Admin+Guide+-+Branding+and+Identity

Sakai Skin Setup http://bugs.sakaiproject.org/confluence/display/ENC/Reskinning+Sakai

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:– http://burgoo.ummu.umich.edu/portal

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:

o FireBug: “Inspect” to understand relationship between markup/css o Web Developer Toolbar: adds a menu and a toolbar with very helpful tools such as

“Outline Block Level Elements”.o View Source Chart: display a page’s source code in a more readable format.

• HTML validator (also validates css)

• Production/Pilot Deployments of Sakai Worldwide:o View other skins for inspiration

http://bugs.sakaiproject.org/jira/secure/IssueNavigator.jspa?mode=hide&requestId=11294

• DG: User Interactiono Sakai Discussion Group on User Interaction

http://confluence.sakaiproject.org/confluence/display/UI/Home

Helpful Tools and Resources• Web Typography:

o Web Style Guide: Typographyhttp://webstyleguide.com/type/index.html

o HTMLSource: Web Typographyhttp://www.yourhtmlsource.com/text/webtypography.html

o Elements of Typographic Style Applied to the Webhttp://webtypography.net/toc/

o Typography for the Webhttp://www.flywebmaster.com/webdesign/tips/typography.php

• Web Graphics:o Web Style Guide: Graphics

http://webstyleguide.com/graphics/index.html

o Web Graphics Basicshttp://www.efuse.com/Design/web_graphics_basics.html

• Web Color:o moreCrayons

http://www.morecrayons.com

o Lynda.com web-safe color pallettehttp://www.lynda.com/hex.html

Questions? Suggestions?