PSD to HTML, xHTML of HTML5

Bij onze dienst PSD to HTML zetten wij een door u aangeleverd PSD, Illustrator of Indesign bestand om naar SEO vriendelijke en cross-browser (x)HTML/CSS code. Het ontwerp wordt bij het slicen (ook wel basen genoemd) dus als het ware bruikbaar gemaakt.


PSD to HTML slicing in 3 stappen.

PSD slicing naar HTML, xHTML of HTML5?

Indien u een PSD to HTML project bij ons gaat uitbesteden zal in de eerste stap bij het uploaden van uw PSD file worden gevraagd naar het gewenste Doctype. Hierbij kunt u kiezen of u uw PSD bestand wilt laten omzetten naar HTML5, xHTML Strict of xHTML Transitional.

Strict of transitionale xHTML

xHTML slicing bestaat uit de normale traditionele HTML 4 structuur gecombineerd met de opmaak van de XML structuur. Het grootste verschil tussen xHTML Transitional en xHTML Strict is het feit dat xHTML Strict veel minder vergevend is. Alles dient exact volgens de schema’s afgesloten te worden anders treden er fouten in de opmaak op. Indien u dus zelf achteraf wijzigingen wilt aanbrengen in de broncode is het makkelijker om voor Transitional of HTML5 te kiezen.
Het gekozen doctype maakt voor de zoekmachine niet uit, mits de regels van de betreffende schema’s worden nageleefd. Het is dus bijvoorbeeld niet mogelijk om HTML5 elementen in een broncode met een xHTML doctype te gebruiken, omdat deze elementen binnen xHTML niet herkend worden.

HTML5 slicing

HTML5 slicing

HTML5 slicing is eigenlijk de meest complete variant, dit komt vooral doordat nieuwe technieken vrijwel direct geimplementeerd worden in deze programmeertaal. Het kan worden gezien als een combinatie van HTML en xHTML, aangezien er functionaliteiten van de beiden worden gebruikt in deze nieuwste versie.
HTML5 is er vooral voor bedoeld om te zorgen voor meer structuur binnen de tekst. Zo kan de slicing er door middel van bijvoorbeeld <section> tags voor zorgen dat de zoekmachines uw website beter kunnen lezen. Daarnaast kan er door middel van <nav> elementen worden aangegeven dat er navigatieonderdelen aangemaakt zijn. Zo kan er als het ware aan de zoekmachine worden verteld welke onderdelen het meest relevant zijn, waardoor deze goed tot uiting komen. Hierbij zijn natuurlijk ook de <header> en <footer> tags van groot belang.

PSD naar HTML5 specialisten

Het correct omzetten van uw PSD naar HTML5 is voor veel webontwikkelaars niet gemakkelijk. Om te profiteren van een goede HTML5 slicing is het daarom dan ook van groot belang dat u er zeker van bent dat u te maken heeft met een professional die weet wat hij of zij doet. Alleen op die manier kunt u optimaal profiteren van de mogelijkheden en komt u een stap verder dan bij alleen xHTML of HTML slicing. Wanneer de webontwikkelaar u op een goede manier van een HTML5 website weet te voorzien kunt u hier uiteraard gemakkelijk van profiteren, gezien de uitgebreide functionaliteiten. Het is daarom dan ook interessant om te kiezen voor PSD to HTML5 slicing en op die manier optimaal te profiteren van wat er mogelijk is.


Extra opties bij een xHTML‚ HTML5 template

Bij het slicen van uw PSD naar een xHTML of HTML5 template kunt u kiezen voor de volgende extra opties:

  • Font-face implementatie. @Font-face implementatie:

    @Font-face is de nieuwste methode om tekst te vervangen door het font om te zetten in bestanden die in de stylesheet worden opgenomen.
    Wij adviseren deze methode boven Cufon

  • Javascript functie Javascript functie (eenvoudig en gemiddeld):

    Eenvoudige javascript functies voor standaard sliders of lightboxes. Kies voor de optie javascript gemiddeld als u maatwerk sliders of lightboxes nodig hebt.

  • Cufon implementatie Cufon implementatie:

    Cufon is een methode om niet standaard web-fonts op uw website weer te geven. De cufon methode is tegenwoordig ingehaald door de font-face implementatie.

  • Geavanceerde Javascript functies Javascript functie (geavanceerd):

    Bij geavanceerde javascript functies moet u denken aan zware scripts die geheel of grotendeels op maat opgebouwd dienen te worden.

  • Discrete PSD naar HTML slicing (White label) Discretie (White label):

    Kies deze optie als uw opdracht volledige discretie vereist. Niemand zal weten dat Direct Basing uw opdracht heeft geslicet.

  • Gestijlde invoervelden. Gestijlde invoervelden:

    De optie gestijlde invoervelden is van toepassing bij opgemaakte select‚ radio- of check-boxes. De opmaak hiervoor kunt u in het PSD bestand aanleveren.

  • Dropdown menu Dropdown menu:

    Kies deze optie als u geavanceerde menu’s nodig hebt‚ zoals dropdown menu’s.

  • Spoedopdracht (Binnen 12 uur) Spoedopdracht (Binnen 12 uur):

    Indien u uw slicing opdracht binnen 12 uur voltooid wilt hebben kunt u deze optie aanvinken. Let op deze optie geldt alleen voor projecten met 3 of minder HTML pagina’s.


PSD naar website of webshop met CMS

Steeds meer website-eigenaren willen hun website graag zelf beheren, om zo de controle te houden over de kosten of om deze in ieder geval te drukken. Dit kunnen zij doen door gebruik te maken van een Content Management Systeem (CMS). Met een CMS is het mogelijk het beheer van een website of webshop uit te voeren, zonder specifieke technische kennis.
Over het algemeen wordt er vooral gebruik gemaakt van de opensource (gratis) varianten. Dit betekent dat de documenten doorgaans zullen worden geïntegreerd met Wordpress, Magento of Joomla.

Het slicen van een PSD naar een website of webshop met CMS gebeurd uiteraard meestal in deze systemen vanwege het feit dat ze gratis zijn maar zeker ook omdat ze zeer uitgebreid zijn en daarmee veel mogelijkheden kennen. Een gemiddelde website kan prima uit de voeten met een van deze CMS systemen. CMS slicing is een eventuele 3e stap binnen het totale slicen. Deze stap hoeft alleen uitgevoerd te worden wanneer u een integratie van de HTML5 documenten wenst met uw CMS. Wanneer dit niet het geval is zal de programmering plaatsvinden nadat de HTML of xHTML slicing is voltooid.



Wij hebben o.a. gewerkt voor?

Kenmerkend voor Direct Basing zijn de hoge kwaliteit en snelle levering van onze slicings met of zonder CMS implementatie. Ons vaste team van ervaren slicers levert overzichtelijke en zoekmachine vriendelijke broncode, die professioneel en gestructureerd is opgebouwd. Dit heeft resulteert in een uitgebreid en gevarieerd portfolio met een breed scala aan bedrijven, overheden en non-profitinstellingen waarvoor PSD-bestanden zijn omgezet naar HTML, xHTML of HTML5. Hieronder is slechts een kleine groep weergegeven van de bedrijven waar Direct Basing voor gewerkt heeft.