Sergey Lukoshkin

26.03.2015 | | 0 Yorum

İnternet, tüketici davranışlarını önemli ölçüde değiştirdi. Uzun süre ürün seçmek için mağazaya gitmezler. Tam tersi: önce İnternet'e “tırmanıyorlar”, bir ürün buluyorlar, rakiplerle karşılaştırıyorlar, sonra bir mağaza buluyorlar, başkalarıyla karşılaştırıyorlar ve ancak ondan sonra nereden satın alacaklarına karar veriyorlar.

Ancak bundan sonra seçilen mağazaya gidecekler veya sadece İnternet üzerinden mal sipariş edecekler. Bugün, alıcıların %60'ından fazlası tam da bunu yapıyor.
Görünüşe göre başarı için şirketinizin bir web sitesine veya çevrimiçi bir mağazasına ihtiyacınız var ve hepsi bu. Ancak bu artık yeterli değil.

Bir web sitesinin mobil versiyonu veya duyarlı tasarım bir işletme için neden önemlidir?

Gerçek şu ki, akıllı telefonların ve tabletlerin ortaya çıkmasıyla birlikte, giderek daha fazla alıcı, masaüstü bilgisayarlardan veya dizüstü bilgisayarlardan değil, bu cihazları kullanarak İnternette mal ve hizmet arıyor. Ve hepsi çok uygun olduğu için. Alıcı nerede olursa olsun, doğrudan cep telefonundan arama yapabilir ve bilgisayarı açmasına gerek yoktur.
Bu harika, ancak ister tablet ister akıllı telefon olsun, giyilebilir bir aygıtın fiziksel ekran boyutu oldukça küçüktür ve bu nedenle bir bilgisayarda veya dizüstü bilgisayarda harika görünen bir sitenin mobil ekranda görüntülenmesi çok sakıncalıdır.
Bu nedenle, sitenizin akıllı telefonlarda, tabletlerde veya phabletlerde (phablet, akıllı telefon ve tablet arasındaki bir geçiştir) kullanıma uygun olup olmadığı her zamankinden daha fazla önemlidir.

Bir web sitesi nasıl mobil uyumlu hale getirilir?

Bu sorunu çözmek için iki yaklaşım vardır:

1. Mobil cihazda açılan sitenin ayrı bir sürümünü oluşturun
2. Her ekran boyutuna uyum sağlayan duyarlı tasarıma sahip bir web sitesi oluşturun

Geliştirilmesi daha ucuz olduğu için en yaygın kullanılan ikinci seçenektir. Çoğu modern site, başlangıçta farklı ekranlarda eşit olarak görüntülenebilecek şekilde tasarlanmıştır.
Duyarlı web sitesi, görüntülendiği cihazın ekran boyutuna otomatik olarak uyum sağlar.
Örneğin, laboratuvarımızın sitesi. Bilgisayar ekranında böyle görünüyor

Ve bir akıllı telefonun ekranında böyle görünüyor


Gördüğünüz gibi, bir akıllı telefonda bile hiçbir şeyin yakınlaştırılmasına gerek yok. Tüm kontroller, bağlantılar, resimler ve yazı tiplerinin kullanımı, küçük bir ekranda bile çok kolaydır.
Duyarlı bir web sitesinin maliyeti ve geliştirme süresi elbette uzamıştır, ancak aynı zamanda hangi pazarda çalışırsanız çalışın, duyarlı tasarıma sahip bir web sitesi işinize çok yerinde bir yatırımdır. Ve işte bunun en önemli nedenlerinin bir listesi.

Duyarlı bir işletme web sitesi yapmak için en iyi 5 neden

Mobil arama.İstatistiklere göre (bu yazının yazıldığı sırada), alıcıların %50'den fazlası internette mobil cihazlardan mal ve hizmet arıyor. Ve bu sayı çok hızlı artıyor. Daha yakın zamanlarda Google, mobil sürümü olmayan sitelerin mobil arama sonuçlarında çok düşük sıralarda yer alacağını bildirdi. Bu nedenle, sitenin mobil versiyonuna sahip değilseniz, bir akıllı telefondan yapılan aramada sizi bulmanın zor olacağına şaşırmayın.
Kullanıcılar için kolaylık. Yine aynı istatistiklere göre, kullanıcıların %40'ından fazlası, mevcut sitenin mobil sürümü yoksa başka bir siteye gideceklerini söyledi. Ve yine, payları giderek artıyor. İş için bu, alıcının dikkatinin, web sitesi herhangi bir cihazda uygun olan tedarikçi tarafından çekileceği anlamına gelir.
Doğrudan iletişim. Akıllı telefon, kullanıcının sitede belirtilen telefon numarasını hemen aramasını sağlar (sitede tıkla ve ara işlevi varsa). Böylece potansiyel bir alıcıya çok daha yakın olursunuz.
Yeni promosyon fırsatları. Günümüzde mobil reklamcılık yaygınlaşıyor, ancak bir mobil siteniz yoksa etkinliği feci derecede düşük olacaktır. Aksine, mobil uyumlu siteler başka bir güçlü tanıtım kanalına sahip olur.
Rekabet avantajı. Ve sonuncusu. Rakiplerinizin sitelerinin mobil sürümlerine sahip olup olmadığını kontrol edin. Değilse, güçlü bir rekabet avantajı yaratmak ve rakiplerinizin eski sitelerinden ayrılan müşterileri elde etmek için harika bir fırsatınız var.

İnternet çağında, ağ kullanıcılarının çoğunluğu için en erişilebilir olan, bulması daha kolay olan ve herhangi bir cihazdan etkileşime girmesi daha kolay olan yarışmayı kazanır.
Sitenin mobil versiyonuna mı yoksa uyarlanabilir tasarıma mı ihtiyacınız olduğundan hala şüpheniz mi var?

