Erstellen Sie eine Website-Vorlage für eine iPhone-App mit E-Mail-Registrierung

Wenn Sie mit iOS in der Szene waren, haben Sie sicherlich einige der wunderschönen App-Websites gesehen. Diese wurden in den letzten Jahren veröffentlicht, da Entwickler nach Wegen gesucht haben, um Marketingpotenziale zu erschließen. Es gibt eine Menge sehr standardisierter Vorlagen für Webdesigner - aber ich hoffe, etwas Neues anzugehen!

Heute erstellen wir eine gestaltete iPhone-App-Website-Vorlage mit HTML5 / CSS3. Diese Option ist nicht auf eine bestimmte App ausgerichtet, sodass wir keinen Download-Link zum App Store hinzufügen. Stattdessen habe ich über MailChimp ein kleines E-Mail-Anmeldeformular erstellt, mit dem Sie frühe Anwender in die App einbinden können. Dies ist ideal für Entwickler, die etwas für ihr Produkt benötigen, bevor es auf den Markt kommt.

Versuch es

Live-Demo ansehen - Quelle herunterladen

Wenn Sie jedoch festgestellt haben, dass der Screenshot der App, den ich verwende, von einer tatsächlichen App stammt, ist dies der Fall. Es heißt Ballin ~ Dribbble für iPhone und ist erst vor wenigen Wochen in den Laden gekommen. Dieses Layout wird nicht verwendet, um die Ballin-App zu dulden, stattdessen brauchte ich nur einen Screenshot, um Demo-Zwecke hinzuzufügen. Sie können jedoch einen anderen Bildschirm verwenden, wenn Sie die Vorlage für Ihre eigene Website kopieren.

Fertig machen

Wie immer beginnen wir mit einer sehr einfachen HTML-Seitenstruktur. Wenn Sie die Demo ausgecheckt haben, wird alles, was wir brauchen, auf der Seite zentriert und richtig ausgerichtet. Der Code ist überhaupt nicht gewunden! Ich verwende den Standard-HTML5-Doctype mit 3 externen Dateien.

iPhone App-Website mit E-Mail-Registrierung

Der erste ist unser global.css-Format in einer alternativen Datei. Zweitens benötigen wir die neueste jQuery-Bibliothek, die über Google Code-Datenbanken gehostet wird. Und schließlich habe ich das Formular-Validierungsskript von MailChimp hinzugefügt. Dieses Skript-Tag wird normalerweise mit dem E-Mail-Anmeldeformular in Ihren Body-Bereich kopiert. Um den Code zu vereinfachen, habe ich ihn in den Kopf verschoben.

Jetzt konzentrieren wir uns auf Teile des Körpers. Ich werde unsere E-Mail-Anmeldung erst jetzt überspringen, damit wir uns auf die nackten Knochenstile und das Framework konzentrieren können. Nach dem Öffnen des Körpers bemerken Sie eine ID # iphone-preview die verwendet wird, um den iPhone-Screenshot der Ballin 'App aufzunehmen. Wir verwenden auf dieser Webseite eigentlich nur zwei Bilder - den iPhone-Bildschirm und unseren blauen Hintergrund mit Farbverlauf.

Als kurze Notiz habe ich eine iPhone 4 PSD-Datei zum Erstellen der Grafik verwendet. Sie können es im Macristocracy-Blog nachlesen, wo Jake Moore die kostenlose PSD zum Download angeboten hat. Oder alternativ einfach direkt von seinem CloudApp-Link herunterladen, ohne die Seite zu besuchen!

<img src="//lesptitesaffairesdemayl.be/img/images_1/design-an-iphone-app-website-template-with-e-mail-signup_2.jpg"> <p>Sobald Sie sich im Listen-Dashboard-Bereich befinden, sollten Sie eine Reihe von Links für die Unternavigation sehen. Ganz rechts sehen Sie For Your Website und klicken Sie im Dropdown-Menü auf <strong>Anmeldeformular Einbettungscode</strong>. Dies ist der Code, den Sie für ein kleines Anmeldeformular mit MailChimp einbetten müssen.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/design-an-iphone-app-website-template-with-e-mail-signup_3.jpg"> <p>Im linken Menü wählen Sie <strong>Klassische Form</strong> und passen Sie die Funktionen nach Ihren Wünschen an. Ich habe den Titel entfernt und ein Standard-E-Mail-Feld für die Anmeldung beibehalten. Der Code, den Sie kopieren müssen, befindet sich unten in der Box. So können wir jetzt mit unseren benutzerdefinierten Bearbeitungen fortfahren.</p> <h2>Anpassen des Anmeldeformulars</h2> <p>Beginnen Sie mit dem Entfernen des Top-Style-Tags mit allen benutzerdefinierten CSS-Änderungen. Es ist schön, dass sie das anbieten, aber wir brauchen es wirklich nicht. Wenn Sie als Nächstes nach dem Formularelement suchen, werden Sie in der Aktion eine sehr lange URL sehen = ?? Attribut. Dies ist eine der beiden benutzerdefinierten URLs, die Ihrer Liste entsprechen. Wenn Sie von meinem Code kopieren, müssen Sie die Formularaktion durch ersetzen <strong>Ihre eigene Listen-URL</strong> - Andernfalls melden sich Besucher auf meiner Website an!</p> <textarea wrap="soft" readonly="">

Oben sehen Sie ein Beispiel dafür, wie mein Formular aussieht, nachdem ich den ganzen MailChimp-Unsinn ausgemerzt habe. Es enthält noch immer viel Originalcode, aber ich habe die Fehlermeldungen über das Haupteingabefeld verschoben. Auch mit HTML5 Platzhalter Über das Attribut können wir der E-Mail-Felderingabe Standardtext hinzufügen, bevor ein Benutzer klickt.

Jetzt ist das Skript-Tag der Ort, an dem sich die Leute verlieren. Wenn Sie zwei Skripts bemerken, sollten Sie prüfen, ob es sich bei der Datei jQuery form validate.js um eines handelt. Wenn ja, können Sie es entfernen, da wir dies bereits in unseren Header aufgenommen haben. Der gesamte andere Code wird wirklich verwendet, um zu überprüfen, ob das Formular ordnungsgemäß ausgefüllt wurde. Es ist sehr kompliziert, wenn Sie jQuery nicht verstehen, aber zum Glück müssen Sie hier nicht viel bearbeiten. Wenn Sie die JS von meiner Demo gegen das Herunterladen von MailChimp kopieren, können Unterschiede auftreten, wenn sie das Backend seit dieser Veröffentlichung aktualisiert haben. Um auf Nummer sicher zu gehen, sollten Sie zunächst einmal meine Demo abarbeiten.

var mce_validator = $ ("# mc-embedded-subscribe-form"). validate (Optionen); options = {url: 'http://destinyislands.us2.list-manage2.com/subscribe/post-json?u=8329c77b379de0413725b5380&id=9d70a869e7&c=?', Typ: 'GET', dataType: 'json', contentType: " application / json; charset = utf-8 ",

Ich möchte Sie auf einen letzten wichtigen Aspekt des JavaScript-Codes aufmerksam machen. Die Optionsvariable wird verwendet, um Informationen an den Ajax-Aufruf zu übergeben, wenn die Validierung überprüft wird. Sie werden eine andere Abonnement-URL in der jQuery feststellen, aber wenn Sie ein scharfes Auge haben, sollten Sie feststellen, dass diese URL nicht dieselbe ist wie zuvor!

Es ist sehr wichtig, dass Sie beide URLs richtig eingestellt haben. Die Formularaktion ruft einen URI mit auf / abonnieren / posten während die jQuery-URL aufruft / abonnieren / post-json. Selbst wenn Sie aus meiner Demo kopieren / einfügen, reicht es aus, diese beiden URLs mit Ihren eigenen zu aktualisieren, damit das Skript für Sie funktioniert.

Live-Demo ansehen - Quelle herunterladen

Fazit

Dies war eine schnelle Einführung in die Einrichtung einer iOS-App-Website mit MailChimp. Wir haben eine iPhone-PSD aus dem Internet heruntergeladen und eine kleine Anwendungsgrafik eingerichtet.Wir haben auch einige grundlegende jQuery- und CSS3-Modelle verwendet, um mit Ajax ein fantastisches E-Mail-Anmeldeformular zu erstellen. Und da all dies in MailChimp eingebunden ist, erhalten Sie einen kostenlosen Abonnement-Service.

Teilen Sie uns Ihre Meinung oder Fragen im Kommentarbereich unten mit. Wenn Sie den Tutorialcode auch überall implementieren, würden wir ihn gerne live erleben! Fügen Sie einen Link zu Ihrer Webseite hinzu, wenn Sie ein ähnliches Design für iPhone- oder iPad-App-Vorlagen eingerichtet haben.