Mobil açılış sayfası. Mobil açılış sayfası: bir sayfa nasıl uyarlanır

  • 30.04.2019

2000'li yılların sonunda kitlesel kullanımda ortaya çıkan akıllı telefonlar, sanal alana aktif olarak yayılmaya başladı ve çevrimiçi olmanın tek yolu unvanı üzerinde PC tekelini yavaş yavaş kırdı. Ayrıca, mobil İnternet kullanıcılarının faaliyetleri sosyal ağları ziyaret etmekle sınırlı değildir - medya içeriğini, oyunları ve ayrıca satın alma işlemlerini kullanırlar. İş açısından bakıldığında, tüketici ile en uygun iletişimin böyle bir kanalını kaçırmak en azından mantıksızdır, bu nedenle kaynak sahipleri sitelerini mobil cihazlara uyarlamaya başladılar.

Mobil açılış sayfaları, HD ekranlı akıllı telefonların ve tabletlerin yaygın bir şekilde yaygınlaşmasından sonra çiçek açan bir istisna değildi. Bugün, taşınabilir gadget'lar için bir açılış sayfası oluşturmanın iki ana yolu vardır.

Yöntem 1: uyarlanmış düzen... İlke oldukça ilkeldir - anlamı, sayfanın herhangi bir cihazdan doğru görüntülenmesini sağlamaktır. Böylece, müşterinin sitenize geldiği cihazdan bağımsız olarak, buna göre "gerilir".

Bir dizüstü bilgisayarda şöyle görünür:

Ve akıllı telefon ekranında şu şekilde görüntüleniyor:

Hedef kitlenizin çoğunluğu bilgisayar veya tablet kullanıcısıysa, bu yöntemi uygulamak mantıklıdır. En iyi pazarlama ajansları, onlardan bir açılış sayfası sipariş ederseniz, sitenin mobil uyumlu bir sürümünü ücretsiz olarak hazırlayacaktır. Kitleniz sitenizi çoğunlukla mobil cihazları kullanarak ziyaret edecekse, aşağıda tartışılacak olan farklı, daha az bütçeli bir şekilde bir mobil açılış sayfası hazırlamak mantıklıdır.

Yöntem 2: duyarlı düzen ve tasarım. Sitenizi ziyaret eden kullanıcılar daha çok mobil cihazlardan yapıyorsa bu yöntemi kullanmanız mantıklı olacaktır. Örneğin, suşi teslimatı yapıyorsanız, cep telefonundan sipariş veren kullanıcıların yüzdesi %50'den fazladır. Sitenin bu tür sürümlerini geliştirirken HTML 5, jQuery vb. teknolojiler kullanılır.Sayfayı gerçekten aşırı yükleyen birçok "optimize edici" eklenti kullanmadan yapmanızı sağlar.

Uyarlanabilir tasarım sayfayı bir akıllı telefon ekranının boyutuna "küçültmek" anlamına gelmez, ancak çeşitli cihazlarda görüntülendiğinde sitenin yapısını değiştirir. Böylece, aslında, tasarımcı size bir site değil, aynı anda birkaç tane çizer - cep telefonu ve tablet için ayrı bir sürüm. Bu, yazı tiplerini, görsellerin görünür boyutunu ve diğer öğeleri küçültmeden, yani sayfanın kullanılabilirliğini üst düzeyde bırakmadan aynı bilgileri sunmanıza olanak tanır. Aynı zamanda, sitenin mobil cihazlarda görüntülenmesinde bir optimizasyon var. Bu sayede sayfa hızlı bir şekilde yükleniyor, bu çok önemli, çünkü akıllı telefon ve tablet sahipleri PC kullanıcılarına göre daha az sabırlı ve zaman onlar için çok önemli bir rol oynuyor.

Örnek duyarlı açılış sayfası tasarımı: web sitesi http://getdirections.es/

Bir dizüstü bilgisayarda şöyle görünür:

Ve böylece akıllı telefon ekranına adapte oldu:

Mobil Açılış Sayfası, müşterinin tek bir tıklamayla bir satış sayfasını ziyaret etmesine olanak tanıyan bağımsız bir web sayfasıdır.

Bu nedenle, pratik yapmazsanız, yarınızı kaybedersiniz.

