1. FaCSIA Intranet Redevelopment Design & Layout using MOSS Evan Grimmett Lead Developer Leon Andersen Graphic Designer

2. FaCSIA Intranet (STAFFnet)

3. Where we've come from Working for peak Indigenous Govt agency for 6+ years Evan: Web developer (HTML/.NET/ASP/SharePoint etc) Leon: Web/graphic designer. Perpetuated practice of tables based mostly inaccessible websites. Discovered wonderful world of Web Standards, XHTML (structure) & CSS (presentation & layout) Became interested in web accessibility & usability. Realised the benefits to Australian Public web users. Taming Visual Studio to render lean, clean standards compliant HTML. Results: Sites passed W3C validation & conformed to WCAG Priority 1, 2+ Sites conformed to AGIMOs mandatory requirements for web accessibility. The world was a better place.

4. The merging of two departments OIPC (Microsoft) & FaCS (Notes) Executive direction: – to embrace MOSS 2007 (Beta) Strong themes developed from existing OIPC Intranet – to SharePointize our existing intranet sites and applications.

5. Purpose of new Intranet Move to MS Infrastructure Move away from Lotus Notes Applications Move off existing Intranet Aptrix CMS Establish a strong corporate look’n’feel for internal sites & apps – Recently redeveloped OIPC intranet used as template

6. Original OIPC Intranet

8. Why MOSS? Utilise Microsoft Infrastructure Content Management System Organisational Search Wide variety of collaboration functionality Workflows Existing.Net Development teams

9. Immediate realisations Limited control over output HTML, more taming to be done Desired look'n'feel not achievable. Standards compliance not achievable Level of accessibility required not achievable Lack of available online resources and development community knowledge (during beta) – More blogs and resources now available, eg. Css adapters Heather Solomon's blog Coming soon: Accessibility Kit for SharePoint

10. Working with what you've got became intimate with HTML & CSS. – Firebug or IE developer toolbar a must… worked out what overall look'n'feel was possible. room for control over page content and layout – ideal HTML & CSS created. – developers to emulate in SP

11. FaCSIA intranet (STAFFnet)

15. 3 rd Level

22. Site Structure Based on Publishing Site Created custom Site Definition

23. Content types Matched to different types of content and Page Layouts, eg: – General Content – News Article – Media Content – Organisation Information (Branch Info) – Job Vacancy

24. Design to Code Design had produced ‘ideal’ HTML for non- webpart areas – Header, footer, page layout Developers interpreted as best as possible to include SharePoint controls

25. Master Pages

26. Creating Master Pages Started from copy of default.master – One Master Page for full page width – One Master Page with left navigation Modified SharePoint controls – Removed SP Controls not required – Modifed properties of controls (Search box, Navigation, Breadcrumbs etc) Referenced custom stylesheet to override default styles with Staffnet specific styles Modified layout HTML surrounding SharePoint controls and placeholders Added custom footer with contact person details

27. Master Pages

28. Master Page – Full Width

30. Master Page – with Navigation

34. Creating Page Layouts Started from existing Page Layout as template Many types of Page Layouts, eg: – General Content – News Article – Online Staff Newsletter – Job Vacancy – Branch Page Type of SP controls related to Content Type

35. Page Layouts Embed required Publishing/SP Controls, eg: – HTML Content area (RichHtmlField) – Links (SummaryLinks) – Image (RichImageField) – WebPartZones Used Edit Mode Panel to display metadata field controls to authors while in edit mode Apply custom layout HTML – eg. Replaced tables with divs

36. Page Layouts - Home

39. Content Query Web Part Summary Link Web Part People Search Web Part Custom Web Part Custom Web Part

44. Page Layouts – Category (Level 2)

45. Category - 2 nd Level

47. Page Layouts

54. 3 rd Level

59. In Edit Mode

61. CSS we modified In the 12 hive (file system) – core.css – portal.css – controls.css – Other linked stylesheets In Style Library – StaffNet.css (new + override global classes)

62. CSS - Workarounds Used XSLT in webparts where possible to avoid nested tables

63. Themes We tried themes to apply styles Work with temporary file to see immediate results – then copy back Useful to apply to individual sites However subsites do not inherit parent site theme

64. Using XSL Style Sheets Used for many webparts, eg: – Content Query WP – Summary Links WP Found in Style Library folder of publishing site Can add new or modify existing XSL files to change HTML source output of controls – Used XSLT where available to modify standard table- based output to more semantic markup – Eg. Using rather than for lists Be careful of Edit mode XSLT of Controls

66. Page Layout – web parts with custom XSL references

67. Exported WebPart with custom XSL references

68. Item.xsl template

70. Added Accessible links through XSL

71. Some ‘Challenges’ experienced Built-in inline styles within controls WebParts and Zones always render a table Some webparts don’t expose xsl – Some hard-coded html within control rendering – eg. Image Web Part has, acting like placeholder when no image selected Text resizing – However were able to implement relative font sizes (em) for body content

72. Govt Standards/Accessibility Issues Table based Javascript reliance Large initial file downloads for css (~100 kb) & js (~250+ kb) – Javascript mostly used for site admin functionality – Workaround available to download core.js after initial page load

73. Tools used In-browser editing & config SharePoint Designer Visual Studio 2005 Notepad IE Developer toolbar FireBug (Firefox dev toolbar)

74. Deployment Install across environments – Developer local server – Test / Pre-Prod / Prod Provisioned files using Features, included: – Master Pages, Page Layouts, CSS, XSL, image files, webpart definitions, site templates, content types Packaged and Deployed all features/DLLs in a WSP file (SharePoint Solution Package)

75. Future... Continue towards standards compliance as updates become available Collaboration sites for  Groups  Branches  Sections  Project teams  Boards  etc

76. Useful Links Accessibility Kit for SharePoint (AKS) – To assist meeting W3C WCAG Priorities 1 & 2 – 1.0 in development, due November 27 th – http://www.codeplex.com/aks http://www.codeplex.com/aks Heather Solomon’s Blog – SharePoint Design – http://www.heathersolomon.com/blog http://www.heathersolomon.com/blog

77. Questions?