Sitenin mobil versiyonu: nasıl yapılır? Uyarlanabilir tasarım

İçindekiler:

Sitenin mobil versiyonu: nasıl yapılır? Uyarlanabilir tasarım
Sitenin mobil versiyonu: nasıl yapılır? Uyarlanabilir tasarım
Anonim

Bugün, çoğu insan mobil cihazlar aracılığıyla çevrimiçi oluyor - tabletler, telefonlar, bu bağlamda web sitesi 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. Ve arama robotu, 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.

Sitenizi mobil uyumlu hale getirmenin dört temel yolu vardır.

sitenin mobil versiyonu nasıl yapılır
sitenin mobil versiyonu nasıl yapılı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 CSS3 Medya Sorguları kullanılır. Site tasarımının kendisi değişmez.

Bu yöntemin avantajları şunlardır:

  • 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'de ince ayar yapmak yeterlidir;
  • bir URL – kullanıcının birkaç adı hatırlamasına gerek yoktur, bir web yöneticisinin işini karmaşıklaştırabilecek bir yönlendirmeye (bir adresten diğerine yönlendirme) gerek yoktur ve arama yapmak daha kolaydır bir kaynağı tek bir adresle sıralamak ve sıralamak için motor.

Tabii ki, uyarlanabilir şablonların dezavantajları vardır ve 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, mobil cihazlarda PC'de 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 olduğu bir mobil versiyonuysa, bu tasarım yeterlidir. Ancak bu, birçok bölümü ve alt bölümü olan karmaşık bir yapılandırılmış kaynaksa, ziyaretçiler uyarlanabilir düzenden pek hoşlanmayacaktır.
  • 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üşecek.
  • Mobil sürümün kapatılamaması da bir diğer önemli dezavantaj. Bazı öğeler böyle bir düzen tarafından gizlenmişse,Kapatıp normal bir alan adına geçiş yapabileceğiniz sitelerin aksine açmak için yapabileceğiniz hiçbir şey yok.

Ancak, 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.

site tasarımı
site tasarımı

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

Bu yöntem çok yaygındır ve siteyi bir mobil cihazda daha okunaklı 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, sitenin 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ı olduğu için değiştirilmesi ve düzenlenmesi 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 da bazı dezavantajlar vardı:

  • Birden çok 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ümünden mobil sürüme bir yönlendirme (yönlendirme) önerir, ancak aynı zamanda bu sayfa mobildeysesürüm mevcut değil, kullanıcı bir hata alacak. 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 gülünç 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 elde eder. Ama 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.

uyarlanabilir şablonlar
uyarlanabilir şablonlar

Üçüncü yol - RESS 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, bir kaynağı, her cihaz için ayrı ayrı indirilebilen bir mobil uygulamaya hedeflemektir. Android için - GooglePlay ile ve Apple için - iTunes ile.

Bu tür uygulamalar hızlı, ücretsiz, kullanışlıdır, çeşitli bilgi türlerini barındırabilme özelliğine sahiptir ve 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ığından, erişimleri kolaydır.

Elbette burada vegeliştirmedeki karmaşıklık, çok sayıda programcının yüksek işçilik maliyeti, çeşitli yerleşim seçenekleri yapma ihtiyacı gibi eksiklikleri. Bazen mobil cihaz uygulama tarafından tanınmaz. Düzenli teknik destek, eksikliklerin düzeltilmesi gereklidir. Yine de bu seçenek, üretken ve kesintisiz çalışması nedeniyle önerilen üç seçenek arasında en iyisi olarak kabul edilir.

google mobil web sitesi
google mobil web sitesi

Mobil web sitesi oluşturmanın en ucuz yolu

Yukarıdaki yöntemlerin tümü, her zaman uzun ve zor 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 görüntülenmesine yardımcı olacaklar.

