Skapa en iPhone App Website Template med e-post registrering (JavaScript)

Om du har varit på scenen med iOS så har du säkert sett några av de vackra appwebbplatserna som skördar upp. Dessa har släppts under de senaste åren, eftersom utvecklare har letat efter sätt att locka till sig marknadsföringspotential. Det finns många mycket standardmallar där ute för webbdesigners - men mitt hopp är att ta itu med någonting nytt!

Idag skapar vi en stilad iPhone App-webbplatskabel med HTML5 / CSS3. Det här kommer inte att riktas in på en viss app, så vi inkluderar inte en hämtningslänk till appbutiken. Istället har jag skapat ett litet e-postformulär via MailChimp, så att du kan koppla tidiga adoptrar till appen före pre-release. Det här är bra för utvecklare som behöver få igång något för sin produkt innan det finns på marknaden.

Testa

Visa Live Demo - Hämta källa

Men om du har märkt app skärmdumpen jag använder är från en faktisk app. Den heter Ballin ~ Dribbble för iPhone och har bara blivit in i affären för några veckor sedan. Denna layout används inte för att godkänna Ballin-appen, istället behövde jag bara en skärmdump för att inkludera demo. Men gärna använda en annan skärm om du kopierar mallen för din egen webbplats.

Komma igång

Som alltid börjar vi med en mycket enkel HTML-sidstruktur. Om du checkar ut demoen behöver vi allt vi behöver centreras på sidan och justeras ordentligt. Koden är inte överväldigad alls! Jag använder standard HTML5-doktyp med 3 externa filer inkluderade.

     iPhone App Website med E-post registrering

Den första är våra global.css-stilar i en alternativ fil. För det andra behöver vi det senaste jQuery-biblioteket som är värd via Google Kod-databaser. Och till sist har jag lagt till formulärvalideringsskriptet från MailChimp. Den här skriptmarkeringen kopieras normalt över till ditt kroppsområde med e-postformuläret, men för att förenkla koden har jag flyttat den till huvudet.

Så nu låt oss fokusera på delar av kroppen. Jag kommer att hoppa över vår e-post registrering bara för nu så vi kan fokusera på nakna benen stilar och ramar. Efter att ha öppnat kroppen märker du ett ID # Iphone-preview som används för att hysa Ballin 'app iPhone skärmdump. Vi använder faktiskt bara två bilder på den här webbsidan - iPhone-skärmen och vår blå bakgrundsgrad.

Också som en snabb anteckning har jag använt en iPhone 4 PSD-fil för att skapa grafiken. Du kan kolla in det på Macristocracy bloggen där Jake Moore har erbjudit gratis PSD för nedladdning. Eller alternativt ladda bara direkt från sin CloudApp-länk utan att besöka sidan!

   <img src="//lesptitesaffairesdemayl.be/img/images_1/design-an-iphone-app-website-template-with-e-mail-signup_2.jpg"> <p>En gång i listan Dashboard-området bör du lägga märke till en uppsättning subnavigationslänkar. Längst till höger märker du för din webbplats och på nedrullningsmenyn klickar du på <strong>Anmälningsformulär Bädda in kod</strong>. Det här är koden du behöver bädda in för en liten registreringsblankett med MailChimp.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/design-an-iphone-app-website-template-with-e-mail-signup_3.jpg"> <p>I vänstra menyn välj <strong>Klassisk Form</strong> och anpassa funktionerna efter eget tycke. Jag har tagit bort titeln och behöll bara ett vanligt e-postfält för registrering. Koden du behöver kopiera finns i rutan nedan? så nu kan vi fortsätta och fortsätta med våra anpassade ändringar.</p> <h2>Anpassa anmälningsformuläret</h2> <p>Börja med att ta bort toppsticket med alla anpassade CSS-ändringar. Det är trevligt att de erbjuder detta, men vi behöver verkligen inte det. Nästa om du letar efter formulärelementet märker du en mycket lång URL i åtgärden = ?? attribut. Detta är en av de två anpassade webbadresserna som matchar din lista. Om du kopierar över från min kod ska du se till att du byter formuläråtgärd med <strong>Din egen lista URL</strong> - annars kommer besökare att anmäla sig till min sida!</p>     <textarea wrap="soft" readonly="">

Ovanstående är ett exempel på hur min form ser ut efter att ha tagit bort alla MailChimp-nonsens. Den innehåller fortfarande mycket originalkoden, men jag har flyttat felmeddelandena ovanför huvudinmatningsfältet. Använd också HTML5 platshållare attribut vi kan lägga till standardtext i inmatningsfältet innan en användare klickar.

Nu är skriptet tagg där folk tenderar att gå vilse. Om du märker två skript bör du kontrollera om en av dem är jQuery-formuläret validate.js-fil. Om så är fallet kan du ta bort det eftersom vi redan har inkluderat det här i vår rubrik. Den andra koden används verkligen för att kontrollera om blanketten har fyllts i korrekt. Det är väldigt trångt om du inte förstår jQuery, men lyckligtvis behöver du inte redigera mycket av allt här. Om du kopierar JS från min demo vs nedladdning från MailChimp kan du uppleva skillnader om de har uppdaterat bakgrunden sedan den här publikationen. För att spela det säkert försök bara arbeta av min demo för nu.

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

Jag vill uppmärksamma en enda viktig aspekt av JavaScript-koden. Alternativvariabeln används för att skicka information till Ajax-samtalet när du kontrollerar validering. Du märker ett annat abonnemangswebbadress i jQuery, men om du har ett ögonblick ska du märka att det här inte är samma URL som tidigare!

Det är mycket viktigt att du har båda dessa webbadresser korrekt inställda. Formverktyget anropar en URI med / Prenumerera / post medan jQuery-webbadressen ringer / Prenumerera / post json. Även om du kopierar / klistrar från min demo uppdateras bara dessa två webbadresser med din egen räckvidd för att skriptet ska fungera för dig.

Visa Live Demo - Hämta källa

Slutsats

Detta har varit en snabb introduktion till att skapa en iOS App-webbplats med MailChimp. Vi har laddat ner en iPhone PSD från Internet och installerat en liten applikationsfilm.Vi har också utnyttjat en del grundläggande jQuery- och CSS3-modellering för att skapa en fantastisk e-postregistreringsform med Ajax. Och med allt detta knutna till MailChimp får du en bra prenumerationstjänst helt gratis.

Låt oss veta dina tankar eller frågor i kommentarfältet nedan. Dessutom om du implementerar handledningskoden var som helst skulle vi gärna se det live! Inkludera en länk till din webbsida om du har skapat en liknande iPhone eller iPad app mall design.