How to implement responsive design into SharePoint 2013 masterpage

This is a demo on how you make your SharePoint 2013 responsive to any device. I am going to implement Skeleton responsive design framework into SharePoint 2013 by using “Design manager”. Design manager is the new way of implementing design and page layouts to SharePoint.

1. You download the responsive design from here

2. Go to your site collection and click the settingsbutton (The gear icon on your top right side). And select “Site Settings”

3. Under the category “Look and Feel” you could find “Design manager”. If it’s not there, you have to activate the Publishing future.

4. Go to stage 3. Upload Design files. Before we upload the design files (aka Skeleton) we need to do some modifications to the css and html code.

5. Open up Skeleton folder on your computer. In the folder you will find the index.html page. You must open this file with some editing tool, I will use Notepad++

6. Change line 1 from <!DOCTYPE html> to <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

7. Remove all of the if and endif IE tags!

<!–[if lt IE 7 ]><html class=”ie ie6″ lang=”en”> <![endif]–>
<!–[if IE 7 ]><html class=”ie ie7″ lang=”en”> <![endif]–>
<!–[if IE 8 ]><html class=”ie ie8″ lang=”en”> <![endif]–>
<!–[if (gte IE 9)|!(IE)]><!–>

8. Remove everything from line 58 (<div class=”one-third column”>) to line 64 (</div>)

9. Go back to the “Design manager” and click on https://contoso.sharepoint.com/_catalogs/masterpage/

10. Upload the files from Skeleton folder to the SharePoint masterpage folder

11. Go to in Design Manager and select “Stage 4: Edit Master Pages”. Click on “Convert an HTML file to a SharePoint master page”

Design Manager

12. Navigate to Skeleton folder and select index.html, and click on the button “Insert”

13. The status of the masterpage should be “Conversion successful” if not, you must check your index.html file.

14. To implement navigation and masterpage stuff, you must click on the index name.

15. Click on “Snippets” on your right top side and click on “Top navigation” button. Copy the HTML snippet.

snippet

 

16. Open the file from SharePoint folder, so you can change the masterpage directly.

OpenWidthExplorer

17.  On line 136 past the snippet. You have now created a responsive master page.

codeStuffResponsive

You have to change the index.html with your own title, favicon, and additional masterpage branding. The menu is not responsive, and you need to create some page layouts. I will blog about this later… I hope you have enjoyed this.. Bye for now.