Tasarım

Bahar

Rus dili, mevsimlerle ve bunlarla ilişkili doğal olaylarla ilgili kelimeler açısından çok zengindir.

okumaya devam et

...

4. Yan sütun

yan sütuna

5. Altbilgi

Sayfanın alt kısmında, telif hakkı, sosyal medya düğmeleri ve bir bağlantı hakkında bilgi yayınlayacağız. e-posta:

6. Genel CSS stilleri

Genel stiller, tarayıcı varsayılan stillerini sıfırla:

*, *: sonra, *: önce (kutu boyutu: kenarlık kutusu; dolgu: 0; kenar boşluğu: 0; geçiş: .5s kolay çıkış; / * tüm sayfa öğeleri için yumuşak geçişler ekleyin * /) ul ( liste stili: yok;) a (metin dekorasyonu: yok; anahat: yok;) img (ekran: blok; genişlik: %100;) h1, h2, h3, h4, h5, h6 (yazı tipi ailesi: "Playfair "; yazı tipi ağırlığı: normal; harf aralığı: 1 piksel;) gövde (yazı tipi ailesi:" Açık Sans ", arial, sans-serif; yazı tipi boyutu: 14 piksel; satır yüksekliği: 1; renk: # 373737; arka plan: # f7f7f7;) / * içinde çocukları olan tüm kaplar için bir akış temizleyici ekleyin * / header: after, .container: after, footer: after, .widget-posts-list li: after, #subscribe: after ( içerik: ""; görüntü: tablo; temizle: ikisi;) / * ızgara kabının genişliğini kontrol eden stil sınıfı * / .container (marj: 0 otomatik; genişlik: %100; maksimum genişlik: 960 piksel; dolgu: 0 15 piksel ;)

7. Başlık ve içeriği için stiller

8. Ana içerikli blok için stiller

9. Yan sütun için stiller

10. Altbilgi için stiller

Site alt bilgisini üç eşit sütuna bölün:

Altbilgi (dolgu: 30px 0; arka plan: # 3C3D41; renk: beyaz;) .footer-col (genişlik: %33,3333333333; kayan nokta: sol;) .footer-col a (renk: beyaz;) .footer-col: son- alt (metin hizalama: sağa;) .social-bar-wrap (metin hizalama: merkez;) .social-bar-wrap a (dolgu: 0 7px; yazı tipi boyutu: 18px;)

11. Medya sorguları

12. Mobil menü için komut dosyası

Kapanış etiketinden önce sayfa işaretlemesine daha önce eklediğimiz jQuery kodu, butona tıklandığında üst menünün gösterilmesinden/gizlenmesinden sorumludur (menü yüksekliği değiştirilir - sıfırdan içeriğine eşittir). :

Okuma zamanı: 18 dakika

Malzemeyi size göndereceğiz:

Siteniz mobil cihazlara uyarlanmadıysa, endişelenecek bir şey yok, ancak Yandex, bu tür bir uyarlamaya sahip siteler için aramada daha üst sıralarda yer alıyor.

Bu yazıda şunları öğreneceksiniz:

1. Mobil cihazlar için web sitesi uyarlaması ne sağlar?
2. nasıl kontrol edilir
3. Google için web sitesi uyarlaması
4. Sitenin kendi kendine adaptasyonu
5. En İyi ve Ücretsiz Wordpress Eklentisi
6. Çevrimiçi mobil cihazlar için web sitesi uyarlaması için en iyi 6 hizmet

Mobil cihazlar için uyarlama neden gerekli?

Geleneksel olarak dış ve iç olarak ayrılırlar. Başka bir deyişle, harici PF'ler, örneğin, arama sonuçlarından bir siteye yapılan bir bağlantının tıklanmasını temsil ederken, görüntülenen sayfaların sayısı, sitede harcanan toplam süre dahilidir.

Google'ın benzer bir sistem kullandığını unutmayın. Ancak bu arama motoru daha da ileri giderek, mobil cihazlar için site uyarlamasını geçen kaynakların arama sonuçları listesinde daha üst sıralarda görüntüleneceğini belirtti.

Aşağıda, dahili PF'ler hakkında konuşacağız. Kendiniz düşünün, bir ziyaretçi bir site ile çalışmakta, sitede ürün bulmakta ve sipariş vermekte rahatsa, müşteri kategorisine girme olasılığı daha yüksektir.

Arama motorları için de tamamen aynı prensip çalışır: Kaynak üzerinde bulunduğu ilk saniyelerde ne kadar çok misafir ayrılırsa, insanların gereksinimlerine uyum oranı o kadar düşük olur. 10 saniyeden kısa kullanıcı oturumlarının toplam site ziyaretlerine oranına hemen çıkma oranı denir.

örnek al bu gösterge Rus sitelerinden biri:

Bakın, site mobil cihazlara uyarlanmadıysa, yani site üzerlerinde yanlış görüntüleniyorsa, akıllı telefonlardan ve tabletlerden hemen çıkma oranı bir PC'den 2-2,5 kat daha yüksektir.

Bu rakamlar sadece KM seviyesini olumsuz etkilemekle kalmaz, aynı zamanda hizmetler veya mallar için gerçekten ödeme yapabilecek potansiyel müşterilerin kaybını da gösterir.

Katılıyorum, kullanım sıklığında artış mobil internet gerçekten etkileyici. Google Analytics, mobil cihazları kullanarak herhangi bir kaynaktaki misafir yüzdesini kolayca bulmanızı sağlar. Bu göstergeyi görmek için aşağıdaki adımları uygulamanız gerekir:

Arama motorlarının her zaman tablet ve diğer cihaz kullanıcılarının rahatlığını önemsediği bir sır değil; bu, siteyi mobil cihazlara uyarlamayı reddederseniz trafiksiz kalma riskiniz olduğu anlamına gelir.

Equation Research'ün araştırmasıyla kanıtlandığı gibi, bu hatanın birçok kullanıcının sizi sonsuza kadar terk etmesine neden olacağını unutmayın. Uzmanları şunu keşfetti: İnsanların %46'sı artık mobil cihazlarla çalışma düzeyinden memnun olmadıkları siteye gitmiyor.

Anladığınız gibi, sonuç olarak, üzücü sonuçlar sizi bekliyor: Bir akıllı telefon veya tabletten giren zaten gelişmiş bir kitle iletişim kuramayacak, sipariş veremeyecek, haber bültenleri alamayacak olduğundan, kaynağın üretkenlik seviyesi sürekli olarak azalacaktır. , vesaire.

Bu gelişmelerden memnun değilseniz siteyi mobil cihazlara uyarlamanızı tavsiye ederiz.

Hangisi daha iyi - duyarlı tasarım veya mobil sürüm

Önce ikisi arasındaki farkı anlayalım.

Duyarlı tasarım yalnızca siteye dış görünüş, kullanıcı tarafından istenen cihazdan yeterli şekilde görüntülenecektir.

Mobil sürüm temelde Yeni sürüm taşınabilir cihazlardan kullanan site kullanıcılarının ihtiyaçlarına özel olarak tasarlanmıştır. Şimdi her iki tür hakkında daha ayrıntılı konuşalım.

Uyarlanabilir tasarım

Bu seçenek, küçük bir yatırımla siteyi gadget'tan kullanan misafir için kolay hale getirmeyi mümkün kılar.

Aslında, bir siteyi mobil cihazlara uyarlarken, sayfa boyutları, site öğelerinin belirli bir cihazın boyutlarıyla basit bir kombinasyonu vardır. Sonuç olarak, bu sitelerin kullanımı kolaydır, ancak eksikliklerini hatırlamanız gerekir.

Her şeyden önce, yüklenen sayfanın boyutudur. Bir mobil cihazda gösterilecek olsa da ağırlığı aynı kalacaktır. Bu nedenle sayfanın yüklenmesi uzun zaman alacaktır, çünkü mobil internetin hızı kablolu internete göre daha düşüktür ve kullanıcı beklemekten bıkıp sekmeyi kapatacaktır.

mobil versiyon

Mobil sürüm genellikle ana alt etki alanında bulunur: m.site.ru, mobile.site.ru. SEO hakkında konuşursak, bu özellik pek olumlu sayılmaz, çünkü bu durumda ana sürümden mobil sürüme birçok koşullu yönlendirme kullanılır. Sonuçta, site.ru/page ve m.site.ru/page arama motorları açısından farklı sayfalar olarak kalır.

Burada gereksiz işlevler kaldırıldığı ve bireysel tasarımın site ile etkileşimi kolaylaştırdığı için mobil versiyonun daha hafif olduğu, duyarlı düzene göre daha hızlı yüklendiği söylenmelidir.

Tabii ki, bu sürüm bir öncekinden daha pahalıya mal olacak. Seçeneklerden hangisini tercih edeceğinizi seçmenizi kolaylaştırmak için, özelliklerini vurgulayalım:

• Örneğin, küçük bir siteyi mobil cihazlara uyarlamanın bir anlamı yoktur. söz konusu güzellik salonunun sitesi hakkında, bunun için normal uyarlama yeterli olacaktır.
• Mobil sürüm, birçok yüklenebilir sayfa içeren güçlü bir siteye ihtiyaç duyacaktır. Bu seçenek, günde birkaç bin kişiden oluşan bir kitleye sahip çevrimiçi medya için geçerli olacaktır.

Yani seçim yaparken olasılıkları ve ihtiyaçları göz önünde bulundurmak gerekir. Ayrıca, fiyattan bağımsız olarak bu seçeneklerin her ikisinin de dönüşüm için tamamen yokluklarından çok daha karlı olduğunu vurguluyoruz.

Sitenin mobil cihazlara uyarlanması size ne kazandıracak?

Başvurunuzu gönderin

Mobil cihazlar için site uyarlaması nasıl kontrol edilir

Sitenin farklı cihazlarda göreceğiniz gerçeğinden oluşan mobil cihazlar için uyarlanmasının kontrol edilmesi aşağıdaki gibi gerçekleştirilebilir:

• Quirktools.

Burada sitenin farklı gadget'ların ekranlarında nasıl görüneceğini görebilirsiniz. Portalı kullanmaya başlamak için adres çubuğuna portal URL'sini girin, yatay menüden gerekli cihazı seçin.

• IPadpeek.

Sitenin görünümünü iPad, iPhone'da kontrol etmenizi sağlar.

• F12.

Her zaman en kolay seçenek standart numarayı kullanmaktır: F12'ye basın, ardından telefon simgesine tıklayın.

Google için mobil cihazlar için web sitesi uyarlaması

Sitenizi Google'da mobil cihazlara uyarlamak istiyorsanız ücretsiz bir araç işinize yarayacaktır. geliştiricilerGoogle:

Burada kaynak adresini girmeniz ve "Analiz Et" düğmesini tıklamanız gerekir. Örneğimizde, mobil deneyim %100 üzerinden %49'dur.

Ayrıca siteyi bir mobil cihaza uyarlamak için nelerin değiştirilmesi gerektiğine dair tavsiyelerde bulunur ve bu konuda faydalı linkler sağlar. Bu önerilerle, Google için minimum olan %90'a kolayca ulaşabilirsiniz.

Sitenizi mobil cihazlar için kendiniz özelleştirmek için yapabileceğiniz şeyler

Form alanları için doğru öznitelikleri ayarlayın

Siteniz kullanıcı adı / url için giriş alanları kullanıyorsa, otomatik düzeltmeyi iptal edin, otomatik büyük harf özelliğini etkinleştirin:

Adınız:

Bu teknik sayesinde, bir siteyi mobil cihazlara uyarlarken, T9 otomatik giriş sisteminin adları değiştirmesini önleyeceksiniz, örneğin “ ervan"üzerinde " Erivan».

Kelime türlerinde ilk büyük harflerin otomatik kullanımını ayarlayarak, kaynak konukları harfleri sürekli olarak büyük harf kullanma ihtiyacından kurtarmış olacaksınız, yani her kelimenin başına bir büyük harf konacaktır (örneğin, “ Can yanıyor" dönüşecek" Ken Burns"):

Siteniz kullanıcıdan bir mobil cihazın klavyesinden @ sembolünü girmemesi için bir e-posta isterse e-posta alanını kullanın:

E-posta adresiniz:

Mobil cihazlar için uygun bir genişlik ayarlayın

Bunu yapmak için siteyi bilgisayar tarayıcınızda açın, metin artık okunamaz hale gelene kadar program penceresinin genişliğini azaltın. Bu size izin verilen minimum genişliği verecektir. Meta etiketi sayfanın başına ayarlayarak bu geçerli değeri @viewport özelliğine ayarlayın:

Siteye bir mobil cihazdan tekrar girerseniz, belirttiğiniz genişlik otomatik olarak seçilecektir, yani kaynağın misafiri yakınlaştırmayı kullanmak zorunda kalmayacaktır.

Aşağıdaki resimde, sağ kenarda fazladan boşluk bırakılmıştır:

Ve burada genişlik doğru:

Site akıcı bir düzen üzerine kuruluysa ve tüm ekran boyutlarıyla uyumluysa işiniz çok daha kolay hale gelir. Bir siteyi mobil cihazlara uyarlarken genişlikle denemeler yapmanızı tavsiye ederiz, böylece kaynağınızın hoş görünmesini ve okunabilir kalmasını sağlayabilirsiniz. Seçilen değer ve meta etikette ayarlanır.

Resimlerin genişliğini %100 olarak ayarlayın

Sitenizi seçtiğiniz genişliğe göre yeniden boyutlandırdıktan sonra bazı resimlerin aşırı geniş olacağını unutmayın. Önceden, böyle bir sorunla karşılaşmam gerekmiyordu, çünkü masaüstü monitörleri oldukça geniş bir çözünürlüğe sahip olduğundan, birçok resim genişliğe sığıyor:

Resimleriniz için maksimum genişliği %100'e ayarlayarak bu sorunu önleyebilirsiniz. Bu sayede, resimler gadget'ın ekranı için çok büyükse, otomatik olarak yeniden boyutlandırılacaktır. Aşağıdaki kodu sitenizin CSS'sine girmeyi unutmayın:

img (maksimum genişlik: %100)

Bir görüntüyü img etiketini kullanmak dışında bir arka plan görüntüsü olarak ayarlarsanız, yalnızca arka plan boyutu CSS özelliğini içerecek şekilde ayarlamanız gerekir. Ekran çözünürlüğü %100 ölçekte aktarım için yetersizse arka plan boyutu şu şekilde değişecektir:

.header (arka plan: url (header.png) %50 tekrarsız; arka plan boyutu: içerir)

Görüntünün netliğini kaybedeceğinden endişe etmeyin - modern mobil cihazlar buna izin vermez. Mesele şu ki, bir site ziyaretçisi yakınlaştırmayı kullandığında, tarayıcı resmi netleştirir. Ancak, yakınlaştırmayı kullanmanıza izin vermediğinden, portalınızın meta etiketinde user-scalable = no özelliğine sahip olmadığından emin olmaya değer:

Giriş alanlarının genişliğini %100 olarak ayarlayın

Max-width özelliğiyle görüntülerin genişliğini ayarladıktan sonra, giriş alanları için de aynısını yapın. Bunu yapmak için sitenizin CSS dosyasına eklemeniz yeterlidir:

giriş, metin alanı (maksimum genişlik: %100)

Artık siteyi bir mobil cihazdan kullanırken giriş alanları ekrandan çıkmıyor.

Form gönderme onay düğmelerinde Devre Dışı Bırak'ı kullanırken dikkatli olun

Düğmeye ilk tıklandıktan sonra gönder artık etkin değilse, gönder düğmesine birden fazla tıklama yapılmayacaktır.

Ancak, masaüstü bilgisayarlarla karşılaştırıldığında, mobil cihazların genellikle İnternet bağlantılarında kesintiler yaşadığını unutmayın.

Dolayısıyla bir butonu pasif hale getirdiğinizde, kullanıcıyı tekrar basma fırsatından mahrum etmiş olursunuz ve sorun sadece Şebekenin kaybında gizlenmeyebilir. Bu nedenle, böyle bir cihazın tarayıcısı ne zaman kapanacak? gelen çağrı, doldurulduktan sonra formun gönderilmesine izin vermeyeceği için bloke buton sorunu ortaya çıkacaktır.

Yine de gönder düğmesini devre dışı bırakmaya karar verirseniz, siteyi mobil cihazlara uyarlarken bunu birkaç saniye yapın.

Uzun satırlarda sözcük kaydırma kullanın

Bazen uzun dizeler kullanmanız gerekir: buna kod örnekleri, bağlantılar, banka hesap numaraları dahildir. Portalın genişliği tüm satır için yeterince geniş değilse, gadget ekranının dışına çıkabilir:

Çizginin sarılacağı ve ekranın kenarına ulaşacağı bu kelime sarma ile ilgilenecektir. Böylece sitenin ziyaretçisi, tüm bilgileri kaydırmadan bir kerede görebilecek:

Burada bir şifreye ihtiyacınız var:

435143a1b5fc8bb70a3aa9b10f6673a8

Boşluklara dikkat edin

Uzun bir dize oluşturuyorlarsa, her beş karakterden birinin boşluklarla ayrılmasına hepimiz alışkınız. Sonuçta bu, bir kişinin başka bir uygulamada daha fazla girdi için bunları hatırlamasını kolaylaştıracaktır.

Ancak, akıllı bir kullanıcının karakterleri kendi başlarına girmeyi kabul etme olasılığının düşük olduğunu unutmayın - panoyu bilir. Doğru, yerleştirdiğiniz boşlukları manuel olarak silmek zorunda kalacak. Bunları bir cep telefonunda veya tablette temizlemenin ne kadar uygun olduğunu bir düşünün?

Kullanıcılarınızın hayatını kolaylaştırmak için sitenizi mobil cihazlara uyarlarken boşlukları girintilerle değiştirin:

Sizinkod: 435143a1b5fc8bb

Gördüğünüz gibi karakterler arasında boşluklar var ama kopyalarken bunlarla uğraşmanıza gerek yok. Ve bu zaman kazandırır!

Medya sorgularının faydaları

Mobil cihazlarda (veya küçük bir tarayıcı penceresinde) görüntülendiğinde site için özel stiller oluşturabilirsiniz, ancak masaüstü bilgisayarda web sayfasının tanıdık görünümü kalacaktır. Bu, medya sorgularında hedef stilleri gerektirir, işte bir örnek:

Sabit konumlandırmadan kaçının

Başlık veya kenar çubuğu sabit olarak konumlandırılmışsa ve CSS konum özelliği sabit ise dikkatli olmanızı öneririz.

Bu durumda, işaretleme oluştururken, başlığınızın boyutu sayfayla orantılı olarak büyür, yani tüm ekranı kaplayabilir:

Bir siteyi mobil cihazlara uyarlarken, en kolay yol, mobil cihazlarda görüntülendiğinde sabit konumlardan vazgeçmektir.

Bir örnek, bunun pratikte nasıl çalıştığını gösterir:

Standart yazı tiplerini kullanın

Özel yazı tipleri sayesinde site pahalı ve profesyonel görünüyor. Ancak aynı zamanda, konukların yazı tipi içeren dosyaları yüklemeleri gerekir - bu işlem, kullanıcı siteyi görmeden önce gerçekleştirilir.

Tipik olarak, bu dosyaların boyutu büyüktür, bu da onları bir mobil cihaza indirmenin uzun zaman alacağı anlamına gelir. Ve portalın konuğu ne görecek? Boş alan:

Siteyi Google Font Loader ile mobil cihazlara uyarlayarak, özel sürüm yüklenirken standart fonttaki metin görüntülenecektir. Ardından, sayfayı yeniden oluşturursunuz ve konuk başlangıçta seçilen yazı tipini görür.

Ancak iki tür CSS kuralı yazmanız gerekir: biri varsayılan yazı tipi için, diğeri indirilen yazı tipi için.

İnanın böyle bir çözüm optimal olacaktır: Kişi, fontlar yüklenirken ihtiyacı olan her şeyi okuyacak ve ardından tasarımı görme fırsatına sahip olacaktır. Aşağıdaki kodu kullanın:

Vurgulayalım: sınıf seçici .wf-opensans-n4-active, site koduna Font Yükleyici tarafından dinamik olarak eklenir, ancak yalnızca font yüklendiğinde.

Kullanıcılara okunabilir içerik sunun

Tipik olarak, mobil kullanıcılar interneti belirli bir amaç için kullanır. Örneğin, farklı mağazalardaki malların maliyetini karşılaştırmak istiyorlarsa, salonun bağlantılarını, ilacın kullanım talimatlarını bulun.

Bu nedenle, başlık onları çektiğinde sitenizde görüneceklerdir. Ardından, küçük bir ekrandan okumak için hazırlanmış içeriği bulmaları önemlidir.

Bu kuralı İngilizce olarak tanımlamak için oldukça geniş bir "atıştırmalık" kelimesi vardır (İngilizce'den. "Atıştırmalık" - bir atıştırmalık). Bu nedenle, bu tür kullanıcılar için içerik atıştırılabilir, yani hareket halindeyken hızlı okuma, akıcı görüntüleme için uygun olmalıdır.

Bir siteyi ekran okuyucular için mobil cihazlara uyarlarken göz önünde bulundurulması gereken ana özellikleri özetleyelim:

1. Kısa, öz ve ilgi çekici bir başlıkla başlayın. 10 kelime ile yazmanızı ve büyük punto kullanmanızı tavsiye ederiz.
2. Metni bloklara ayırın, her biri genel arka plandan sıyrılan kısa, bilgilendirici bir alt başlıkla başlamalıdır.
3. Metne numaralandırılmış / madde imli listeler ekleyin, mobil kullanıcılarınızın ihtiyaç duyduklarını hızlı bir şekilde bulmasını kolaylaştırmak için.
4. Görsel ekler uygulayın ayrıca bilgiyi yapılandırmak ve algıyı basitleştirmek.

E-postaları küçük ekrandan okunacak şekilde uyarlayın

Aşağıdaki mesajlaşma araçları, e-postayı mobil cihazların ekranlarından okumaya uyarlamanıza yardımcı olacaktır:

• MailChimp.
• Weber.
• Sürekli İletişim.

Bağlantıları "dokunabilir" düğmelerle değiştirin

Kullanıcılar mobil cihazlardan kendilerine uygun olmayan sitelere girer girmez kendilerine “şişman parmak sendromu” teşhisi koyuyorlar. Tıbbi terminoloji arasında bulunamaz, bu alandaki uzmanların parmakla belirli bir öğeye vurmaya çalışırken yapılan hataları açıklayan argosudur.

Bir düğme, bir gezinme öğesi için hangi boyut en uygun olacaktır, böylece bir kişinin onlarla sorunları olmaz? Siteyi mobil cihazlara uyarlamaya yönelik öneriler size şu konularda yardımcı olacaktır:

• Apple, düğmeler için en uygun boyutun, gezinme öğelerinin 44 x 44 piksel oranıyla başladığına inanıyor.
• Nokia, bu tür öğeler oluşturulurken minimum 48 x 48 piksel veya 0,7 x 0,7 cm boyutunda olmasını önerir.
• Microsoft, 34'e 34 piksel düğmeler önerir.

Unutmayın, metniniz birbirine yakın bağlantılarla doygunsa, mobil kullanıcıların siteyi kullanması zor olacaktır.

Tarafımızdan gösterilen örnekte, sitenin tam sürümünün menüsü bağlantılar şeklinde yapılmıştır. Burada on inçlik bir tablette istediğiniz bölüme hemen ulaşmak son derece zor olacak.

Mobil uyumlu düğmeler olarak adlandırılan gezinme öğelerini elde etmek için iki yol seçebilirsiniz: bunları ayrı bir tasarımla sipariş edin veya şablon araçlarını kullanın. WordPress'i seçtiyseniz, şu eklentileri kullanmanızı öneririz:

• Öne Çıkan Renk Kutuları ve Düğmeler. Yardımı ile farklı boyutlarda, renklerde ve kullanışlı düğmeler oluşturacaksınız. bağlam menüsü mobil kullanıcılar için uyarlanmıştır.
• Duyarlı Menü. Bu eklenti, uygun bir hamburger menüsü oluşturmanıza olanak tanır.

En iyi ücretsiz WordPress mobil WordPress eklentisi

Jet Paketi

Her şeyden önce, bir web sitesini mobil cihazlara uyarlamanın en basit yönteminden bahsedelim, aynı zamanda en yüksek verimlilik seviyesine sahipken WordPress'in kendisinde. JetPack Toolkit bunu mümkün olan en az çabayla yapabilir - sadece bir düğmeye basın.

Ve büyük olasılıkla, temel eklentileriniz arasında zaten kuruludur. Eğer öyleyse, site yöneticisi menüsündeki "JetPack" bağlantısına tıklayın, modüller sayfasına gidin. Burada sadece "Mobil Temayı" etkinleştirmeniz gerekiyor.

MobilBasın

Yaygın, ancak basit eklentilerden biridir. İki tema ile birlikte gelir ve mobil geliştiriciler tarafından daha fazla tema oluşturulması için kullanışlıdır.

WPtouch

Bu seçenek, verimlilik açısından mobil cihazlar için ücretsiz web sitesi uyarlama araçları listesinde bir sonraki olarak kabul edilir. İstatistiklerin gösterdiği gibi, 4,3 milyondan fazla kez indirildi.

Avantajı, sadece birkaç dakika içinde bir satır kod bile yazmadan güzel, hızlı bir mobil site oluşturabilmenizdir. WPtouch Pro adı verilen ücretli sürümde, ayrı bir yönetici paneli, bilet sisteminde destek alırsınız.

Wapple Architect Mobil Eklentisi

Bu eklenti, çeşitli cihaz ve platformlarda web içeriğinin özelleştirilmesi, oluşturulması ve teslimi için özel olarak oluşturulmuş WAPL işaretleme dilinde yazılmıştır.

Her gadget için kendi API'sini kullanır ve bu seçenek, masaüstü sitenin adres yapısıyla ilgilenmediği için koklama yönteminden çok daha iyidir. Bu eklentinin kullanımı kolay ve oldukça basit bir çözüm olduğu ortaya çıktı.

Mobil dedektör

Siteyi mobil cihazlara uyarlamak için bu seçenek, sitenin kullanıcının cihazıyla uyumlu bir sürümde, yani ekran çözünürlüğünde, köşegeninde vb. Yüklenmesi nedeniyle normal cep telefonlarının, akıllı telefonların otomatik olarak tanınmasıyla donatılmıştır. dikkate alınır.

Toplamda, önceden yüklenmiş yedi mobil tema seçeneği vardır. Ayrıca Mobil Dedektör, görüntüleri ekran parametrelerine göre otomatik olarak yeniden boyutlandırır ve yeniden boyutlandırır. Ayrıca kendi widget'larını, istatistik koleksiyonunu sunar.

Temel faydalar:

1. 5000'den fazla gadget'tan oluşan bir veritabanı kullanarak otomatik gadget tanıma.
2. Standart telefonları gelişmiş cihazlardan ayırt etme yeteneği.
3. Tekil ziyaret sayısı, arama trafiği vb. gibi göstergeleri içeren mobil kullanıcılarla ilgili istatistiklerin hazırlanması.

WP Mobil Sürümü

Aslında, bu daha önce sunulan seçeneğin bir kopyasıdır - aynı avantajlara, seçeneklere sahiptir, ancak diğer şeylerin yanı sıra siteler için kendi oluşturucusuna sahip bir mobil XML haritası olan Disqus yorum sistemini destekler.

İkincisi, arama motoru optimizasyonunda faydalı olabilir. Siteyi mobil cihazlara uyarlamak için tasarlanan bu eklentinin, mobil versiyon m.facebook.com formunun bir alt alanında, hızlandırılmış önbelleğe alma sayesinde mobil çerezler için destek.

WordPress Mobil Paketi

Mobil cihazlar için web sitesi uyarlamasının bu versiyonunda, popüler mobil cihazları tanımlamaya izin veren, içeriği ihtiyaç duydukları çözünürlük ve kalitede görüntülemelerine izin veren etki alanı eşleme, arama aracıları desteklenir. Ayrıca tek bir tema için özelleştirilebilir renk şemaları sağlar.

Mobil cihazlar için site tablolarının uyarlanması

Bir siteyi mobil cihazlara, yani farklı çözünürlüklere uyarlarken en zor işin tablolarla çalışmak olduğu bir sır değil. Ayrıca, bu en çok büyük miktarda bilgi içeren tablolar için geçerlidir.

Duyarlı bir tablo için iki düzen seçeneğinden bahsedelim.

Öncelikle tablonun görünümüne bir göz atalım:

Bootstrap tarzı duyarlı tablo düzeni

Açıkçası, böyle bir tabloya gerçekten uyarlanabilir demek zor. Bir mobil cihazda organik görünüyor ve sitenin düzeni "akmıyor". Bu seçenek, sitede çok fazla tablonuz yoksa uygundur, bu nedenle eklentiyi bağlamak ve ek stiller yazmak zaman kaybı olacaktır. Bootstrap'in kullandığı yol budur.

Bu yöntemi uygulamak için, tablo maksimum genişliği %100 olan bir div içine sarılır, overflow: auto.

Ayrıca bir siteyi mobil cihazlara uyarlarken maksimum yüksekliği seçebilir, eğer uzunsa tablo başlığını düzeltebilirsiniz.

Gerçekten duyarlı bir elektronik tablonun düzeni

Şimdi sitenizin gerçekten tablolarla dolu olduğu bir durumu tartışalım - burada Footable eklentisine başvurmaya değer.

Her şeyden önce, eklentiyi bağlamanız gerekir (GitHub'dan indirin / CDN'den bağlanın), başlatın:

Ancak siteyi mobil cihazlara uyarlamanın bir inceliği var: komut dosyası, görünümün genişliğini değil, tablonun genişliğini hesaplar. Bu hatayı düzeltmemiz gerektiğinden, betiği biraz "modernleştirmek" önemlidir:

Bunu yapmak için, başlatmada, sitenin tüm tablolarının uyarlanabilir olmasını istiyorsak, tablonun sınıfını veya sadece tablo etiketini belirtiriz.

Ne demek istiyoruz? Tabletlerde "RAM", "Diagonal", "PPI", "Pil" sütunları gizlenecektir. Daha da küçük bir telefon ekranında kullanıldığında "Fiyat" da gizlenecektir.

Başlatma sırasında kesme noktaları ayarlanabilir:

0-720 aralığında mobilin 720-1024 - tablet ve 1024'ün üstünde - masaüstü kuralına uyduğu ortaya çıktı. Gerektiğinde daha fazla kural oluşturabilirsiniz.

Ayrıca, varsayılan olarak belirli bir sütunu genişletme seçeneğiniz de vardır. Bu durumda, data-attributed data-expanded = "true" değerini belirtin:

Eklentinin tüm özelliklerini ele almadık, ancak bu blok duyarlı tablolar oluşturmak için yeterli olacaktır.

Çevrimiçi mobil cihazlar için web sitesi uyarlaması: En iyi 6 hizmet

1. mobiSiteGalore

Bir web sitesini mobil cihazlara uyarlamaya yönelik bu hizmet, haklı olarak yönetilmesi en kolay mobil web sitesi düzenleyicisi olarak kabul edilir. Yaratıcılarına göre, web sitesinin tamamen işlevsel bir mobil versiyonunu geliştirmek sadece 54 dakikanızı alacak.

Mevcut hizmetlerin çoğunun akıllı telefonlarla çalışmayı amaçladığını, mobiSiteGalore ise eski telefon modelleri için siteler hazırlamanıza izin verdiğini unutmayın.

1. MobStac

MobStac ile HTML5 ile oluşturulmuş bir mobil web sitesi elde edersiniz. Ek olarak, ayarlarda değişiklik yapma veya tasarımı değiştirmek için belirli bir şablon seçme fırsatınız var, bu zor olmayacak.

Vurgulamak gerekirse, MobStac, yerleşik bir mobil web sitesi para kazanma planı sunan tek hizmettir. Dezavantajı, hizmetin hala beta aşamasında olmasıdır, ancak bir davetiye alabilir ve ardından kayıt olabilirsiniz.

1. fare

Burada iki yaklaşımı kullanarak web sitesinin mobil versiyonunu geliştirmek mümkün olacak: Her şeyi mofuse kullanarak kendiniz yapın veya bir uzman ekibinden sipariş vererek siteyi mobil cihazlara uyarlayın.

İlk durumda, tasarım alanında daha fazla fırsat elde edersiniz, ancak hizmetin çalışması için yalnızca aylık ödeme yapmanız gerekir. Uzmanları işe alırsanız, tüm işler onların omuzlarına düşer.

1. Mobil Uygulama Amerika

Bu seçenek, web siteniz için geliştirilmiş bir SEO yönü sağlar. Yetenekleri sayesinde, portalları henüz mobil versiyonu bile olmayan rakiplerin önüne geçeceksiniz. Bu metin hazırlanırken uygulama iPhone, Blackberry, Android cihazları destekledi.

1. bMobilize

Kısa sürede web sitesinin mobil versiyonunu hazırlamanıza olanak sağlayacaktır. Uygulama, diğer şeylerin yanı sıra tasarımı değiştirmeyi mümkün kılan gelişmiş ayarlarla hızlı dönüştürme ile karakterize edilir.

Geliştiricilere göre, bMobilized veritabanı, bugün popüler olan markalar da dahil olmak üzere 13 binden fazla mobil cihaz modelini destekliyor.

Ancak bir web sitesini mobil cihazlara uyarlamanın maliyeti konusunda endişeleriniz varsa, bu hizmet tam size göre, çünkü ne kadar çok web sitesi yerleştirirseniz o kadar fazla indirim alırsınız. Başka bir deyişle, bMobilized, mobil cihazlara uyarlanması gereken bir web sitesi ağının sahipleri için neredeyse ideal olacaktır.

1. hareket ettir

Mobify, e-ticaretle uğraşanlar için en iyi hizmet olarak kabul edilmektedir. Sahiplerine HTML5 işlevselliği sunar ve geliştirme ekibi, isteklerinize göre mobil web sitenizi oluşturur.

Uygulamanın gösterdiği gibi, tamamen işleyen bir elektronik mağaza oluşturmak için fikir aşamasından itibaren üç haftadan fazla sürmez. Ek olarak, gelişimine kendiniz de dalma fırsatınız var.

Yukarıda açıklanan tüm yöntemleri denemeyi başardıysanız, ancak sonuçtan hala memnun değilseniz, profesyonellerin yardımına başvurma zamanı.

Dizi (=> 21 [~ ID] => 21 => 09/28/2019 13:01:03 [~ TIMESTAMP_X] => 28/09/2019 13:01:03 => 1 [~ MODIFIED_BY] => 1 => 21.09.2019 10:35:17 [~ DATE_CREATE] => 21.09.2019 10:35:17 => 1 [~ CREATED_BY] => 1 => 6 [~ IBLOCK_ID] => 6 => [~ IBLOCK_SECTION_ID] => => Y [~ AKTİF] => Y => Y [~ GLOBAL_ACTIVE] => Y => 500 [~ SIRALA] => 500 => Dmitry Svistunov'un Makaleleri [~ İSİM] => Yazan Makaleler Dmitry Svistunov => 11076 [~ RESİM] = > 11076 => 7 [~ SOL_KENAR] => 7 => 8 [~ SAĞ_KENAR] => 8 => 1 [~ DEPTH_LEVEL] => 1 => Dmitry Svistunov [~ AÇIKLAMA] => Dmitry Svistunov => metin [~ DESCRIPTION_TYPE ] => metin => Dmitry Svistunov Makaleleri Dmitry Svistunov [~ SEARCHABLE_CONTENT] => Dmitry Svistunov Makaleleri Dmitry Svistunov => statyi-dmitriya-svistunova> [~stat KOD] => -svistunova => [~ XML_ID] => => [~ TMP_ID] => => [~ DETAIL_PICTURE] => => [~ SOCNET_GROUP_ID] => => /blog/index.php?ID=6 [~ LIST_PAGE_URL] => /blog/index.php?ID=6 => /blog/list.php? SECTION_ID = 21 [~ SECTION_PAGE_URL] => /blog/list.php?SECTION_ID=21 => blog [~ IBLOCK_TYPE_ID] => blog => blog [~ IBLOCK_CODE] => blog => [~ IBLOCK_EXTERNAL_ID] => => [ ~ HARİCİ_KİMLİK] =>)

Site duyarlılığı, bir sitenin farklı özelliklere sahip farklı cihazlarda doğru şekilde görüntülenmesi yeteneğidir.

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

Günümüzde siteler kişisel bilgisayarlarda, tabletlerde, akıllı telefonlarda görüntülenmektedir. Her cihazın kendine has özellikleri vardır - çalışma hızı, ekran çözünürlüğü.

Site yanıt vermiyorsa, bilgisayarda doğru şekilde görüntülenecektir. Ve telefonda "gidebilir" - bloklar birbiriyle örtüşür, yazı tipi okunamaz hale gelebilir.

Duyarlılık terimi, Ethan Marcotte'nin Duyarlı Web Tasarımı - Duyarlı Web Tasarımı kitabının yayınlanmasından bu yana yaygın olarak kullanılmaktadır. Görüntüleme cihazlarının belirli özelliklerine dinamik olarak uyum sağlayabilen siteler, uyarlamalı olarak adlandırılmaya başlandı.

Duyarlı bir düzen örneği

PC'de göster:

Tabakta:

Akıllı telefonda:

Neden duyarlı bir web sitesine ihtiyacınız var?

Teknolojiler hızla gelişiyor ve ekipman üreticileri onlara ayak uyduruyor. Akıllı telefonlar, tabletler, TV'ler ve internete bağlı diğer elektronik cihazlar her zevke ve bütçeye uygun, birçok ekran boyutu seçeneği var.

Aynı zamanda, içerik tüketimi katlanarak artıyor. Müşteri için verilen mücadelede site sahipleri tüm araç ve yöntemleri kullanır. Özellikle geliştirme aşamasında, web kaynağınızın çeşitli cihazlarda doğru bir şekilde görüntülenmesi olasılığı ortaya konmuştur.

Bilgileri çevrimiçi olarak görüntülemenize izin veren cihazların yüzdesi her yıl artıyor. Formatların ve çözünürlüklerin çeşitliliği, bir bütün olarak geliştirme sürecini karmaşıklaştırır, tüm aşamalarda ek gereksinimlerin dikkate alınması gerekir: tasarımcılar, yerleşim tasarımcıları ve programcılar.

Duyarlı tasarım konsepti, daha önce olduğu gibi, örneğin mobil sürümlerde olduğu gibi birden fazla site varyasyonu oluşturmanız gerekmediğinden, süreci kolaylaştırmanıza olanak tanır. Bu durumda, ayrı bir alt etki alanında ayrı bir işlev kümesi tasarlanmıştır.

Eski sitelerin iyileştirilmesi gerekiyor ve uyarlanabilirliğe yönelik çeşitli yaklaşımlar bunu uygulamayı mümkün kılıyor. Ana şey, ölçeği başlangıçta doğru bir şekilde değerlendirmektir, bazı durumlarda yeni tasarım düzenleri ve şablonları kullanmak daha kolay, daha hızlı ve daha ucuzdur. Kurumsal kimliğiniz tanınabilir bir marka değilse, genellikle ahlaki açıdan modası geçmiş olması da sizi yeniden çalışmaya iter. Ve hiç kimse yeni bir seviyeye geçiş aşaması olarak yeniden markalaşmayı iptal etmedi. Duyarlı bir web sitesi, işletmeniz için güçlü bir araçtır.

Sitenin uyarlanabilirlik gereksinimlerini nasıl karşıladığını kontrol etmeye yönelik hizmetler vardır.

Ayrıca, bugün en büyük arama motorları google sistemleri ve Yandex, web sitelerini sıralarken bu parametreyi dikkate alır. Kullanılabilirlik, navigasyon, sitenin kalitesini değerlendirmede vazgeçilmez faktörlerden biridir. Bilgi yükleme hızı ve optimize edilmiş görüntüler durumunda, düşer, okunamayan metin ve çok küçük veya ekrana sığmayan bozuk öğeler, bilgi bulmayı zorlaştırır ve basitçe reddetmelerin artmasına neden olur - kullanıcı sayfayı kapatır. Bunlar, arama sonuçlarındaki konumu da etkileyen davranışsal faktörlerdir.

Site sahipleri için teknik terminoloji ve sıralama parametreleri tamamen açık ve somut kriterler değildir. Ancak bunun katılım dinamiklerini nasıl etkilediğini anlamaları yeterli. Birçok alanda, mobil cihazlardan gelen trafiğin payı, masaüstü trafiğiyle karşılaştırılabilir ve hatta onu aşıyor. Bu hesaba katılmalıdır. Web sitesini uyarlamayı teklif etmeyen geliştiricilerle tanışmak giderek daha az mümkündür, ancak süreci kontrol etmek için bu konuda gezinmekten zarar gelmez.

Uyarlanabilirlik ilkeleri

diş açma

Diyelim ki masaüstü tarayıcılar için bir tasarım geliştirdiniz. Herşey harika. Bu siteyi bir mobil cihazdan görüntülerken, bloklar yer değiştirir ve birbirinin altına girer.

Buna akış denir. Ve şimdi responsive tasarımda kullanılan ana ilkelerden biri. Bunu düşün.

birim görelilik

Okul fizik derslerinden, hızın mutlak olabileceği, hareketi nereden gözlemlerseniz gözlemleyin, hızın aynı olacağı bilinmektedir. Ve göreceli - referans noktasına bağlı olarak hız değişebildiğinde.

Birimler aynıdır. Farklı cihazların farklı piksel yoğunlukları vardır. Ve örneğin 320 piksel boyutu, bir bilgisayar ve akıllı telefonun ekranında farklı görünecektir.
Çözüm, göreceli birimleri kullanmaktır. PC ekranında ve akıllı telefon ekranında bulunan öğeye göre bloğun tüm boyutlarını, ölçeklerini ve koordinatlarını ayarladığınızda. Örneğin, üst sınır.

Kontrol noktalarını kullanma

Bunlar, yalnızca görüntüleme için belirtilen ekran parametrelerine sahip belirli bir cihaz kullanıldığında düzenlemesi değişen öğelerdir.

Örneğin, sayfanın içeriği “sürünüyorsa”, böyle bir nokta eklemek ve içeriği düzeltmek mantıklıdır.

Minimum ve maksimum değerler

Açık cep telefonu makale olması gerektiği gibi görüntülenebilir. Ama şimdi aynı sayfayı geniş ekran bir monitörde açıyorsunuz ve görüntüden memnun değilsiniz. Her şey uzatılmış, okunabilirlik söz konusu değil.

Örneğin, özellikleri belirtebilirsiniz. Ekran genişliği 1000 pikselden az ise, içerik tam ekran olarak görüntülenmelidir. Aksi takdirde, maksimum genişlik 1000 piksel olacaktır.

Nesne yerleştirme

Öyle ki, diğer blokların konumuna bağlı olarak birçok öğe kullanmanız gerekir. Kontrol etmek zor. Bu tür nesneleri tek bir kapta iç içe yerleştirebilirsiniz. Bu, ekran parametrelerine - düğmeler, logolar vb. - uyarlamak istemediğiniz bloklar için uygundur.

Doğru yazı tipleri

Web yazı tipleri güzel görünüyor. Ama hepsinin dolu olduğunu unutmayın. Bu, kullanıcı için sayfa yükleme hızını etkiler.

Raster ve vektör grafiklerinin doğru kullanımı

Resmin çok fazla küçük detayı varsa, bir raster formatı kullanın. Aksi takdirde - vektör.

Ancak optimizasyon - sıkıştırma olmadan hiçbir resim kullanılmamalıdır. Vektör görüntüleri genellikle zaten sıkıştırılmıştır. Ancak tüm eski tarayıcılar bunları desteklemez.

Düzenlere saygı

Bir yerleşim planı geliştirirken genellikle hangi temel boyutların yönlendirildiğine dair genel standartlar vardır.

Duyarlı tasarımda kesme noktaları diye bir şey vardır. Bunlar, medya işlevlerinde geçirilen parametrelerdir. Tasarım değişikliğinin hangi çözünürlüklerde gerçekleştiğini belirtin.

• Mobil için 320 piksel, 480 piksel.
• Tabletler için 768px.
• Netbook'lar ve bazı tabletler için 1024 piksel.
• İçin kişisel bilgisayarlar 1280 piksel veya daha fazla.

Belirli bir çözünürlüğe bağlanma katı değildir. Cihazların ayarlarına ve parametrelerine bağlıdır.

Bazen, düzen 768 - 320 piksel aralığında doğru bir şekilde görüntüleniyorsa, örneğin 480 piksel gibi ara çözünürlükler için bir düzen oluşturmaya gerek yoktur.

eğer açıksa belirli gadget düzen "kırılıyor", farklı bir çözünürlükte hatalı görüntüleniyor, bu ekran için gerçek değerler kesme noktaları olarak alınır.

Medya sorguları

Duyarlı sitelerin geliştirilmesi, medya sorgularını kullanarak stil parametrelerinin tanımlanması ilkesine dayanır.

Sorgular şunları tanımlar:

• Cihaz tipi: projektörler, akıllı telefonlar, monitörler, TV'ler vb.
• Koşullar.

İlgili istek ve yanıt, css stil sayfası dosyasından uygun görüntüleme ayarlarını uygulayacaktır.

Yanıt için siteyi kontrol etme

Çeşitli hizmet ve araçları kullanarak sitenizin mobil cihazlarda nasıl görüntülendiğini kontrol edebilirsiniz.

tarayıcı kullanma

örneğin, Google Chrome mobil cihazlarda görüntülenecek web sitesi tasarımının doğruluğunu kontrol etmek için yerleşik bir araç takımı vardır. F12 tuşuna veya Ctrl + Shift + I tuşlarına basmanız veya Menüden "Ek Araçlar" - "Geliştirici Araçları"nı seçmeniz gerekir.

V Mozilla Firefox"Menü" - "Geliştirme" - "Duyarlı Tasarım" veya Ctrl + Shift + M bu şekilde yapılabilir.

Google Mobil Dostu (Google Arama Konsolu)

Sadece tam URL'yi dizeye yazıp sonuçları alıyoruz. Doğrulama genellikle bir dakikadan az sürer.

Duyarlı bir site, bir İnternet kaynağının kalitesinin göstergelerinden biri olan ve kullanıcıların ihtiyaçlarına özenli bir tutum sergileyen bir web geliştirme standardıdır.

Günümüzde duyarlı bir tasarıma sahip olmak, özellikle siteniz ticari ise, herhangi bir sitenin kutsal görevidir. Çünkü mobil kitle etkileyici bir oranda büyüyor. Evet, mobil kitlenin uzun yıllardır büyüdüğünü söyleyeceksiniz, ancak şimdi bu yeni bir trend ve büyüme neredeyse üstel. Akıllı telefonlar her yerde bulunur. Bir şey satıyorsanız, duyarlı tasarım sizin için hayati önem taşır.

Yandex raporlarının istatistiklerine göre, genel mobilizasyona rağmen, kullanıcılar akıllı telefonlardan çok bilgisayarlardan satın alıyor, ancak aynı zamanda mal ve hizmetleri daha çok mobil cihazlar üzerinden seçiyor. Google, kullanıcılarının neredeyse yarısının akıllı telefonlarından ürün aradığını söylüyor.

MediaScope'a göre, mobil kitle 2017'de %15'lik bir artışla diğerlerinden daha hızlı büyüyor. Toplam mobil kitle, toplam nüfusun (2017) %54'ü olan 66 milyon kişidir. Aynı zamanda masaüstü kullanıcılarının sayısı da azalmaktadır.

Kommersant gazetesine göre mobil segmentteki internet kitlesi 2017 yılında %47'den %56'ya yükseldi. Ayrıca, büyüme, yaşlı neslin pahasına gerçekleşmektedir, çünkü gençler arasında internet kullanım düzeyi uzun süredir maksimum sınırına ulaşmıştır.

ile ilgili en büyük hizmet sağlayıcısı ağ teknolojileri Cisco, 2020'de 5G ağlarını test ediyor. Cisco, 2016'da 2021 yılına kadar mobil trafiğin artacağını öngördü yedi kat.

Ayakkabı ve aksesuar satışı yapan online mağaza Rechi'nin araştırmasına göre, mobil alışveriş yapanların daha kararlı hale geldiği fark edildi. Akıllı telefon kullanıcıları sıradayken, öğle yemeğinde veya yatmadan önce bile satın almaya başladı.

Duyarlı tasarım nedir?

Duyarlı web tasarımı 2011'den beri ortaya çıktı, ancak buna rağmen, şimdiye kadar, Rus İnternet'teki sitelerin büyük bir kısmı mobil cihazlarda çarpık bir şekilde görüntüleniyor. Örneğin, bir menü tüm ekranı kaplayabilir veya tam tersine, site düzeni ekranın kenarlarının ötesine geçer ve çok uygunsuz yatay kaydırma kullanmanız gerekir, ekranı çevirmek bile burada size yardımcı olmaz. Ayrıca, uyarlanabilir sürüm olmadan akıllı telefondan gelen metin çok küçük olacaktır, genellikle okumak imkansızdır.

Uyarlanabilir Web Tasarımı, sınırlı koşullarda ekranda yalnızca en önemli öğeleri göstermek için, boyutuna bağlı olarak tüm öğeleri ekrana dinamik olarak ayarlanacak şekilde oluşturulmuş web sitesi sayfalarının tasarımıdır. Ekran ne kadar küçük olursa, üzerinde o kadar az nesne kalır, yalnızca en önemlileri kalır. Büyük ekranlarda, web sitesinde aslında nadiren kullanılan bir dizi yan çubuk, menü, widget ve benzeri şeyler görmeye alışkınız. Bu nedenle, uyarlamalı versiyonda yalnızca gerçekten önemli ve işlevsel olan kalır. Örneğin, bir çevrimiçi mağaza için bu, telefonlu bir şapka, dönüştürücü bir menü ve mallardır, gerisi gereksizdir, ancak bu bir satın alma için yeterlidir.

Mobil cihazlar için duyarlı tasarımın sitenin oluşturulmasından önce bile önceden tasarlanması gerektiği genel olarak kabul edilir, bu nedenle belki de cesur web yöneticisi hayal kırıklığına uğrayacaktır. Ancak bu büyük bir yanlış anlamadır, bu nedenle sadece uyarlanabilirlik adına tüm site şablonunu tamamen değiştirmek veya tüm CMS'yi tamamen değiştirmek hiç de gerekli değildir. Mevcut sitenizi herhangi bir ciddi değişiklik veya komplikasyon olmadan çok hızlı bir şekilde uyarlayabilirsiniz.

Duyarlı ve duyarlı web sitesi düzenleri arasında bir fark var mı?

Aslında, duyarlı ve uyarlanabilir arasında bir fark vardır. Bir zamanlar, akıllı telefonlar gezegeni fethetmeyi düşünmezken, yerleşim tasarımcıları ve programcılar bir tartışma başlattı. Mobil cihazlar için hangi optimizasyon yöntemi daha iyidir: yöntem (RWD - duyarlı) veya yöntem (AWD - uyarlanabilir). Aradaki fark, duyarlı yöntemin öğelerin boyutunu yüzde olarak değiştirmesidir: resimler, videolar, bloklar, vb. Ancak duyarlı tasarım, tarayıcının boyutuna bağlı değildir, kullanıcıya odaklanır ve önceden tanımlanmış üç düzene sahiptir: akıllı telefon, tablet, dizüstü bilgisayar.

Günümüzde her iki seçenek de responsive düzende kullanılıyor, birbirini tamamlıyor. Sayfanın düzeni (ızgarası), üç ana ekran türünün boyutlarına karşılık gelen kontrol noktalarında kökten yeniden oluşturulabilir: monitörler, tabletler, akıllı telefonlar. Kesme noktaları içinde, düzen, boş alanı öğelerle doldurmak için uzar. Böylece, ekran boyutu ne olursa olsun web sitesi en uygun şekilde görünecektir.

Bir web sitesi neden duyarlı olmalıdır?

Arama motorları, her yıl mobil site adaptasyonuna giderek daha fazla ilgi gösteriyor. Mobil cihazlar için ayrı bir arama zaten göründü. Örneğin Yandex, sitenin mobil cihazlara uygunluğunu dikkate alan Vladivostok algoritmasını kullanır, bu nedenle siteniz mobil cihazlara uyarlanmadıysa, ziyaretçi akıllı telefon aracılığıyla bir istek girerken arama sonuçlarında site. Ve site hala arama sonuçlarındaysa, o zaman en alttadır.

Duyarlı bir mobil sürüm olmadan, ziyaretçiler sitenizde zorluklar yaşayacak ve bu da tüm sitenin davranışsal faktörlerini olumsuz etkileyecektir. Bir ziyaretçi bir akıllı telefonda tam hacimli sürümü açtığında, büyük olasılıkla sitenizi denemeden hemen kapatacak ve bu tür her ziyaretçi davranışsal faktörleri bozacaktır. Davranışsal faktörler, sitede geçirilen süre, görüntülenen sayfa sayısı da dahil olmak üzere SEO sıralamalarını güçlü bir şekilde etkiler. Uyarlanabilir sürümün uygulanması, tüm bu sorunları herhangi bir sorun olmadan çözer. yan etkiler... Bazı projelerde site trafiği %40'a kadar büyüyebilmektedir.

Google Analytics ve Yandex.Metrica'da kullanışlı analiz sistemi. Sistemler sitenizin hareketliliğini otomatik olarak algılar ve mobil cihazlar üzerinden yapılan trafik ve dönüşüm istatistikleri ile hazır raporlar oluşturur. Bu, hedef kitlenizin hareketliliğini belirlemek için harikadır.

Duyarlı düzenin hiçbir dezavantajı yoktur. Bu bir dezavantaj mı: eski nesil aşırı basitleştirilmiş ve büyük öğeleri sevmiyor, büyük ekranlara ve menüdeki çok sayıda küçük öğeye alışkınlar.

Hangisi daha iyi: mobil mi yoksa duyarlı mı?

Akıllı telefonlar için optimize etmenin bir yolu, web sitesinin yalnızca akıllı telefonlardan açılan ayrı bir mobil sürümünü oluşturmaktır. Cihaz tipinin belirlenmesi sunucu tarafında gerçekleşir. Son zamanlarda, daha az ve daha az kullanılmaktadır, çünkü duyarlı bir düzenden çok daha maliyetlidir ve geliştirilmesi ve bakımı daha zordur. Mobil versiyon sadece çok karmaşık ve standart olmayan web servisleri için uygundur.

Vicdansız büyük ajanslar, müşterileri aldatarak bundan yararlanır. Sonuçta, ayrı bir mobil sürümü uygulamanın maliyeti, uyarlanabilir bir düzenin uygulanmasından birkaç kat daha yüksektir, bu nedenle sizi uyarlanabilir sürümden caydırmak onlar için daha karlı.

Duyarlı bir web sitesi neden mobil sürümden daha iyidir?

• Duyarlı bir düzende, koddaki değişiklikler tüm cihazlar için aynı anda görüntülenecektir. Örneğin, önemli işlevleri değiştirmeniz veya eklemeniz gerekiyorsa. Sitenin mobil versiyonu olması durumunda her iki versiyonda da değişiklik yapmanız gerekecektir. Ve böylece her seferinde, bu da programcılara ve düzen tasarımcılarına yapılan harcamaları ikiye katlar.
• Duyarlı bir sitede, sitenin mobil bir sürümünün oluşturulduğundaki yöntemin aksine içerik kopyalanmaz.
• Duyarlı sürümde masaüstü ve akıllı telefon sayfasındaki adres aynı kalır, bu nedenle her seferinde yeniden yönlendirme ayarlamanız gerekmez.
• Mobil ve standart cihazlar için her seferinde ayrı sayfalarda içerik oluşturmaya gerek yoktur.
• Ayrıca Google, Aralık 2016'da Dijital Ekim konferanslarından birinde uyarlanabilir bir sürüm yapılması gerektiğini ve mobil sürümün tamamen saçmalık olduğunu duyurdu.

Hayat kesmek! Mobil cihazlar için web sitesi uyarlamasının düşündüğünüzden çok daha ucuza yapılabileceğini biliyor muydunuz? Çünkü aslında bu çok büyük bir çaba gerektirmez ve siteniz için herhangi bir sonuç doğurmadan kısa sürede iş yapılır. Kural olarak, web stüdyoları cesur fiyat etiketleri sunar: 10.000 ruble ile 20.000 ruble arasında ve aslında, serbest borsa Kwork'te uzaktan sadece 500 ruble için uyarlama sipariş edilebilir.

Sitenin mobil versiyonu nasıl yapılır?

uygulamadan önce uyarlanabilir düzen sitenize, düzeni planlamanız gerekir, bunun için hangi öğelerin ayrılacağını ve hangilerinin kaldırılacağını belirlemeniz gerekir. Ve bunu akıllı telefon ve tablet için ayrı ayrı yapın. Akıllı telefon ve tabletteki alan sınırlıdır, bu nedenle çok fazla fedakarlık yapmak zorunda kalmayacağız önemli bloklar ve yalnızca işlevsel öğeleri ve yalnızca ziyaretçiye yardımcı olanı bırakın.

Bu arada, WordPress'te yeni premium temaların çoğu, amfi sayfalarının yanı sıra mobil sürümü de destekliyor. Sahibiz eksiksiz rehber““, Duyarlı WordPress sitelerini okuyun ve oluşturun.

Örneğin, yan çubuklar genellikle bilgilendirici bir işlev, kaydırıcılar vb. Menü çok uzun ve bol versiyonda sonsuz bir partiye dönüşüyor, bu yüzden ayrı bir düğmeye kaldırılıyor. Uzun arama alanı ile aynı. Aynı anda iki öğeye basılmaması için öğeler birbirine yakın olmamalıdır.