Van Thiel Communicatie

Communiceren met digitale publicaties


Websites, (interactieve) PDF's, ePubs...


Ik bespreek op deze pagina weer de Adobe applicaties waarmee we werken, maar ik begin met de drie belangrijkste aspecten van modern webdesign. Wilt u enkel wat voorbeelden van mijn werk zien, bekijk dan het album hier; dit opent in een nieuw venster. Wilt u weten hoe webdesign in elkaar steekt, lees dan verder. Uiterst nuttige informatie voor als u een opdracht voor webdesign gaat geven.


Werken met Adobe Dreamweaver.


Het bouwen van de pagina die u nu voor u hebt



Het belangrijkste aspect van webdesign is de responsiveness: een website moet zich aanpassen aan het gebruikte beeldscherm. Je moet bijvoorbeeld niet op het smalle scherm van een smartphone horizontaal moeten scrollen om de website over de hele breedte te kunnen zien. En een website moet even gebruiksvriendelijk zijn op een horizontaal gehouden mobiel apparaat als op een verticaal gehouden.

Een website responsive maken kan op drie manieren:
» adaptive design,
» responsive content,
» responsive CSS.
De pagina waar u nu naar kijkt heeft responsive content: alle tekst en ook de afbeeldingen schalen zich naar de breedte van het gebruikte scherm. Versmal maar eens uw browservenster.

De foto's op deze website maakte ik responsive, door ze geen vaste breedte te geven, maar een percentage. Zo nemen ze op welk scherm dan ook altijd 80% breedte in van het gebied rechts van de verticale balk. Met tekeningen, vectorwerk zoals ik besprak op de pagina Grafisch, doe je dat niet. Dan zou je namelijk een vectorbestand om moeten zetten naar een bitmap, en dan ben je de voordelen van vectoren kwijt. Een tekening voor op een website (denk ook aan een logo) zetten we in Illustrator om in een SVG, een Scalable Vector Graphic. Het blijft dan vectorwerk, en verliest bij schaling, bij responsiveness, geen kwaliteit.


Werken met responsive webdesign.


Responsive CSS



Even kort, voor de duidelijkheid: een website wordt gebouwd met drie verschillende talen.
» HTML beheert de content: tekst, afbeeldingen enzovoorts;
» CSS stuurt de vormgeving: kleuren, balken, lettertype, tekstkleur...;
» JavaScript ten slotte regelt de interactiviteit; u klikt ergens op en er gebeurt wat.

Responsive CSS maken ziet u op de vorige afbeelding. In de CSS wordt bepaald (zie het rood omlijnde) wát je op een tablet en op een smartphone anders ziet dan op een desktop. Een afbeelding wordt bijvoorbeeld vervangen door een smallere versie ervan op een tablet, en wordt op een smartphone weggelaten. Het moge duidelijk zijn dat responsive content mooier is omdat je altijd alles ziet. Maar als je nu naar een Albert Heijn pagina kijkt, dan realiseer je je dat als je enkel alles versmalt een en ander onbruikbaar wordt. Ga naar ah.nl en versmal het browservenster. De pagina past zich aan; men gebruikt responsive CSS.

Adaptive webdesign tenslotte. Je maakt een aparte versie van de website voor desktop, voor tablet en voor smartphone. Is nooit erg populair geworden, maar je gebruikt het bijvoorbeeld wel in een gebouw met veel informatieschermen in verschillende formaten.

Werken met CSS3 transitions.

Animatie met CSS3 transitions



Een tweede belangrijk aspect van modern webdesign is het gebruik van CSS Transitions. Met de nieuwste versie van CSS, CSS3, kunt u animaties maken. Zie op de afbeelding hierboven wat er gebeurt als u de muiswijzer boven de knop Schoenen houdt. Zie een werkende versie hier (opent in een nieuw venster). Vroeger werden dit soort animaties gemaakt met Flash, maar omdat dat niet draait op iOS (iPad, iPhone, iPod) is de CSS Transitions techniek ontwikkeld.

Het derde belangrijke aspect van modern webdesign is statisch vs. dynamisch. De pagina waar u nu naar kijkt ziet er morgen precies hetzelfde uit, maar een pagina van Google of van Marktplaats ziet er morgen anders uit. Andere advertenties, andere plaatjes. Het past zich aan de tijd van de dag aan, aan de maand van het jaar, en als u in Heerlen woont ziet u wat anders dan wanneer u in Rotterdam woont. Het zijn dynamische websites. Ze zijn gekoppeld aan een database, en dat geheel wordt gestuurd door een Content Management System, CMS. De beheerder geeft door aan de database dat hij 100 groene jurkjes heeft ingekocht, en de CMS past de voorraad op de website aan.



