Jean Paul's Blog

There are 2 types of People in the World, One who Likes SharePoint and..

    Advertisements
  • Microsoft MVP

  • MindCracker MVP

  • CodeProject MVP

  • eBook on SharePoint 2010

  • eBook on Design Patterns

  • eBook on Windows Azure

  • NLayers Framework @ CodePlex

  • MSDN Forums

  • .Net vs. Java

    Due to Public Demand
  • Advertisements

Posts Tagged ‘branding’

Sleek SharePoint Pages!

Posted by Paul on February 3, 2016

In real-world projects I have noticed the following SharePoint Branding mistakes.

1. Inheriting a Publishing Page for a Fully Immersive UI where we don’t actually use any Publishing functionalities like Page Layouts, Approval Workflow, Content Authoring etc.

2. Using Content Editor web part to dynamically invoke an HTML file there by delaying loading through unwanted SharePoint stuffs.

Incurred Costs

This will have immediate costs of:

· Increased Development Time

· Reduced Performance

· Increased Download Size

This will have future costs of:

  • Forcing client to purchase SharePoint Standard/Enterprise editions rather using the Free Foundation

Requirement Context

The requirement context here is to have a Fully Immersive Page without SharePoint Branding and allowing REST Operations.

Key Solution

I am providing a Key Solution which is:

1. Sleek in SharePoint Branding

2. Applicable for Fully Immersive Pages

3. Minimal SharePoint Contents loaded

4. SharePoint Foundation compatible

Steps

Open a SharePoint Designer and Choose Site Pages > Page ASPX option. 

p1

Now, Open Designer and Go to Site Pages library.

image

You can see our page is listed there and the Content Type is of Wiki Page.  We don’t worry about that since we are not using any Wiki Page functionalities.  Plus, our page is SharePoint Foundation compatible.

image

You can also use HTML page instead of ASPX. In this case we need to change the Web Application property to allow HTML extensions to render instead of download & work with more challenges.

Now open the Page and choose Edit file option.

image

You will see the following page with read-only mode.

p2

Click on the Advanced Mode to edit the contents.

image

You will get the page in edit-mode as shown below.

p3

 

From the Immersive Page Perspective, We are expecting a Full Custom Page which does not require any SharePoint Branding or Ribbon elements. The above Page fits our requirement.

Following is the page content.

<%@ Page Language=”C#” %>

<%@ Register tagprefix=”SharePoint” namespace=”Microsoft.SharePoint.WebControls” assembly=”Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>

<html dir=”ltr” xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<meta name=”WebPartPageExpansion” content=”full” />

<meta http-equiv=”X-UA-Compatible” content=”IE=10″ />

<SharePoint:CssRegistration Name=”default” runat=”server”/>

</head>

<body>

<form id=”form1″ runat=”server”>

</form>

Your HTML content goes here..

</body>

</html>

You can save the page and test in browser. You can see now the SharePoint Branding elements got removed.

image

You can View the source. The source looks simple.

p4

Now you are ready to use the above Page Template for building the Fully Immersive Page with Responsive Or Non-Responsive web design.  Full Control! Sleek! Faster!

html

image

You can also use HTML page instead of ASPX. In this case we need to change the Web Application property to allow HTML extensions to render instead of download & work with more challenges.

The Challenge

Now we need to use JSOM or REST API on the ASPX page. Clearly, we cannot use API because it will throw lot of security errors. The solution is to include the Form Digest tag.

Form Digest tag marks the page with right Security Contexts. This will allow the page to do POST requests to modify the contents in SharePoint.

Following would be the modified code.

<SharePoint:CssRegistration Name=”default” runat=”server”/>

/_layouts/15/init.js

/_layouts/15/MicrosoftAjax.js

/_layouts/15/sp.core.js

/_layouts/15/sp.runtime.js

/_layouts/15/sp.js

Add Form Digest value too.

<form id=”form1″ runat=”server”>

<SharePoint:FormDigest runat=”server”></SharePoint:FormDigest>

Your HTML content goes here..

</form>

The additional contents added ensure that the Page is protected to Post data through APIs.

image

Since we are hiding SharePoint Ribbon, it will hide the User Display Name & Gear Icon too.  If you require these, I would recommend creation of a Custom DIV and Add those Items manually.

Insert Test

Now let us really test an item insertion. You can use the following link for that.

http://www.jeanpaulva.com/index.php/2016/01/23/insert-using-rest-api/

References

SharePoint Pages http://bit.ly/1SKXOrI

SharePoint Editions & Features http://bit.ly/1K0UyY5

Form Digest http://bit.ly/1QIKzWB

Summary

In this article we have explored a sleek way of developing Fully Immersive SharePoint Pages.

Advertisements

Posted in SharePoint, SharePoint 2013 | Tagged: , , | Leave a Comment »

Cost of SharePoint Branding

Posted by Paul on December 2, 2015

Cost of SharePoint Branding

Mere ASP.NET & HTML skills are not enough to work with SharePoint Branding. The Cost of improper branding will be sluggish page performance, unwanted content loading, unhappy user etc.

branding

SharePoint Branding Recommendations

Following are the recommended approaches for SharePoint Branding.