Bugün, çoğu insan mobil cihazlar aracılığıyla çevrimiçi oluyor - tabletler, telefonlar, bu bağlamda site optimizasyonu da yeni bir seviyeye ulaşıyor. Bir kullanıcı gelir ve sitenin mobil cihazlar için optimize edilmediğini görürse: resim görüntülenemiyor, düğmeler taşınmış, yazı tipleri küçük ve okunamıyor, tasarım çarpık - %100'den 99'u çıkacak ve daha uygun bir tane aramaya başlayın. A, kaynağın alakasız olduğu, yani arama sorgusuyla eşleşmediği kutusunu işaretler. Bu nedenle sayfanın tasarımı çeşitli mobil cihazlara uyarlanmalıdır. Sitenin mobil versiyonu nedir, nasıl yapılır ve uygulamanın en iyi yolu nedir? Bu makalede daha fazlasını okuyun.

Bu nedenle, siteyi mobil sürüme uyarlamanın dört temel yolu vardır.

Birinci Yöntem - Duyarlı Tasarım

Duyarlı şablonlar, site görüntüsünü ekran boyutuna göre değiştirir. Kural olarak, standart 1600, 1500, 1280, 1100, 1024 ve 980 piksele ayarlanırlar. Uygulama için sorgular kullanılır. Kendini değiştirmez.

Bu yöntemin avantajları şunları içerir:

• uygun geliştirme, yapının kendisi ekran parametrelerine uyum sağladığından ve herhangi bir güncelleme sıfırdan tasarım geliştirmeyi gerektirmediğinden, CSS ve HTML'yi değiştirmek yeterlidir;
• bir URL adresi - kullanıcının birkaç adı hatırlaması gerekmez, yeniden yönlendirmeye (bir adresten diğerine yönlendirmeye) gerek yoktur, bu da web yöneticisinin çalışmasını zorlaştırabilir ve arama motorunun sıralama ve sıralama yapması daha kolaydır tek adresli bir kaynak.

Tabii ki, uyarlanabilir şablonların dezavantajları vardır, bu arada avantajlardan daha fazlasıdır. Bununla birlikte, birçok geliştirici bu konsepte, örneğin sitenin mobil versiyonu uyarlanabilir bir tasarıma sahip olan Google Corporation'a bağlı kalmaktadır. Yani, dezavantajlar:

• Duyarlı tasarım, mobilde masaüstünde olduğu gibi aynı görevleri desteklemez. Bu, örneğin, bir bankanın web sitesinin, döviz kuru veya en yakın ATM'lerle ilgili bilgilerin kullanıcı için daha önemli olma olasılığının daha yüksek olduğu bir mobil versiyonuysa, bu tasarım yeterlidir. Ancak, birçok bölümü ve alt bölümü olan karmaşık bir yapılandırılmış kaynaksa, ziyaretçilerin beğenmesi olası değildir.
• Yavaş yükleme, favori bir siteyi nefret dolu bir siteye dönüştürür. Bu, özellikle animasyonların, videoların, açılır pencerelerin ve diğer aktif öğelerin bol olduğu kaynaklar için geçerlidir. Yüksek ağırlığı nedeniyle sayfa basitçe “yavaşlayacak”, kullanıcı sinirlenip siteden ayrılacak ve sitenin arama konumları düşecektir.
• Mobil versiyonun devre dışı bırakılamaması da bir diğer önemli dezavantaj. Bazı öğeler böyle bir düzen tarafından gizlenmişse, onu kapatıp normal bir etki alanına geçebileceğiniz sitelerin aksine, onu açmak için yapabileceğiniz hiçbir şey yoktur.

Bununla birlikte, sitenin böyle bir mobil sürümü, özel beceriler ve maliyetler olmadan hızlı bir şekilde, kaynağı herhangi bir gadget'a uyarlamanıza olanak tanır. Ancak, listelenen eksiklikler göz önüne alındığında, karmaşık gezinme ve animasyon olmadan minimum bilgi ve multimedya içeren küçük, basit kaynaklara uyacaktır. Karmaşık bir site için diğer 2 yöntem uygundur.

İkinci yöntem - sitenin ayrı bir sürümü

Bu yöntem çok yaygındır ve siteyi bir mobil cihazda daha okunabilir hale getirmede genellikle başarılıdır. Özü, uygulama için çizilen ve ayrı bir URL veya alt etki alanında, örneğin m.vk.com'da bulunan sayfanın ayrı bir sürümünü oluşturmaktır. Aynı zamanda, ana işlevsellik korunur, site tasarımı sadece farklı görünür. Bu yöntemin avantajları açıktır:

• Kullanıcı dostu arayüz;
• sürüm ana kaynaktan ayrı olarak mevcut olduğu için değiştirmek ve düzenleme yapmak kolaydır;
• düşük ağırlık nedeniyle, sitenin ayrı bir sürümü, uyarlanabilir bir şablondan çok daha hızlı çalışır;
• çoğu zaman mobilden sayfanın ana versiyonuna gitmek mümkündür.

Ama burada bile dezavantajları yoktu:

• Birkaç adres - sitenin masaüstü ve mobil versiyonu. Kullanıcının iki seçeneği hatırlaması nasıl sağlanır? Web yöneticileri genellikle masaüstü sürümden mobil sürüme reçete yazar, ancak bu sayfa mobil sürümde yoksa kullanıcı bir hata alır. Burada, 2 özdeş kaynağı sıralamayı zor bulan arama motorlarında zorluklar ortaya çıkar ve bu, tanıtımı doğrudan etkiler.
• Sitenin bir bilgisayardan mobil versiyonu, kullanıcı yanlışlıkla ziyaret ederse saçma görünecek ve bu da trafiği etkileyebilir.
• Bu sürüm genellikle masaüstünde çok kısıtlıdır, bu nedenle kullanıcı çok sınırlı işlevsellik alacaktır. Ancak aynı zamanda bir şey eksikse, ziyaretçi sayfanın tam sürümüne gidebilir.