Werken met Adobe Muse.


De mogelijkheden van Adobe Muse bespreek ik hieronder



Ik bespreek weer de Adobe applicaties waarmee ik werk, nu dus wat betreft webdesign. Op de eerste afbeelding op deze pagina zag u het werkgebied van Dreamweaver. Met Dreamweaver 'kan alles', maar u moet wel goed verstand van coderen hebben, van HTML en CSS schrijven.

Op de afbeelding hierboven ziet u het werkgebied van Muse. Muse werkt juist niet met code, althans u werkt in Muse niet met code. Je kan dan ook geen rechthoek laten verschijnen met een stuk CSS code, je hebt er een gereedschap voor. Dat is één verschil met Dreamweaver; Muse werkt Wysiwyg (what you see is what you get). Een ander verschil is de grote hoeveelheid widgets die je ter beschikking hebt. Zie dat ik er rechts een opende voor Google Maps. Ook kan je in Muse vrij eenvoudig scrollende achtergronden aanbrengen, en tot slot kan ik er Adaptive design mee maken: drie versies van dezelfde website, zoals ik eerder besprak. Zie het menu bovenin de afbeelding.


Werken met Adobe Edge Reflow.


Het werkgebied van Edge Reflow



Voor bepaalde specifieke taken staan me vier verdere applicaties voor webdesign ter beschikking in het Adobe Creative Cloud pakket.
» Op de eerste plaats Edge Reflow. Het werkt een beetje zoals Muse, maar dan met de mogelijkheden van Dreamweaver om responsive CSS te maken. Voor simpele sites die snel klaar moeten zijn.
» One Page websites, die 'lange' sites die vooral handig zijn op smartphones maken we met Spark Page.
» Met Spark Post maken we kleine website achtige zaken voor gebruik op Social Media.
» Met XD tenslotte (eXperience Design) maken we website ontwerpen. Enkel ontwerpen, als opzet die door een webdesigner moet worden uitgewerkt; geen werkende websites dus. Eerder had ik het over in-browser werk: iets wat ik bouw kan ik online zetten, en de opdrachtgever kan er zaken in aanpassen. Dat kan met XD en ook met Muse. Met Muse kunt u het echt online zetten, met XD enkel op de server van Adobe.

Ik heb weer een klein album samengesteld, nu met voorbeelden van webdesign. U vindt er van alles wat. Zie het album hier; dit opent weer in een nieuw venster.


Een interactieve PDF maken.


Werken met Adobe Acrobat DC



PDF's en ePubs tenslotte. Ook dat zijn digitale zaken; interactieve PDF's versturen zichzelf over het web, en een ePub is in feite niets anders dan een soort gezipte website.
Hierboven ziet u een interactieve PDF in de maak. Dat doen we met een professionele versie van Acrobat. U ziet een keuzeveld, een selectieveld, een tekstveld, een knop om een audiobestand te starten, om een video te starten. U kunt digitaal ondertekenen, mailen en afdrukken. Je kan met Acrobat DC zelfs 3D PDF's maken, waarbij je dat 3D bestand natuurlijk eerst met andere software moet maken. Zie een 3D PDF hier. Hij komt waarschijnlijk in uw downloadmap terecht. Met uw muis slepend kunt u het object in de ruimte laten kantelen. Het kan zijn dat u een veiligheidswaarschuwing krijgt (niets van aantrekken) of dat u even moet wachten voor het functioneert.

ePubs tot slot. In InDesign maak je een uit meerdere pagina's bestaand document, met de nodige interactiviteit, als het tenminste niet voor drukwerk bestemd is. Je exporteert dat als PDF of als ePub. In dat laatste geval kan je kiezen tussen een vaste en een responsive lay-out. Responsive lay-out heeft het nadeel dat niet goed in de hand te houden is hoe het er op verschillende apparaten uit gaat zien (wel als u kiest voor PDF). ePub met vaste lay-out gebruik je bijvoorbeeld voor digitale kinderboeken, catalogi en werken met veel afbeeldingen in het algemeen.