Today I attended the session “Best Practices for designing websites with SharePoint 2013”. It was a really interesting session that included good demos of the new design process of SharePoint 2013.
Some of the important changes of the basic web site functionality are:
- No more tables for wp and zones (Yes!!!)
- Client-side rendering with the Content Search Webpart
- CSS is completely re-written and simplified (!)
- Support for friendly URLs (no more “/pages”!!)
There is support for a completely new design process in SharePoint 2013. This is administered by the new Design Manager (see the figure below). The recommended process for designing a web site in SP2013 includes:
- Create a layout html page in your favorite html design tool (Dreamweaver, Visual Studio, Notepad, etc.)
- Run the auto-convert function that creates a SharePoint master page of the html layout page and inserts code snippets to the html page. It includes code for ribbon, placeholder main, etc., and enables you to put these where you want to in the html layout page. A server based preview can be done directly from within SharePoint
- Use the new Snippet tool to insert snippets to the layout page and the generated master page. Snippets can be for example SharePoint navigation, search box, etc., etc. There are lots of built-in snippets, and you can also create your own
- Create display templates (more about this in a later post)
- Create page layouts (more about this in a later post)
- Publish and apply design to the live site
- Create a design package automatically. A wsp solution file is genereated and only the neccesssary files are included.
This new tool (the Design Manager), enables us to let a web designer build a layout page in clean HTML and a SharePoint developer can take over, import it, and even add it to his SharePoint project in Visual Studio for packaging and source control handling.
umeaworks 