Genel olarak, ayrı bir mobil site kendini haklı çıkarır ve bir kaynağı mobil cihazlara uyarlamanın en yaygın yoludur. Amazon gibi büyük çevrimiçi mağazalar arasında popülerdir.

Üçüncü yol - RES tasarımı

Google arama motoru, mobil tasarımın bu yönünü aktif olarak desteklemektedir. Bu, siteyi bir telefona veya tablete uyarlamanın en karmaşık, maliyetli ama etkili yöntemidir. RES denir. Bu, her cihaz için ayrı olarak indirilebilen bir mobil uygulamada kaynak hedeflemedir. Android için - GooglePlay ile ve Apple için - iTunes ile.

Bu tür uygulamalar hızlı, ücretsiz, kullanışlı, çeşitli bilgi türlerini barındırabilme özelliğine sahipken, telefonun belleği ve İnternet trafiği, bir tarayıcı aracılığıyla bir siteyi ziyaret ederken olduğu gibi tüketilmez. Bağlantı her zaman elinizin altında olacağından ve tarayıcı adres çubuğuna karmaşık bir ad girmeye gerek olmadığı için ziyaret edilmesi kolaydır.

Tabii ki, burada geliştirmedeki karmaşıklık, çok sayıda programcı için yüksek işçilik maliyetleri ve birkaç yerleşim seçeneği yapma ihtiyacı gibi dezavantajlar da var. Bazen mobil cihaz uygulama tarafından tanınmaz. Düzenli teknik destek, eksikliklerin düzeltilmesi gereklidir. Bununla birlikte, bu seçenek, üretken, kesintisiz çalışması nedeniyle önerilen üçün en iyisi olarak kabul edilir.

Mobil web sitesi yapmanın en ucuz yolu

Yukarıdaki yöntemlerin tümü, her zaman uzun ve karmaşık olmasa da, yine de bir web yöneticisinin ücretli çalışmasını içerir. Böyle bir geliştirme için acil bir ihtiyaç görmüyorsanız, sitenin basit ve ücretsiz bir mobil versiyonu size uyacaktır. Bunu yapmanın en kolay yolu nedir?

Duyarlı tasarım için özel şablonlar (eklentiler) indirin. Örneğin, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile ve diğerleri. Sayfayı mobil sürüme daha iyi uyarlamak için nelerin düzeltilmesi gerektiğine dair birkaç ipucu alırken, sitenin telefonda daha doğru bir şekilde görüntülenmesine yardımcı olacaklar.

Tabii ki, bu yöntem ciddi kaynaklar için pek uygun değildir. Bunun yerine, bu ücretsiz özellik küçük ve basit siteler, bloglar, haber beslemeleri için tasarlanmıştır. Google arama motorunun yanı sıra Yandex'in de bugün mobil sürümlerde ciddi taleplerde bulunduğunu unutmayın, bu nedenle bu yöntemi kullanarak konumlarınızı düşürmek için büyük bir şans var.

Bu yöntemle, büyük olasılıkla reklamlar ve açılır afişler kesilecek, ancak sayfa hızlı ve “gecikme” olmadan yüklenecek.

Mobil sürüm oluşturma ilkeleri

Sitenin mobil versiyonunun ücretsiz olarak mı yoksa bir webmaster ekibinin yardımıyla mı oluşturulduğu önemli değil, RESS sistemi üzerinde veya uyarlanabilir bir şablon kullanılarak yapıldı. En önemlisi, etkin çalışması için son derece önemli birkaç ilkeye bağlı kalması gerekir. Peki, sitenin mobil versiyonu ne olmalı? Nasıl üretken, verimli ve üretken hale getirilir?

Gereksiz her şeyi kaldırıyoruz

Minimalizm, sitenin mobil versiyonunun geliştiricisinin uğraşması gereken şeydir. Renkler, düğmeler, afişlerle dolu ve doğru malzemeyi aramak için durmadan kaydırmanız gereken bilgileri algılamanın ne kadar zor olduğunu hayal edin. Mobil tasarım basit ve temiz olmalıdır. Alanı bölmek için 2-3 renk seçin (örneğin markalı). Biri beyazsa daha iyi. Küçük bir ekranın alanını anlaşılabilir ve okunabilir bölgelere ayırın. Kullanıcının nereye basacağını ve göreceğini net bir şekilde bilmesi için sanal anahtarlar görünür olmalıdır - işte ürün, işte veri doldurma formu, işte teslimat ve ödeme bilgileri.

Masaüstü versiyonunda faydalı olacak ve kullanıcı için hayatı kolaylaştıracak tüm ek seçenekler burada sadece zorlukları beraberinde getirecektir. Sadece en önemli unsurları bırakın. Animasyon, reklam afişleri, multimedya, büyük olasılıkla, yalnızca sitenin veya uygulamanın çalışmasını yavaşlatacak ve ana şeyden uzaklaştıracaktır.

hizalama

Hizalama sorunu daha az akut değildir, çünkü yanlış yapılırsa kullanıcı yalnızca önemli kelimelerin sonlarını alır. Sola hizalı ve dikey hizalama genellikle kabul edilir. Telefonunuzdaki haber akışında gezindiğinizi hayal edin. Yukarıdan aşağıya doğru yaparsınız, ancak sola veya sağa değil.

bir dernek

Uzun bir geçiş zinciri olasılığı olmadığında, birkaç adımı tek bir adımda birleştirmeye çalışın. Örneğin, site birkaç aşamada veri girişi gerektirir - bir ad, ardından her bir hücrenin ayrı bir ev, sokak, apartman vb. içerdiği bir adres. Kullanıcıyı birçok küçük hücreye vurmaya zorlamamak için, sorun sadece 2 - isim ve adres doldurması.

ve bağlantı kesilmesi

Bazen tam tersine çok fazla bilgiyi ayırmak gerekir. Örneğin, açılır menüde teslimatın gerçekleştirildiği 80'den fazla şehrin bir listesine sahipsiniz. Bunları bölgeye göre gruplandırın, böylece kullanıcının bu devasa listede gezinmesi gerekmez. Bölge merkezinin veya bölgenin üzerine geldiğinde, başka bir şehir listesi çıkar.

Listeler

Bu arada, listeler hakkında. İki tane var - alfabetik veya başka bir sıraya göre sabitlenmiş ve ikameli. Onların seçimi, neyin listeleneceğine bağlıdır.

Sabit, kullanıcı tam olarak ne aradığını biliyorsa kullanışlıdır. Örneğin, şehir, sayı veya tarih. İkinci seçenek, uzun karmaşık adlar için veya aynı adın birçok varyasyonunun olduğu ve her birinin kullanıcıyı hedefe bir adım daha yaklaştırdığı durumlar için uygundur. Otomatik değiştirme seçeneği, bir ziyaretçinin yardıma ihtiyacı olduğunda daha sık kullanılır. Örneğin, bir örgü sitesi şiş satın almayı teklif ediyor. Kullanıcı "Metal örgü şişleri" arama sorgusuna girer ve araç ipucunda "Örgü şişleri 5 mm", "Örgü şişleri 4,5 mm" vb. görür.

otomatik tamamlama

Bu nokta özellikle çevrimiçi olarak bir şeylerin satıldığı siteler için geçerlidir ve standart ödeme, teslimat vb. formlarını doldurmanız gerekir. Bir kişi bir telefondan alışveriş yaparsa, büyük olasılıkla bir bilgisayar, bu da süreç satın alımlarının mümkün olduğunca hızlı ve uygun bir şekilde yapılması gerektiği anlamına gelir.

Bunu yapmak için formlar önceden doldurulmuş veriler içerebilir, en popüler cevaplara başvurabilirsiniz. Örneğin, aynı bölgede çalışıyorsanız bugünün tarihini, nakit ödeme yöntemini, şehri girin. Değiştirilebilirler, ancak hedefi vurursanız, kullanıcının zamanı kaydedilir.

Her şey okunur, her şey izlenir

Sitenin mobil versiyonunun tasarımını oluştururken, herkesin telefonlarının farklı olduğunu ve görme duyularının da farklı olduğunu unutmayın. Belki de siteniz küçük bir ekrandan görüntülenecektir bu yüzden fontlar basit ve okunabilir olmalı, butonlar başka bir sayfaya götürülmeden tıklanabilecek kadar büyük olmalı ve görseller ayrı ayrı, özellikle büyük olduğunda açılmalıdır. internete geliyor.

Bazı istatistikler

Sitenin mobil cihazlara uyarlanmasından bahsetmişken, bu sürecin online tanıtım için ne kadar önemli olduğunu anlamak için istatistiklere başvurmamak elde değil.

Rakamlar aşağıdaki gibidir. Bugün, gadget'lar, görünüşe göre, en küçük çocuklar ve bazı yaşlılar hariç, nüfusun %87'si tarafından kullanılıyor. Ekonomistler, mobil ticaretin önümüzdeki 5 yıl içinde 100 kat büyüyeceğini tahmin ediyor. Aynı zamanda, sitelerin yalnızca %21'i mobil cihazlarla çalışacak şekilde uyarlanmıştır. Bu, İnternet trafiğinin ve e-ticaret pazarının yalnızca küçük bir 5. kısım tarafından işgal edildiği anlamına gelir.

Bu sayıları bir düşünün. Kaynağınızı uyarlamak mantıklı mı? Tabii ki evet. Üstelik bu pazarda çok fazla boş alan varken kendi segmentinizi oluşturabilirsiniz.

Mobil sürüm nerede gerekli?

Mobil versiyonu kullanmak, yüksek bir sıralama elde etmeyi amaçlayan herhangi bir platform için mantıklıdır. Sonuçta, bu kullanıcı üzerinde doğrudan bir etkidir ve sitenizde kalması için rahat koşullar yaratır.

Mobil sürüm olmadan var olamaz:

• haber portalları, çoğu işe veya okula giderken telefondan görüntülendiğinden;
• sosyal ağlar - aynı nedenden dolayı, ayrıca bir çevrimiçi iletişim faktörü vardır, bu da bunun için uygun, anlaşılır bir sohbet oluşturulması gerektiği anlamına gelir;
• insanların bir şey ararken gittikleri referans, navigasyonlu siteler vb.
• çevrimiçi alışveriş - alışveriş yapmak için zaman kaybetmeyen, ancak her şeyi mobil İnternet üzerinden satın alan müşterileri çekmek için bir fırsat.

Sonuç yerine

Bugün, mobil teknolojiler aktif büyüme ve gelişme aşamasındadır, bu nedenle pazar liderliği için çabalayan herhangi bir şirket, İnternet kaynağının gereksinimleri karşılamasını sağlamalıdır. Kullanıcının artan talepleri nedeniyle, siteler sürekli olarak yükseltilmeli ve farklı cihazlara uyarlanmalıdır. Bir kişinin belirli bir kaynakta bulunması sakıncalıysa, orada bir ürün veya fiyat hakkında bilgi alamayacağı, sipariş veremeyeceği, teslimat hakkında bilgi edinemeyeceği ve tüm bunların mümkün olacağı siteyi bulacağı açıktır. . Bu nedenle, rekabeti kazanmak için esnek, kullanışlı, işlevsel ve ilginç bir kaynağa sahip olmak önemlidir.

