1 / 77

FaCSIA Intranet Redevelopment Design & Layout using MOSS

FaCSIA Intranet Redevelopment Design & Layout using MOSS. Evan Grimmett Lead Developer. Leon Andersen Graphic Designer. FaCSIA Intranet (STAFFnet). Where we've come from. Working for peak Indigenous Govt agency for 6+ years Evan: Web developer (HTML/.NET/ASP/SharePoint etc ) Leon:

miller
Download Presentation

FaCSIA Intranet Redevelopment Design & Layout using MOSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. FaCSIA Intranet RedevelopmentDesign & 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

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

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

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

  10. FaCSIA intranet (STAFFnet)

  11. 3rd Level

  12. 3rd Level

  13. 3rd Level

  14. 3rd Level

  15. 3rd Level

  16. Site Structure • Based on Publishing Site • Created custom Site Definition

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

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

  19. Master Pages

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

  21. Master Pages

  22. Master Page – Full Width

  23. Master Page – Full Width

  24. Master Page – with Navigation

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

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

  27. Page Layouts - Home

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

  29. Page Layouts – Category (Level 2)

  30. Category - 2nd Level

  31. Page Layouts

  32. Page Layouts

  33. Page Layouts

  34. Page Layouts

More Related