.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Responsive Web Design and SharePoint

Posted By:Jean Paul       Posted Date: November 30, 2014    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

In this article we will explore Responsive Web Design aligned with SharePoint. I will be coming up with more posts on the same.
 

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:

clip_image001

You can see that there is automatic resizing of images, positioning, wrapping of contents responsive with the view port.

clip_image003

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.

clip_image003

Please note that there are different downloads for SharePoint 2010 & 2013 versions.

Device Channels

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.

References

http://en.wikipedia.org/wiki/Responsive_web_design

Summary

In this article we have explored Responsive Web Design aligned with SharePoint. I will be coming up with more posts on the same.


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:

clip_image001

You can see that there is automatic resizing of images, positioning, wrapping of contents responsive with the view port.

clip_image003

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.

clip_image003

Please note that there are different downloads for SharePoint 2010 & 2013 versions.

Device Channels

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.

References

http://en.wikipedia.org/wiki/Responsive_web_design

Summary

In this article we have explored Responsive Web Design aligned with SharePoint. I will be coming up with more posts on the same.


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend