Mobiele websites met SharePoint Content Management

Realisatie van succesvolle mobiele websites

Veel organisaties kennen SharePoint vooral als technologie voor het intranet. SharePoint bevat zeer veel functionaliteiten voor webbased samenwerking, kennisdeling, documentbeheer en zoeken, die bij uitstek tot hun recht komen binnen de organisatie. Maar SharePoint heeft ook functionaliteiten voor webbased content management (WCM), die het geschikt maken voor gebruik als platform voor publieke internetsites. Met het toenemende aantal mobiele internetgebruikers via apparaten als smartphones en tablets, wordt het steeds belangrijker bij publieke websites rekening te houden met deze doelgroep.

Met het succes van SharePoint als webplatform binnen de organisatie ontstaat bij veel organisaties de wens om de externe website net zo succesvol te maken door ook daar SharePoint toe te passen. Maar voor externe websites gelden hogere eisen op het gebied van marketing en webdesign. Het maken van een custom design op SharePoint WCM kent een aantal uitdagingen. En het toenemende gebruik van mobiele apparaten levert een nieuwe uitdaging op bij het ontwerp. In dit artikel geven we een aantal uitgangspunten en oplossingsrichtingen voor de realisatie van succesvolle mobiele websites op het SharePoint WCM-platform.

Webdesign

Het ontwerpen van webpagina’s voor mobiele apparaten is een vak apart. Hoewel de basistechno-logie dezelfde is als die van iedere website, heeft een site die is gemaakt voor mobiele apparaten (devices) een aantal extra uitdagingen.

• scherm: schermen van smartphones en tablets zijn veel kleiner dan pc-schermen en hebben meestal ook een lagere resolutie.
• bediening: de meeste moderne mobiele apparaten worden met een aanraakscherm (touch screen) bestuurd en niet met een muis en/of toetsenbord.
• netwerk: mobiel internet is trager (en ook duurder) dan vast internet.
• verschillen: de verscheidenheid aan mobiele apparaten en daarbij behorende browsers is veel groter dan die van webbrowsers op de computer.

Dit lijken open deuren, maar het zijn grote verschillen die diep ingrijpen op het ontwerp van een website.

Progressive enhancement
Een ontwerptechniek die bij uitstek geschikt is voor mobiele websites heet ‘progressive enhancement’. In deze techniek begint het ontwerp helemaal aan de onderkant van het browserspectrum: de website wordt eerst ontworpen voor de meest eenvoudige browser: een browser zonder JavaScript en CSS. Dat zal leiden tot een zeer basale user interface waarin informatie en structuur centraal staan. HTML-elementen zoals headings, paragrafen, lijsten en hyperlinks worden gebruikt zoals ze oorspronkelijk bedoeld zijn: als ‘markup’ van informatie. Een website die zo is ontworpen zal werken op ieder apparaat, want er wordt volledig volgens reeds lang bestaande en zeer stabiele standaarden gewerkt.

Een website die bestaat uit louter elementaire HTML, zonder CSS en JavaScript, zal echter niet erg modern en attractief overkomen op de bezoekers. Om de website aantrekkelijker en interactiever te maken wordt de basis-HTML ‘verrijkt’ met CSS en JavaScript, zonder de aanvankelijke basisstructuur te wijzigen. Krachtiger browsers die de gebruikte CSS en JavaScript-technieken ondersteunen, zullen een mooiere (of meer interactieve) interface aan de gebruiker tonen. Browsers die een bepaalde techniek niet ondersteunen, kunnen het bijbehorende effect ook niet tonen, maar blijven wel goed functioneren omdat ze vanzelf terugvallen op de onderliggende basisfunctionaliteit. Bijvoorbeeld bij het bewegen van de muis over een afbeelding in Firefox wordt een animatie getoond terwijl op een BlackBerry dezelfde afbeelding stil blijft staan.

