With all the buzz about responsive design, our guys working on SharePoint 2010 projects were feeling left out. Sure, there’s a lot of hype about implementing mobile strategy for CMS like SharePoint 2013 and Sitecore, but what if you have the typical SharePoint 2010 Intranet. Can your users still view some of the native SharePoint features like lists and libraries from their phone?
Yes, they can. Here is a quick example of some of the tactics involved. I chose a SharePoint 2010 Discussion list for this blog, but you could use the same approach with many of the other native features. Note, this has been tested in IE8 (with help of Respond.js), IE9, Firefox, and Chrome.
Desktop Full Screen:
Below is the CSS I used for my media query. I’ll publish a Starter Responsive Master page soon that will include this feature. This was just an example/proof of concept to share with clients.
If you would like to learn more about Responsive Design in SharePoint, check out my SharePoint Goes Mobile Presentation where I cover some Responsive Design, SharePoint OOTB mobile views, and SharePoint 2013 Device Channels and Image Renditions. We have some other great SharePoint blogs available here as well.
If there is a topic you’d like to see us take on, please respond in the comments below. We’re doing some interesting things with SharePoint here at DEG, so if you’ve got a challenge, we’ve most likely found a way around it.
table.ms-listviewtable > tbody > tr
{
padding: 10px;
}
table.ms-listviewtable > tbody > tr > td
{
display: block;
text-align: left;
border: none!important;
width: 100%; /* IE8 */
float: left; /* IE8 */
}
table.ms-listviewtable > tbody > tr > td.ms-vb2 > a
{
font-size: 1.2em;
font-weight: bold;
}
table.ms-listviewtable tr.s4-itm-hover > td, table.ms-listviewtable tr.ms-itmhover:hover > td, tr.s4-itm-selected > td, tr.s4-itm-selected:hover > td
{
border: none;
}
table.ms-listviewtable .ms-viewheadertr, table.ms-listviewtable tbody tr td.ms-vb-firstCell
{
display: none;
}
Comments
Brian
Nick