Twitter Behance Pinterest Instagram Mailchimp Dribbble

Met deze software maak ik websites


Voor het ontwerpen en ontwikkelen van websites is veel software beschikbaar. Ik maak responsive websites met een een uniek ontwerp en een op maat gemaakt Content Management Systeem (CMS) om de inhoud mee te beheren. De website is bovendien razendsnel en scoort goed in zoekmachines.

De software, services en tools, die ik hiervoor gebruik, vind je in dit blog.

Pen, papier, whiteboard

Pen en papier

De meeste ontwerpen beginnen op papier. Met pen en papier of op een whiteboard kun je lekker schetsen, krassen en fouten maken. Hier kan ik het beste uitproberen welke layout-opties er zijn. Hieruit ontstaat uiteindelijk een wireframe (draadmodel opgebouwd uit lijnen en blokjes) van de website.

hema.nl

Mac

iMac

Ik werk altijd op een Mac. Op mijn werkkamer gebruik ik een 27″ 5k iMac, snel en met een heerlijk scherm. De Mac is doorgaans redelijk betrouwbaar en ik hoef relatief weinig te troubleshooten. Daarnaast valt het mij op dat er voor ontwerpers en ontwikkelaars van Apple mooiere software beschikbaar is dan voor Windows.

apple.com

Sketch

SketchWireframes zet ik in Sketch om naar een eerste digitale versie, die de klant kan bekijken. In Sketch werk ik op basis van de huisstijl van de klant ook style guides uit om zo tot een uiteindelijk ontwerp te komen. Sketch is een fantastisch alternatief voor Adobe Photoshop en is bedoeld voor interactief ontwerp. Sketch is ook nog eens vele malen goedkoper.

sketchapp.com

Atom

AtomAtom is momenteel mijn favoriete teksteditor. Hierin programmeer ik websites. Van templates tot maatwerkplugins. Atom is snel en volledig te personaliseren. Ik wissel nogal eens van teksteditor. Binnenkort wil ik het populaire VS Code gaan uitproberen. In het verleden werkte ik graag met Coda, maar dit programma wordt niet meer actief ontwikkeld.

atom.io

Sass / BEM

SassSass is een CSS-pre-processor. Zie het als een super charged versie van CSS (stylesheets), die nog omgezet moet worden naar door de browser interpreteerbare styles. Sass is dus een laag bovenop CSS die eerst nog met een ‘processor’ moet worden omgezet naar CSS. BEM is een methodologie om betere en modulaire CSS te schrijven. Deze methode gaat hand in hand met Sass.

sass-lang.com

CodeKit

CodeKit

Sass moet omgezet worden naar CSS. CodeKit doet dit voor je. CodeKit doet nog veel meer. Denk aan het automatisch verversen van je browser, het compileren en samenvoegen van Javascript, het verkleinen van code en het optimaliseren van afbeeldingen. Ik heb ook met Gulp en Webpack gewerkt, maar Codekit werkt voor mij zoveel sneller en makkelijker. Geen config files, geen node_modules (yugh) en geen errors.

codekitapp.com

WordPress

WordPress

Als CMS gebruik ik vaak WordPress, een populair open source platform met een redelijk goede user interface voor de eindgebruiker. WordPress heeft voor ontwikkelaar zeker nadelen. De achterliggende code is gedateerd, rommelig en backwards compatible naar een oude versie van WordPress en het templatesysteem is niet zuiver. Met een combinatie van tools en discipline is WordPress een fantastisch systeem en goed in te zetten voor veel uiteenlopende projecten.

wordpress.org

Tower

Tower

Mijn code, thema’s en plugins staan in Git (versiebeheer). Hiervoor gebruik veelal Gitlab als provider en Tower als Graphical User Interface (GUI) op mijn Mac. Ik vind een GUI prettiger dan werken met de command line. Met Tower kan ik in een gebruiksvriendelijke interface mijn code pushen naar Git, vertakkingen maken en werken met Gitflow.

git-tower.com

Sequel Pro

Sequel Pro

