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.
- Fluid & Responsive Web Design
- 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
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!