Het toepassen van de progressive enhancement-techniek is niet eenvoudig, maar heeft vele voordelen. Zo is de site ‘van nature’ al geoptimaliseerd voor zoekmachines (SEO): de geboden informatie is voorzien van de juiste markup en is niet ‘vervuild’ met opmaakinstructies en scripts. Ook is de site als vanzelf toegankelijk voor mensen met beperkingen of handicaps.

SharePoint en webdesign

SharePoint heeft een eigen aanpak op het gebied van webdesign. Veel SharePoint-functionaliteit wordt kant-en-klaar aangeboden (dat is één van de grote voordelen van het platform) maar diezelfde functionaliteit werkt wel door in het web design. De SharePoint publishing-componenten hebben een ingebouwde editmode en displaymode, die beperkt aanpasbaar zijn. Zonder hulpmiddelen is het niet mogelijk standaard SharePoint Content Management-functionaliteit te combineren met designtechnieken zoals progressive enhancement.

Om dat probleem te verhelpen ontwikkelde Macaw het DualLayout component voor SharePoint. Hiermee is het wél mogelijk een custom webdesign te combineren met standaard SharePoint Content Management-functionaliteit. Dit component, dat eenvoudig te installeren is onder SharePoint 2007 en 2010, maakt het mogelijk websites met een design op basis van progressive enhancement te draaien en beheren op het SharePoint-platform. Daarmee biedt het dus ook een goede basis voor mobiele websites op het SharePoint-platform.

SharePoint en mobiele websites

Zoals eerder opgemerkt: SharePoint biedt heel veel standaardfunctionaliteit. Ondersteuning voor mobiele apparaten is één van de geboden functionaliteiten. SharePoint gebruikt hiervoor een eigen techniek: ‘mobile view’. Door deze techniek kunnen bijna alle ingebouwde pagina’s en componenten zichzelf met een aangepaste ‘rendering template’ afbeelden, waarbij aangepast HTML, CSS en JavaScript wordt gegenereerd die geschikt is voor mobiele apparaten. Mobiele apparaten worden automatisch herkend en doorgestuurd naar de mobiele versie van de pagina die werd opgevraagd.

De aanpak van SharePoint voor mobiele apparaten heeft wel een paar problemen.

1. De mobiele pagina’s ondersteunen een groot deel van de SharePoint pc-functionaliteit, en zijn als gevolg daarvan erg groot van omvang, dus traag en kostbaar voor gebruikers.
2. De mobiele pagina’s werken niet voor anoniem toegankelijke sites en zijn alleen toegankelijk voor ingelogde (intranet)gebruikers.
3. Het implementeren van een custom (mobiel) design is, net als een custom design voor gewone websites, erg moeilijk.

Voor Macaw lag het voor de hand om mobiele websites voor SharePoint te maken met DualLayout. DualLayout maakt het al mogelijk om geoptimaliseerde (snelle) pagina’s te ontwerpen binnen SharePoint. Met één goed ontwerp voor pc én mobiel, dat gebruik maakt van progressive enhancement, is DualLayout een uitstekende oplossing.

Toch zijn de verschillen tussen de pc-versie en de mobiele versie van een website in de praktijk meestal te groot om met één design te kunnen bedienen. Op kleinere schermen is het bijvoorbeeld vaak beter om minder informatie te tonen. Om bandbreedte te besparen en laadtijden te verbeteren accepteert de gebruiker ook vaak een eenvoudiger vormgeving voor de mobiele variant. Het ontwikkelen van twee versies (normaal en mobiel) van iedere pagina is dan de beste oplossing. Voor deze situatie is een mobiele variant op DualLayout gemaakt, die MobileLayout is genoemd. Dit component werkt op dezelfde manier als DualLayout, maar kent een derde, mobiele, variant van iedere page layout en master page. Ook heeft dit component een eigen herkennings- en redirectie- mechanisme dat ook goed werkt met anoniem toegankelijke websites.

Onlangs heeft Macaw de eerste website, gebaseerd op MobileLayout, voor een grote verzekeringsmaatschappij opgeleverd. Deze site hebben we in korte tijd ontwikkeld en opgeleverd, naar volle tevredenheid van de opdrachtgever.

­­