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:

desktopSPListView-1024x455

 

MovileResponsiveListView-e1363184928692Below 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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments

  • Brian

    Brian

    7 years
    Reply
    Hi Nick, I like the direction here, but I'm thinking about how to show a document library with potentially 6+ columns of metadata that won't really make sense without some type of header. Could you make a modification to this code to also display the headers? Maybe as a left column inside each container?
    • Nick

      Nick

      7 years
      Hi Brian, I just put something together to include the headers on my blog: http://www.sharepoint13blog.com/sharepointresponsivelist/