Responsive SharePoint Design and Knock out sites!

Why Responsive: In the past, in order to have your website scale correctly on different resolutions, you would need to create a separate website , You would have to maintain each version of the site with different content making this method costly and timely.

The use of mobile, tablet, notebook and laptop devices to surf the web is growing at astronomically pace, but unfortunately much of the web isn't optimized for those devices. These devices are often constrained by display size and require a different approach to how content is laid out on screen. There is a multitude of different screen sizes across phones, tablets, desktops, game consoles, TVs, even wearable’s. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future. Much of the web isn't optimized for those multi-device experiences.

Solution to find One Website, Many devices is "Responsive web design," also referenced by the acronym "RWD." Responsive web design, originally defined by Ethan Marcotte in a List Apart responds to the needs of the users and the devices they’re using.

We are implement responsive designs on all type of web application PHP, SharePoint 2013, ASP.Net MVC, Java server pages.

So how does responsive design actually work?

1.  Set the viewport

2.  Apply media queries based on viewport size

Media queries enable us to create a responsive experience, where specific styles are applied to small screens, large screens and anywhere in between. The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

3.  Create breakpoints based on content

Design for the smallest mobile device first, and then progressively enhance the experience as more screen real estate becomes available. Keep lines of text to a maximum of around 70 or 80 characters.

SharePoint is been into picture since SharePoint Portal Server 2001 and is well known Microsoft Products. Responsive Frameworks for SharePoint 2013 and SharePoint 2010

There are three main ways to leverage responsive design within SharePoint 2013: Fluid Grids, Media Queries, and Device Channels.

• Fluid Grids: we’ve designed based on a fixed width using pixels to keep the site at a specific width. In fluid grids, it’s about creating a grid system based on percentages.
• Media Queries: you simply add the @media style to your CSS and call out the elements you want to change.
• Device Channels: This is a new capability of SharePoint 2013 which introduces the ability to apply a unique master page for a specific device that is accessing the SharePoint site. For instance, you could have a custom master page for desktop browsing, but create a mobile version of that master page specifically for a mobile device.

Branding SharePoint can be a fun, rewarding yet often times challenging endeavor. SharePoint is extremely powerful. Responsive Web Design, Twitter Bootstrap (2 and 3) and Zurb Foundation (4) are converted them to work in both SharePoint 2013 and SharePoint 2010.

Last not the least Knock out Js

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. KoSp Js, Knockout Js for SharePoint 2013 and SharePoint 2010 is a knockout Js binder extension for SharePoint REST API and SP Services. KoSp provides custom knockout binding handlers that enables easy binding of json data from SharePoint lists retrieved via REST API with oData queries and SP Services with CAML queries with client side controls.

We can use the SharePoint 2013 REST interface to get list item data from a SharePoint list and then to use Knockout.js to create a rich and responsive display with a clean underlying data model.

SharePoint 2013: Use Knockout.js and the REST service to display list data

Mobile usage is exploding and businesses need to be ready. A majority of businesses out there still do not have a mobile-friendly version of their site. Users are now starting to expect a mobile version of your site and if it’s not, they’re likely to go elsewhere. Another interesting detail is that search engine optimization (SEO) works better with RWD because there’s only one URL which makes it easier for search engines to crawl your site and give you better rankings.

SharePoint is a great platform to host your site, why not make it responsive and be ready for the future.

About Author:

Mukund Lahane is a consultant in Systems Plus Pvt. Ltd. Within Systems Plus, he actively contributes to the areas of Technology and Information Security. He can be contacted at mukund.l@spluspl.com