Mobil sürümün parçaları. Uygulama geliştirme uygulamaları: iOS ve Android için kendiniz bir uygulama nasıl yapılır

Web'de duyarlı tasarım kavramının olmadığı bir zamana dayanan çok sayıda eski, harika site var. Tıpkı akıllı telefonlar veya tabletler gibi. Ya da başarılı olmuş, ancak yine de mobil versiyonu olmayan oldukça taze projeler bile. Belki de geliştiriciler, başarıya inanmayarak rahatsız etmediler. Ya da sonuçta bütçe yetmedi ve sonra eller ulaşmadı.

Ana mobil sitelerin özelliği - cihazın çalışma alanının küçük genişliğinde. Öğeler, kullanıcının nispeten küçük bir ekranda parmaklarıyla kullanmasına uygun olacak şekilde yerleştirilmelidir. Kural olarak, sitenin mobil versiyonu masaüstünden önemli ölçüde farklıdır. Genel stil aynı kalır. Ancak simgeler, başlıklar, yerleri, boyutları, belki de sayfaların yazı tipi ve yapısı zaten farklıdır.

Genel olarak, geliştirme sırasında, kullanıcının cihazının türünü ve çözünürlüğünü otomatik olarak tanıyan ve içeriği ona göre uyarlayan kodu kullanabilirsiniz. Bu duyarlı tasarım. Yapabilirmiyim sitenin mobil versiyonunu ayrı ayrı yapın bir web hizmeti kullanarak DudaMobil ... Bu daha fazla zaman alan bir yaklaşımdır, ancak ciddi projelerle çalışırken kendini haklı çıkarır: ayrıntılara daha fazla dikkat, ana sürümden kolaylık lehine farklılıklar, ek işlevsel bloklar veya tersine gereksiz her şey kaldırıldı.

DudaMobile (şimdiki değeri) Web Sitesi Oluşturucu , yardımıyla herhangi bir site için mobil cihazlar için iyi tasarlanmış bir sürümü kolayca oluşturabilirsiniz.

Sistem de tamamlandı duyarlı bir web sitesi oluşturucu, ve mobil tarama ihtiyaçları için mevcut projeler için bir tür optimize edici. Görsel düzenleyiciye sahip birkaç kurucu var. Duda kendi yolunda iyidir, öyle. Ama yine de, işlevselliği masaüstü sitelerini mobile dönüştürme çok daha ilginç, neredeyse benzersiz görünüyor. Bu nedenle, DudaMobile'ın yeteneklerinin bu özel bölümünü gözden geçiriyoruz.

işlevsellik

Başlamak için, mobil sürümüne ihtiyacınız olan sitenin adresini girmeniz gerekir. Ardından sistem birkaç dakika düşünecek, ardından sizi editöre aktaracak. Sağda, bir mobil cihaz biçiminde bir önizleme penceresi, solda - görünümü dönüştürmek için seçenekler kategorileri, ortada - mevcut seçenekler ve küçük ayarlar seçimi.

Güzel olan şu ki, editöre ilk bakışta her şey netleşiyor. Küçük bir uyarı olsa da: İngilizce konuşan servis , Rus dili teslim edilmedi, ne yazık ki ve ah! İyi haber şu ki, menülerde kullanılan kelimelerin basitliği, yaygınlığı - düşük seviyeli spike-ingilizce ile bile kendinizi güvende hissedeceksiniz. Dolayısıyla hizmetin bu özelliğinde büyük bir sorun görmüyoruz.

Yani, kenar çubuğunda 3 ayar öğesi, sitenin mobil sürümünü edinmek için izlemeniz gereken adımları ifade ederek:

1. Tasarım - sitenin görünümünü alt öğeler şeklinde özelleştirme seçenekleri:

• Düzen- materyalleri göndermek için sayfanın yapısını seçin. 5 seçenek mevcuttur. Burada ayrıca menü bloğunun stilini de ayarlayabilirsiniz.
• stil- ana öğeler için renk şeması seçimi, düğmeler, başlıklar ve bağlantılar / metin için arka plan görüntüsü ve yazı tipi şemaları;
• funda- başlık türü (metin veya resim), bu alanın boyutu, hizalama, arka plan ve sayfalar kaydırılırken başlık bloğunun sabit hareket olasılığı seçimi.

2. Sayfalar - sitenin her statik sayfasının düzenlenmesi. Burada SEO ayarlayabilir, bireysel bir şablon seçebilir, açılış kuralları belirleyebilir, bağlantı kurabilir, kendi kodunuzu ekleyebilir vb.

3. Önizleyin ve yayınlayın - işte sonuca bağlantılar ve ilk sürümle karşılaştırmanın yanı sıra sitenizin mobil sürümünü yayınlamak için bir tarife ödeme teklifi.

Bu hizmetin kullanımı size ne kazandıracak? Sırayla anlayalım. Web siteniz var mı olmadan mobil versiyon. DudaMobile'a gidin, bağlantıyı girin, ardından sistem sitenizin yapısını ve materyallerini tarar. Tüm bunlar dönüştürülür, kod düzeyinde mobil izinlere göre ayarlanır. Sayfalarınızı tüm içeriğiyle birlikte alırsınız, ancak artık mobil ekranlara iyi uyum sağlarlar.

Ayrıca, tasarım düzenlemeleri ve oldukça geniş bir widget seti yardımıyla sitenin görünümünü ve işlevselliğini istediğiniz duruma getirebilirsiniz. Widget'lar sayfanın herhangi bir yerine eklenebilir. Sonuç olarak, DudaMobile'da bir mobil yerleşim düzeninin oluşturulması, işlevselliği artırmanıza olanak tanıyan klasik WYSIWYG araç setini içerir. Her widget'ın amacının bağlamına uygun ayarları vardır: örneğin, görünüm, arka plan, bağlantılar, alan adları, girintiler, kod ekleme, vb. Genel olarak, gömülü öğelerin özelleştirilmesi oldukça iyidir.

Sonuç olarak, kurucunun işlevselliği ile birleştirilmiş bir mobil site dönüştürücü elde ederiz. Basit bir arayüz, yeterli sayıda özellik ve iyi bir çıktı sonucu.

Sitenin mobil versiyonu ne kadar?

Şimdi en önemli şey hakkında. Bu durumda sıfırdan bir site oluşturmakla ilgilenmiyoruz, sadece mobil cihazlar için optimize edilmiş, o zaman konunun fiyatı teorik olarak düşük olmalıdır. Bu doğru değil.

Sitenin mobil versiyonunun maliyeti orta fiyat segmentindeki bazı site oluşturuculardaki hazır bir web sitesininkiyle karşılaştırılabilir. Aynı uKit'te, site hemen yanıt verirken daha da ucuz olacak. Mantık nerede, akıl nerede?

Başına $159 DudaMobile hizmetlerini yenilemeye gerek kalmadan sonsuza kadar mobil bir siteye sahip olacaksınız. Ödeyebilirsin yılda 60 $ veya aylık - 6 dolar için .

Bu para ne için ödeniyor? Şişman ve karlı eski sitelerinizden herhangi birini uyarlayabilmeniz için modern piyasa gerçekleri. Mobil trafik, sörfün masaüstündeki payına uzun süre ağır basan, sulu bir yığındır. Yaklaşımın basitliği ve DudaMobile'ı kullanmanın bariz kazancı, istenen paraya değer.

sonuçlar

DudaMobile, hizmet verdiği sitelerin hareketliliğine odaklanan kullanışlı bir hizmettir. Sıradan sitelerin mobil dönüştürücüsünün işlevselliği burada ayrı bir hizmet olarak sunulmaktadır. Onun yardımıyla, kesinlikle herhangi bir siteyi mobil bir siteye dönüştürebilirsiniz. Diğer bir deyişle, sitenizin tam sürümüne dokunulmadan kalır, ancak akıllı telefonlarından gelen ziyaretçiler, gadget'ları için optimize edilmiş site sürümünü görür. Bu nasıl çalışır.

Sorunun fiyatı pahalı görünebilir, ancak değil. Mesele şu ki, hala duyarlı bir tasarıma veya ayrı bir mobil versiyona sahip olmayan siteler muhtemelen oldukça eskidir. Sonuç olarak, mobil cihazlardan yeteneklerini kullanma konusunda tamamen rahat olmayan köklü bir kitle ile katılımları uygun olabilir. Muhtemelen, siteyi yapan geliştirici zaten kayboldu. Ya henüz para tahsis etmek, kendi başınıza öğrenmek için olgunlaşmamışsınız ya da mobil uyumlu bir tasarım yayınlamak için tembel olun.

Bu senaryoda DudaMobile iyi bir seçenektir. Kodlama yok, her şey basit bir şekilde yapılıyor, sonunda iyi görünüyor. Mobil trafiğinizin kararlılığını artırmanın kolay bir yolu. Başına 60 $ / yıl ya için $159 sonsuza dek, ebediyen, daima. Muhtemelen ironik bir şekilde, platformun ölümü sırasında "sonsuza kadar" sona ereceğini düşündünüz. Evet öyle. Fakat! Hizmet 2009 yılında kuruldu, hizmetleri seçkin müşteriler tarafından kullanılıyor ve genel olarak geliştiriciler iyi durumda. Dolayısıyla bu konudaki korkular yersizdir.

DudaMobile dönüştürücüsü rakiplerle karşılaştırılabilir, ancak bunlar görünür değildir. Bu nedenle, sitede masaüstü bir site ile müşteri kaybetmeye devam eden herkese kullanmanızı öneririz! Deneyin, editöre ücretsiz girmenize izin veriyorlar - hizmetin kalitesini hemen değerlendirin ve ardından dilerseniz.

Söz verdiğim gibi, size “Adaptive Layout” un ne olduğunu ve sitenin akıllı telefonlar ve tabletler için mobil versiyonunu nasıl yapacağınızı anlatmanın ve arama motorlarını memnun etmenin zamanı geldi!

Neden tüm bunlara ihtiyacımız var?! Sonuçta, eskisi gibi yaşadılar ve hiçbir şey yapmadılar. Ne diyebilirim ki, İnternet değişiyor, gelişiyor. Arama motorları, kullanıcıların rahatlığı ve rahatlığı için ellerinden gelenin en iyisini yapıyor... Harika, gerçekten

Ve gadget'lardan gelen trafik her geçen gün daha da artıyor! Web yöneticisinin bunu dikkate alması gerekiyor ...

Büyük olasılıkla, Google Arama motoru tüm web yöneticilerine, sıralama tercihinin mobil cihazlar için optimize edilmiş sitelere verileceğini bildirmiştir. Ancak, yalnızca talebin kişisel bir bilgisayar aracılığıyla yapılmaması şartıyla.

Yani, bir kullanıcı bir akıllı telefon veya tablet aracılığıyla oturum açarsa, onlar için özel olarak hazırlanmış siteler ve bloglar, sahip olmayanlardan her zaman daha yüksek olacaktır! Diğer durumlarda, anladığım kadarıyla bu kural geçerli değildir.

Açıkça açıklıyor gibi görünüyor?! Kim neyi anlamadı? Yorumlara yazın, birlikte tartışalım.

Bu yüzden, son zamanlarda bir tatil geçirdim, daha faydalı makaleler yazmaya, bazı ilginç fikirleri uygulamaya karar verdim, genel olarak, tatilimi fayda ile geçirmeye ve mmm istesem de kanepede yatmamaya karar verdim….

Güzel günlerden birinde, aşağıdaki mesajı e-posta ile aldım (ancak herkes aldı):

Ve tüm planlarım suya düştü ... Sanırım zamana ayak uydurmam gerekiyor ... ve gidiyoruz! Her şeyden önce, elbette, ağda her şeyi açıkça ve bensiz yapacak bir eklenti bulmaya karar verdim.

Eklentileri olan WordPress mobil sitesi!

Görünüşe göre, bu tür eklentiler var ve prensipte işlevlerini yerine getiriyor! Ancak, Google kontrol edin sitede gezinme kolaylığı bir mobil cihazdan geçmezler! Neden bilmiyorum ama Google inatla değişiklikleri görmeyi reddediyor, birçok seçeneği denemiş... O yüzden bunları kullanmanın bir anlamı yok...

Yine de bu amaç için eklentileri kullanmak istiyorsanız, o zaman en iyileri şunlardır:

WPtouch Mobile Plugin - En çok bu eklentiyi beğendim, her şey oldukça basit ve anlaşılır, blogum herhangi bir söve olmadan doğru bir şekilde görüntülendi!

Her eklentiyi tarif etmeyeceğim, kendiniz deneyin ve karar verin:

• MobilBasın;
• WordPress Mobil Paketi;
• Duda Mobil Web Sitesi Oluşturucu;
• WordPress Mobil Paketi;
• WordPress PDA ve iPhone;
• WPmob Lite;
• WPtap Haber Basın;
• WP Mobil Dedektör;
• WiziApp.

Eklentilerin bir başka dezavantajı, bazen takılmalarıdır, örneğin, bir akıllı telefondan geçiyorum - her şey yolunda, tekrar tekrarladım veya güncelledim - normal bir site gösteriyor! Bir tür gizem düzdür

Kısacası bana uymadı ve en iyi çözümü aramaya devam ettim!

Daha sonra bu işi bir freelance borsa uzmanına emanet etmeye karar verdim, ancak çok düşündükten sonra uyarlamalı yerleşimi öğrenmeye ve her şeyi kendim yapmaya karar verdim! Sonuçta, ben bir web sitesi geliştiricisiyim ve niteliklerimi geliştirmenin zamanı geldi ...

Herhangi biri ilgileniyorsa, siteyi uyarlanabilir bir siteye yeniden tasarlamak yaklaşık 5.000 ruble ve daha fazlaya mal olur ... Daha ucuza alan uzmanların işe alınmasını tavsiye etmiyorum - bir cimri iki kez öder! Ve incelemelere dikkat edin ...

Genel olarak, blogumda bu konuyu incelemeye başladım, önce teori, sonra pratik! Prensip olarak, öğrendim, bununla ilgili karmaşık bir şey olmadığı ortaya çıktı, şimdi blogum uyarlanabilir ve herhangi bir ekrana uyarlanabilir ve bir fil gibi mutluyum ... Bloguma herhangi bir akıllı telefondan gidin ve yapacaksınız. her şeyi kendin gör Bir söve bul - bana haber ver ...

Şimdi edindiğim bilgileri sizlerle paylaşacağım ve en önemli noktaları size anlatacağım...

Mobil web sitesi seçenekleri?

Bildiğim kadarıyla, üç yön var. Her bir teknolojiyi ayrı ayrı analiz edelim, karşılaşabileceğimiz artıları ve eksileri nelerdir?!

Sitenin ayrı versiyonu- Bu, özellikle mobil cihazlarda veya düşük İnternet hızında görüntülenmek için oluşturulmuş, ayrı bir hafif site türüdür..site veya http: //mobil.site. Bu durumda yönlendirme kullanılır.

• İki bağımsız site - başka bir siteyi etkilemeden içeriği değiştirme yeteneği;
• Yükleme hızı - mobil sürüm ana sürümden bağımsız olduğundan, hafif ve hızlı hale getirmek zor olmayacaktır;
• Kolaylık - site tamamen mobil bir kitle için tasarlandığından, gezinme ve içeriğin en küçük ayrıntısına kadar netleştirilmesi daha kolaydır.

• Yinelenen içerik - aynı içerik ana sürümde ve mobil sürümde olacağından. rel = canonical meta etiketi muhtemelen sizi kurtaracaktır, ancak bir sürü başka sorun var.
• Bir işlevsellik dilimi - ne derse desin, ancak böyle bir site ana sitenin kesilmiş bir kopyası olacaktır, dolayısıyla tamamen farklı istatistik göstergeleri olacaktır. Ve ziyaretçilerin büyük kısmı çeşitli kısıtlamalardan hoşlanmaz ve her zaman ana siteye gider ...
• Yönlendirmeler - Bildiğiniz gibi, çeşitli yönlendirme türleri SEO üzerinde olumsuz bir etkiye sahiptir.

RESS teknolojisi- Burada, oturum açmanın hangi cihazdan olduğuna bağlı olarak sunucu tarafında hesaplama kullanıyoruz - bu veya bu düzen oluşturulur (html ve css). Bu mucizeye - responsive web tasarım + sunucu tarafında özel yazılım (RESS - Responsive Web Design and Server Side Components) denir.

• Yükleme hızı - çeşitli gereksiz komut dosyalarını, stilleri kaldırma yeteneği;
• Daha az sayfa ağırlığı - duyarlı bir düzende olduğu gibi öğeleri gizlemek yerine bunları silebilirsiniz;
• Navigasyon - belirli cihazlar için yapıyı özelleştirme yeteneği.

• Tanım - sitenin istenen sürümünü görüntülemek için ziyaretçinin cihazını doğru bir şekilde belirlemeniz gerekir ve bununla, duyduğum gibi, her şey her zaman düzgün değildir.

Duyarlı düzen (web tasarımı)- Sitenin bu düzeni, CSS3 Medya Sorguları kullanılarak tanımlanarak herhangi bir ekran çözünürlüğüne göre ayarlanır. Kural olarak, akıllı telefonlarda, tabletlerde ve bilgisayarlarda görüntüleme için çeşitli seçenekler içeren aynı kaynak kullanılır ...

• Güvenlik - cihazdan bağımsız olarak, aynı içerik ve html kodları seti kullanılır;
• Tek URL - farklı düzenler için aynı URL'ler ve içerik kullanılır, yineleme olmaz.

• Yükleme hızı - ana sitenin tüm öğeleri ve komut dosyaları gizlenmiş olsalar bile yüklendiğinden.
• Navigasyon, akıllı mobil navigasyon oluşturmanın zor kısmıdır.

Kendiniz duyarlı bir düzen oluşturma

Blogum için birkaç nedenden dolayı duyarlı bir düzen seçtim:

1. ana sitenin, blogun bütünlüğünü ihlal etmeye gerek yok;
2. tek bir içerik kullanılır, bir veritabanı vb;
3. Şahsen benim için uygulama kolaylığı (html ve css bilgisi gereklidir).

Şimdi size kaynağınızın Google gibi herhangi bir izine uyum sağlaması için yapmanız gerekenleri anlatacağım.

İlk olarak, meta etiketi eklemeniz gerekir. :

Bununla tarayıcıya sitenin genişliğinin gadget'ın, cihazın veya herhangi bir şeyin genişliğine eşit olması gerektiğini bildiririz.

Ayrıca maksimum ölçek = 1.0, kullanıcı ölçeklenebilir = hayır - o zaman bunu yaparak ölçeklendirmeyi yasaklamış oluruz ama bunu yapmanızı tavsiye etmiyorum, bırakın kişi kendisi karar versin, belki görme sorunları vardır.. .

Burada bir başlangıç ​​yapıldı, şimdi bir akıllı telefon veya başka bir şeyden geçersek, sitemizin nasıl göründüğünü göreceğiz! Hüzün evet?!

Bu durumun CSS stil sayfasındaki Medya Sorguları kullanılarak düzeltilmesi gerekecek, parametre şöyle görünür:

@media ekranı ve (min-width: 240px) ve (max-width: 720px) (
burada etiketler ve nitelikler
}

Yani, bu stiller tarayıcı tarafından bir cihazda minimum 240 piksel genişlikten maksimum 720 piksele kadar uygulanacaktır! Bu değerlerden daha fazla veya daha az ise, sitenin ana stilleri uygulanacaktır. Bu kadar basit!

Ve bu şekilde farklı cihaz çözünürlükleri için stiller belirleriz. Örneğin:

• dikey olarak akıllı telefonlar - 240'dan 340'a, 341'den 420'ye;
• akıllı telefonlar yatay ve bazı tabletler dikey olarak - 421'den 540'a, 541'den 670'e;
• dikey tabletler - 671'den 800'e;
• yatay tabletler - 801'den 1024'e

Bazı öğeleri göstermeniz gerekiyorsa: display:block, gizlerseniz: display: none;

Bir web sitesinin veya blogun çeşitli cihazlarda nasıl göründüğünü öğrenmek için harika hizmetler vardır:

• http://quirktools.com
• http://www.emulateurmobile.com/
• http://webmark.com.ua

Bu arada, siteyi responsive hale getirmeniz gerekiyorsa, ancak bunu kendiniz yapamayacağınızdan eminseniz ve özel bir istek yoksa, o zaman hizmetlerimi sunuyorum! Sayfadan çalışmalarımı görüntüleyebilir ve başvuru gönderebilirsiniz:.

Benim için hepsi bu! Umarım makalem size gerçekten yardımcı olmuştur, minnetle paylaşın =)

Müşterinin sitesinde, uyarlanabilir düzenin bir örneğini yazdım, eğer hala çalışma prensibini anlamadıysak, baktığınızdan emin olun. Yakında görüşürüz! Yorum yaz...

Saygılarımla, Vladimir Savelyev

webformyself kulübünden premium dersler

Bu, site kurma öğretimi alanında devrim niteliğinde yeni bir üründür! En iyi video eğitimlerinin tümü tek bir yerde toplandı ve kategorilere ayrıldı: WordPress, Joomla, PHP, HTML, CSS ve JavaScript ... Veritabanı sürekli güncelleniyor ve şimdi 200'den fazla ders içeriyor! Sadece bir yıl içinde sıfırdan deneyimli bir web yöneticisi olabilirsiniz!

Daha fazla detay

Geliştiriciler, mobil cihazların patlaması sırasında sitelerin mobil sürümlerinin vazgeçilmez olduğunu anlıyor. Daha iyi bir seçenekle karşı karşıyalar: siteyi gadget'lara duyarlı hale getirmek mi yoksa ayrı bir mobil site oluşturmak mı? Bu yazıda, bu sürümlerin her birinin nasıl oluşturulacağına ve bunların avantaj ve dezavantajlarına bakacağız.

Bu nedenle, sitelerin mobil sürümlerini oluşturmanın üç yolu vardır:

1. Uyarlanabilir tasarım. Bu durumda site sayfası değişmez, ancak CSS dosyası, tarayıcı penceresinin genişliğine bağlı olarak farklı kurallar uygular ve buna "uyarlanır".
2. Ayrı bir mobil site. Bir alt etki alanında veya alt dizinde barındırılır, bazen ana site ve mobil site aynı URL'ye sahiptir. HTML kodunun yüklenmesi, kullanıcı aracısı değerine ("dinamik dağıtım") bağlıdır. URL farklıysa, sayfaların yapısı genellikle korunur, ancak sitelerin bu sürümleri farklı dizinlerde depolandığından hiçbir şey onları değiştirmenizi engellemez. Harika bir örnek, mobil site VKontakte'dir (m.vk.com).
3. Sitenin mobil versiyonu veya RESS (Duyarlı Tasarım + Sunucu Tarafı). Bu yöntemin geliştirilmesi zordur, ancak hem duyarlı tasarımın hem de bağımsız bir mobil sitenin faydalarını içerir.

Bir web sitesinin mobil versiyonu nasıl oluşturulur?

Sitenin mobil versiyonu, ana site ile stil, renk ve içerik olarak aynı olmalıdır. Aradaki fark, mobil sürümdeki alanın mümkün olduğunca metin içeriği ile doldurulması ve minimum grafik içermesidir. Bu durumda tasarımcının görevi, yalnızca en önemli grafikleri ve gezinmeyi bırakarak hangi öğelerin öncelikli olması gerektiğini düşünmek ve her şeyi mobil cihazın sınırlı ekran boyutuna sığdırmak için bloklar arasındaki tüm boşlukları kaldırmaktır. .

Sayfa genişliği sınırlı olmalıdır. Bunu yapmak için, web sitesi yükleme hızını düşürmemek için tüm içeriği tek bir sütunda düzenleyebilir ve grafiklerle aşırı yüklemeyebilirsiniz.

Sayfanın uzunluğunda herhangi bir kısıtlama yoktur. Bu nedenle ekranda gezinirken dikkati çekmek için tez tez gösterilmelidir.

Web Tasarım Trendleri

1. "Önce Mobil"

Başlangıçta, bir mobil sürüm oluşturulur ve daha sonra çeşitli unsurlarla desteklenen ve bir bilgisayara uyarlanan ana site. Bu yaklaşım, sitelerin içeriği aynı ise kullanılır.

1. Navigasyon

Ana sayfada diğer tüm sayfaları listeleyen bir açılır menü olduğunda ana site yapmak çok kolaydır. Ayrıca, böyle bir sayfanın arama motorları tarafından iyi sıralanması uygundur. Mobil versiyonda, bu tür navigasyon ekrana sığmaz. Bu nedenle, navigasyon için birkaç bağlantı yapmanız veya arama çubuğunu kullanmanız gerekir.

1. Ekran boyutları

Çoğu akıllı telefon 320 piksel genişliğindedir. Birçoğu 240 tarafından yönlendirilir. Tüm öğelerin sayfa içinde olması için, CSS stil sayfasında %100'ü ayarlamanız gerekir, ardından ekranın genişliğine göre ayarlanırlar.

Analitik araç Google Analytics, sitenizin kullanıcıları tarafından kullanılan en popüler mobil cihazları görüntülemenize ve mobil sürüm üzerinde çalışırken uygun sonuçlar çıkarmanıza olanak tanır.