Item Description
HTML Page HTML Page (.html) is preferred if you are using a Full Page customization. In this way you are loading only necessary contents.
ASPX Page ASPX pages will contain lot of SharePoint Master Page contents along with the Images, CSS & JS files.  The recommended approach is to open the page in SharePoint Designer and remove the unwanted elements.
Master Page Custom Master Pages are recommended for Custom Layout scenarios.  Adding a custom master page for every scenario does not add value.
Design Manager Design Manager can be used to convert HTML pages to Master Pages.
Composed Looks Use Composed Looks instead of Custom Master Page if you wanted to just change the Color, Theme & Background images.
Web Part Zone Web Part Zone is only needed if you wanted your user to add custom web parts.  If there is no explicit requirement, remove the Web Part Zone from the page.  This will save from hassles in the future.
Content Editor Web Part Content Editor Web Part allows adding HTML contents from the User level. But for a Developer Content Editor Web Part is not recommended. Use direct HTML inclusion in the page.
SharePoint Ribbon SharePoint Ribbon is a Powerful thing. But you have to Hide it if you do not Need it. Else, you are attracting lot of problems like the User can delete the branded page etc.
Removal vs. Hiding Removal of page elements is advised over Hiding them dynamically at the client-side.  This will remove the Flickering effect & Improves page performance due to reduced contents.
HTML5 Application Cache Use cache manifest to specify offline availability of static files.  This will save lot of client & server cycles in multiple refresh scenarios.  Static Files involve CSS & JS files.
HTML5 Video Tag Try to use HTML5 Video tags instead of SharePoint Video infrastructure.  This will be lighter in footprint & server usage.  SharePoint Video infrastructure involves content types, metadata & streaming.
CSR Client Side Rendering with JS Link is recommended for modification of List View.
Responsive UI Responsive Web Design is recommended over Device Channel as it gives the same HTML code for all devices, Search engine friendly & lesser scripts.
Device Channels Device Channels have the overheads of custom master page creation although it reduces the size of the page.  Hence it is recommended only for low-bandwidth devices.
Search Display Templates Custom Search Display Templates can be used rather than creating a Custom search results page.
CDN Content Delivery Networks are recommended for quick retrieval of JS libraries when your customers are located around the world.
SOM Server Object Model code is least recommended as it involves Server-side execution and Reducing Compatibility with SharePoint Online.
Browser Support Internet Explorer still wins the Majority over Chrome when comes to SharePoint Intranet deployments. So never forget to Ensure Responsiveness & Clean the extra Errors & Warnings generated by IE.

image.png

I would recommend a 2-day SharePoint Branding Training before starting with the Actual Project.  This investment in the initial phase will return multifold in future.

For certification involving branding MCTS 70-448 is recommended.

References

http://www.jeanpaulva.com/index.php/2014/08/30/create-a-composed-look/

http://www.jeanpaulva.com/index.php/2014/08/05/sharepoint-2013-branding/

http://www.jeanpaulva.com/index.php/2014/02/21/responsive-web-design-vs-device-channels/

http://www.nothingbutsharepoint.com/2012/05/31/sharepoint-nothing-but-branding-aspx/

http://www.thesharepointmuse.com/2012/04/the-10-worst-mistakes-in-sharepoint-branding-and-ui-design/
Summary

In this post we have explored few SharePoint Branding aspects.

 

Posted in SharePoint 2013 | Tagged: , | Leave a Comment »

SharePoint 2013 Branding

Posted by Paul on August 5, 2014

In this article series I will take you through the Branding essentials of SharePoint 2013.

What is SharePoint Branding?

SharePoint Branding is the process of changing look and feel of SharePoint user interface using custom master pages, style sheets, images, JavaScript, JQuery etc.

image

Few of the branded sites are shown below.

image

What are the advantages of Branding?

A good branding leads to:

1. Better content presentation

2. Better navigation

3. Better look and feel

4. More browser support

5. Enable responsive web design

6. Increased user adoption

7. Hide SharePoint look and feel

What are the Skills needed for Branding?

You need to know HTML, CSS & Basic Scripting skills. Additional to that, SharePoint Branding knowledge is an essential skill to integrate the custom branding artifacts.

SharePoint Branding knowledge includes:

· Master Page location

· Master Page elements like Site Settings, Quick Launch etc.

· Design Manager expertize

· Composed looks

Do I need to be a Graphics Designer?

Not Needed. You can be a SharePoint Branding Expert who will work with another Graphics/Web Designer for collecting the HTML, CSS, Image files & integrating to SharePoint.

What are the new features of SharePoint 2013 supporting Branding?

SharePoint 2013 introduced lot of good features which makes branding a lot easier compared with the old versions, naming a few are:

1. Design Manager which helps in converting an HTML file to SharePoint Master page

2. Device Channels for enabling custom master pages based on user devices

3. Composed Looks for putting together branding elements like master pages, color palettes etc.

4. Look and Feel to apply a composed look, change color, background image etc.

You can access these pages from Site Actions > Site Settings menu.

image

image

Publishing feature needs to be activated for getting the Design Manager feature.

What are the Branding Elements in SharePoint 2013?

Following are the branding elements in SharePoint 2013:

1. Master Pages

2. Preview Files

3. CSS Files

4. Color Palettes

5. Font Palettes

6. Images

image

What is Theme in SharePoint 2013?

The term Theme is defined to group the color & font palettes.

You can access the same from Site Actions > Site Settings > Theme page as shown below.

image

References

http://msdn.microsoft.com/en-us/library/office/jj733518(v=office.15).aspx

Summary

In this article we have explored an overview about SharePoint 2013 branding.

Posted in SharePoint, SharePoint 2013 | Tagged: , , | Leave a Comment »