Enhancing the SharePoint 2010 UI: iPad Orientation Detection

I recently had a chance to sit down and rapid prototype some iPad UI Enhancements for SharePoint 2010. I had previously done some light orientation detection for the iPod and iPhone, but with the iPad there’s a lot more power in utilizing orientation detection. As the iPad gains more traction in the business world I expect to see more and more requirements to make enterprise platforms [like SharePoint] usable on the iPad. With Microsoft’s commitment to cross-browser functionality in SharePoint 2010 we’re fortunate that SharePoint 2010 will render on the iPad without any customizations needed.

The typical approach to porting desktop content to a mobile device is to scale content down to fit it all within the mobile device’s display. With orientation detection we can turn off specific regions of content, or change the layout completely in order to maximize on the screen real estate and mitigate the need to scale down content–relative to how the user is holding the device. If we use the iPad as an example, in landscape orientation the resolution is 1024 x 768 but when we move it to portrait orientation the resolution swaps to 768 x 1024 (~250 pixels less on the width). Again, typically we’d just scale everything down to compensate for that drop on horizontal screen real estate. With a platform like SharePoint, making things smaller inherently makes it more difficult to navigate and the two-finger horizontal scroll on the iPad isn’t really all that intuitive. The solution is to detect the orientation of the device and restructure content accordingly.

Orientation Based Style Sheets
At the core of these examples is orientation based style sheets. The iPad allows us to attach style sheets to only be used for the listed orientation. To attach orientation aware style sheets, append the orientation to the media attribute.

HTML:


This method will apply the iPadPortrait.css style sheet when the device is portrait, and the iPadLandscape.css style sheet when the device is landscape. Make sure you put your style sheet link tags after the core SharePoint style sheets to ensure they override the out of the box styling. Modern browsers like Chrome will detect the orientation parameter and compare the window width to the height to determine which one to use; Internet Explorer will not do this, but rather add both of your style sheets. In order to ensure cross-platform compatibility we need to do a simple browser check so that we don’t show IE both style sheets.

HTML:

<!--[if !IE]><!-->

<!--<![endif]-->
<!--[if IE]>
  		<link rel="stylesheet" href="/Style%20Library/iPadLandscape.css" />
<![endif]-->

Hiding the Quick Launch in Portrait
If all you want to do is hide content in a specific orientation, then you only need a style sheet for that orientation (vs. one for each). Styles in the loaded style sheet can override styles defined in the core css. For example, if you wanted to hide the quick launch in portrait mode you would simply load a portrait style sheet containing CSS to hide the quick launch bar.

HTML:

<em> CSS</em>:

#s4-leftpanel {
  display: none;
}
.s4-ca {
  margin-left: 0px;
}

<strong>Changing Layout</strong>
If you want to "move" content based on orientation then you’ll need two style sheets (one for each orientation), and a little bit of thinking on your layout. For this example we will place a navigation bar on the left of the screen in landscape mode, and make it in-line across the top of the screen in portrait mode. First things first, when creating your layout you’ll need to make two navigation bars (one where you want it to be in landscape, the other where you want it in portrait). As an example, if you wanted one in a left column in landscape and one across the top in portrait you could do something like the following (including the OOTB SharePoint markup).

<em>HTML</em>:

</pre>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tbody>
<tr>
<td id="_invisibleIfEmpty" class="iPadPortrait" colspan="2" valign="top" width="100%">
<ul class="iPadNavigation">
	<li>Chart 1</li>
	<li>Chart 2</li>
	<li>Chart 3</li>
	<li>Chart 4</li>
	<li>Chart 5</li>
	<li>Chart 6</li>
</ul>
</td>
</tr>
<tr>
<td id="_invisibleIfEmpty" class="iPadLandscape" valign="top" width="200" height="100%">
<ul class="iPadNavigation">
	<li>Chart 1</li>
	<li>Chart 2</li>
	<li>Chart 3</li>
	<li>Chart 4</li>
	<li>Chart 5</li>
	<li>Chart 6</li>
</ul>
</td>
<td id="_invisibleIfEmpty" valign="top" width="100%" height="100%">Standard SharePoint Zone</td>
</tr>
</tbody>
</table>
<pre>