1. Dokunmatik ekran

Parmağın fare imlecinden çok daha büyük olduğu göz önüne alındığında, bağlantılara isabet etme doğruluğu oldukça düşüktür. Bu konuda sitenin mobil versiyonu, linklerin çevresinde en az 28 piksel boş alan kalacak şekilde düşünülmelidir.

Ayrıca site bağlantıdan sayfayı yüklerken, kullanıcı bağlantının tıklandığını anlamalı ve birkaç kez tıklamamalıdır. Komutun kabul edildiğini belirtmek için renk değiştiren gömme düğmeler veya bağlantılar bunun için harikadır.

Kullanıcı ekrana dokunduğunda açılır menü açılmalıdır. Bu durumda, içindeki alt maddeler büyük ve net bir şekilde bölünmelidir.

1. Mümkünse, metin girmeyi reddetmelisiniz.
2. "Tıkla ve ara" işlevi veya şirketin bağlantı biçimindeki adresi gibi platform özelliklerini ihmal etmeyin (rota içeren bir harita indirin).

Duyarlı bir düzen nasıl yapılır

Duyarlı tasarım, tüm ekran boyutları için aynı HTML'yi kullanır. Tüm öğeler, CSS dosya ortamında belirtilen kurallara bağlı olarak değişir.

Mobil cihazlar için medya sorguları, gadget'lar için ekran türü, tarayıcı genişliği ve ortam aydınlatması bakımından farklılık gösteren CSS stilleri uygulamanız gerektiğinde kullanılır. Bu, web sitelerinin doğru çalışmasını sağlamak için çok önemli bir araçtır.

Mobil yerleşimin görevi, siteyi olası tüm ekran boyutları için optimize etmektir. Dahası, değişen sitenin tamamı değil, bireysel unsurlarıdır. Site sayfasını uzaklaştırdığınızda, öğelerin kaybolmaması için, bunları stil sayfasında yazarak görünür bir sütuna yerleştirmeniz gerekir.

Düzen kuralları

Sıfırdan bir web sitesi oluştururken, mobil sürümle başlamak en iyisidir. Ancak çoğu zaman şirketlerin zaten bir ana sitesi vardır, bu nedenle taşınabilir bir sürüm için öğelerini sıkıştırmanız gerekir. Sıkıştırmanın düzgün olması için nesnelerin genişliğini ekran genişliğinin yüzdesi olarak ayarlamak gerekir.

Çoğu zaman, sıkıştırılmış öğeler okunaksızdır, bu nedenle başka bir yere taşınmaları gerekir ve sol menü bloğu daha görünür hale getirilir (ana içerikten sonra sayfanın altına sabitlenir).

Arama çubuğunu "büyüteç" simgesiyle değiştirmek daha iyidir. Ve üst menüyü açılır menü yapın. Bu, kullanım kolaylığı sağlar ve yerden tasarruf sağlar.

Herhangi bir yeniden düzenleme, anahtar bloklarla başlar ve daha az önemli öğeler, tasarımcının takdirine bağlı olarak görüntülenmez.

En yaygın mobil düzen yöntemi, tek bir sütun düzeni oluşturmaktır. Bu durumda, tüm içerik ayrı bloklara bölünmelidir. Örneğin:

• Tüm içerik tek bir sütundadır, ancak ipuçları içeren bloklara bölünmüştür. Navigasyon elemanları üst kısımda bulunur;
• "Akordeon", içeriğin başlıklar altında düğmeler şeklinde gizlendiği bir tekniktir.

Mobil sürümden kaldırılan tüm bloklar, HTML koduna eklenmeli ve belirli cihazlarda görüntülenmekten gizlenmelidir.

Duyarlı yerleşimin çözünürlüğüne gelince, farklı cihazların en popüler modellerinin analizlerini görüntülemeniz veya Firefox -> Menüyü Aç -> Geliştirme -> Duyarlı Tasarım'a gitmeniz gerekir. Alternatif olarak, 100 piksellik artışlarla uzatabilirsiniz.

Duyarlı web sitelerine iyi örnekler:

1. Web Tasarım Konferansında Yeni Maceralar 2012

Düzen esnek bir ızgaraya dayalıdır ve maksimum sayıda kullanıcıyı kendine çeker. Bu, bir web tasarım konferansı hakkında bir web sitesidir, bu nedenle web tasarımındaki en iyi ve güncel trendlerin tümü burada gösterilmektedir.

1. kaburga

Bu sitenin tasarımı, tüm gadget'ların ekranları için uygundur ve şirket ve hizmetle ilgili tüm bilgileri görüntüler.

1. Adaptive Web Design, duyarlı tasarımla ilgili tüm sorularınızı yanıtlayan bir reklam kitabı sitesidir. Doğal olarak site en üst düzeyde yapılır.

Veri dizisi çok büyükse, mobil cihazlar için ayrı bir web sitesi oluşturmak mantıklıdır.

Mobil cihazlar için ayrı bir web sitesi geliştiriyoruz

