Responsive Web Design for SharePoint 2010

I went to the “Responsive Web Design for SharePoint 2010” this morning. Responsive Web Design is very important for today’s web as more and more people are starting to browse the web using their mobile devices now.

Responsive Design is a web design strategy to improve user experiences on a multitude of internet devices, including mobile phones and tablets

No extra technologies need to be learnt for responsive design, all you need to know is HTML, CSS and JavaScript

Three common screen resolutions are usually considered when implementing responsive design:
Desktop: 1200px * 800px
Mobile: 320px * 480px
Tablet: 768px * 1024px

Example responsive design websites: (Host of the webinar, got lots of interesting stuff on his blog)

Example v5 SharePoint website:

Create wireframes for at least three platforms before coding it up.

Limitations of responsive design:

  1. Doesn’t like tables, inline styles, content pasted from word document ect.
  2. Flash, Silverlight, own hosted videos, maps may be unavailable.
  3. No “Hover” state on mobile devices

Mobile view in SharePoint:
SharePoint provides an OOTB mobile view for their sites. Appending “?mobile=1” to the end of a sharepoint site url will display the mobile view of the site. Without configuration, it will display lists and libraries of the site. This is not user-friendly at all. So best to turn it off. Randy’s got an article on this.

After turning it off, we need to customise the interface of the master page and page layout using CSS and JavaScript.

Some tips and techniques:

  1. In CSS file, the paddings, width needs to be in % rather than specific px. Font size can be px, % or em. Some browsers will automatically scale up or down the font size even you use px.
  2. min-width and max-width are usually used.
  3. The following code can be added to css file and it changes the wrapper min-width to 0 when the screen width is lower than 800px.
    @media screen and (max-width: 800px){ #wrapper {min-width:0;} }
  4. In SharePoint, the default v4 master page has a style on
    body #s4-bodyContainer. This style prevents the screen from shrinking when displaying in mobile devices, so add

    body #s4-bodyContainer{ min-width:0; }

    in your master page CSS file to override it.

  5. In the master page head section, include the following code to allow the website consume the full screen size of the device.
     <meta name="viewport" content="width:device-width, minimum-scale=1.0, maximum-scale=1.0"/>
  6. Use JavaScript to hide hover state of navigations, such as the Modernizr library has a .touch() function to detect if the device is a touchscreen device.
  7. SharePoint Ribbon should be removed from mobile view.
  8. Recommended JavaScript libraries are: jQuery and Modernizr
  9. Testing in different devices:
  10. Download basic v5 master page to build on top
  11. In SharePoint, if you need to use a table for content, try use the Markup Styles instead. You can build these styles yourself in master page css.
  12. When copying text from a word doc, try copy the text to Notepad or some sort of text editor(PureText) first to get rid of unnecessary formattings. 

Questions asked in webinar:
Does responsive design work in IE6, 7 or 8? No.
If table is embedded in a div, can we still apply responsive design?