Tabii ki bu yöntem ciddi kaynaklar için pek uygun değil. 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 günümüzde 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 pop-up'lar kesilecekancak sayfa hızlı ve "gecikme" olmadan yüklenir.

sitenin mobil versiyonu android
sitenin mobil versiyonu android

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 sisteminde veya uyarlanabilir bir şablon kullanılarak yapıldı. En önemlisi, etkin çalışması için son derece önemli birkaç ilkeye bağlı kalınması gerekir. Peki, sitenin mobil versiyonu ne olmalı? Nasıl üretken, verimli ve üretken hale getirilir?

bir bilgisayardan sitenin mobil versiyonu
bir bilgisayardan sitenin mobil versiyonu

Gereksiz her şeyi kaldırın

Minimalizm, sitenin mobil sürümünün 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ördüğünü 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ü sürümünde 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 dikkatinizi dağıtacaktır.ana.

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. Sağa veya sola değil, yukarıdan aşağıya doğru yapıyorsun.

Birleştirme

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 bir adres, burada her hücrede ayrı bir ev, sokak, apartman vb. Bulunur. Kullanıcıyı birçok küçük hücreye girmeye zorlamamak için, ondan sadece 2 - isim ve adresi doldurmasını isteyin.

Ve bağlantının 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 büyük 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ırayla ve ikame ile sabit. Seçimleri, nelerin listeleneceğine bağlıdır.

Fixed, 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 bir ve aynı olanın birçok varyasyonunun olduğu durumlar için uygundur.aynı ad ve her açılır liste, kullanıcıyı hedefe bir adım daha yaklaştırıyor. 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 şişleri" arama sorgusuna girer ve araç ipucunda "Örgü şişleri 5 mm", "Örgü şişleri 4,5 mm" vb. görür.

Otomatik Doldur

Bu öğe özellikle çevrimiçi bir şeyler satan siteler için geçerlidir ve ödeme, teslimat vb. için standart formları doldurmanız gerekir. Bir kişi telefondan satın alma işlemi yapıyorsa, büyük olasılıkla zamanı yoktur. bir bilgisayara ulaşmak, bu da satın alma işleminin mümkün olduğu kadar hızlı ve rahat yapılması gerektiği anlamına gelir.

Bunun 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. Bunlar değiştirilebilir, ancak hedefi vurursanız kullanıcının zamanı kaydedilir.

Her şey okunur, her şey izlenir

Sitenin mobil versiyonunu tasarlarken, 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 yazı tipleri 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. mağaza.

Bazı istatistikler

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

Sayılar 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. bölümünün 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 bu kadar yer varken kendi segmentinizi oluşturabilirsiniz.

sitenin mobil versiyonu ücretsiz
sitenin mobil versiyonu ücretsiz

Mobil sürüme ihtiyacınız olan yer

Mobil sürümü kullanmak, üst sıralarda yer almayı hedefleyen 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ı, çünkü çoğu işe veya okula giderken telefondan görüntüleniyor;
  • sosyal ağlar - aynı nedenle, 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;
  • İnsanların bir şey ararken gittikleri referans, gezinme siteleri vb.;
  • çevrimiçi mağazalar - 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 teknolojileraktif büyüme ve gelişme, bu nedenle, pazarda liderlik için çabalayan herhangi bir şirket, İnternet kaynağının gereksinimleri karşıladığından emin olmalı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 alamaz, sipariş veremez, teslimat hakkında bilgi alamaz, ardından tüm bunların mümkün olacağı siteyi bulabileceği 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 web 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 alanda yeni bir site oluşturmak ve ona yönlendirmek, ücretsiz şablonlar kullanmak veya kullanıcının girmesini kolaylaştıracak bir mobil uygulama oluşturmak. ve sayfada olun.

Bu yaklaşım yalnızca mevcut müşterilerin sadakatini korumaya yardımcı olmakla kalmayacak, aynı zamanda yeni ziyaretçiler çekme fırsatı da sağlayacaktır.

Önerilen: