Liquid Page: Webdesign per Drag and Drop im Browser

commander@giga

Liquid Page
Das Javascript-Bookmarklet Liquid Page erlaubt das Verschieben beliebiger Website-Elemente direkt im Browser. Damit lassen sich zum Beispiel auch von Laien gewünschte Layout-Änderungen dokumentieren, ohne dass auch nur eine Zeile CSS oder HTML angefasst oder umfangreich mit Firebug hantiert werden muss.

Wer schon einmal eine Website entwickelt hat oder (noch schlimmer) von anderen entwickeln ließ, kennt die Nöte, gewünschte Änderungen zu beschreiben. Da ein bisschen höher, da etwas weiter unten, diese Elemente bitte auf einer Linie abschließend usw.

Am Ende sind alle Beteiligten vom Auftraggeber über den Projektleiter bis zum Webdesigner genervt. Das muss natürlich nicht sein und ließe sich einfach vermeiden, wenn jeder ein begnadeter Pixelschubser wäre und HTML aus dem Eff-Eff beherrschen würde. Nachdem das nicht die Realität widerspiegelt, sind Hilfsmittel gefragt. Eines davon ist das Javascript-Bookmarklet Liquid Page. Es erlaubt das Verschieben der Webseitenelemente in einem ganz normalen Browser. Danach wird noch ein Screenshot gemacht und den Beteiligten geschickt.

Hier ein Beispiel:

loadblog-liquid-page-vorher

Das LoadBlog vorher

loadblog-liquid-page-nachher

LoadBlog nach umfangreicher “Bearbeitung” mit Liquid Page

Das Bookmarklet ist keine Software, die aufwändig installiert werden muss. Es wird einfach per Drag und Drop von der unten verlinkten Website auf die Lesezeichen-Symbolleiste gezogen.

liquid-page-installation

Installation von Liquid-Page: EInfach den Link in die Lesezeichenleiste ziehen

Wenn die gewünschte Website im Browser geöffnet ist, klickt man ganz einfach das Bookmarklet an und zieht die Webseitenelemente mit der Maus dorthin, wo man sie haben möchte. Anschließend erstellt man einen Screenshot und schickt den an den Webdesigner oder speichert ihn einfach zur Dokumentation ab. Wenn die Website neu geladen wird, sind natürlich alle Elemente wieder an ihrem ursprünglichen Platz. Wir haben das Bookmarklet erfolgreich mit Firefox, Chrome, Opera und Safari getestet.

Fazit: Mit dem Bookmarklet Liquid Page kann auch ein Laie Layoutänderungen auf einer Website visualisieren, ohne auch nur ein Stückchen HTML-Code zu berühren geschweige denn ein Grafikprogramm zu bedienen.

Liquid Page (Bookmarklet für den Browser)
Seiten direkt im Browser bearbeiten

Hat dir "Liquid Page: Webdesign per Drag and Drop im Browser" von commander@giga gefallen? Schreib es uns in die Kommentare oder teile den Artikel. Wir freuen uns auf deine Meinung - und natürlich darfst du uns gerne auf Facebook, Twitter oder Google+ folgen.

Neue Artikel von GIGA SOFTWARE