Mobil bir Açılış Sayfası oluşturmak için yardım için bir SEO şirketiyle iletişime geçmek en iyisidir.

Çünkü bunu kendi başınıza yapmak zor olacaktır.

Sitenin mobil versiyonu için şablonlarını sunan çeşitli İnternet kaynakları olsa da tamamen farklı içerikler sunduklarını belirtmek gerekir.

Ve tam olarak ihtiyacınız olanı kullanmak için planlamanızı tam olarak bilmeniz gerekir.

Temel açılış sayfası türleri

İnternet pazarlamacılığında kullanılmak üzere bir mobil açılış sayfası oluşturmadan önce, hangi tür sayfa kullanacağınızı belirlemeniz gerekir.

Yani her şey ayırt edilir 4 tür sayfa- bu:

1. Mikrosite;
2. Ana Site;
3. Çevrimdışı açılış sayfası;
4. Segmentasyon sayfası.

Bir mikro site, bir ürünün yanı sıra çeşitli reklamı yapılan hizmetler hakkında bilgi içeren bir sitedir.

Tipik olarak, bu tür siteler, çoğunlukla bir ürün resmi veya örneğin bir video olmak üzere minimum bilgi içerir.

Ana site daha yapılandırılmıştır ve halihazırda çok sayıda sayfa ve bilgi içermektedir.

Ancak etkisiz olduğu için hedef kitlesi düşük.

Ana hedeflerden biri, alıcıyı teşvik etmek ve işin İnternet'te tanıtılmasına yardımcı olmaktır.

Bu nedenle, segmentasyon sayfası dönüşümleri artırmayı amaçlamaktadır.

"Mobil Açılış Sayfası oluşturma" talimatları

Birçok farklı hizmet olduğundan, talimatlar farklılık gösterebilir.

Bu nedenle, alınması gereken ana eylemleri belirteceğiz:

  • İlk önce, düzeni uyarlamanız gerekir. Bu ilke oldukça erişilebilir ve herhangi bir cihazdan sayfanın belirli bir görüntüsünü sağlayan kişidir. Sonuç olarak, müşterinin sitenize hangi sistemden geldiği artık önemli olmayacak. Çünkü doğrudan belirlediğiniz sayfaya gidecektir. Bu, sitenin mobil versiyonuysa, mümkün olduğunca fazla bilgi içermelidir. Bir açılış sayfası sipariş etmek nerede karlı - öğrenin
  • İkincisi, kaliteli bir tasarım hazırlayın. Hizmetiniz yemek dağıtımına dayanıyorsa, doğru ve özlü bir mobil tasarım geliştirmek gerekir. Genel bir kural olarak, "monitör ekranı" ne kadar küçükse, o kadar fazla renk yerleştirilmesi gerekir. Çoğu zaman, bir mobil açılış sayfası oluşturmak için duyarlı tasarım kullanırlar. Çünkü hangi cihazdan ziyaret ederseniz edin sayfaları açmanıza izin verir.

Gördüğünüz gibi, mobil bir Açılış Sayfası oluşturmak zor değil. Ancak SEO kullanarak işinizi başarılı bir şekilde tanıtmak ve hedef kitlenizi kaybetmemek için profesyonellerden yardım almak daha iyidir.

Mobil trafik dünyayı o kadar hızlı değiştirdi ki, birçoğu oyunun yeni kurallarına hazırlıksız yakalandı. En son pazar araştırması, mobilde birkaç yıldır devam eden güçlü büyüme zeminine karşı masaüstü segmentinde istikrarlı bir durgunluk olduğunu gösteriyor. Bu gibi durumlarda, akıllı telefonlardan ve tabletlerden gelen en değerli trafikle çalışmaya hazır olmayan bir işletme, şimdi veya altı ay içinde etkili olmaktan çıkacaktır.

Bu, özellikle açılış sayfaları aracılığıyla satışlara dayanan e-ticaret şirketleri için geçerlidir. Böyle bir işletmenin başkanı için yapılacaklar listesinde bir numara, elbette, mobil cihazlar için açılış sayfasının uyarlanması olmalıdır. Ve mümkün olduğu kadar etkili olması için işin kapsamını değerlendirmeye değer.

Peki - neye ve nasıl adapte oluyoruz?

  • Resimler.Tipik olarak, masaüstü resimleri müstehcendir ve mobil cihazlarda yüklenmesi sonsuza kadar sürer. Ya küçültmeleri gerekir - akıllı telefonların ve tabletlerin ekranlarına sığdırın, ağırlığı azaltmak için kaliteyi düşürün ya da cihaza bağlı olarak resmin boyutunu ve kalitesini seçen Uyarlanabilir Görüntüler eklentisini / komut dosyasını kullanabilirsiniz. İlk çözüm stratejik olarak daha doğrudur ve mobil cihazlar için açılış sayfanızı daha etkin bir şekilde optimize etmenize olanak tanır.
  • Menü.Menüde gezinmeyi basitleştirin - gerekli olmayan seçeneklerden, çok adımlı sekmelerden ve küçük baskılardan kurtulun.
  • Tablolar.Herhangi bir çevrimiçi mağaza, bir ürün içeren tablolardan oluşur ve bunlar genellikle başka sitelerde bulunur. Bir açılış sayfasını mobil cihazlara uyarlarken bu verilerin doğru bir şekilde görüntülenmesi için, ana içeriğin sabit kalması için yatay kaydırma olanağı sağlayın.
  • Giriş formları.Doğru alan türlerini kullanmak için daha büyük hale getirilmeleri ve optimize edilmeleri gerekir. Ayrıca otomatik düzeltme, büyük harf kullanımı ve düzeltmeyi kapatın - bunlar telefon girişini engeller.
  • İçerik.16 puntodan daha az bir yazı tipi kullanmayın, satır aralığını ve ekranın kenarını unutmayın - ve içeriği aşırı basitleştirmeyin, böylece istemci, aradığı bilgileri aramak için masaüstü sitesine gitmek zorunda kalır. ihtiyaç.
  • Cevaplanabilirlik.Birçok kişi, bir açılış sayfasını mobil cihazlar için optimize etmenin, onu duyarlı hale getirmek anlamına geldiğini düşünüyor. Bu tamamen doğru değil: sitenin tüm ekranlarda doğru bir şekilde görüntülenmesi gerekiyor, bu da birden fazla tek teknoloji ile elde ediliyor. Web sitesi mobilizasyon teknolojileri hakkında daha fazla bilgiyi makalemizde okuyun.
  • İndirme hızı.Bu parametre doğrudan önceki tüm noktalara bağlıdır. Kural olarak, şablon oluşturucu teknolojisi kullanılarak yapılan mobil siteler en hızlı yüklenir. Şablonlar önceden niteliksel olarak optimize edildiğinden, listedeki önceki tüm öğeleri güvenle atlayabilir ve en ilginç şeye geçebilirsiniz - uygun seçeneğin seçimi ve kolay yapılandırılması.

Tüm bu görünüşte karmaşık şeyler, basit çözümlere kolayca sığar. Rusya pazarında, açılış sayfasını her zevke ve cüzdana göre mobil cihazlara uyarlamak için çeşitli seçenekler vardır: tam bir web stüdyosu kiralayabilir veya çevrimiçi hizmetleri kullanabilirsiniz.Örneğin, MoAction 100'den fazla hazır çözüm sunar. Google'dan en yüksek mobilite derecesine sahip ve profesyonel ...

Seçim senin!

Kullanıcıların %93'ü her gün internete mobil cihazlardan erişiyor. Bunlar, herhangi bir zamanda akıllı telefonlarından veya tabletlerinden açılış sayfanızı ziyaret edebilen 3.500.000.000 kişidir. Bu nedenle, mobil açılış sayfanızı optimize etmek için elinizden gelenin en iyisini yapmanız gerekir. Mobil cihazlarda tamamen etkisiz olan bir dönüşüm hunisinden daha kötü bir şey yoktur.

Bu makalede, herhangi bir cihazda kullanıcı deneyimini iyileştirmenize ve dönüşümleri artırmanıza yardımcı olabilecek en iyi 8 mobil tasarım uygulamasını öğreneceksiniz.

1. Gezinme çubuğundan kurtulun

Gezinme çubuğunun ne kadar yer kaplayabileceğini görün:

Küçük mobil ekranlarda her piksel değerlidir ve bundan en iyi şekilde yararlanmanız gerekir. Bunu yapmanın kolay bir yolu, gezinme çubuğundan kurtulmaktır. Masaüstü bilgisayarlarda çok faydalı olabilir: ziyaretçilerin sitede gezinmesini ve ihtiyaç duyduklarını bulmasını kolaylaştırır. Ancak mobilde gezinme çubuğu metin, resim veya diğer içeriklerin olabileceği yerlerde çok fazla yer kaplıyor.

Ziyaretçiler, gezinme çubuğu olmayan bir sitede nasıl gezinebilir? Birkaç yol var. Bunların en popüleri küçük üst paneldir. Hamburger, ekranın köşesinden dışarı kayan ve çeşitli menü kısayolları içeren bir çekmece görevi görür.

Diğer bir seçenek de tek sayfalık bir mobil sitedir. Ancak siteniz çok fazla içerik barındırıyorsa size uygun olmayacaktır.

Muhtemelen akıllı telefonunuzu sık sık kullanıyorsunuz - otobüste veya kuyrukta. Belki de bu makaleyi ondan okuyorsunuzdur. Akıllı telefonunuzu nasıl tutarsınız? Şansınız, baş parmağınızla ekranda kaydırıyorsunuz. Bu, kullanıcıların %75'inin yaptığı şeydir.

Birkaç yıl önce, bu çizelge mobil tasarımcıların kutsal kitabıydı. Bunu akılda tutarak, çoğu insan için kullanıcı deneyimini optimize ettiler. Ve zamanında doğru olsa da, teknoloji hızla gelişiyor ve değişiyor. Son birkaç yılda telefonlarımız ve ekranlarımız büyüdükçe büyüdü ve ellerimiz aynı kaldı. Akıllı telefonları zaten farklı tutuyoruz, dokunma bölgeleri değişti ve ekranın dış köşelerine daha yakın doğruluk azaldı.

Sonuç olarak, tasarımcıların içeriği, ana işlevler merkezde ve ikincil işlevler ekranın altında ve üstünde olacak şekilde düzenlemeleri gerekir.

Kullanımlarının rahatlığı doğrudan işlevlerin konumuna bağlıdır. Ana işlevler önlerinde bulunur ve ikincil işlevler düşük doğruluk bölgelerine girer.

3. Dosya boyutlarını optimize edin ve azaltın

Bir açılış sayfasındaki resimlerin boyutunu optimize etmenin ne kadar önemli olduğunu zaten biliyorsunuzdur: bunlar önemli ölçüde etkiler, bu da hem kullanıcı deneyimini hem de sitenizin arama motorlarındaki sıralamasını etkiler. Mobilde, yalnızca daha az güvenilir bağlantı nedeniyle değil, aynı zamanda mobil kullanıcılar beklemeyi sevmediği için iki kat önemlidir.

Görüntüleri sitenize yüklemeden önce dosya boyutunu küçültmek için TinyJPG gibi siteleri veya ImageOptim (yalnızca Mac) veya Web için Dışa Aktarma gibi araçları kullanın.

Dosya boyutunu en çok etkileyen iki şey vardır:

  • Kalite.İndirirseniz, dosya küçülür, ancak aynı zamanda netliğini kaybeder ve artefaktlar görünebilir.
  • Boyut / çözünürlük. Doğal olarak, dosya boyutu büyük ölçüde resmin boyutuna bağlıdır. Doğal olarak, görselleri kullanıcıların hiçbir şey göremeyeceği kadar küçük yapmak istemezsiniz, ancak örneğin görseli yerleştirdiğiniz sütunun genişliği 600 piksel ise görselin genişliği 1000 piksel olmamalıdır. . Resmi açılış sayfasına yüklemeden önce yeniden boyutlandırın.

4. Tek bir tıklamayla aranabilecek telefon numarası

Bir açılış sayfasını mobil için optimize etmek, her şeyden önce kullanıcı deneyimini basitleştirmek ve gerekli işlem sayısını en aza indirmek anlamına gelir. Bu nedenle, sitenizi ziyaret etmenin (bir ürün satın almanın veya şirketinizi aramanın yanı sıra) keyifli bir deneyim haline gelmesine yardımcı olması için mobil cihazların özelliklerinden yararlanmalısınız.

Açılış sayfanız satış amaçlıysa veya telefon araması dönüşüm hunisinde önemli bir adımsa, sizi aramayı kolaylaştırmanız gerekir.

