Enhancing the SharePoint 2010 UI: Scripted Orientation Aware Content
In 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 orientation and output content accordingly.
The CSS approach utilizes orientation aware style sheets which are loaded based on the appropriate orientation of the device (in this case an iPad). While this approach is simple to implement, it’s not necessarily the most robust solution or the most scalable solution. The CSS approach is best suited to deployment with your site’s branded master page, when orientation detection is a big part of your design. What if you only wanted it on one or two pages of your site, if you don’t have access to deploy a new master page, or if you want more advanced orientation detection?
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.
Extend your brand; Friendly social media URLs
It’s no secret that your social media identities really are an extension of your brand. They’re powerful (often revenue generating) assets that in some cases may generate more traffic than your website. If you’re a company or organization that’s very active in the social media world then it’s probably in your best interest to promote your various social media identities on your company collateral, website, business cards, etc. That said, several of the popular social media platforms have failed in making your content easy for people to access. Sure, twitter.com/webdes03 and facebook.com/webdes03 are simple enough, but I don’t particularly find “http://www.linkedin.com/pub/michael-greene/5/576/4a5” something that belongs on a business card–and it’s certainly not something people are going to remember.
Luckily there’s a simple way to get yourself a friendly URL to replace that ugly one, and provide a consistent URL pattern to all of your social media identities. If your website is hosted with a company that gives you access to cPanel, Plesk, or one of the other popular hosting management tools, you can simply add a new subdomain and redirect it to the appropriate social media identity. Here’s an example of the process you’d follow to set this up using cPanel.
The Social Media Strategy
Melissa Woodard (@SocialMiss) made an interesting blog post earlier about the adoption of social media in the day to day operations of business. While some companies have embraced social media, others have a more casual approach to it. Some don’t quite know how to integrate the concept of social media into their business, and some still don’t quite get what social media is all about. Is social media hard to manage? No.
The plethora of cross-medium tools available today make it fairly easy for an individual (or team) to keep track of your social identity, but you do need to put some thought into it. Tools like Hootsuite can help you manage LinkedIn, Facebook, Twitter, Foursquare, etc. from a single tool (and support multiple users if you’re running a team of folks to help oversee your social media presence), but as great as Hootsuite is-it’s not going to hold your hand in making the right decisions with your social media identities.
SharePoint Killed the Intranet Star?
There was an interesting Tweet earlier from Richard Harbridge regarding the effect of SharePoint on intranet design. The article pointed out several interesting points regarding the complexity of developing on an intranet optimized platform. But while the platform itself has certainly been optimized to support the scope and scale of intranets (both large and small) the platform itself really needs to be tailored to meet the specific needs of the business.
Current Favorite Website Designs
A few days ago, Jacob Cass of Just Creative (@justcreative) put together a blog post of his current top favorite website designs. In reading his post (and his tweet inviting responses), I was inspired to do the same. Jacob is a very talented designer, and very well respected by many (including myself) in the design community. I tend to agree with many of his opinions and since we’re all entitled to our own views, I’ll offer mine as well.
Before I get into my list, I do want to mention 2 Advanced Studios, which Jacob placed in his list. When I was first starting out, 2 Advanced was always that studio that was top of the line. Their website was always very creative and used the best of the best of available technique and technology. Eric Jordan (one of the brains behind 2 Advanced) has always fascinated me, but I have to be brutally honest here in saying that these days, 2 Advanced just doesn’t quite do it for me anymore. They continue to turn out top-notch products for major customers, but their website (version 5) feels dated now. The “Demo Reel”, and the current design are dated 2006. I just think it’s time to see something new and refreshing from the talent over there.
So, onto my list (in no particular order)…
Enhance Document Libraries with Custom Document Type Icons
With SharePoint being such a fluid platform it’s easy to extend the capabilities of something like a simple document library to really integrate with your everyday business process. That said, in a media production or design environment many of the file types used just show up as the default “paper” icon. In this article I’ll walk through the process of adding additional document type icons to SharePoint.
This solution requires access to the physical server and permissions to reboot IIS.
To get started, we need to determine what file types we want to add icons for and as applicable, if there are any default icons definitions that we want to change. As an example, SharePoint uses a generic icon for .png files, but I’d really like the Fireworks icon to be used, so we’ll need to change the default definition for that type. Once we’ve determined what icons we need, we need to gather those icons and make 16px square GIF files for each one. SharePoint’s naming lexicon uses icXXX.gif where XXX is the extension of the file type the graphic represents (ie: icbmp.gif for a BMP, icdocx.gif for DOCX).
Once you’ve got your icons put together it’s time to move them to the server and make the necessary changes to the server.