At my work we have been working on designing a SharePoint 2010 template with Responsive Design. It’s something that isn’t an ‘out-of-the-box’ functionality for SharePoint because a lot of what SharePoint does is in tables. But we’ve got something working pretty well now. We ran into a bit of an issue though, because we use Microsoft InfoPath forms in our publishing sites. InfoPath uses tables to lay out the label and input fields so they align up nice and evenly. Therefore, when you resize the browser window the form elements don’t resize or move to accommodate it. So we had to figure a way to make it do so. I originally thought to not use tables in the design phase in InfoPath but that would make it too difficult to design. So I did what any Designer will do when presented with a problem, I did some testing of my own and Google’d the issue. After a little searching I came across Chris Coyer’s CSS-Tricks article on Responsive Data Tables. In it he had a little bit of code that said to make the td elements display:block. So I tried it and it worked. What we did was put it in the css media queries for the lowest resolution. What it does is make the cells stack on top of each other instead of next to each other. You may have to adjust some of the padding or margins for the label elements but that’s pretty easy to do. If you’ve had similar experiences or know any better ways of doing this, please comment below. I’m writing this post because there isn’t that much in the way of tutorials or documentation on how to code forms in tables with responsive design.