Obviously it’s a bit more work to create two navs, but if you’re writing the markup through script or through a DVWP then the additional work is negligible. You’ll notice that the markup for the two is identical, the only change being that the parent cell has a class of either iPadPortrait or iPadLandscape. This is done intentionally so that we can re-use styling between the two navs; this ensures that you don’t have to manage baseline button looks in two places.

CSS:

.iPadPortrait .iPadNavigation, .iPadLandscape .iPadNavigation {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  list-style-type: none;
}
.iPadPortrait .iPadNavigation li, .iPadLandscape .iPadNavigation li {
  margin: 4px;
  border: 1px solid #333;
  font-weight: bold;
  padding: 8px 0;
  font-size: 12px;
}

In our individual orientation style sheets we then add the appropriate CSS to hide the elements used in the opposite orientation, and make any changes to the base button styles. Note the addition of the display parameter on the portrait navigation CSS to make our button elements display inline vs. stacked.

iPadPortrait.css:

.iPadLandscape {
	display: none; /*hides all "Landscape" classes*/
}
.iPadPortrait .iPadNavigation li {
  display: inline-block;
  width: 130px;
}

iPadLandscape.css:

.iPadPortrait {
	display: none; /*hides all "Portrait" classes*/
}
.iPadLandscape .iPadNavigation li {
  width: 150px;
}

Site-wide Orientation Support
You can easily use these methods along with your SharePoint branding strategy to roll out layout changes that inherit across the platform. In the final example in the video above, I’ve appended the “iPodLandscape” class to an entire zone in the SharePoint layout. This allows users to add web parts, content and other media in a zone which will automatically hide itself when the iPad is in portrait mode.

Going Further
The orientation based style sheets are great for the detection of portrait vs. landscape but we also have the ability to take it a step further. The value of window.orientation will give you a numerical value of the orientation (0, -90, 90, or 180). This allows you to also detect if the device is upside down, as opposed to simply portrait or landscape. You can listen for orientation change by appending the “onOrientationChange” attribute to the <body> tag, or by using jQuery.

13 Responses to “Enhancing the SharePoint 2010 UI: iPad Orientation Detection”

  1. [...] This post was mentioned on Twitter by Erik Neumann, Michael Greene. Michael Greene said: New Blog Post: Enhancing the SharePoint 2010 UI: iPad Orientation Detection – http://ht.ly/2MW7f [...]

  2. Matt Bramer says:

    WOW! That’s very impressive.

    From a user’s perspective, if they wanted to see the KPI’s or the Quick Launch, do you think they should have a toggle on the page to allow it?

  3. That would be an option, Matt. You could actually use the SharePoint modal window to display the KPIs if you wanted to, or swap out the ticket data for the KPIs completely (toggle between the two).

  4. [...] my previous post we looked at enhancing the SharePoint 2010 UI through CSS based orientation detection. In this post, we will take it one step further and use some client side script to detect [...]

  5. [...] Enhancing the SharePoint 2010 UI: iPad Orientation Detection  [...]

  6. [...] Enhancing the SharePoint 2010 UI: iPad Orientation Detection  [...]

  7. [...] Enhancing the SharePoint 2010 UI: iPad Orientation Detection  [...]

  8. Richard says:

    That is awesome ! Thanks Mike, we get people asking about that all the time. I had no idea about onOrientationChange. Cheers.

  9. Wow this is nice! Good Stuff!!

  10. Tyus says:

    Nice stuff,
    I did something similar with sp 2007 using media detection with no problem. I am curious why did you write an IE if statement. Ipad and Iphone dont use IE as a browers so why would you need it? Is it a sp2010 thing?

  11. @Tyus,

    The IE if statement is required if you’re doing orientation detection because IE doesn’t support the orientation media property. Essentially, IE will ignore the difference between Portrait and Landscape and load both style sheets. Orientation detection is supported in modern browsers (al la Chrome, Firefox, Safari), so for those browsers we can present both style sheets whereas for IE you’d only want to provide one.

  12. [...] Enhancing the SharePoint 2010 UI: iPad Orientation Detection  : Detect the orientation of the device and restructure content accordingly. [...]

Leave a Reply