Wir haben einen Kunden, der ein Produkt verkauft, bei dem Kunden beim Auschecken eine Geschenknachricht angeben. Die Website war für sie sehr erfolgreich und die Bestellungen kommen schneller als erwartet. Bisher haben sie die Notizen mit der Hand geschrieben, was in Nerd-Sprache nicht gut skaliert.
Als ich von dem Problem hörte, war die offensichtliche Lösung, mit dem Handschreiben aufzuhören. Vielleicht verlieren sie etwas von ihrem hausgemachten Flair, aber es ist auch weniger seltsam. Dies ist keine handschriftliche Notiz von einer Person an eine andere, sondern eine getippte Notiz von einer Person, die von einem Vermittler an eine dritte Person umgeschrieben wird. Außerdem beinhaltet meine Lösungsidee sowieso eine handschriftliche Schriftart!
Demo anzeigen Dateien herunterladen

Könnte man das genauso einfach mit Desktop-Software machen? Natürlich. Aber diese Methode (genau wie bei der editierbaren Rechnung) bedeutet, dass Sie sie von jedem Computer aus erledigen können, ohne sich Gedanken darüber machen zu müssen, ob Sie die Vorlage oder die richtigen Schriftarten oder was auch immer haben.
Kopieren und Einfügen
Die Idee ist einfach. Eine Webseite mit einem großen Textfeld darauf. Das Textfeld ist in einer lustigen Handschrift eingestellt. Die Geschenknachrichten, die in den Empfangs-E-Mails ankommen, können direkt hineinkopiert und eingefügt werden.
Größe anpassen
Da Geschenknachrichten lang, kurz und alles dazwischen sein können, dachte ich, es wäre hilfreich, die Größe des Textes im Handumdrehen ändern zu können.
Video
Nur weil schnelle Screencasts oft am besten geeignet sind, um Dinge zu erklären…
Demo anzeigen Dateien herunterladen
Guter Trick, Sie sind ein echter Programmierer, der hilft, Arbeit zu reduzieren und Zeit zum Ausruhen zu haben. Sagen wir, Programmierer sind eine faule Spezies, die immer nach einem Weg suchen, die Anstrengung zu reduzieren, damit sie mehr Zeit zum Ausruhen und Programmieren haben.
Ja, abhishek, du hast Recht, Chris macht die wunderbare Arbeit
Das ist irgendwie Off-Topic, weil du nur eine technische Möglichkeit zeigst, aber warum die Handschrift-Schriftart beibehalten, wenn die Handschrift sowieso verloren geht? Sie wissen schon, „das Medium ist die Botschaft“ und all das Zeug :)
Ich habe etwas Ähnliches für meinen Bruder gemacht. Er druckte, faltete und laminierte mehrere individuelle Gepäckanhänger für etwa 200 College-Athleten. Das schlägt das Erstellen von über 200 individuellen PSDs.
Anstatt mit Scrollbalken und maximalen Größen zu kämpfen, habe ich separate Texteingabefelder verwendet und ihm die Möglichkeit gegeben, jedes nach Belieben zu gestalten. Für einen schnellen Abend Arbeit war ich ziemlich zufrieden mit mir selbst. Versuchen Sie, eines als PDF auszudrucken, um zu sehen, wie es herauskam (doppelseitig).
http://usabledesignworks.com/dev/bagtag/
Tolle Idee :) Ich finde, die Schriftart funktioniert in IE8, aber das Layout nicht. Das Layout funktioniert in Firefox, aber die Schriftart wird nicht angezeigt, obwohl sie installiert ist.
Da es eine einmalige Sache war, konnte ich meinem Bruder ausdrücklich sagen, er solle Firefox benutzen und es nicht für IE aufwendig machen müssen. Ich hätte den Link nie veröffentlicht, aber Chris scheint an den gleichen Dingen zu arbeiten wie ich...
Seltsam, dass die Schriftart bei Ihnen nicht funktioniert – sie funktioniert bei mir unter Win, Mac und Linux in 3.1.17 und 3.5.x.
Jedenfalls – es war ein schneller Hack, der seinen beabsichtigten Zweck erfüllte. Fühlen Sie sich frei, damit zu spielen, wie Sie möchten (und wenn Sie einen besseren Weg finden, bitte, klären Sie mich auf...).
Großartig. Ich liebe solche Ideen. Ich könnte mir sogar vorstellen, dass die Seite URL-Parameter wie /dev/bagtag/?first=Kyle&last=Kinnaman annimmt, so dass diese theoretisch aus Excel oder etwas Ähnlichem erstellt werden könnten und sie nur noch klicken, anpassen und drucken müssten.
SEITENNOTIZ
Ja, ich benutzte zuerst Typekit für eine cool aussehende Handschrift, die ich gefunden habe. Aber sie druckte nicht. Dann suchte ich nach einer Möglichkeit, Typekit-Schriftarten zum Drucken zu zwingen, kam aber nicht weit. Dann dachte ich, hey, vielleicht benutze ich einfach eine @font-face-Schriftart und kann sicherstellen, dass sie auch für @print-Medien eingestellt ist und es funktionieren sollte, und das tat sie auch, aber der WAHRE Grund, warum sie druckte, war, dass ich die Schriftart auch lokal installiert hatte. Doh! Jedenfalls, wie Kyle sagte, sind das eher EINMALIGE Lösungen für bestimmte Leute, sodass man sehr spezifische Dinge tun kann (wie z.B. sie die Schriftart installieren lassen und einen bestimmten Browser verwenden).
Hallo Chris. Ich wollte Ihnen nur sagen, dass das in IE8 nicht funktioniert. Die Schriftart bricht nicht um. (Es funktioniert jedoch im IE8-Kompatibilitätsmodus). Irgendwelche Ideen dazu?
Das ist definitiv ein seltsamer Fehler in IE8. Der Text dupliziert sich sogar, wenn man die Größe auf- und abskaliert.
Ich habe das Beispiel heruntergeladen und ein wenig damit herumgespielt, und Sie können es beheben, indem Sie „display: block“ aus dem Textfeld entfernen und die Breite des Textfeldes auf 100 % ändern. Dann wickeln Sie das Textfeld in einen zentrierten div mit einer Breite von 600px. Es scheint, dass „display: block“ in Kombination mit der Breite das Problem verursacht. Vielleicht gibt es eine einfachere Lösung, aber diese scheint den Zweck zu erfüllen.
Tolle Idee, Chris. Sie könnten das Textfeld vielleicht ein paar Grad mit CSS3 drehen, um ihm ein eher handschriftliches Gefühl zu geben (inspiriert vom Bild unterhalb der Demo- und Download-Buttons).
Nun, das Drucken funktioniert in Firefox 3.6.x @ Windows nicht – die Schriftart wird auf die Standard-Schriftart umgestellt…
Das Drucken mit @font-face funktioniert bei mir auch in Firefox Mac nicht, obwohl es im Screencast funktionierte – ich schätze, Chris hat die Schriftart lokal installiert?
Ich hatte das gleiche Problem bei meinem Projekt (siehe oben). Ursprünglich benutzte ich Cufon, aber es druckt auch nicht. Ich musste @font-face verwenden, aber das erfordert, dass Sie die Schriftart lokal installiert haben (also habe ich für mein Projekt einen Link zum Herunterladen der Schriftart bereitgestellt).
Wenn Sie dies als internes Dankesnotizsystem verwenden, wie Chris es beabsichtigt hat, könnten Sie die notwendigen Schriftarten problemlos an alle Ihre Mitarbeiter weitergeben.
Die Idee des schnellen Screencasts hat mir gefallen..
PS – Versuchen Sie beim nächsten Mal, Videos mit besserer Auflösung zu machen.
Sie sollten diese Lösung an Amazon verkaufen. Das ist so einfach, aber wird nicht genutzt.
Ich finde, das würde von einigen Textausrichtungsoptionen profitieren, meiner Meinung nach ist der Großteil jedes Geschenkkarten- / Grußkartentextes zentral ausgerichtet.
Spart auf jeden Fall Zeit und ein großartiges Werkzeug. Der nächste Schritt ist nur, das Kopieren und Einfügen zu eliminieren und es direkt von der Website generieren zu lassen, o/c
Ja, ich denke für den echten Kunden wäre es am besten, die gesamten Geschenknachrichten als Parameter in der URL zu übergeben, damit sie einfach klicken können, ohne kopieren und einfügen zu müssen.
Wenn Sie dies intern verwenden, ist das vollkommen in Ordnung. Wenn Sie die URL-Parameter der Welt sichtbar lassen, könnten Sie ein Problem bekommen, wie CNN es hatte: http://bit.ly/9e5MXQ. Ich würde POST verwenden und gründlich bereinigen.
Gute Idee Chris, aber Sie erwähnen Skalierbarkeit!
Um dies noch „skalierbarer“ zu machen, warum würden Sie es nicht direkt in das „Admin-Kontrollpanel“ der Website integrieren, damit es automatisch die „handschriftliche“ Notiz erstellt? Sie könnten URL-Parameter verwenden, um den gewünschten Effekt zu erzielen?
note.php?msg=Happy+Birthday+Gramps
Ich finde, das ganze Kopieren und Einfügen ist nicht nötig? Ich bin an Ihren Gedanken interessiert!
Tolle Sachen …….. hat mir gefallen
Ein weiterer Seinfeld-Fan meldet sich. Festivus für den Rest von uns!
Sehr pfiffige benutzerdefinierte Lösung. Als Bonus könnten Sie vielleicht das Skript beifügen, das Sie hier geschrieben haben: https://css-tricks.de/set-font-size-based-on-word-count/
Sie würden ihn wahrscheinlich nicht als Ersatz für den jQuery UI Slider verwenden wollen, aber er würde ihn sicherlich gut ergänzen :)
Chris, ich liebe die Art und Weise, wie Sie neue und interessante Wege finden, mit den verfügbaren Werkzeugen zu spielen. Es ist eine schnellere Lösung für Sie als Designer, um Nettigkeiten wie UI-Slider einzubauen, die Erfahrung mit @font-face zu zeigen und dann die Bearbeitungszeit für diejenigen zu verkürzen, die etwas Ähnliches erleben möchten.
Wenn es wirklich an Fahrt aufnehmen würde, könnten Sie die Person, die diese Karten schreibt, mit einigen handgeschriebenen Glyphen versorgen, aus denen Sie eine Schriftart erstellen könnten.
Dadurch würde die Persönlichkeit nicht (naja, nur ein klein wenig) verloren gehen, wie jemand oben bemerkte.
Sie sind ein sehr cleveres Kerlchen. Gute Arbeit. Lässt mich mein eigenes Problem erfinden, um Ihre Lösung zu passen.
Ich habe diese Art von Arbeit noch nie zuvor gesehen… Das ist eine großartige Leistung…