Bireysel site kendi HTML kodunu kullanır. Bu nedenle tasarımcı, sitenin ana sitenin bir kopyası olup olmayacağına veya ondan önemli ölçüde farklı olup olmayacağına karar verir. Her durumda, geliştirirken ana içeriği ödünç almalı ve hangi öğelerin tutulması ve hangilerinin kaldırılması gerektiğine karar vermelisiniz.

Geliştirmeden önce, kullanıcıların bu içeriği aradığı anahtar kelimeleri kontrol etmek önemlidir. Bu bilgiler, Arama Motoru Optimizasyonu raporunda Google Analytics'te görüntülenebilir.

Ayrıca tasarımcılarda mevcut şablonlar kullanılarak sitenin mobil versiyonu oluşturulabilir. Çok daha az geliştirme süresi alacaktır.

Bu Geliştirme Yöntemlerinin Avantaj ve Dezavantajları

	Avantajlar	Dezavantajları
Uyarlanabilir tasarım	● Geliştirme kolaylığı. Tüm site yapısı farklı ekran genişliklerine göre ayarlanır; ● Sıfırdan bir web sitesi yazmaya gerek yok, sadece CSS ve HTML'de değişiklik yapın; ● Böyle bir ürün için basit destek; ● Bir adresin bulunması, web sitesi tanıtımı üzerinde olumlu bir etkiye sahiptir.	● Mobil kullanıcıların ve PC kullanıcılarının farklı görevleri; ● Duyarlı bir site devre dışı bırakılamaz ve normal bir etki alanına geçirilemez.
Mobil site	● Ana sürümden ayrı olduğu için üzerinde değişiklik yapmak kolaydır; ● Kullanıcı dostu; ● Ana siteye gitmek mümkündür.	● Masaüstü ve mobil sürümlerin farklı adresleri; ● Sınırlamalar, çünkü bir mobil site oluştururken bazı içerik ve işlevlerden kurtulmanız gerekir.

Mobil trafik büyüyor ve ortalama olarak tüm ziyaretlerin yaklaşık %25'ini kaplıyor. Daha önce bu ziyaretçilerin kaybı önemsizdi, şimdi her 4 veya 5 kullanıcıda bir. İstatistik vermeye gerek yok bence. Widget'ın yeni bir mobil versiyonunun geliştirilmesiyle sıkı ve ciddi bir şekilde ilgileniyoruz. Önceki hataların tüm deneyimlerini topladık ve sonuçları haftalarca test ettik. Yine kendi sitemizi geliştirmiyor, bir mobil widget geliştiriyorduk. Sonuç olarak sitenin mobil versiyonundaki en ölümcül hataların bir listesini derledik. Mobil tasarım ve mobil yerleşimin hatalarını gözden geçirdi. Tüm bu hatalar, mobil trafik dönüşümlerini öldürür. Ve buna dikkat etmenin zamanı geldi:

1. Çok uzun kavrama şekilleri.

Bu, herhangi bir web sitesinde gerçek bir dönüşüm katilidir! Anketleri telefonda doldurmak son derece zahmetli olduğu için mobil sürümler özellikle buna karşı hassastır. Onlardan kurtulmak.
Örnek, Tinkoff Bank'tan adamların uzun bir "kredi için" başvuruyu adımlara böldüklerinde ne kadar yetkin davrandıklarını gösteriyor. Sadece 4 alanı dolduran ziyaretçi lider olacak ve ikinci adımda düşerse bağlantıları kalacaktır.

2. Firmanın telefon numarası +7 olmadan veya resimli olarak belirtilmiştir.

Bu sadece bir cehennem! Cehennemde bu tür siteler için özel bir yer var, 1 tıklama yerine bir sayı hatırlamanız ve ardından kendiniz girmeniz gerektiğinde. Kahrolası! Ya ben sürüyorsam?

3. Sitede Flash kullanımı veya mobilde oynatılamayan içerik.

Mobil sürüm için bu tür içeriğin tamamen hariç tutulması tavsiye edilir. Düzgün çalışmayacak ve ziyaretçiler için çok fazla zorluğa neden olacaktır. Video çalışmaz, oyun oynamaz ve menüdeki özel animasyon beyni aşındırır. Apple ios cihazları Flash animasyonunu hiç desteklemez. Gereksiz, neden karmaşık görüntülemeyi kaldırın.

4. Sitede mobil uyumlu olmayan widget'lar ve pop-up'lar.

Çevrimiçi danışmanlar, geri arama widget'ları, sosyal Paylaşım, e-posta toplayıcılar - bu araçlar sitenin dönüşümünü artırmaya yardımcı olacaktır, ancak mobil trafiğe uyarlanmazlarsa, siteyi yüklerler, içeriği engellerler, o zaman büyük olasılıkla yarardan çok zarar verirler. Bu nedenle, üçüncü taraf hizmetini kurduktan sonra sitenizi mobil cihazlarda kontrol ettiğinizden emin olun.

Widget nasıl düzgün bir şekilde kontrol edilir ve ne aranır, kısa bir video incelemesine bakın:

5. Uyarlanmış bir mobil versiyonun olmaması. Çapraz tarayıcı ve çapraz platform.

