Implementing responsive Design on SharePoint 2013

in the SharePoint implement responsive design above

This article is translated by Spfarmer Ricardo

Learn how to SharePoint implementation of a responsive design to allow a Publishing Site There are different displays at different resolutions.

We all know that Web designer for a successful sharepoint implementation is critical. Based on this, I want to write an article for the web designer. I'm not an authoritative expert on this, I decided to consult someone who has experienced in web design. By asking my contacts, I got the sharepointbranding ux customization an expert in the field --Ericoverfield ux, branding, artist engineer , sharepoint.

This conversation soon talked about the device ratio, as well as the figure and let SharePoint be able to display as well as possible in new and changing devices. Eric 's answer is : Responsive web Design . Responsive web design allows our site to look like a mobile grid. This mobile and dynamic lattice automatically adjusts itself to accommodate different display resolutions, such as mobile phones, tablets, and full-size computer monitors. Keep in mind that if you consider that these devices can be displayed horizontally or vertically, the type of resolution of the display will be doubled.

about responsive design.the original articlethe author,Ethan Marcotte,provides a Web site for referenceto demonstrate the concepts in his article. In this demo, you can see how the elements in the page are adapted to the current resolution by rearranging themselves when you change the size of your current browser. This presentation allows me to think about how the characteristics of the flow lattice through responsive design ideas,SharePointin the implementation of the Web site can adapt to different browsers? Fortunately,EricWith the others.,developed aResponse TypeSharePoint.Response TypeSharePointis aCodePlexitems that you can have in yourSharePointTry a responsive design on the site.

I followed the instructions provided, by using the Design Manager , in a Out-of-the-box Publishing A resource is installed in the site. Immediately, I can see how the site dynamically adapts to different resolutions as I change the size of the browser. I decided to test the project with the following resolution :

· 1200x1900 ( computer desktop , portrait display )

· 768x1366 ( Tablet PC , portrait display )

· 480x800 ( smartphone , portrait display )

The effect is simply amazing. In less than ten minutes , I have a Web site that automatically adapts to the resolution that is often used in the device. The following figure shows the display at a common resolution :

how this is achieved. ?

in this article, I can only explain that the responsive SharePoint by using media queries, match the width of the device display, and then apply a series of CSS to display the content within the available space. To achieve this, you need a browser that supports media queries. This feature is supported by the latest version of the mainstream browser. The following code shows how to declare a media query :

@media (min-width:769px) and (max-width:979px) {

/*

Styles for display width

Between 769 and 979 pixels

*/

}

@media (max-width:768px) {

/*

Styles for display width

Equal to 768 pixels andthinner

*/

}

@media (min-width:1200px) {

/*

Styles for display width

equal to pixels andwider

*/

}

You can browse the codeplax responsive sharepoint  

SharePoint the new design and Branding feature, is you can easily create and modify your web design, including responsive design. You can even use some of your familiar tools, such as Mapping a network drive to Thesharepoint Master Page Gallery. in my example, I use microsoftexpression Web 4 to browse and edit Master Pages and the CSS file.

I am very excited about the new design and functionality that we can use in responsive web design. You can get more content by browsing what's new with SharePoint sitedevelopment .

-Ricardo

Eric Overfield is the Co-founderof Pixelmill. Pixelmill is a company this offers products and services for Brandingsharepoint starting with SharePoint, and they ha ve been in the Web designbusiness since 1998. Eric is very passionate on the community for whom hedeveloped the CodePlex project Responsive SharePoint. He is also aspeaker at SharePoint events, such as SharePoint Saturdays, and are in theprocess of writing a book about RESPO Nsive Design and SharePoint 2013. CanRead More about Eric's work atPixelmill ' s blogand follow him on Twitter@ericoverfield.

Implementing responsive Design on SharePoint 2013