De nieuwe Profielen-site voor kenners
Gepubliceerd: 22 December 2011 • Leestijd: 3 minuten en 2 seconden • Nieuws Dit artikel is meer dan een jaar oud.Profielen heeft een nieuwe website. Deze site is sneller en geschikt voor smartphones en tablets, zoals iPhones, Blackberries en iPads. Webdeveloper Darice de Cuba legt uit wat er precies is veranderd.
In januari 2010 kreeg Profielen een volledig nieuwe website, ontworpen door Evelien van Vugt, die ook het ontwerp van het blad onder haar hoede heeft. Maar de site werd al snel te traag en was niet aangepast aan smartphones en tablets. Dat maakte een revisie nodig. In september ging webdeveloper Darice de Cuba daarmee aan de slag.
Wat is veranderd?
Zoals iedere website, zit achter die van Profielen een database vol artikelen. Wat je als bezoeker ziet, is enkel een vormgegeven versie van wat in die database staat. De site vraagt bij ieder bezoek aan de database wat de laatste vijftien artikelen zijn. Die laat hij dan aan de bezoeker zien, volgens de vormgeefregels die je zelf programmeert.
De site heeft een complete metamorfose ondergaan, maar de database is ongemoeid gelaten. De oude site was geprogrammeerd in tabellen. Daarin kun je geen structuren programmeren. Dat levert beperkingen op, waardoor de tabellen nu niet veel meer gebruikt worden.
De nieuwe site bestaat uit losse blokken (div's), wat het mogelijk maakt om een flexibele, elastische site te bouwen. Een site die zich aanpast aan de verschillende apparaten waarmee je de site bezoekt. Het scherm van een iPhone is te klein om de hele site op te lezen. De nieuwe site past zich daarop aan, door over te springen naar een andere, compactere opmaak.
Techniek
De nieuwe site is daardoor sneller en geschikt voor verschillende schermgroottes en apparaten. De oplossing kan voor kenners in een paar zinnen samengevat worden: een responsive design, één website voor alle apparaten, in HTML5 en CSS3, geheel volgens de meest gebruikelijke webstandaarden, waardoor de site beter toegankelijk is voor mens & Google. Daarnaast gebruiken we HTML5 Boilerplate voor de standaard HTML5 en CSS3 instellingen.
We moesten ook rekening houden met de sterk verouderde versie van Internet Explorer (versie 8). Deze staat op alle computers van de hogeschool en veel bezoekers van de Profielen-site zullen hem dus nog gebruiken. Dat blijft waarschijnlijk nog wel even het geval. (Microsoft maakte in juli al bekend dat het op termijn zal stoppen met het ondersteunen van Windows XP, meldde Nu.nl. Dit besturingssysteem ondersteunt geen nieuwere versie van Internet Explorer.)
Verschillende browsers
Zolang alle computers op de hogeschool op Windows XP en Internet Explorer 8 draaien, kunnen we niet optimaal genieten van de website van Profielen (en andere moderne websites, natuurlijk). Alhoewel, er is een oplossing. Steeds meer mensen installeren zelf een browser die nieuwer, sneller en veiliger is. Denk aan Firefox, Opera of Chrome (Safari, voor Apple, loopt niet perfect op het besturingssysteem van Windows).
Omdat Internet Explorer 8 de nieuwste technieken niet ondersteunt, ziet de website er door de ogen van IE8 anders uit. Als je de website in een moderne browser bezoekt, luistert die browser naar andere regels dan bij gebruik van IE8. Het is dankzij HTML5 Boilerplate dat de moderne snufjes ook (een beetje) op IE8 werken.
Gelukkig hoeft niet iedere website er hetzelfde uit te zien in iedere browser.
Lettertype
Op de meeste hogeschoolcomputers staan sommige instellingen uit, zoals de optie smooth edges of screen fonts. Dat is een optie die ervoor zorgt dat letters een beetje 'zachter' of 'vloeiender' worden gepresenteerd. Als die uitstaat, zijn de letters op de site niet optimaal leesbaar op Windows XP-computers. Profielen maakt gebruik van Typekit, een lettertypenservice. Het lettertype dat we gebruiken is FF Tisa Web Pro.
Echt mobiel?
Er zijn ook andere manieren om een mobiele versie van een site te maken. De manier die websitebouwers aanbevelen is mobile first, wat zoveel zegt als: programmeer de hele site voor mobiele apparaten, dus compact, en pas daarna voor normale computers. Wat wij hebben gedaan, is zorgen dat de site zich aanpast aan de schermgrootte, dus er zullen mensen zijn die zeggen dat het geen echte mobiele site is. Gelukkig werkt hij prima.
In Nederland maakt het bovendien niet zoveel uit: We hebben hier een snel datanetwerk voor mobiele telefoons. Zeker vergeleken met de Verenigde Staten en Engeland, waar de meeste pioniers werken op het gebied van responsive of adaptive design.
Constant bijwerken
Een nieuwe website is geen product dat je neerzet en verder met rust kunt laten. Daarvoor gaan de ontwikkelingen te snel, zowel technisch als grafisch. En er zijn altijd nieuwe wensen. Zo willen we een programma op de site implementeren waarmee je online door de pdf van het blad kunt bladeren. Nu moet je die pdf eerst downloaden en dat kost tijd.
De komende tijd blijven we bezig met het verbeteren en vernieuwen van de site. En mocht iemand daar nog suggesties voor hebben, laat het ons dan gerust weten!
Darice de Cuba
Laat een reactie achter
Spelregels
De redactie waardeert het als je onder je eigen naam reageert.
Lees hier alle details over onze spelregels.
Aanbevolen door de redactie
Docenten starten petitie: HR moet zich uitspreken tegen schending mensenrechten in Gaza
Vervroegde renovatie Museumpark gaat zorgen voor ingrijpend verhuiscircus
Ondernemende Ad-student Joyce start op HR pilot met gratis menstruatieproducten
Back to Top