Android veya Ios sitesinin mobil sürümü bunu yapmanıza yardımcı olacaktır. Bunu yapmak için, yukarıdaki yeniden tasarım yöntemlerinden birini seçmeniz gerekir - uyarlanabilir bir şablon, bir alt etki alanında yeni bir site oluşturmak ve yeniden yönlendirmek, ücretsiz şablonlar kullanmak veya kullanıcının işini kolaylaştıracak bir mobil uygulama oluşturmak. girmek ve sayfada olmak.

Yeni bir kitap yayınladık, "Sosyal Medya İçerik Pazarlaması: Abonelerin kafasına nasıl girilir ve markanıza nasıl aşık olunur."

Sitenin mobil sürümü, kaynağın sayfalarını cep telefonlarından ve tabletlerden rahatça görüntülemenizi ve gezinmenizi sağlayan özel bir düzenin kullanıldığı ana sitenin yinelenen bir sürümüdür.

Kanalımızda daha fazla video - SEMANTICA ile internet pazarlamasını öğrenin

Cep telefonu uzun zamandır gezegendeki çoğu insan için en iyi arkadaş oldu. Modern mobil araçlar, masaüstü bilgisayarların rolünü neredeyse tamamen devraldı ve kullanıcıların İnternet'teki davranışlarını kökten değiştirdi. Hem bir bilgi kaynağı hem de birçok görevi gerçekleştirmenin bir yolu. Yaşamın dinamikleri, zamanın en verimli şekilde kullanılmasını gerektirir, bu yüzden uzun zamandır hareket halindeyken okuyor, satın alıyor ve rezervasyon yapıyoruz.

İnternetteki her projenin kendi ana sitesi vardır, ancak mobil cihazların ekran çözünürlüğü bilgisayar ve dizüstü bilgisayarlardan farklıdır. Sonuç olarak, ekranı çok rahatsız edici olduğu için siteyi bir telefondan kullanmak neredeyse imkansız. Bu nedenle, sitenin cep gadget'ları için okunabilecek optimize edilmiş bir sürümüne ihtiyaç vardı.

Neden sitenin mobil versiyonuna ihtiyacınız var?

Hem bilgilendirici hem de satış amaçlı özdeş web kaynaklarının bolluğu, ziyaretçilerin sadakat eksikliğine neden olur. İnternet kullanıcılarının bir seçeneği vardır, bu nedenle bir ziyaretçi örneğin uygunsuz bir kaynak navigasyonu ile karşılaştığında, zamanını boşa harcamayı değil, siteyi terk etmeyi ve bir rakibe gitmeyi tercih eder. Bu durum, yöneticileri sadece ziyaretçileri çekmek için değil, aynı zamanda kalmaları için motive etmek için de en konforlu koşulları yaratmaya zorlamaktadır.

Hedef kitlenin maksimum kapsamı ve bunun için rahat koşulların yaratılması - sitenin mobil versiyonu bunun içindir.

Sitenin ayrı bir mobil versiyonu, uzun süredir kullanılan mobil cihazlardan siteye rahat erişimin uygulanmasıdır. Akıllı telefonlarda, site bir sütunda görüntülenir, bu nedenle sitenin mobil sürümünü yapmadan önce geliştiricinin tasarım hakkında dikkatlice düşünmesi gerekir - ziyaretçiyi herhangi bir şekilde işlevsellikten düşürmemek için her şeyi yerleştirmek ve aynı zamanda, kaynakla etkileşimi mümkün olduğunca uygun hale getirin.

Nasıl çalışır

Ziyaretçiye hangi versiyonun gösterileceğine karar verilmesindeki prensip, kullanıcı siteye girdiğinde cihazın ekranının otomatik olarak algılanmasıdır. Ekran genişliği bir mobil gadget olarak tanımlanırsa, kaynağın ayrı bir alt etki alanında bulunan mobil sürümüne bir yönlendirme tetiklenir. Arama motorlarının gelecekte bu sürümü ayrı bir kaynak olarak değerlendirmesini önlemek için, ana siteyle aynı etki alanına bir alt etki alanı yerleştirmek daha iyidir, aksi takdirde sitenin mobil sürümünün teşvik edilmesi ters tepecektir.

Siteyi mobil sürüme nasıl çevirebilirim?

Belirli ilkeler vardır ve bunların uygulanması programlama ve yerleşim becerileri gerektirecektir.

mafyada. sürüm, masaüstü sürümü ile genel konsepti korumanız, ancak aynı zamanda kullanılabilirlik için en uygun arayüzün yanı sıra ayrı tasarım çözümleri geliştirmeniz gerekir. Ziyaretçinin ekranındaki kaynak öğeleri uygun aralıklarla yerleştirilmeli ve parmakla kolayca dokunulabilecek kadar büyük gösterilmelidir. Bundan sonra, test ve son lansman var.

Mobil sürüm ve uyarlanabilir düzen

Sitenin ayrı bir mobil versiyonuna paralel olarak, yorumlanmış başka bir varyasyon var - uyarlanabilir tasarım.

Sitenin mobil sürümünün uyarlanabilir sürümden nasıl farklı olduğunu anlamaya çalışalım.
Duyarlı site, kaynağın ayrı bir sürümü değildir, ana sitedir ve oturum açtığınız cihazın çözünürlüğüne göre otomatik olarak ayarlanır.

Duyarlı yerleşimin avantajları, ana siteyle aynı adrese sahip olması gerçeğini içerir, bu nedenle yeniden yönlendirme gerekmez. Ve bu, arama motorları tarafından sıralanırken sitenin konumunu büyük ölçüde geliştirir. Açılış sırasında, kesinlikle aynı site içeriği ve işlevselliği görüntülenir, ancak görünümü pencerenin boyutuna göre ayarlanır. Ek olarak, kaynağı optimize etme olasılığı vardır.

Ancak uyarlanabilir bir versiyonun geliştirilmesi daha fazla zaman alan bir süreçtir ve buna bağlı olarak olayın maliyetli kısmı da daha büyük olacaktır.

Duyarlı tasarım, büyük bir ziyaretçi cirosu olmayan kaynaklar için geçerlidir - çevrimiçi mağazalar, bloglar, kartvizitler ve web siteleri, ana görevleri içerik sunmaktır.

Mobil versiyonun artıları ve eksileri

Mobil sürüm daha yüksek yükleme hızına ve gezinme kolaylığına sahiptir. Ziyaretçi minimum dikkat dağıtıcı bilgi gördüğünden, kendi tarafında olumlu bir eylem olasılığı daha yüksektir. Ayrıca, ayrı bir mobil sürüm, masaüstünden tamamen bağımsızdır. Bu, onlarla ayrı ayrı çalışmayı mümkün kılar.

Bu kavramın dezavantajları, SEO promosyonu alanındaki bazı zorlukları içerir. Aynı içeriğin yerleştirilmesi kopya olarak algılandığından, site tanıtım sürecine olumsuz etkiyi ortadan kaldırmak için ayrı önlemler alınması gerekir. Mobil versiyonun evrensel olmadığı göz önüne alındığında, ana sitenin içeriğine ek olarak ayrı bir gider kalemi gerektirir.

Sitenin bu sürümü, ana siteye zaten yüksek trafiğe sahip olan ancak yeniden tasarım yapmadan mobil cihazlara bağlılığı artırmak isteyen büyük projeler için uygundur. Çoğu durumda, indirme hızının önemli olduğu kaynaklar için ayrı bir mobil sürüm uygundur - sosyal ağlar, posta hizmetleri, haber portalları.

Özetle, yalnızca bugün herhangi bir İnternet projesi için makul bir ihtiyacın siteyi mobil cihazlarda doğru bir şekilde görüntüleme yeteneği olduğunu söyleyebiliriz. Bunun nasıl uygulanacağı sitenin amaç ve hedeflerine, bütçesine ve yeteneklerine bağlıdır.

Sitenin bir mobil cihazda nasıl göründüğünü görmek telefonunuzda en kolayıdır. Üstelik böyle gerçek bir cihazdan alınan ekran görüntüsü, sitenin herhangi bir emülatör kullanmak yerine mobil cihazlarda en doğru şekilde görüntülenmesi olacaktır.

Sitenin mobil sürümünü bir bilgisayarda çevrimiçi olarak kontrol etmeniz gerekiyorsa, mobil cihaz emülatörleri kurtarmaya gelir. Bunlardan en doğru olanı, en popülerleri Android Studio ve Apple Xcode olan mobil işletim sistemi geliştiricileri için araçlardır. Bu setler, çeşitli cihazların en eksiksiz emülatörlerini içerir ve sitenin mobil sürümünü kontrol etmek, gerçek bir mobil cihaza en doğru şekilde yaklaşacaktır. Ancak, geliştirici araçlarını tipik bir bilgisayara yüklemek çok fazla zaman, deneyim ve yazılım bilgisi gerektirir.

Sitenin mobil sürümünü kontrol etmenin basit yolları

Bir siteyi mobil cihazlarda test etmenin bir önceki paragrafta tartışılan en zor yolunun aksine, en kolay yol tarayıcı penceresinin genişliğini dar bir sütun boyutuna indirmektir. Siteniz bu genişliğe uyum sağlıyorsa sitenizin mobil versiyonu uyarlamalı tasarım teknolojisi kullanılarak yapılır.

Ancak sitenin mobil versiyonu ayrı bir tasarım kullanılarak yapılmışsa bu yöntem çalışmaz. Bu durumda siteyi barındıran sunucunun, ziyaretçinin bir mobil cihazdan geldiğini açıkça belirtmesi gerekir. Sunucu, bu verileri, ziyaret edilen herhangi bir site tarafından tarayıcınızdan gerekli olan Kullanıcı Aracısı dizesinden alır. Bu nedenle, sitenin mobil cihazlarda nasıl göründüğünü görmek için sunucuyu "kandırmanız" ve Kullanıcı Aracısı dizesini bilgisayardan değil telefondan sağlamanız gerekir.

Sitenin mobil sürümünü bir bilgisayar aracılığıyla kontrol etmenizi sağlayan en zor ikinci seçenek, özel bir tarayıcı kurmaktır. Örneğin, Opera Mobile Classic Emulator. Windows, Mac ve Linux için sürümleri mevcuttur. Ne yazık ki bu geliştirme, Opera tarayıcısının 12. sürümünden önce kullanılan eski Presto motorunu temel alıyor ve sitenin modern bir mobil tarayıcıda nasıl görüntülendiğini gerçekten göstermeyecek. 2013'ten beri Opera tarayıcısı Blink yazılım motorunda çalışıyor, bu nedenle mobil siteyi modern bir tarayıcıda kontrol etmek daha iyidir. Opera olabilir veya Krom Apple Safari'de kullanılan aynı WebKit tabanlı Blink motorunda çalışan.

Belirtilen tarayıcılarda özel geliştirici modunu etkinleştirmeniz (Chrome'da F12 veya Opera'da Ctrl+Shift+i) ve mobil cihaz moduna geçmeniz gerekir:

