The technique that makes a web design layout respond to any screen size and orientation (landscape or portrait) is called Responsive Design. By using this technique you will be able to display your content correctly to all users by using fluid grids, queries and images to fine-tune the design to accommodate screens of different sizes using CSS3-based media queries.
Responsive design so far is the hottest topic of the year amongst web designers, along with the sudden increase of various mobile devices like smart phones, tablets and gadgets which have different screen sizes.
Basically, Responsive design removes the need for mobile versions of your website making your website future-proof for the new types of mobile devices.
The following free Responsive SharePoint theme will introduce you to a world of fluidity that would change your perspective (and stereotype) on what you can do with SharePoint.
This theme is ready to be deployed with minimum effort so you can have a responsive SharePoint-based website ready to go in less than 20 minutes.
At the time this article was posted, there were only few responsive SharePoint-based websites showcased on TopSharePoint.com, that proves how new this technique is in the SharePoint branding community.
We truly hope this free SharePoint theme will help you get started with responsive design and we expect to see some of your customizations popping up all over the place.
You can use the theme for free and without any restrictions. However, it is forbidden to sell or redistribute the theme without TopSharePoint.com permission. You may modify the theme as you wish at your own risk.
This work is licensed Creative Commons Attribution-Share Alike 3.0 License.
Theme Features:
- Fluid & Responsive Web Design
- Two-columns
- HTML5 & CSS2/CSS3 based
- Two master pages (Main Master Page and Search Master Page)
- Two page layout
- Responsive Slider – Flexslider – jQuery-based Slider (Flexslider)
- Top and left dynamic navigation
- Ideal for any screen resolution (automatically adjusting to different screen resolutions)
- Compatible with modern browsers (tested successfully on Chrome, Safari, Firefox 12, IE9)
- Suitable for small SharePoint 2010 Publishing Sites
Instructions
To enable the Responsive theme for SharePoint 2010 follow these simple steps.
Download the Responsive.zip file and extract the files.
There are three folders in the zip file:
MasterPages folder contains two master pages. responsive.master, the general master page used across the site, and the search master page responsive-search.master. Create new Blank Master Page in SharePoint Designer and Copy&Paste responsive.master code into it. Check the master page in and make sure you publish and approve it.
Page Layouts folder contains two custom page layouts (Responsive-Home.aspx and Responsive-Main.aspx) created for this theme. Responsive-Home.aspx is used for the homepage with the necessary scripts for the slider and Responsive-Main.aspx page layout is used across the site.
Import these two custom page layouts into “Page Layouts” site objects in SharePoint Designer by creating New Page Layouts and Copy&Paste the code into each page layout.
And finally, the third folder called responsive contains a css folder, images folder, js folder and html folder with the slider and boxes used on the homepage.
Place responsive folder under your site root. Your site root is located here: C:/inetpub/wwwroot/wss/VirtualDirectories/80 (or whatever port you’re using for the site). Make sure Network and Network Service accounts have read permissions for this folder.
Once all the files are placed correctly, it is time to set the responsive.master as the default master page.
Go to your site homepage and click on Site Actions >> Site Settings.
Under “Look and Feel” click on “Master page” and under Site Master Page select responsive.master and click OK.
Go back to the Site Settings and click on “Page layouts and site templates”. Make sure you have the “(Article Page) Responsive-Home” and Responsive-Main on the right side pane for Page Layouts.
Go to your site and edit all the pages to inherit the custom page layout “Responsive-Main”, except for the homepage which should inherit the Responsive-Home page layout.
Now, we need to take care of the homepage.
Navigate to the homepage and edit it: Site Action >> Edit Page. Click in the Page Content area and look for HTML markup button on ribbon. Select Edit HTML source and in the new pop-up window Paste the home.htm code, provided in the package under html folder. Click OK and Submit and Approve the page.
And finally let’s take care of the Search page.
We need to change the search results page first. On the homepage go to Site Actions >> Site Settings and under “Site Collection Administration” click on “Search settings”. Under “Site Collection Search Results Page” change the default setting to “/Search/results.aspx” and click OK. In order to see the “Site Collection Administration” option you need to be a site administrator.
Next, go to SharePoint Designer and Open Site (http://yourdomain.com/Search). Under “Site Objects” click on Master Pages and import responsive-search.master into the “Master Page” for Search site by creating a new Blank Master Page and Copy&Paste responsive-search.master code into it. Right-click on the Responsive-Search.master and pick “Set As Custom Master Page”.
And, you’re done! Enjoy the first usable “out-of-the-box” responsive SharePoint 2010 theme.
If you like the theme don’t forget to leave a comment or maybe you would like to show your appreciation and buy me a beer! Thank you and stay tuned for more!
Download Responsive Theme for SharePoint 2010 Publishing Sites
I tried to implement your solution on my SharePoint Online site. When I navigate to the home page to set the layout, I get a File Not Found error. I am thinking this may have something to do with my site collection is http://URL/sites/responsive/ and it seems you have set the links in your solution to point to a site collection starting at the root (http://URL/)
I updated every link in the master page, layouts, etc. that contained a link to the ‘responsive’ folder containing the images, etc. However, I am still getting the error. Can you suggest another location I can look?
Daniel, we developed and tried the theme for SharePoint 2010 Publishing Sites not SharePoint Online. Anyways, try the page layouts as well. Good luck and keep us posted.
So what’s the trick to getting the FlexSlider to work? I’m not seeing the jQuery working at all and was hoping you might post some more details on what it takes to get it working. All I get is the images stacked on one another. Any idea?
Nevermind… I didn’t have the right page layout set. 
Hi there, I am trying to implement your Responsive Theme, but I keep getting an error with corellation ID, the log info from the CID is as follows:
System.IO.FileNotFoundException: The file /_catalogs/masterpage/_controltemplates/Welcome.ascx does not exist
I am running SP2010, I created a simple publishing site to test with. Any ideas whats up?
Jason, it looks like you’re missing a page layout. Welcome Page Layout?
That is abundantly clear. I’ve followed your steps outlined on this page, to rule out any incorrect steps taken, I’ve attempted this on 3 seperate test farms, the result is always the same.
I am not extremely experienced with sharepoint, I have only 1 year of hands on with the product, so I will admit the final step, to me, is fairly vague:
“And finally, the third folder called responsive contains a css folder, images folder, js folder and html folder with the slider and boxes used on the homepage.
Place responsive folder under your site root. Make sure Network and Network Service accounts have read permissions for this folder.”
All of the other steps with the highlight markers etc, to be honest were simple, oddly enough the last step is the only step I would have required a walkthrough with. What would be the most straightfoward method of placing this responsive folder at the root of the site?
Template is great. Just one issue with text colors when accessing some of the admin pages, eg, Site Actions->View All Site Content. Some of the libraries listed used white text instead of blue (not sure why – think they may be the auto-generated libraries). Trouble is, I can’t see them as they are white text on white background.
Also happens when i insert a link – the dialog box that comes up has white text on white background in the left nav bar .
I have set responsive.main as both the site master page and system master page – should I have done that?
Jason, your site root is located here: C:/inetpub/wwwroot/wss/VirtualDirectories/80 (or whatever port you’re using for the site) Place the responsive folder there and make sure Network and Network Service accounts have read permissions for this folder.
Peter, do not use the Responsive theme for administration site.
Hey, I have an update here concerning the master pages.
I had to add ~/ to the Register line of: Welcome, MUISelector and DesignModeConsole. Then finally the page worked.
I’m curious as to why I had to take this step, but more curious about exploring the Responsive page and layouts 
thanks for the help.
Cheers
Will this work on sharepoint 2007?
bizio, this theme has only been tested on SharePoint 2010 (SharePoint 2010 Publishing Sites)
Thank you very much for sharing this themes! Great Job!
One question here. I just wonder why the current user is not showing up. It would be great if it will still show up in the opposite side of Site Actions.
Ad
Hi,
Thanks for this theme!
However when browsing the site from my iPhone I get redirected to a mobile site, url example: Http://mysite/_layouts/mobile/mblists.aspx
How do I turn this off? Possible?!
thanks,
KAM
For anyone else, the solution is to find the client browser entry in the browser cap file and set isMobile to False.
thanks
Any where I can inject this css to hide quick launch?
/*–Hide Quick Launch –*/
#s4-leftpanel{
display:none
}
.s4-ca{
margin-left:0px
}
any help/suggestion how to would be very much appreciated!
Ad
Kam, take a look at the latest post: Turn Off Mobile Browsing in SharePoint 2010 http://www.topsharepoint.com/turn-off-mobile-browsing-in-sharepoint-2010
Ad, just plugg your CSS code into the style.css. Make sure you ad the important! attribute: .s4-ca{margin-left:0px important!}
Great Job Luis Kerr!
THANKS ALOT!
Your beers are on the way
Ad
Hi Luis,
I’m confused with “/Search/results.aspx” because after I followed the steps on how to change the search I got this error.
HTTP 404 Not found. “The web page cannot be found”
Any idea?
Ad
Ad, it seems like you don’t have the search enabled. Can you even get to the Search site using SharePoint Designer? http://yoursite/Search/
BTW cheers for the beer!
Luis,
My search is enabled.
/_layouts/OSSSearchResults.aspx – default
to
/Search/results.aspx
And page layout not showing up in the ribbon when I’m editing the page. It’s because I’m using Sharepoint 365 P2? “SharePoint Server Publishing Infrastructure – Activated”
Ad
Ad, this theme was only tested on SharePoint 2010 Publishing Sites not SharePoint Online (365)
Any way this can be made or converted to support Sharepoint 2010 Foundation?
Thank you
Hi Lui Kerr,
Great job:) I am trying to implement the theme for an intranet publishing site. May i check with you how to make the ‘I Like It’ and Open Menu – My Site, My Profile, My Settings, Signout drop down at the header?
Thanks
Nick
You need to remove “minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” from the meta viewport of your responsive.master.
You are doing more harm to the community and your users by disabling zooming on touch devices.
If you really practiced and appreciated the main goal of responsive design – making your content accessible to all – you would know that you should not force your own evil, restricting practices like disabling zoom.
Hi there,
Thanks for the responsive theme. What do I change in order to make it fit the entire screen and not be a fixed width?
Regards
Troy
Troy, there is only one class you need to change in the style.css: #wrapper
Hi Luis,
I notice that when I add web parts next to each other, on initial page save, the centering is fine. If I try to edit the page again, all the zones shift to the right, beyond the fixed width. Then the web part editor shows behind the web parts and zones that are beneath it (when expanding sections in editor). Not sure if this is a z-index issue or js. Could you tell me how I might resolve this? I only see this issue with the CQWP and the Summary Links web part.
In addition, I moved the responsive directory from root to the layouts directory and updated all paths, so i could put it in a solution. Everything else seems to work fine.
Thanks,
Aliya
Aliya, it seems like the style for those two web parts are taken over by other styles in the style.css. Use Chrome’s “Inspect element” to see what styles are taking precedence.
Your templates are awesome! Is a Stella Artois a good choice for a beer???
Cheers,
Sara
Thanks Sara. Stella Artois is “The” default choice for a beer…
We are using this theme for our intranet site. It looks great. We have Sharepoint 2013. Do you have different instructions on installing on that site? This is an AWESOME theme and we have really high hopes for it in our organization.
This is a great piece of work, many thanks. It’s a great start for creating a professional looking site. Here are a couple of tweaks that might be useful:
If you don’t want to put files onto the server, in your Inetpub/wwwroot/wss/VirtualDirectories folder, you can also just open the top level site in SharePoint Designer and drag the whole responsive folder (containing CSS, HTML, images, JS) into that root site as a subfolder. The branding files will then become part of the site itself. Probably better still would be to put all those files into a subfolder of “Style Library” but then you would need to update the URL references in the master pages for CSS, Javascript etc.
Also, if you actually like the SharePoint fixed ribbon at the top of the screen then here’s what you do to make the ribbon fixed:
- In the tag in the master page(s), change the scroll attribute to scroll=”no”
- In the style.css file, the section /***** Start SharePoint Fixes *****/, change body.v4master to overflow: hidden
For some reason, the images are not coming over when I load the site. I gave the responsive folder network and network service read permissions. When I try to go to an image to load directly from the browser I get “oops , your link appears to be broken.” Any ideas?
Loading ...
Great work Luis on the Responsive theme, it looks great. Looking forward to trying it out.