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:
http://bostonglobe.com/
http://www.smashingmagazine.com/
http://simplebits.com/
http://kyleschaeffer.com/ (Host of the webinar, got lots of interesting stuff on his blog)

Example v5 SharePoint website:
http://sharepoint2020.wordpress.com/2012/02/14/medazio-free-sharepoint-theme/

Strategy: 
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: http://quirktools.com/
  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?

Add different background for each link in the global navigation menu in SharePoint 2010

I needed a global navigation that has different styles for each of the link in the navigation, for example in the following image:

First I checked out Randy Drisgill’s article – Using simple rendering in SharePoint Navigation. From this article, I learnt that if UseSimpleRendering=”True”  in the <SharePoint:AspMenu> control, the navigation menu uses a cleaner unordered HTML list. If it’s set to False, then the old less clean Table based navigation is used

To make each link have different styles, I did the following:

  1. In the master page, set UseSimpleRendering=”False”
  2. Each of the links will have a id, can use these ids to style the look. Use the Developer’s Tool from IE to find these ids.
  3. In the master page style sheet, I added these code
    /*style of All links in global navigation*/
    a.zz1_TopNavigationMenuV4_1 {color:#000; font-weight:bold; padding:5px 33px 5px 33px;}
    /*Second level whole style*/
    .zz1_TopNavigationMenuV4_0 {margin-top:5px;}
    /*To make each item in the top level having different top border color*/
    #zz1_TopNavigationMenuV4n0{border-top:5px #99CE58 solid;}
    #zz1_TopNavigationMenuV4n0 + td{display:none;}/*remove white space between links*/
    #zz1_TopNavigationMenuV4n0 a:hover{color:#99CE58;}
    #zz1_TopNavigationMenuV4n1{ border-top:5px #599AC6 solid;}
    #zz1_TopNavigationMenuV4n1 img{ display:none}/*remove dropdown arrow when there is dropdown list*/
    #zz1_TopNavigationMenuV4n1 a:hover{color:#599AC6;}
    /*#zz1_TopNavigationMenuV4n1Items{background-color:#fff;}*/
    #zz1_TopNavigationMenuV4n2{ border-top:5px #00BDDD solid;}
    #zz1_TopNavigationMenuV4n2 + td{display:none;}
    #zz1_TopNavigationMenuV4n2 a:hover{color:#00BDDD;}
    #zz1_TopNavigationMenuV4n3{ border-top:5px #AAB383 solid;}
    #zz1_TopNavigationMenuV4n3 img{ display:none}
    #zz1_TopNavigationMenuV4n3 a:hover{color:#AAB383 ;}
    #zz1_TopNavigationMenuV4n3Items{color:#AAB383 ;}
    #zz1_TopNavigationMenuV4n4{ border-top:5px #6DC9CB solid;}
    #zz1_TopNavigationMenuV4n4 + td{display:none;}
    #zz1_TopNavigationMenuV4n4 a:hover{color:#6DC9CB ;}
    #zz1_TopNavigationMenuV4n5{ border-top:5px #3B637E solid;}
    #zz1_TopNavigationMenuV4n5 img{ display:none}
    #zz1_TopNavigationMenuV4n5 a:hover{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n5Items{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n6{ border-top:5px #836252 solid;}
    #zz1_TopNavigationMenuV4n6 img{ display:none}
    #zz1_TopNavigationMenuV4n6 a:hover{color:#836252;}
    #zz1_TopNavigationMenuV4n6Items{color:#836252;}
    #zz1_TopNavigationMenuV4n7{ border-top:5px #AAAAA0 solid;}
    #zz1_TopNavigationMenuV4n7 a:hover{color:#AAAAA0;}
    /*Second level links having different hover state*/
    #zz1_TopNavigationMenuV4n8 {height:20px;}
    #zz1_TopNavigationMenuV4n8 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n9 {height:20px;}
    #zz1_TopNavigationMenuV4n9 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n10 {height:20px;}
    #zz1_TopNavigationMenuV4n10 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n11 {height:20px;}
    #zz1_TopNavigationMenuV4n11 a:hover{color:#AAB383;}
    #zz1_TopNavigationMenuV4n12 {height:20px;}
    #zz1_TopNavigationMenuV4n12 a:hover{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n13 {height:20px;}
    #zz1_TopNavigationMenuV4n13 a:hover{color:#836252;}
    #zz1_TopNavigationMenuV4n14 {height:20px;}
    #zz1_TopNavigationMenuV4n14 a:hover{color:#836252;}

    Note: if there are more then one level in the navigation, the other levels’ code will be after the table of the first level in the source code the the master page.

Enable AJAX option for Content Query Web Part (CQWP) in SharePoint 2010

Enable AJAX option for Content Query Web Part (CQWP) in SharePoint 2010

Export your CQWP and open it in a text editor

Look for the following lines:

<property name=”InitialAsyncDataFetch” type=”bool”>False</property>
<property name=”AsyncRefresh” type=”bool”>False</property>
<property name=”ManualRefresh” type=”bool”>False</property>
<property name=”AutoRefresh” type=”bool”>False</property>
<property name=”AutoRefreshInterval” type=”int”>60</property>

The above properties map as below:

InitialAsyncDataFetch: Enable Asynchronous Load
AsyncRefresh: Enable Asynchronous Update
ManualRefresh: Show Manual Refresh Button
AutoRefresh: Enable Asynchronous Automatic Refresh
AutoRefreshInterveral: Automatic Refresh Interval (seconds)

After setting the property “InitialAsyncDataFetch” to true, the web part loaded asynchronously