Understanding the Design Manager
Design Manager is primarily meant to help the users of SharePoint create custom designs and achieve the respective goals if they want SharePoint 2013 to represent the brand of the organization. It comes up as a particular feature in SP 2013, paving the way for a completely customized, pixel-perfect outcome using the familiar web designing tools. As a publishing feature, it is available in the publishing sites in both Office 365 and SP server 2013.
This extremely useful feature allows the creation of visual design for websites using the web designing tools and HTML editor. Only HTML and CSS can be used after which the design has to be uploaded into SP. Basically, it enables management of each aspect of a custom design.
So, designers using this excellent feature will have to precisely undertake the following activities:
It is essential for the SharePoint 2013 users to be aware of the usage of the feature in implementing designs. On looking at the feature, one gets to see a series of links representing the high-level tasks to be performed. Following is a step-by-step sequence in which the task of implementing a design is executed with success:
Prior to Making Use of Design Manager
Even before you start using the feature, you have to create an individual design or use a ready-made website template. While mocking up the sites in HTML and CSS, you will come across certain HTML files implementing designs for the particular way in which you want the different pages to appear. You also need to take the necessary SharePoint permissions, more particularly, you have to be at the Designer permission level to use the feature.
Management of Device Channels
Before starting right away with the task of designing your site exploiting this essential feature, you need to take into account the specific devices to be targeted and the kind of user experience on each of them. Once you have considered the specific device channels, it is time to use multiple ways in rendering a single publishing site by means of mapping varying designs to equally varying devices.
Now, the device channels, which are created as well as stored in the SP list, have ranking and therefore, the order of the same also matters. The inclusion rules are also processed accordingly.
Uploading the Designed Files
Once the designing is done, the designer can use any HTML editor of his preference and work with files locally on the specific computer. However, these files need to be uploaded to the Master Page Gallery of the SP site so as to enable the feature to convert, preview and at the same time, polish the already created design.
The best- possible way to upload as well as continue working on these files is by mapping a drive on the computer to the Master Page gallery of the SP site. This paves the way for a folder on the computer to be connected to the Master Page Gallery. The result is that one can work on files that are present on the server in SP 2013 provided that they are local files.
Editing the Master Pages
The next task is to create a fully branded master page containing all of the functionality of SharePoint that one wants. The steps through which the editing is done are:
In the event of using the on-premises installation of the SharePoint server, one has the option of using the Content Search Web Part along with a few other search- driven web parts. This helps in the display of the results of the search queries as content on the pages. Now, the search-driven web parts make use of the display templates for two main purposes. These are firstly to map managed properties returned in the search result items to properties that are available for JavaScript. This includes any custom JavaScript that one chooses to implement. The second purpose is to make use of CSS and HTML to find out how these properties are displayed.
Editing Page Layouts
The process involving the creation of page layout in Design Manner is somewhat different from that of creating a master page. First, a page layout needs to be made using the .aspx file and HTML file. Following this, the associated HTML file has to be edited from the mapped drive in the HTML editor. The feature ensures that the page layout is created in a manner that the correct set of page fields get added to the page layout.
Apart from the above-mentioned steps, creating themes and composed looks, publishing and applying the designs and creation of the package of the same are the final steps to be taken when it comes to using Design Manager in SharePoint 2013 development projects.
We provide SharePoint CMS customization services. If you would like to know more about the expertise of our SharePoint developers, please get in touch with us at Mindfire Solutions.
Design Manager is primarily meant to help the users of SharePoint create custom designs and achieve the respective goals if they want SharePoint 2013 to represent the brand of the organization. It comes up as a particular feature in SP 2013, paving the way for a completely customized, pixel-perfect outcome using the familiar web designing tools. As a publishing feature, it is available in the publishing sites in both Office 365 and SP server 2013.
This extremely useful feature allows the creation of visual design for websites using the web designing tools and HTML editor. Only HTML and CSS can be used after which the design has to be uploaded into SP. Basically, it enables management of each aspect of a custom design.
So, designers using this excellent feature will have to precisely undertake the following activities:
- Grasping and understanding the main SP design concepts
- Creating a mock-up of the design in CSS and HTML
- Implementing the same utilizing the Design Manager feature
Prior to Making Use of Design Manager
Even before you start using the feature, you have to create an individual design or use a ready-made website template. While mocking up the sites in HTML and CSS, you will come across certain HTML files implementing designs for the particular way in which you want the different pages to appear. You also need to take the necessary SharePoint permissions, more particularly, you have to be at the Designer permission level to use the feature.
Management of Device Channels
Before starting right away with the task of designing your site exploiting this essential feature, you need to take into account the specific devices to be targeted and the kind of user experience on each of them. Once you have considered the specific device channels, it is time to use multiple ways in rendering a single publishing site by means of mapping varying designs to equally varying devices.
Now, the device channels, which are created as well as stored in the SP list, have ranking and therefore, the order of the same also matters. The inclusion rules are also processed accordingly.
Uploading the Designed Files
Once the designing is done, the designer can use any HTML editor of his preference and work with files locally on the specific computer. However, these files need to be uploaded to the Master Page Gallery of the SP site so as to enable the feature to convert, preview and at the same time, polish the already created design.
The best- possible way to upload as well as continue working on these files is by mapping a drive on the computer to the Master Page gallery of the SP site. This paves the way for a folder on the computer to be connected to the Master Page Gallery. The result is that one can work on files that are present on the server in SP 2013 provided that they are local files.
Editing the Master Pages
The next task is to create a fully branded master page containing all of the functionality of SharePoint that one wants. The steps through which the editing is done are:
- Conversion of HTML file into a SP master page
- Previewing the master page while also facilitating fixing of the possible issues
- Addition of the SP snippets to the master page
In the event of using the on-premises installation of the SharePoint server, one has the option of using the Content Search Web Part along with a few other search- driven web parts. This helps in the display of the results of the search queries as content on the pages. Now, the search-driven web parts make use of the display templates for two main purposes. These are firstly to map managed properties returned in the search result items to properties that are available for JavaScript. This includes any custom JavaScript that one chooses to implement. The second purpose is to make use of CSS and HTML to find out how these properties are displayed.
Editing Page Layouts
The process involving the creation of page layout in Design Manner is somewhat different from that of creating a master page. First, a page layout needs to be made using the .aspx file and HTML file. Following this, the associated HTML file has to be edited from the mapped drive in the HTML editor. The feature ensures that the page layout is created in a manner that the correct set of page fields get added to the page layout.
Apart from the above-mentioned steps, creating themes and composed looks, publishing and applying the designs and creation of the package of the same are the final steps to be taken when it comes to using Design Manager in SharePoint 2013 development projects.
We provide SharePoint CMS customization services. If you would like to know more about the expertise of our SharePoint developers, please get in touch with us at Mindfire Solutions.
No comments:
Post a Comment