In een database staan alle gegevens van een website opgeslagen. Soms moet ik hierbij kunnen om handmatig aanpassingen aan de data of de databasestructuur te doen. Hiervoor gebruik ik Sequel Pro. Dit is een open-source databaseprogramma met een redelijk goede interface.

sequelpro.com

Advanced Custom Fields

Advanced Custom Fields

Advanced Custom Fields is de plugin voor WordPress-ontwikkelaars. Onmisbaar voor het maken van een site met een gebruiksvriendelijk beheerpaneel voor de klant. Je kunt per pagina of post verschillende type velden aanmaken, die de klant kan invullen. De ingevulde velden toon ik dan weer aan de voorkant van de website.

advancedcustomfields.com

Timber

Timber

Eén van de nadelen van WordPress is het afschuwelijke templatesysteem. In het meest extreme geval is dit een combinatie van PHP, HTML, CSS en Javascript in één bestand. Timber werkt met de template-engine Twig en een aantal extra functies speciaal voor WordPress. Met Timber schrijf je betere, gestructureerdere en nettere templates.

upstatement.com

Polylang

Polylang

Als een website meertalig moet zijn, gebruik ik hiervoor Polylang Pro. In tegenstelling tot het populaire WPML heeft Polylang een nette en schone interface. Het sluit naadloos aan bij de interface van WordPress en dit zorgt ervoor dat het voor klanten makkelijker wordt om een website te beheren.

polylang.pro

Poedit

Poedit

Bij meertalige websites kun je er niet omheen om teksten, die vertaald moeten worden, in je template-files te zetten. Voor deze vertalingen kun je vertaalbestanden (*.pot, *.po, *.mo) gebruiken. Poedit maakt het genereren en beheren van zulke bestanden overzichtelijk en makkelijk.

poedit.net

Trellis

Trellis

Voor mijn lokale ontwikkelomgeving, het configureren van servers en online zetten van websites gebruik ik Trellis. Lees hier meer over de voordelen van Trellis. In combinatie met Trellis gebruik ik ook Bedrock (heringedeelde en gestructureerde opzet van WordPress), Composer (voor het installeren van alle benodigde software en plugins), Vagrant (om een lokale ontwikkelomgeving op te zetten) en Ansible (voor de configuratie van de uiteindelijke server).

roots.io

VirtualBox

VirtualBox

Websites moeten ook goed werken op oudere browsers en op andere besturingssytemen, zoals Windows. Om in deze andere systemen te testen gebruik VirtualBox. Dit programma kan virtuele machines draaien. Zo is het mogelijk om op een Mac Windows te bekijken.

virtualbox.org

Neat

Neat

Neat is een lichtgewicht grid-systeem geschreven in Sass. Neat maakt het eenvoudig om een mobile first responsive kolommenlayout te maken. Dit kan natuurlijk ook met modernere technieken zoals CSS Grid Layout, maar als oudere browsers nog ondersteund moeten worden is het gebruik daarvan helaas geen optie.

bourbon.io

Migrate DB Pro

Migrate DB PRo

Met Migrate DB Pro is het mogelijk om vanaf verschillende omgevingen de database te migreren. Zo kun je met een druk op de knop alle data van de productieserver binnenhalen op je lokale ontwikkelomgeving. Deze software bespaart heel veel tijd en frustratie.

deliciousbrains.com

Buzz SEO

Buzz SEO

Buzz SEO is een lichtgewicht zoekmachineoptimalisatieplugin voor WordPress. In tegenstelling tot andere plugins, zoals het populaire Yoast SEO beperkt Buzz SEO zicht tot de kern en bevat het geen overbodige functionaliteit.

github.com

Deze lijst met software, services en tools is ongetwijfeld niet volledig en zal er over een paar maanden alweer helemaal anders uitzien. Ik zal hem updaten als ik wat nieuws te vertellen heb. Welke software vind jij goed en onmisbaar? Of waar werk je juist helemaal niet graag mee? Laat het weten in de comments!

Gerelateerde artikelen: