Blogg

SharePoint och branding - vad är problemet?

Jag fick nyligen äran att vara med och representera NetRelations på the European SharePoint Conference 2015. Jag måste säga att jag gick dit med relativt blandade förväntningar. Jag menar, SharePoint och gränssnitt har ju inte direkt passat ihop så bra tidigare. Händer det ens något inom SharePoint-världen gällande gränssnitt?

Artikelverktyg:

Dagarna inleddes i vanlig takt med bland annat keynote-presentation om en hel del nya produkter, som visserligen i sig verkar riktigt fräscha. Men påverkar det mig, i mitt arbete som gränssnittsutvecklare? Men när jag tog en titt på schemat så ryckte jag till - det var fyllt av presentationer som behandlar AngularJS, SASS och ett flertal gällande olika responsiva tekniker. Så min fundering gällande om det händer något med SharePoint och gränssnitt fick jag svar på redan här.

Vad är grejen med SharePoint?

SharePoint är en oerhört stark produkt med många fördelar, och det kan resultera i helt fantastiska lösningar om den används på rätt sätt. Men vill man implementera en egen design i sin lösning så finns det en risk att man kan bli ganska begränsad i jämförelse med en del andra system.

Om man däremot håller sig till ett relativt standardiserat utseende så kan man komma långt. Använder man sig av teman och den teknik som gäller kring enklare utseendeförändringar i form av typsnitt och färger (definieras på ett specifikt sätt i en CSS) så har man sitt på det torra. Men det är sällan det räcker. Vad händer om man kommit över en riktigt fräsch, modern designskiss? Jo, det är då saker och ting kan börja gå sönder.

Vad är det nu som gör det så problematiskt?

Det är nu jag behöver bli lite teknisk och visa med hjälp av ett exempel. Vi tar en vanlig knapp - den defineras i HTML som <button>.

Då har man i gränssnittet oftast satt en stil på sina knappar, så att alla knappar ska se ut på ett specifikt sätt som passar in i formspråket för gällande design. I det här fallet kanske vi vill att vår knapp ska vara en action som ska trigga inställningar för något, och vi vill illustrera det med en fin ikon för ett kugghjul.

Vanligtvis kan det vara lämpligt att skapa en prototyp för sina skisser. Det finns oerhört många fördelar med det, varav flexibilitet i ett tidigt stadie enligt mig är den främsta. Så man programmerar helt enkelt ut sina skisser i ren html, och lägger till sin kugghjulsknapp och utseendet bör nu vara till belåtenhet.

När man är färdig med sin prototyp börjar man med implementationsarbetet mot SharePoint. När man är färdig med det märker man att den fina inställningsknappen inte är så fin längre. Den flyter konstigt, är bred och understruken. Då tar man en titt på vad det är som är fel, och kommer fram till att det beror på en regel som kommer från SharePoints CSS, nämligen att alla knappar ska ha en minsta bredd på 6em och ha fet, understruken text.

Det man gör då är att man rättar till den regeln, jag vill ju att mina knappar ska se ut på det sätt jag har fått definierat i min skiss. Men så klart får ju den rättningen följder, regeln fanns ju där av en anledning, och i detta fall så får det ett flertal följdeffekter i SharePoints gränssnitt där knappar kan försvinna helt och hållet.

Det här är endast ett exempel, det är inte särskilt svårt att hantera en lösning för just detta fall. Men det finns ett stort antal fler regler på respektive element som helt enkelt gör implementationen av för anpassad design ganska svårhanterlig. Mina regler påverkar SharePoint, och SharePoint påverkar mina regler.

Så, hur hanterar man detta?

Det finns ingen rak, tydlig väg att gå. Först och främst är det viktigt att ha en dialog med de som levererar designskissen - då kan man komma runt många problem, utan att märkbart göra avkall på något som kan/behöver vara viktigt och man kan hitta vägar runt problemen. Utöver det ser jag det som att det finns följande vägar att gå:

  • Dela upp lösningen i olika ytor, förslagsvis under Ribbon, med specifika regler som gäller inom respektive yta, anpassa sedan varje element till att ärva från de reglerna (kan exempelvis automatiseras med hjälp av Grunt eller liknande). "Bild 3 – Visa yta"
  • Om du använder dig av prototyper, lägg till SharePoints css’er (bland annat corev15.css), så blir det lättare att bemöta implementationsproblem i ett tidigare läge
  • Utgå från färdiga ramverk, exempelvis:
  • Undvik att anpassa SharePoints masterpage - man kan komma långt med små medel

Känner du igen dilemmat?

Vi har lång erfarenhet av att jobba med SharePoint och är vana vid att lösa den här typen av utmaningar till våra kunder. Vi berättar gärna mer och hjälper dig att synka dina designskisser med SharePoint. Välkommen att kontakta oss via formuläret!

0 kommentarer

Skriv kommentar