månadsarkiv: maj 2013

SharePoint i mobilen

sharepoint_mobile

Att surfa på mobila enheter är något som har ökat markant de senaste åren. De mobila enheternas kapacitet och möjligheter har blivit större. Mobila enheter består inte längre bara av mobiltelefoner då plattorna tagit över som surfdatorer. Samtidigt som möjligheterna att anpassa designen till mobila enheter blivit större så ställer det också en hel del krav på gränssnittet. Mobila enheter baseras idag på touchscreens vilket också innebär att precisionen inte är lika bra som på en skärm som styrs med mus. Mobila enheter är också i regel mindre vilket kan göra texten oläslig på en webbsida med en fast bredd. För det tredje är uppkopplingen fortfarande inte lika snabb på mobila enheter. Att begränsa webbsidans innehåll genom att plocka bort överflödiga bilder och kontroller för mobila vyer är en enkel lösning för att öka prestandan. Här är mobila vyer ett smidigt sätt för att lösa de grafiska kraven.

Mobila vyer i SharePoint
Mobila vyer i SharePoint är inget nytt. Även SharePoint 2010 supporterar mobila vyer, dock i en mycket begränsad form. Designen på vyerna är SharePoints standarddesign och anpassningsmöjligheterna väldigt låga. I SharePoint 2013 har man utökat möjligheterna med en teknik som kallas Device Channel. Med Device Channels är det att enkelt anpassa innehåll och design för mobila enheter. Det går även att skilja på olika mobila enheter såsom iPad, iPhone och Android.

Device Channels
Device Channels gör det möjligt att visa en SharePoint site på flera olika sätt genom att skilja på enheter baserat på vilket enhet man kommer till siten ifrån. Det går i sin tur att använda olika masterpages för olika enheter. Ett annat sätt att använda Device Channels är att använda sig av Device Panels. Med Device Panels går det att använda samma masterpage för samtliga enheter och istället välja att visa ut visst innehåll baserat på den aktuella enheten.

Fördelar med Device-Channels i SharePoint
– Öka prestandan
– Touch-optimera
– Anpassa innehåll
– Anpassa design
– Skilja på olika mobila enheter och modeller

SharePoint-iphone

Kundcase
Bool avslutade under april ett projekt som gick ut på att bygga om en SharePoint 2007 baserad site till en SharePoint 2013-lösning samt förberedde denna för att köras på Office 365. I projektet ingick en mobilanpassning med Device Channels. Mobilvyn bygger på en egen masterpage. Här utnyttjades samma design-filer som användes i den ursprungliga masterpagen. Mobildesignen applicerades i sin tur ovanpå denna. För att utnyttja hela bredden i mobilen placerades all navigering i en så kallad dropdown-meny. Genom att dessutom endast visa ut huvudkolumnen i mobilgränssnittet utnyttjas bredden ännu mer. Att utesluta de andra kolumnerna medförde också en prestandaförbättring. Resultatet blev en väldigt kostnadseffektiv mobilanpassad SharePoint site.

Läs mer om Device Channels hos Microsoft

Styling suiteBar and IE8

suitebar-001

Today I want to share little css tip for styling the suiteBar in SharePoint 2013 and making it work even in IE8. I needed to apply a green color to the suiteBar (#005128). It worked in all browsers except IE8:

suitebar-002

The reason why is a special css rule (in corev15.css) that only IE8 understands:

I found this answer in an blog post written by Trace Armstrong: SharePoint 2013 – Branding the Top Bar and the Importance of Browser Testing. You could override this css rule with your colors, just dig into the msdn documentation.

What I needed though, was just a plain color, so I didn’t want to dig into that old progid-definitions. There is actually a simpler solution on social.msdn.microsoft.com. A guy called avshinnikov just overrides the “filter” rule by setting it to none. If you apply it only with id selector (#suiteBarLeft) then you have to put “!important” after that.

Fortunately I allready had my own css class on html tag which is a sort of a “namespace” for my selectors:

The class .takana-html can have any name, of course, and it can be a class on a closer parent element to the suiteBar. The only goal for that is to make your css rules more important in your design in a natural way (and avoiding the “!important”). Eventhough many people use this principle without thinking about it, I’ve not found any info regarding this principle. I only heard Jeremy Foster and Michael Palermo talking about it and referring to it as “css namespaces” in a video course: Developing in HTML5 with JavaScript and CSS3 Jump Start. Of course, the name isn’t unique, there is another thing called css namespaces. But the concept is really good.