In this article we can explore the Responsive Web Design aligned with SharePoint.
What is Responsive Web Design?
Responsive Web Design (RWD) is optimizing the same page to be viewed in multiple devices including mobile. Unlike desktop systems, the mobile devices might not be having script capabilities enabled. So RWD focuses mainly on HTML & CSS optimizations.
A typical desktop-tablet-mobile view of the same page through Responsive Web Design:
You can see that there is automatic resizing of images, positioning, wrapping of contents responsive with the view port.
Responsive Web Design and Responsive Navigation are different. Navigation involves fly out menus, automatic sliders, hover effects & more.
Responsive Web Design Concepts
Following are the few important concepts associated:
Fluid Grid Page elements should be sized based on Percentage instead of Pixels. This allows dynamic resizing in desktop & mobile devices based on screen size.
Viewport is the currently viewable part of the page.
Responsive Web Design & SharePoint
There are some pre-built RWD Frameworks for SharePoint.
1. SP Blueprint > http://spblueprint.codeplex.com/
2. Responsive SharePoint http://responsivesharepoint.codeplex.com/
You can download them from above links. WSP activation or Master page copying required as per the framework. Please refer to the Installation guides.
Please note that there are different downloads for SharePoint 2010 & 2013 versions.
SharePoint 2013 supports Device Channels which allows configuring separate master pages for different user-agents of devices. Here the same-url will be used by all devices.
In this article we have explored Responsive Web Design aligned with SharePoint. I will be coming up with more posts on the same.