Bundan sonra, sitenin bir mobil cihazda nasıl göründüğünü kolayca görebilirsiniz.

Bir mobil siteyi kontrol etmek için görsel bir kişisel değerlendirme yeterli değilse, o zaman siteyi bir mobil cihaz açısından analiz edebilen ve sitenin hareketliliğinin yalnızca nicel bir değerlendirmesini yapmakla kalmayıp, aynı zamanda akıllı telefonlarda sitenin görünürlüğünün nasıl artırılacağına dair öneriler. Sitemizde teknolojiye dayalı böyle bir hizmet var Google Mobil Dostu. Sitenizin adresini özel bir satıra girmeniz ve "Kontrol Et" düğmesini tıklamanız yeterlidir. Robot belirtilen adrese gidecek, sayfanın bir mobil cihaz formatında resmini çekecek ve mobil sitenizin kalitesi hakkında bir sonuç verecektir.
Örneğin, bu.

Mobil cihaz patlamasının ortaya çıkmasıyla birlikte geliştiriciler bir seçenekle karşı karşıya kaldılar: "tam teşekküllü" olanlarla birlikte sitelerinin mobil sürümlerini terk mi etmeliler yoksa siteler duyarlı hale gelip kendilerini farklı ekran boyutlarına uyarlamalı mı?

Şu anda, sitelerin mobil sürümlerini oluştururken, bunları oluşturmanın 3 ana yolu vardır:

• Uyarlanabilir tasarım;
• Sitenin ayrı mobil versiyonu;
• RESS (Duyarlı Tasarım + Sunucu Tarafı).

Yöntemlerin her birinin, ayrıntılı olarak açıklamaya çalışacağım artıları ve eksileri vardır.

Uyarlanabilir tasarım

CSS3 Medya Sorguları, duyarlı tasarımı uygulamak için yaygın olarak kullanılır. Ekran boyutuna bağlı olarak, kullanıcı farklı bir resim görecektir:

@medya ekranı ve (maks-genişlik: 1600 piksel) ( div.for-example (width: 1500px;) ) @media screen ve (maks-width: 1280px) ( div.for-example (width: 1100px;) ) @media ekran ve (max-width: 1024px) ( div.for-example (width: 980px;) )

Duyarlı Tasarımın Faydaları

• Geliştirme kolaylığı - uyarlanabilir düzen ile sitenin tüm yapısı otomatik olarak farklı ekran genişliklerine göre ayarlanır. Çalışan bir ürün elde etmek için her şeyi sıfırdan yazmanız gerekmez - sadece CSS ve HTML'de ince ayar yapmanız yeterlidir ... Bootstrap gibi çerçevelerin mevcudiyeti göz önüne alındığında, standart bir uygulama ile bu tür geliştirme çok zor değildir. Ek olarak, böyle bir ürünü desteklemek nispeten basit bir iş olacaktır.
• Bir URL - bizi gereksiz yönlendirmelerden ve kullanıcının mobil versiyonun adresini hatırlama ihtiyacından kurtarır (sadece m öneki olsa bile). Ayrıca tek bir adresin bulunması, arama motorlarının çalışması için “daha ​​uygun” olacağından sitenin tanıtımını olumlu yönde etkileyecektir.

Duyarlı Tasarımın Dezavantajları

• Çeşitli görevler - büyük sitelerin "mobil" kullanıcılarının tipik görevleri genellikle PC kullanıcılarınınkinden farklıdır. Bir banka müşterisiyseniz, büyük olasılıkla, sitenin mobil versiyonunda çok sınırlı bir bilgi yelpazesiyle ilgileneceksiniz - en yakın şubelerin, ATM'lerin vb. adresleri.
  Genel olarak, uyarlanabilir düzen ile en yaygın yaklaşım, telefonlar için düzende hedef kitlenin tüm gruplarının ihtiyaçlarını uygulamak için normal bir sitenin bir kopyasını oluşturmaktır. Ama sonra kullanılabilirliği unutabilirsiniz. Ziyaretçilerin yüzde beşi için gerekli olan ikincil bölümler, müşterilerin büyük bir kısmı için rahatsızlık yaratacaktır.
Sitelerin "ağırlığı", cep telefonu kullanıcıları için ciddi bir engel olmaya devam ediyor. Bu, gömülü haritalar, videolar, kredi hesaplayıcıları ve mobil sitelerdeki animasyonlu menüler dahil masaüstü sitelere özgü bazı aktif öğelerin daha hafif alternatiflerle değiştirilmesi gerektiği anlamına gelir. Duyarlı tasarım bize bu yeteneği verebilir mi? Popüler bir uygulamada, küçük ekrana sahip bir kullanıcının yalnızca bir kısmını görebilmesi için tüm sayfayı yüklemesi gerekir. Örneğin, ana düzenin masaüstü sürümü 200 Kb ağırlığındaysa ve mobil sürüm 50 Kb daha ağırlığındaysa, görüntülemek için 250 Kb indirmeniz gerekir. Tabii ki, sayfa kodu sıkıştırmayı kullanabilirsiniz, ancak sunucuya yapılan ekstra istekler yine de gidecektir.
• umutsuzluk - Mobil versiyonun tartışılmaz avantajlarından biri: Beğenmezseniz kapatıp normal domaine geçebilirsiniz. Duyarlı tasarım web siteleri bu basit ama önemli seçeneği sunmaz. Özel düzen uygunsuzsa, sorunluysa veya önemli bir gezinme öğesini gizliyorsa, onu kendi haline bırakın: Yeniden görmek için yapabileceğiniz hiçbir şey yok. Bir masaüstü veya rakibin web sitesini aramak için koşmanız gerekecek. Bu sınırlamayı aşmak için "koltuk değnekleri" ile karşılaşabilirsiniz (çerezleri kullanın ve farklı stil sayfaları ekleyin). Ancak bu yaklaşım gelişmeyi zorlaştırır.