Mobil sürüme sahip olmanın avantajları nelerdir?
İlk olarak, arama motorları sonuçlara öncelik verir. Google, siteleri şu şekilde "Mobil uyumlu" olarak işaretler:

İkincisi, kullanıcıların sitenize farklı cihazlardan göz atması uygundur.
Bunun için mobil versiyonun, farklı ekran boyutlarına sahip cep telefonları ve tabletler de dahil olmak üzere her türlü mobil cihazda düzgün çalışması gerekir. Platform, üretici veya tarayıcıdan bağımsız olarak. Evet, bu açık ama yine de en önemli kriter.

Site hızıyla ilgili 3 temel sorun vardır - boyut, mesafe ve widget'lar. Genellikle, bir mobil kullanıcının sitede herhangi bir özel efekte ihtiyacı yoktur; sitenin herhangi bir "çan ve ıslık" olmadan düzenli bir düzeni yapacaktır. Ek olarak, bir cep telefonunun ekranı genellikle düşük çözünürlüğe sahiptir, bu nedenle mobil kullanıcılar için daha küçük resimler "gönderilebilir" (ve örneğin WebP gibi daha aşamalı bir biçim kullanın).

Mesafe sorununu çözmek için, sitenin barındırılmasına normal olarak ana mobil operatörlerin ağlarından erişilebilir olduğundan emin olmanız gerekir. Optimum konum, mobil operatörlerin ağlarıyla iyi bağlantı olduğunu iddia eden iyi bir Moskova (veya bölgesel - bölgesel projeler için) veri merkezinde olacaktır. Yabancı barındırma pek uygun değildir (ve yurt dışından veri aktarım hızıyla ilgili bir takım sorunları vardır).

Hem mobil hem de normal bir sitenin hızı ve kullanılabilirliği ile ilgili sorunlara kapsamlı bir çözüm için özel hizmetler de kullanılabilir. Örneğin, Airi.rf

9. Yanlış yönlendirme. Sitenin tam sürümüne geçiş eksikliği.

Doğal olarak, tüm mobil kullanıcılar sitenin mobil sürümüne yönlendirilmelidir, ancak tipik yönlendirme hataları meydana gelir.
Örneğin, nasıl olur?

Kullanıcı Yandex'de belirli bir ürünü arar ve size gider. Sistem bir cep telefonundan gelen aramayı algılar ve müşterinin ihtiyaç duyduğuna değil, mobil sürümün ana sayfasına yönlendirir. Bu ürünü sitede yeniden aramanız veya rakiplerinize gitmeye çalışmanız gerekir.

Ek: Mobil sürüm her zaman yeterli olmayabilir, belki de istemcinin ihtiyaç duyduğu işlevleri, bağlantıları gizlemişsinizdir veya genel olarak istemci masaüstü sürümüne alışmıştır. Her zaman sitenin tam sürümüne geri dönme seçeneğini bırakın.

10. Otomatik tamamlama. Numara çevirmeyi etkinleştirir.

Müşteri direncini azalttıkça dönüşüm artar. Her alan daha kolay doldurulabilir hale getirilebilir. Bunu yapmak için, buna göre reçete ediyoruz:

Kolaylık eklentisi
Çok az kişi, hızlı erişim için masaüstünüze bir web sitesi yer imi ekleyebileceğinizi biliyor. Simge bir uygulamaya benziyor ve kullanıcının ana ekranına sabitlenecek.

Nasıl yapılır:
Simgeyi 180 piksele 180 piksel yapın (yuvarlama yok) ve etiketi web sitesine ekleyin

Umarım bu 10 puan, mobil sitenizi geliştirmenize ve müşterilerinizi mutlu etmenize yardımcı olur. Bazıları zaten biliniyor ve sizin için aşikar olabilir, ancak onları en ölümcül hatalar listesine dahil etmemek yanlış olur.

Sitenizin mobil versiyonundan yüksek dönüşüm!

Yine, WordPress site sahipleri için iyi haber - sitenizin mobil sürümünü bir alt alanda oluşturan eklentiler var, örneğin WP Mobile Edition.

Bu yöntemin avantajları: Mobil cihazlar için bir sitenin tasarımını, hızı üzerinde iyi bir etkisi olacak şekilde önemli ölçüde basitleştirebilirsiniz.

eksileri: bir alt etki alanı oluşturup yapılandırmanız, bunun için ayrı bir şablon ve kullanıcının hangi cihazdan oturum açtığını belirleyen bir komut dosyası yazmanız gerekir ve bu, duyarlı bir tasarım oluşturmaktan daha uzun sürer.

Ne alacağız?

"m" alt alanındaki ek site adresi. ana etki alanından farklı bir tasarıma sahip, sadeleştirilmiş. Böyle bir uygulamanın örnek ağı, örneğin herkes tarafından bilinen bir site ile doludur:

Seçiminizi yaptıysanız ve uygulama yöntemlerinden birini sipariş ettiyseniz, sitenizin mobil cihazlarda nasıl görüntülendiğini kontrol etmeyi unutmayın. çevrimiçi Google testleri.

Konuyla ilgili daha fazla bilgi:

Sorularım var?

Şimdi bizimle iletişime geçin, 8 iş saati içinde yanıt vereceğiz.