Maki bookmarklet, vergelijk je HTML en je design
Persoonlijk vind ik het heel belangrijk dat een uiteindelijke HTML versie van een design ook dezelfde uitlijning heeft als in het design. Maki zorgt ervoor dat je je design als overlay over de HTML versie in je browser kan plaatsen en beide kan vergelijken.
Hoe gebruik je deze bookmarklet?
- Sleep de bookmarklet die je op de website (http://www.makiapp.com) terugvindt naar je koppelingen werkbalk.
- Open het HTML bestand in je browser
- Klik op de "maki!" koppeling in je werkbalk
- Klik op "Choose File" en laad het bijhorende design in
Het design is nu als overlay te zien over de HTML versie die je aan het ontwikkelen bent. Zijn er nog aanpassingen nodig in je HTML of CSS? Na het aanpassen in je favoriete editor kom je terug naar de browser en klik je op het "refresh" icoontje van de app. De HTML wordt opnieuw ingeladen zonder de overlay te verwijderen en verplaatsen. Op deze manier kan je op een snelle en eenvoudige manier je elementen uitlijnen volgens het design.
Het voordeel van Maki is dat het geen browserspecifieke add-on is maar een bookmarklet die in elke browser gebruikt kan worden. Zo kan je je CSS crossbrowser afstemmen op je design.
5 Reacties op deze blogpost:
Leuke tool alleen jammer dat je een slicejob eerst moet uploaden alvorens je kan testen. Voor designers die het design achteraf op alle browsers willen controleren is dit uiteraard wel handig maar tijdens de lokale HTML/CSS ontwikkelingen niet.
Voor FireFox bestaat er een add-on (pixelperfect) waar je designs online en offline kan vergelijken.
@Fronteer Idd, ik had het daarnet ook opgemerkt. Ik weet niet of dit haalbaar om het lokaal te bekijken maar ik geef het door als feedback. Ik gebruikte pixelperfect ook, alleen bestaat het enkel voor Firefox en niet andere browsers.
Yep, tweette deze handige tool vorige week ook al.
Off/online .., zo moeilijk is het toch niet om deze even online te brengen. En je kan natuurlijk altijd in je dropbox-folder werken of kopie zetten en dan de Public Link in maki doorgeven (yep, snel getest, dit werkt)
@Tom leuke oplossing! thx
Net de tool eens uitgetest, moet toegeven zeer handig kende hem nog totaal niet, goeie post!