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

Zu den Kommentaren

Kommentare zu diesem Artikel

Neue Artikel von GIGA SOFTWARE

  • Darktable

    Darktable

    Mit dem Darktable Download bekommt ihr ein Tool für die Verwaltung und Bearbeitung von Digitalfotos, dass auf RAW-Dateien spezialisiert ist und eine kostenlose Alternative zu Adobe Photoshop Lightroom darstellt.
    Marvin Basse
  • iDevice Manager

    iDevice Manager

    Mit dem iDevice Manager Download greift man direkt auf die Datei-Struktur von iPhone, iPod touch und iPad zu und lädt bzw. überträgt Daten per USB.
    Marvin Basse
  • PCMark 10

    PCMark 10

    Der PCMark 10 Download verschafft euch ein verbreitetes Benchmark-Programm und den Nachfolger von PCMark 8, mit dem ihr die Leistungsfähigkeit eures Rechners auf einfache Weise testen könnt.
    Marvin Basse
* Werbung