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

2. 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

3. 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

4. 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

5. 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!”

6. 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”

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

8. Examples of Customized Skins Lubeck University of Applied Sciences, Germany

9. Examples of Customized Skins Yale University, USA

10. Examples of Customized Skins Stockholm University, Sweden

11. 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

12. 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/ 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+Gu ide+-+Branding+and+Identity  Sakai Skin Setup  http://bugs.sakaiproject.org/confluence/display/ENC/Reskinning+Sakai

13. 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

14. 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

15. 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 http://bugs.sakaiproject.org/jira/secure/IssueNavigator.jspa?mode=hide&requestId=11294 DG: User Interaction oSakai Discussion Group on User Interaction http://confluence.sakaiproject.org/confluence/display/UI/Home

16. Helpful Tools and Resources Web Typography: oWeb Style Guide: Typography http://webstyleguide.com/type/index.html oHTMLSource: Web Typography http://www.yourhtmlsource.com/text/webtypography.html oElements of Typographic Style Applied to the Web http://webtypography.net/toc/ oTypography for the Web http://www.flywebmaster.com/webdesign/tips/typography.php Web Graphics: oWeb Style Guide: Graphics http://webstyleguide.com/graphics/index.html oWeb Graphics Basics http://www.efuse.com/Design/web_graphics_basics.html Web Color: omoreCrayons http://www.morecrayons.com oLynda.com web-safe color pallette http://www.lynda.com/hex.html

17. Questions? Suggestions?