Genel olarak, uyarlanabilir tasarımda bir mobil versiyon geliştirme fikri, yukarıdaki dezavantajlara rağmen oldukça popülerdir. Özellikle, bu kavram, örneğin Google gibi devler tarafından tam olarak desteklenmektedir.

Sitenin ayrı mobil versiyonu

Siteyi mobil kullanıcılar için uygun hale getirmek için, genellikle bir akıllı telefon / tablet ile kullanıcıya yönelik olarak ayrı site sürümleri de oluşturulur. En yaygın uygulama, mobil kullanıcıları özel bir alt alana (m.example.com, mobile.example.com, vb.) yönlendirmektir. Muhtemelen, vakaların% 99'unda, mobil sürüm sadeleştirilmiş bir ana sürümdür - yalnızca geliştiricilere göre mobil cihaz ve tablet kullanıcıları için gerekli ve faydalı olacak işlevsellik ile.

Mobil versiyonun faydaları

• Değişim kolaylığı site fiili olarak ana sürümden ayrı olarak var olduğundan, mobil sürüm çoğunlukla gereksiz, gereksiz işlevsellik sağlamadığından, yalnızca mobil sürümle ilgili değişiklikler yapmak çok daha kolaydır.
• Kullanıcı dostu - mobil sürüm genellikle masaüstü sürümüne kıyasla büyük ölçüde basitleştirilmiştir, bu nedenle kullanıcının ihtiyaç duyduğu bilgiler için çok uzağa gitmesi gerekmeyecektir.
• hız - sitenin aynı sadeleştirilmesi nedeniyle, mobil sürüm daha hızlı yüklenir. Bu, hala GPRS veya zayıf 3G kullanan kullanıcılar için çok önemlidir.
• Seçim-çoğu zaman, mobil sürümde sitenin ana sürümüne geçmek mümkündür.

Mobil versiyonun dezavantajları

• Birden çok adres -
• Kullanıcı rahatsızlığı - masaüstü ve mobil sürümler için farklı adresler. Bazıları için bu bir artı olabilir, diğerleri için siteyi rahatça görüntülemek için bir adresi daha hatırlamanız gerektiğinde son derece can sıkıcı bir faktör olabilir. Arama motorlarında da sorunlar vardır: Yinelenen içerikten kaçınmak için SEO'ların rel="alternative" ve rel="canonical" meta etiketlerini kullanması gerekir. Ayrıca, bir Google mobil arama kullanıcısı sonuçlarda bir bağlantıya tıkladığında masaüstü sürümüne yönlendirilecek veya mobil sürüme yönlendirilecektir. Ancak bu sayfanın mobil versiyonu yoksa hata verecektir.
• Sınırlama - ayrı bir mobil site oluşturmak, bazı içerik ve işlevlerden kurtulmak anlamına gelir. Ayrıca, genel bilgi resmini olumsuz etkileyebilecek iki farklı içerik grubunuz olabilir.

Genel olarak, sitelerin mobil sürümlerinin oluşturulması, özellikle büyük projeler için kendini oldukça iyi haklı çıkarır. Örnek olarak, Amazon sitenin özel, mobil bir sürümünü kullanır.

RES

Google'ın kendisi, web yöneticilerinin duyarlı tasarım kullanımını desteklemesine rağmen, ürünlerinde farklı bir sistem kullanıyor. Örneğin, farklı Kullanıcı Aracıları altındaki ana sayfaya giderseniz, farklı cihazlar için farklı HTML görebilirsiniz. RESS - Duyarlı Tasarım + Sunucu Tarafı. Uygulama örneği, "diz üstünde" çizilmiş:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "kütüphaneler" . $DS . "browser.php"); $cihaz = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE)( $tmpl = "template.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "template.t.php";) else( $tmpl = "şablon" .php"; ) include(dirname(__FILE__) . $DS . "şablonlar" . $DS . $tmpl);

RES'in Avantajları

Aslında yöntem, uygulamaya bağlı olarak sitelerin hem ayrı bir mobil hem de duyarlı sürümünün faydalarını içerebilir. Yeni olacaklardan:

• Trafik minimizasyonu - Gereksiz JavaScript, mobil cihazda CPU, bellek ve önbelleği boşaltan HTML'den kaldırılabilir. Ayrıca özel olarak optimize edilmiş html ve css olabilir.
• Hedefleme kullanmak mümkündür -örneğin, Android cihazlar için uygulamayı GooglePlay'den ve Apple için - iTunes'dan indirmeyi teklif edin. Her cihaz için düzeninizi yapabilirsiniz.

Eksileri

• Geliştirme zorluğu böyle bir yöntem, uygun sunucu yapılandırmasını ve daha fazla programcının çalışmasını gerektirecektir. Birkaç farklı düzen seçeneği yapmak da gerekli olacaktır.
• Cihaz algılama mekanizması - Ne yazık ki, zamanımızda bile henüz mükemmelliğe getirilmemiştir. Birinin nadir bulunan telefonunun mobil cihaz olarak tanımlanmadığına dair hikayeler oldukça sık ortaya çıkıyor.

Genel olarak, RESS önerilen üç seçeneğin en iyisidir, ancak geliştirme sırasında çok daha fazla çaba gerektirir.

Özet

Kişisel görüşüme göre, herkesin kullanması gereken ideal bir seçenek yok. Benim için en iyi seçenek RESS. Ancak, uygulanması çok çaba gerektirdiği için bu nadir seçeneklerden biridir. Genel olarak, sitenin özüne ve yönüne bağlı olarak, her 3 seçeneğin de artıları ve eksileri vardır.