Bunu yapmanın bir yolu, telefon numarasını tek bir tıklamayla aranabilir hale getirmektir. Muhtemelen bu duruma aşinasınızdır: telefon ve tarayıcı arasında geçiş yaparsınız, telefonu yeniden yazarsınız veya kopyalamaya çalışırsınız ve istemeden sayfadaki tüm içeriği kopyalarsınız. Bu nedenle, tıklanabilir bir telefon numarası çok şey ifade eder.

Ve sayı şöyle görünecek:

Ziyaretçiler buna tıklayıp arayabilir.

Sitenin diğer önemli unsurları da etkileşimli hale getirilmelidir: örneğin, bir kullanıcı bir adrese tıkladığında Google Haritalar açılmalıdır. Facebook gibi çoğu uygulama bunu otomatik olarak yapar, ancak adresinizi Google Haritalar'a girebilir, bağlantıyı kopyalayıp sitenize yapıştırabilirsiniz.

Bunun gibi küçük şeyler, açılış sayfası ziyaretçilerinizin hiçbir şeyi kaçırmadıklarını ve gereksiz işler yapmadıklarını hissetmelerine yardımcı olur. Mobil cihazların dönüşüm huninizi engellemesine izin vermeyin.

Mobil internetin ilk günlerinde çalıştıysanız, kaç geliştiricinin mobil cihazların küçük ekranlarında çalışacak işaretleme ile tamamen ayrı siteler oluşturduğunu hatırlarsınız. Bu sayfalar genellikle yavaş bir mobil bağlantı üzerinden yüklenecek minimum resim ve nispeten fazla metin içeriyordu.

Yaklaşık on yıl sonra, manzara dramatik bir şekilde değişti. Ekranlar daha büyük, bağlantı daha hızlı. Ve ortaya çıktı. Bu iki tasarım türü birbirinden farklıdır, ancak amaçları aynıdır: ziyaretçinin kullandığı cihaza bağlı olarak dinamik olarak değişen tek bir düzen oluşturmak.

Açılış sayfası şablonları ve düzenleyiciler, ekibinizin manuel olarak geliştirme ihtiyacını ortadan kaldırarak otomatik olarak mobil uyumlu bir açılış sayfası oluşturabilir.

Duyarlılık hakkında hatırlanması gereken birkaç şey var:

  • Görüntülerin boyutları. Açılış sayfanızdaki resimler çok önemliyse, mobil cihazlarda net bir şekilde görünür olduklarından emin olun.
  • İçeriğin düzeni ve düzeni.Öğelerin açılış sayfanızın masaüstü sürümünde nasıl konumlandırıldığına bağlı olarak, mobil sürümde değişebilirler. Farklı cihazlarda her şeyin yerinde kalıp kalmadığını kontrol edin.
  • Animasyon. Masaüstünde iyi görünen bir animasyon, mobilde o kadar iyi çalışmayabilir. Göndermeden önce kontrol edin.
  • Video. Resim boyutuyla ilgili önceki yönergeleri göz önünde bulundurarak, videoyu mobil cihazlarda gizlemeyi veya tamamen silmeyi düşünün. Büyük, ağır ve mobil deneyimi önemli ölçüde yavaşlatabilir.
  • JavaScript. Bu harika bir programlama dili olsa da, her zaman mobil cihazlarda çalışmaz, bu nedenle her şeyin doğru görüntülenip görüntülenmediğini kontrol edin.

6. Pop-up'lardan kurtulun

Google, 2017'den beri araya giren eklemeler içeren sayfaları cezalandırıyor. Temel olarak pop-up'lardan bahsediyoruz.

İçeriği daha az erişilebilir hale getiren araya giren ekleme örnekleri.
1. Müdahaleci bir açılır pencere örneği.
2. Ayrı bir müdahaleci kesici uç örneği.
3. Ayrı bir müdahaleci yerleştirmenin başka bir örneği.

Mobil cihazlardaki pop-up'lar, site ziyaretçilerinin ilgilendikleri içeriği görmelerini engellediği için kullanıcı deneyimini önemli ölçüde düşürür. Google, bu tür sitelerin arama sonuçlarındaki sıralamasını düşürür. Bu yüzden açılır pencereleri kapatın.

Açılır pencerenizdeki içerik yeterince önemliyse, sayfaya ayrı bir bölümde ekleyin. O zaman Google, SERP'lerde sitenizi düşürmez.

7. Mobil cihazlar için formları optimize edin

Cep telefonunuzdan alışveriş yaptıysanız, telefonunuzdaki sonsuz formları doldurmanın ne kadar can sıkıcı olduğunu bilirsiniz. Mobilde yazmak eskisinden çok daha kolay olsa da yine de zor. Yazma hala otomatik düzeltmeye dayanır ve parmaklar yorulur.

Sorun nasıl çözülür? Mantık basit. Uzun formlar çok fazla yazı yazmayı gerektirir. Mobil cihazlarda yazmak çok rahatsız edici. Sonuç olarak, uzun formlar çok rahatsız edici.

Mobil cihazların dönüşüm oranlarınız üzerindeki olumsuz etkisini azaltmak istiyorsanız, formlarınızda aşağıdaki değişikliklerden birini deneyin.

Çok basit: gerekli alan ne kadar azsa, kullanıcıdan o kadar az çaba gerekir. Ne kadar az çaba, o kadar az sürtünme.

Alan sayısını azaltmak her zaman mümkün değildir: sonuçta, genellikle bir alan vardır çünkü girmeniz gereken bilgiler gereklidir. Ancak silinebilecek her şey silinmeli ve bazı formlar (örneğin ad ve soyadı) birleştirilmelidir.

Form doldurmayı bölerseniz, mobil dönüşüm oranlarınız fırlayabilir. Örneğin, formunuzda 9 alan varsa, yalnızca 3 tane bırakabilirsiniz. İlk aşamada kullanıcı bunları doldurur, "İleri" düğmesine tıklar ve çok az alanın olduğu bir sonraki sayfaya yönlendirilir. , ve bunun gibi.

Bu uygulama, uzun formları daha az itici yapacak ve aynı zamanda, potansiyel müşteriler hakkında küçük parçalar halinde bilgi toplamanıza izin verecektir; bu, bir aşamada hala doldurmayı bıraktıklarında kullanışlıdır. İlk adım, gelecekte bu kişilerle çalışmak için bir e-posta adresi istemektir.

8. Katlanabilir bölümler

Küçük bir ekranda, tüm içeriğiniz tek bir sütunda toplanır - çok uzun bir sütun. Mobilde bu özellikle zararlıdır, çünkü kullanıcının sayfada gezinmesi ve kendisini ilgilendiren bilgileri bulması çok daha zor hale gelir.

Katlanabilir bölümler bu soruna bir çözüm olabilir.

Katlanabilir bölümler içerik kapsayıcılarıdır. Kullanıcı başlıklarını görür ve tıkladığında genişletir. Bu şekilde, içerik veya ilgi konusu için sayfanızı tarar ve çok fazla gereksiz metin veya resim arasında gezinmesine gerek kalmaz.

Çözüm

Bu mobil tasarım yönergelerinin, açılış sayfanızı mobil cihazlardan ziyaret edenler için kullanıcı deneyimini iyileştirmenize yardımcı olacağını umuyoruz. Bu ilkeler genellikle göz ardı edilir, bu nedenle mobil dönüşümler çok düşüktür. Bunları takip edin ve mobil kullanıcılarınız daha iyi bir deneyime sahip olacak ve dönüşüm gerçekleştirecek.

Selam. Bu yazıda size sadece bir not defteri kullanarak basit bir mobil açılış sayfası yapmayı göstereceğim. Aslında, mobildeki tüm tekliflerin %80'i açılış sayfaları KULLANILMADAN döndürülebilir (ve hatta arzu edilir). Ancak, bazı nişlerde (Çekilişler, Mobil Yetişkin Arkadaşlık) basitçe gereklidir.

Demo bağlantısı (http://forum.cpa-intern.net/test/simple-mobile-lander/) Bir mobil cihazdan açın veya tarayıcıyı mobil ekrana sığacak şekilde küçültün.
Kaynaklara bağlantı. (http://forum.cpa-intern.net/test/simple-mobile-lander/simple-mobile-lander.rar) Kaynağı indirin, dosyayı herhangi bir metin düzenleyicide açın ve neyin ne olduğunu bulmaya başlayın. Tersine Mühendislik bizim her şeyimiz :)

Genel olarak, mobil cihazlar için optimize edilmiş basit HTML sayfaları oluşturmanıza yardımcı olacak birçok araç vardır, ancak kişisel olarak her şeyi bir not defterinde sıfırdan yapmayı daha uygun buluyorum.

Örnek olarak, basit bir açılış sayfası oluşturmak için aşağıdaki hizmetleri kullanabilirsiniz:

Convrrt (http://www.mobileconvrrt.com/)(http://www.mobileconvrrt.com/)

Atmio ((http://atmio.com/)http://atmio.com/) (http://atmio.com/)

LeadPages ((http://www.leadpages.net/)http://www.leadpages.net/) (http://www.leadpages.net/)

Landr ((http://landr.co/)http://landr.co/)

Mobilize ((http://qrmobilize.com/)http://qrmobilize.com/) (http://qrmobilize.com/)

Instapage ((http://www.instapage.com/)http://www.instapage.com/) (http://www.instapage.com/)

LanderApp ((http://www.landerapp.com/)http://www.landerapp.com/) (http://www.landerapp.com/)
(http://forum.cpa-intern.net/test/simple-mobile-lander/)

Mobil cihazlar için açılış sayfaları oluşturma süreci, pratik olarak WEB için oluşturma işleminden farklı değildir. Bu nedenle, kendimi milyonlarca kez tekrar etmemek için, anlaşılmaz görünebilecek bazı noktaların üzerinden geçeceğim.

Yani, her şeyden önce, bölüme bakıyoruz

Sayfanızı cep telefonlarının ekranı için optimize eden en önemli satır:

Optimize edilmiş bir sayfa oluşturmak istiyorsanız her zaman ekleyin.

Aşağıdaki komut dosyası

sayfada geri sayım işlevini uygulamak için gereklidir. Bu şekilde kullanıcı, teklifinizin sadece 4 dakika 43 saniye boyunca geçerli olduğunu görecektir. Zamanlayıcıyı sayfada görüntülemek için, zamanlayıcının görüntülenmesini istediğiniz yere aşağıdaki kodu eklemeniz yeterlidir:

V sayfanın başlığını yazmanız gerekir.

V Tüm CSS stilleri dahildir. Önemli! Bunları HTML kodunun içinde saklayın, stilleri ayrı bir belgeye koymayın - yüklemek için zaman kaybedersiniz.

CSS stillerinin her bir noktasını açıklamayacağım, her bir elementle ilgili tüm detayları htmlbook'ta veya Google'da bulabilirsiniz. Kısacası, yalnızca göreceli değerleri kullanmak önemlidir - dolgu / boyutlar için yüzdeler ve yazı tipleri için rem, em. Pt veya piksel yok!

rem, temel yazı tipi boyutuna göre boyuttur. Çok daha mobil uyumlu ve yeniden boyutlandırılabilir.

Görüntüler olmadan nerede yapabilirsiniz - görüntü olmadan yapın, her şeyi CSS ile uygulamaya çalışın (düğmeler, degradeler vb.) Güzel CSS düğmeleri burada yapılabilir (http://css3button.net/).

V sayfanızın ana kodudur. Ana noktaların üzerinden geçeceğim:

Aşağıdaki komut dosyası

sayfada bugünün tarihini görüntülemek için gerekli. Tarihi görüntülemek istediğiniz yere yapıştırmanız yeterlidir.

Tüm resimler web için optimize edilmelidir ZORUNLU ve mümkünse bunları CDN sunucularında saklamaya çalışın.

Aşağıdaki satırı açıklayayım:

Yani veri rolü. Veri rolü, bir onay kutusu, düğme, gezinme vb. gibi bazı öğeleri dönüştüren jQuery Mobile öğelerinden biridir. yerli forma. Resmi jQuery Mobile web sitesinde (http://jquerymobile.com/) her bir öğe hakkında daha fazla bilgi edinebilirsiniz.

Tarayıcıları farklı cihazlarda test etmek için BrowserStack (http://www.browserstack.com/) kullanıyorum. Ücretlidir, ancak Ücretsiz deneme sürümü vardır. Her durumda, kesinlikle parasına değer. Herhangi bir soruyu cevaplamaya hazırım!