Web sitesi yanıt hızı, bir web sitesinin web sitesinde doğru şekilde görüntülenme yeteneğidir. farklı cihazlar farklı özelliklere sahip.

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

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

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

Yanıt verme terimi, Ethan Marcot'un 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, uyarlanabilir olarak bilinir hale geldi.

Duyarlı düzen örneği

PC'de görüntüle:

tablette:

Akıllı telefonda:

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

Teknoloji hızla gelişiyor ve ekipman üreticileri de onların gerisinde kalmıyor. Akıllı telefonlar, tabletler, TV'ler, diğerleri elektronik aletler, internete bağlı, her zevke ve bütçeye uygun, birçok ekran boyutu seçeneği var.

Aynı zamanda içerik tüketimi katlanarak artıyor. Bir müşteri için mücadelede, site sahipleri tüm araç ve yöntemleri kullanır. Özellikle geliştirme aşamasında, web kaynaklarını çeşitli cihazlarda doğru şekilde görüntüleme olanağını ortaya koyarlar.

Çevrimiçi olarak bilgi görüntülemenize izin veren cihazların yüzdesi her yıl artıyor. Çeşitli formatlar ve çözünürlükler, geliştirme sürecini bir bütün olarak zorlaştırır, tüm aşamalarda ek gereksinimlerin dikkate alınması gerekir: tasarımcılar, düzen tasarımcıları ve programcılar.

Uyarlanabilir tasarım kavramı, geçmişte mobil sürümlerde olduğu gibi sitelerin birkaç çeşidini 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 bunun gerçekleştirilmesine izin veriyor. Asıl mesele başlangıçta ölçeği doğru bir şekilde değerlendirmektir, bazı durumlarda yeni tasarım düzenlerini ve şablonlarını kullanmak daha kolay, daha hızlı ve daha ucuzdur. Kurumsal kimliğiniz tanınabilir bir marka değilse, ahlaki açıdan demode olması sizi sıklıkla yeniden çalışmaya iter. Ve yeni bir seviyeye geçiş aşaması olarak yeniden markalaşma iptal edilmedi. Duyarlı bir web sitesi, işletmeniz için güçlü bir araçtır.

Sitenin uyarlanabilirlik gereksinimlerini nasıl karşıladığını kontrol etmek için hizmetler vardır.

Ayrıca, günümüzün en büyük arama motorları Google ve Yandex, web sitelerini sıralarken bu parametreyi dikkate almaktadır. Kullanılabilirlik nedeniyle, gezinme bir sitenin kalitesini değerlendirmek için zorunlu faktörlerden biridir. Bilgi yükleme hızı ve optimize edilmiş görüntüler söz konusu olduğunda düşer, okunamayan metin ve çok küçük olan veya ekrana sığmayan bozuk öğeler, bilgi bulmayı zorlaştırır ve basitçe geri dönmelerde artışa yol açar - 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 net ve somut kriterler değildir. Ancak bunun katılım dinamiklerini nasıl etkilediğini anlamaları yeterlidir. Birçok alanda, mobil cihazlardan gelen trafiğin payı, masaüstü trafiğiyle karşılaştırılabilir ve hatta onu aşıyor. Bu dikkate alınmalıdır. Web sitesini uyarlamayı teklif etmeyen geliştiricilerle tanışmak giderek daha az mümkün oluyor, ancak süreci kontrol etmek için bu konuda gezinmekten zarar gelmez.

Uyarlanabilirlik ilkeleri

Diyelim ki masaüstü tarayıcılar için tasarım yaptınız. Her şey yolunda. Bu siteyi bir mobil cihazdan görüntülerken, bloklar kaydırılır ve birbirinin altına girer.

Buna akış denir. Ve şimdi bu, duyarlı tasarımda kullanılan ana ilkelerden biridir. Bunu düşün.

Birim Göreliliği

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

Ölçü birimleri ile aynı. Farklı cihazların farklı piksel yoğunlukları vardır. Ve boyut, örneğin 320 piksel, bir bilgisayarın ve bir akıllı telefonun ekranında farklı görünecektir.
Çözüm göreli birimleri kullanmaktır. Hem bilgisayar ekranında hem de 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.

kullanım kontrol noktaları

Bunlar, yalnızca görüntüleme için belirli bir cihaz kullanıldığında konumu değişen öğelerdir. verilen parametreler ekran.

Örneğin, sayfanın içeriği "uzaklaşı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. Ancak burada aynı sayfayı geniş ekran bir monitörde açıyorsunuz ve resim sizi memnun etmiyor. 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

Diğer blokların konumuna bağlı olarak birçok öğe kullanmanız gerekir. Kontrol etmek zor. Bu tür nesneleri tek bir kapsayıcıya 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. Ancak hepsinin yüklü olduğunu unutmayın. Bu, kullanıcının sayfa yükleme hızını etkiler.

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

Resimde çok sayıda küçük ayrıntı varsa, tarama 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.

Yerleşim boyutlarına uygunluk

Bir düzen geliştirirken hangi temel boyutlara odaklanmanın geleneksel olduğuna dair genel standartlar vardır.

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

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

Belirli bir çözünürlüğe bağlanmak zor değildir. Cihaz ayarlarına ve parametrelere bağlıdır.

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

Düzen, belirli bir gadget'ta "kırılırsa", farklı bir çözünürlükte yanlış görüntüleniyorsa, bu ekran için gerçek değerler kesme noktaları olarak alınır.

Medya sorguları

Uyarlanabilir sitelerin geliştirilmesi, medya sorguları (medya sorguları) kullanılarak stil parametrelerinin tanımlanması ilkesine dayanmaktadır.

İstekler şunları tanımlar:

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

Karşılık gelen istek ve cevap üzerine css stil dosyasından cihaza karşılık gelen görüntü ayarları uygulanacaktır.

Web sitesi yanıt kontrolü

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

tarayıcı kullanma

Örneğin, içinde Google Chrome mobil cihazlarda görüntülenmek üzere sitenin tasarımının doğruluğunu kontrol etmek için yerleşik bir araç seti vardır. F12 tuşuna veya Ctrl + Shift + I tuşlarına basmanız veya Menüde "Ek Araçlar" - "Geliştirici Araçları" seçeneğini seçmeniz gerekir.

İÇİNDE Mozilla Firefox bu, "Menü" - "Geliştirme" - "Duyarlı tasarım" veya Ctrl + Shift + M şeklinde yapılabilir.

Google Mobil Dostu ( Google arama konsol)

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

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

Duyarlı web sitesi düzeni, web sayfalarının tabletlerin ve akıllı telefonların ekranlarına otomatik olarak uyum sağlamasına olanak tanır. Mobil İnternet trafiği her yıl artıyor ve bu trafiği etkin bir şekilde işlemek için kullanıcılara kullanıcı dostu bir arayüze sahip uyarlanabilir siteler sunmak gerekiyor.

Arama motorları, bir sitenin mobil cihazlarda görüntülendiğinde yanıt verebilirliğini değerlendirmek için bir dizi kriter kullanır. Google, akıllı telefon ve tablet sahipleri için İnternet kullanımını basitleştirmeye çalışıyor ve mobil düzenlemede işaretleme yapıyor. mobil cihazlar mobil uyumlu özel işareti olan siteler. Yandex ayrıca, mobil aramada kullanıcılar için mobil / uyarlanabilir sürümü olan siteleri tercih eden bir algoritmaya sahiptir.

Mobil cihazlarda sayfanın görüntülenmesini ve hizmetlerinden kontrol edebilirsiniz.

Pirinç. 1. Sitenin mobil cihazlara uygunluğu hakkında bir notla Yandex ve Google'ın mobil olarak yayınlanması Uyarlanabilir düzen nedir

Uyarlanabilir düzen, yokluğu ima eder yatay çubuk herhangi bir cihazda görüntülendiğinde kaydırılabilir ve ölçeklenebilir alanlar, okunabilir metin ve tıklanabilir öğeler için geniş alanlar. Medya sorgularını kullanarak, şablonu farklı cihaz ekran boyutlarına uyum sağlayacak şekilde yeniden oluşturarak sayfadaki blokların düzenini ve konumunu kontrol edebilirsiniz.

Uyarlanabilir bir site oluşturmak için ana teknikler makalede verilmiştir. Duyarlı tasarım için, ana site kapsayıcısının genişliği % olarak ayarlanır, ancak tarayıcı penceresi genişliğinin %100'üne eşit veya daha az olabilir. Izgara sütunlarının genişliği de % olarak ayarlanır. Duyarlı tasarımda, ana kapsayıcı ve ızgara sütunlarının genişliği px değerleri kullanılarak sabitlenir.

Bu eğitimde tartışılan duyarlı akıcı düzen tekniği, iki sütunlu bir şablonda harika çalışacak ve siteyi mobil cihazlarda yanıt verebilir ve kolay görüntülenebilir hale getirecektir. Şablon, sayfaların ana içeriğinin farklı bir düzenini varsayar, bu derste ana sayfanın düzeni incelenecektir.

Ana sayfa düzeni

Sayfa üç ana bloktan oluşur: bir başlık (başlık), ana içerik için bir sarma kabı ve bir kenar çubuğu ve bir alt bilgi (alt bilgi). 768px ve 480px'i tasarım kesme noktaları olarak alalım.

İlk noktada üst menüyü gizleyip kenar çubuğunu yazıların olduğu konteynerin altına taşıyacağız. İkinci noktada, başlık öğelerinin konumunu değiştirin, düğmelerin konumunu iptal edin sosyal ağlar gönderilerde ve sayfa alt bilgi sütunlarını gevşetin.

Pirinç. 2. Uyarlanabilir düzen örneği 1. Meta etiketler ve bölüm

1) Bölüme gerekli dosyaları ekleyin - kullanılan yazı tiplerine, jQuery kitaplığına ve prefixfree eklentisine bir bağlantı (özellikler için tarayıcı önekleri yazmamak için):

Duyarlı site düzeni

2. Sayfa başlığı

Aşağıdaki kapsayıcı öğelerini sayfa başlığına yerleştirin:
logo ;
ana menüyü göstermek/gizlemek için düğme;
Ana menü

;
site arama formu

LOGO

• Blog
• portföy
• yazar hakkında
3. Makalenin bir özetini içeren blok

Makalelerin duyurusunu öğeyle tamamlayacağız:

Yay tasarımı

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

Okumaya devam et ...
4. Yan sütun

Yan sütuna bir kategori listesi, son gönderiler ve bir bülten abonelik formu ekleyelim:

Kategoriler

• Tasarım (2)
• Düzen (5)
• Video (1)
son notlar
• Yaz
• Sonbahar
Bülten Aboneliği
5. Altbilgi

Sayfanın alt kısmına telif hakkı, sosyal ağ düğmeleri ve bir bağlantı hakkında bilgiler yerleştireceğiz. e-posta:

Blogum © 2016 E-posta yaz $(".nav-toggle").on("tıklayın", function()( $("#menu").toggleClass("active"); ));

6. Genel CSS Stilleri

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

*, *:after, *:before ( kutu boyutlandırma: kenarlık kutusu; dolgu: 0; kenar boşluğu: 0; geçiş: .5s kolay giriş; /* tüm sayfa öğelerine 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 Ekran"; yazı tipi ağırlığı: normal; harf aralığı: 1 piksel; ) gövde ( yazı tipi ailesi: "Open Sans", arial, sans-serif; yazı tipi boyutu: 14 piksel; satır yüksekliği: 1; renk: #373737; arka plan: #f7f7f7; ) /* alt öğeleri olan tüm kaplar için bir akış temizleyici ekleyin */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after ( content: ""; display: table; clear: her ikisi de; ) /* Izgara kabının genişliğini kontrol eden stil sınıfı */ .container ( marj: 0 otomatik; genişlik: %100; maksimum genişlik: 960px; dolgu: 0 15 piksel; )

7. Başlık ve içerik başlığı için stiller (genişlik: %100; arka plan: beyaz; kutu-gölge: 3px 3px 1px rgba(0,0,0,.05); dolgu: 15px 0; kenar boşluğu: 30px; konum : göreli; ) /* logo */ .logo ( ekran: blok; kayan nokta: sol; ) .logo yayılma ( renk: beyaz; ekran: satır içi blok; genişlik: 30 piksel; yükseklik: 30 piksel; satır yüksekliği: 30 piksel; kenarlık yarıçapı: %50; kenar boşluğu: 5 piksel 0; metin hizalama: merkez; metin gölge: 2 piksel 2 piksel 1 piksel rgba(0,0,0,.4); ) .logo yayılma:nth-child(odd) ( arka plan : #EF5A42; ) .logo span:nth-child(even) ( background: #F8B763; ) /* menu */ #menu ( float: right; ) #menu li ( display: satır içi blok; sağ kenar boşluğu: 30px ; ) #menü a ( renk: #111; metin dönüşümü: büyük harf; harf aralığı: 1 piksel; yazı tipi ağırlığı: 600; ekran: blok; satır yüksekliği: 40 piksel; ) #menü a:hover ( renk: #EF5A42 ; ) #menu li:last-child (margin-right: 0; ) /* arama formu */ #searchform ( float: right; margin-left: 46px; display: satır içi blok; konum: göreli; ) #searchform girişi (genişlik: 170 piksel; kayan nokta: sol; kenarlık: yok; sol dolgu: 10 piksel; yükseklik: 40 piksel; taşma: gizli; anahat: yok; renk: #9E9C9C; yazı tipi stili: italik; ) #arama formu düğmesi ( arka plan: şeffaf; yükseklik: 40 piksel; kenarlık: yok; konum: mutlak; sağ: 10 piksel; renk: #EF5A42; imleç: işaretçi; yazı tipi boyutu: 18 piksel; ) #arama formu girişi:odak ( ana hat: 2 piksel katı #EBEBE3; ) /* 768px genişliğinde görünen menü değiştirme düğmesi */ .nav-toggle ( display: none; position:relatif; float: right; genişlik: 40px; yükseklik: 40px; sol kenar boşluğu: 20px; arka plan: #EF5A42; imleç: işaretçi; ) .nav-geçiş aralığı ( ekran: blok; konum: mutlak; üst: 19 piksel; sol: 8 piksel; sağ: 8 piksel; yükseklik: 2 piksel; arka plan: beyaz; ) .nav geçiş açıklığı:önce , .nav-toggle span:after ( içerik: ""; konum: mutlak; ekran: blok; sol: 0; genişlik: %100; yükseklik: 2px; arka plan: beyaz; ) .nav-toggle span:before ( üst: -10px; ) .nav-toggle span:after ( bottom: -10px; ) /* buton tıklandığında üst menüye eklenecek ve gizli menüyü gösterecek sınıf */ #menu.active ( max-height: 123px; ) 8. Ana içerik bloğu için stiller /* sol kapsayıcı */ .posts-list (margin-bottom: 30px; genişlik: %64 kayan nokta: sol; ) /* makale bloğu */ .post (margin-bottom: 35px; ) .post-content p (line-height: 1.5; padding-bottom: 1em; ) .post-image (margin-bottom: 30px; ) . ( marj-alt: 15 piksel; ) .kategori a ( color: #F8B763; metin dönüşümü: büyük harf; ) .post-title ( marj-alt: 12 piksel; yazı tipi boyutu: 26 piksel; ) /* "devam" butonu ile blok oku" ve sosyal medya düğmeleri */ .post-footer ( border-top: 1px solid #EBEBE3; border-bottom: 1px solid #EBEBE3; konum: göreli; kenar boşluğu: 15px; ) .more-link ( konum: göreli ; ekran: satır içi blok; yazı tipi boyutu: 10 piksel; metin dönüşümü: büyük harf; renk: beyaz; satır yüksekliği: 44 piksel; dolgu: 0 22 piksel; arka plan: #3C3D41; harf aralığı: 0. 1em; boşluk: şimdi rap; ) .more-link:after ( içerik: ""; ekran: blok; konum: mutlak; genişlik: 0; yükseklik: 0; üst: 0; sağ: 0; kenarlık: düz şeffaf; kenarlık genişliği: 22px 18px; kenarlık -left-color: #3C3D41; transform: translateX(100%)); ) .post-social ( pozisyon: mutlak; sol: otomatik; üst: %50; sağ: 0; metin hizalama: sağ; transform: translateY(- %50); dolgu: 0; yazı tipi boyutu: 12 piksel; ) .post-social a ( ekran: satır içi blok; kenar boşluğu: 8 piksel; renk: #F8B763; genişlik: 25 piksel; yükseklik: 25 piksel; satır yüksekliği: 23px; text-align: center; border-radius: %50; border: 1px solid; ) 9. Kenar çubuğu stilleri /* sağ kapsayıcı */ kenara (genişlik: 33%; float: right; ) /* widget bloğu */ . widget ( dolgu: 20px 15px; arka plan: beyaz; yazı tipi boyutu: 13 piksel; kenar boşluğu: 30 piksel; kutu gölgesi: 3 piksel 3 piksel 1 piksel rgba(0,0,0,.05); ) .widget-başlığı ( yazı tipi- boyut: 18 piksel; dolgu: 10 piksel; kenar boşluğu: 20 piksel; metin hizalama: merkez; kenarlık: 2 piksel katı #F8B763; kutu gölgesi: 3 piksel 3 piksel 0 0 #F8B763; ) .widget-kategori-listesi li ( kenarlık-alt : 1px katı #EBEBE3; dolgu: 10px 0 renk: #c6c6c6; yazı tipi stili: italik; ) .widget-category-list li:last-child ( border-bottom: none; ) .widget-category-list li a ( color: #626262; right-margin: 6px; font-style: normal; ) .widget- kategori listesi li a:before ( content: "\f105"; display: satır içi blok; font-family: "FontAwesome"; sağ kenar boşluğu: 10px; color: #c6c6c6; ) .widget-posts-list li ( border -top: 1px katı #EBEBE3; padding: 15px 0; ) .widget-posts-list li:nth-child(1) ( border-top: none; ) .post-image-small (genişlik: %30; kayan nokta: left; margin-right: 15px; ) .widget-post-title ( float: left; ) /* abonelik formu */ #abone ol ( konum: göreli; genişlik: %100; dolgu: 15px 0; ) #abone ol girişi ( genişlik : %100; ekran: blok; kayan nokta: sol; kenarlık: 2 piksel düz #EBEBE3; dolgu: 0 0 0 10 piksel; yükseklik: 40 piksel; konum: göreli; anahat: yok; renk: #9E9C9C; yazı tipi stili: italik; ) #abone ol düğmesi ( dolgu: 0 15 piksel; arka plan: şeffaf; yükseklik: 40 piksel; kenarlık: yok; konum: mutlak; sağ: 0; renk: #EF5A42; imleç: işaretçi; yazı tipi boyutu: 18 piksel; ) #abone ol girişi: odak + düğmesi ( arka plan: #EF5A42; Beyaz renk; ) 10. Alt bilgi için stiller

Site altbilgisi üç eşit sütuna bölünmüştür:

Alt bilgi ( dolgu: 30 piksel 0; arka plan: #3C3D41; renk: beyaz; ) .footer-col ( genişlik: 33.3333333333%; kayan nokta: sol; ).footer-col a ( color: beyaz; ) .footer-col:last- çocuk ( text-align: right; ) .social-bar-wrap ( text-align: center; ) .social-bar-wrap a ( padding: 0 7px; font-size: 18px; )

11. Medya sorguları @media (max-width: 768px) ( /* üst gezinmeyi değiştirmek için düğmeyi göster */ .nav-toggle ( display: block; ) başlık ( padding: 10px 0; ) /* üst menüyü gizle, kaydırmayı iptal et) , site başlığının yüksekliğine getirin */ #menu ( maks-yükseklik: 0; arka plan: beyaz; kayan nokta: yok; konum: mutlak; taşma: gizli; üst: 63 piksel; sağ: 0; sol: 0; kenar boşluğu : 0; padding: 0; z-index: 3; ) /* liste öğelerini üst üste istiflenecek şekilde blok düzeyinde yapın */ #menu li ( display: block; text-align: center; border- bottom: 1px solid # EBEBE3; margin-right: 0; ) /* sol ve sağ sütunları açın, genişliklerini %100 olarak ayarlayın */ .posts-list, bir kenara (genişlik: %100; float: none; ) .widget -post-title ( font -size: 1.5em; ) ) @media (maks-genişlik: 480px) ( /* logoyu çöz ve hizala */ .logo ( float: yok; kenar boşluğu: 0 otomatik 15 piksel; ekran: tablo ; ) .logo span (margin: 0 2px; ) /* menüyü artan başlık yüksekliğine konumlandırın */ #menu ( top: 118px; ) /* arama formunu sola konumlandırın */ #searchform ( float: left; margin-left: 0; ) /* üst ve alt kenarları kaldırın ve düğmeyi ortalayın */ .post-footer ( border-top: none ; border-bottom: yok; text-align: center; ) /* sosyal medya düğmelerinin konumunu değiştir */ .post-social (position: static; text-align: center; transform: yok; margin-top: 20px; ) .widget - post-title ( font-size: 1.2em; ) /* sayfa alt bilgi sütunlarını çöz */ .footer-col ( float: yok; kenar boşluğu: 20 piksel; genişlik: %100; metin hizalama: merkez; ) . footer-col:last-child ( text-align: center; margin-bottom: 0; ) ) 12. Mobil menü betiği

Daha önce sayfa işaretlemesine kapanış etiketinden önce eklediğimiz jQuery kodu, buton tıklandığında üst menüyü göstermek/gizlemekle görevlidir (menü yüksekliği sıfırdan içeriğine eşitlenir):

$(".nav-toggle").on("tıkla", function()( $("#menu").toggleClass("aktif"); ));

Satış Jeneratörü

Okuma süresi: 18 dakika

Malzemeyi size göndereceğiz:

Siteniz mobil cihazlara uyarlanmadıysa endişelenecek bir şey yok, ancak Yandex bu tür uyarlamaya sahip siteleri arama sonuçlarında daha üst sıralara çıkarıyor.

Bu makaleden şunları öğreneceksiniz:

• Sitenin mobil cihazlara uyarlanması nedir?
• nasıl kontrol edilir
• Google için site uyarlaması
• Sitenin kendi kendine uyarlanması
• en iyi ve ücretsiz eklenti wordpress için
• Çevrimiçi mobil cihazlar için web sitesi uyarlaması için en iyi 6 hizmet
Mobil uyarlama neden gereklidir?

Şartlı olarak dış ve iç olarak ayrılırlar. Başka bir deyişle, harici KM'ler, örneğin sonuçlardan bir siteye giden bağlantıya yapılan bir tıklamadır. Arama Sonuçları, görüntülenen sayfa sayısı ise, sitede geçirilen toplam süre, dahilidir.

Google'ın benzer bir sistem kullandığını unutmayın. Ancak bu arama motoru daha da ileri giderek, sitenin mobil cihazlara uyarlanmasını geçen kaynakların arama sonuçlarında daha üst sıralarda görüneceğini belirtiyor.

Ardından, dahili KM'ler hakkında konuşacağız. Kendiniz düşünün, bir ziyaretçinin siteyle çalışması, sitedeki ürünleri bulup sipariş etmesi uygunsa, müşteri kategorisine geçme olasılığı daha yüksektir.

Aynı prensip şu şekilde çalışır: arama motorları: kaynak üzerinde bulundukları ilk saniyelerde kaynaktan ne kadar çok misafir ayrılırsa, insanların gereksinimlerine uygunluğunun göstergesi o kadar düşük olur. 10 saniyeden kısa süren kullanıcı oturumlarının siteye yapılan toplam ziyaret sayısına oranına hemen çıkma oranı denir.

Örnek olarak, Rus sitelerinden birinin bu göstergesini ele alalım:



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

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

Katılıyorum, uygulama sıklığında bir artış mobil internet gerçekten etkileyici. Mobil cihazları kullanarak herhangi bir kaynaktaki misafirlerin yüzdesini kolayca öğrenin, izin verecek Google Analytics. Bu göstergeyi görüntülemek 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 da siteyi mobil cihazlara uyarlamayı reddederseniz trafiksiz kalma riskiniz olduğu anlamına gelir.

Equation Research tarafından yapılan bir çalışmanın kanıtladığı gibi, bu hata nedeniyle birçok kullanıcının sizi sonsuza kadar terk edeceğini unutmayın. Uzmanları, insanların% 46'sının mobil cihazlarla çalışma düzeyinden memnun olmadıkları siteyi artık ziyaret etmediğini keşfetti.

Anladığınız gibi, sonuç olarak üzücü sonuçlar sizi bekliyor: kaynağın üretkenlik düzeyi sürekli olarak azalacak, çünkü zaten birikmiş olan, bir akıllı telefondan veya tabletten erişen izleyici iletişim kuramayacak, sipariş veremeyecek, haber bültenleri alamayacak. , vesaire.

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

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

Öncelikle bu iki kavram arasındaki farkı anlayalım.

Duyarlı tasarım, yalnızca siteye dış görünüş, kullanıcının ihtiyaç duyduğu cihazdan yeterince görüntülenecektir.

Oysa mobil sürüm temelde Yeni sürüm, siteyi kullanan kullanıcıların ihtiyaçlarını karşılamak için özel olarak tasarlanmıştır. taşınabilir aletler. Şimdi her iki tür hakkında daha fazla konuşalım.

Uyarlanabilir tasarım



Bu seçenek, küçük bir miktar para yatırarak siteyi gadget'tan kullanan konuklara dost hale getirmeyi mümkün kılar.

Aslında, bir siteyi mobil cihazlar için uyarlarken, sayfa boyutlarının, site öğelerinin ve boyutların basit bir kombinasyonu vardır. belirli cihaz. Sonuç olarak, bu tür sitelerin kullanımı kolaydır, ancak eksikliklerinin farkında olmanız gerekir.

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

mobil versiyon



Mobil sürüm genellikle ana olanın bir alt etki alanında bulunur: m.site.ru, mobile.site.ru. SEO açısından konuşursak, bu özelliği olumlu olarak nitelendirmek zordur, çünkü bu durumda ana sürümden mobil sürüme birçok koşullu yönlendirme kullanılır. Sonuçta, arama motorları açısından site.ru/page ve m.site.ru/page 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 sürümün daha hafif olduğunu, uyarlanabilir düzene göre daha hızlı yüklendiğini söylemeye değer.

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 vurgularız:

• Küçük bir siteyi mobil cihazlara uyarlamanın bir anlamı yok, örneğin bir güzellik salonu için bir siteden bahsediyorsak, bunun için normal uyarlama yeterlidir.
• Bir mobil sürüm, çok sayıda yüklenebilir sayfaya sahip güçlü bir siteye ihtiyaç duyacaktır. Bu seçenek, günde birkaç bin kişilik bir izleyici kitlesine sahip çevrimiçi medya için geçerli olacaktır.

Başka bir deyişle, seçim olasılıkları ve ihtiyaçları dikkate almalıdır. Ayrıca, fiyatı ne olursa olsun, bu seçeneklerin her ikisinin de dönüşüm için tamamen yokluğundan çok daha karlı olduğunu vurguluyoruz.

"Ağır" fotoğrafların, flaşın, ek tasarım öğelerinin olmaması nedeniyle mobil cihazlar için web sitesi uyarlaması size ne verecek?
• Net, kolay gezinme. Mobil cihazlarda kullanılan kaynaklar, dikey kaydırma, uygun bir arama modülü, Ana Sayfa, Yukarı, Geri gezinme menüsü ile karakterize edilir. Ayrıca, arama işlevi kullanılır veya site başlığında kullanıcının önünde iletişim telefon numarası görüntülenir.
• Kullanışlı menüler, formlar. Bir kişinin sitenin diğer öğelerine parmağıyla tıklayarak bağlantıyı kolayca etkinleştirebilmesi önemlidir.
• okunabilir içerik Metni okumak istiyorsanız kaynağın konuğunun zorluk yaşamaması önemlidir.
• Hareket edebilme tam versiyon alan. Portal, ziyaretçileri otomatik olarak şuraya yönlendirmemelidir: ana sayfa gadget ekranından tam sürümü görmeye çalıştıklarında mobil sürüm.
• İşlevsellik, dönüşüm eylemleri olasılığı. Kullanıcının mobil cihaz kullanırken sipariş verirken, haber bültenine abone olurken, belge indirirken zorluk yaşaması kabul edilemez.




Başvurunuzu gönderin

Mobil cihazlar için web sitesi yanıt verebilirliği nasıl kontrol edilir

Sitenin farklı cihazlarda göreceğiniz gerçeğinden oluşan mobil cihazlar için uyarlanmasının kontrol edilmesi şu şekilde yapılabilir:

• tuhaf araçlar.




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ın 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'daki mobil cihazlara uyarlamak istiyorsanız, ücretsiz Geliştiriciler aracı işinize yarayacaktır. Google:



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

Ayrıca siteyi mobil cihaza uyarlamak için nelerin değiştirilmesi gerektiğine dair tavsiyeler, bu konuda faydalı olan linkler yer almaktadır. Bu öneriler sayesinde Google için minimum olan %90'ı rahatlıkla alabilirsiniz.

Sitenizi mobil uyumlu hale getirmek için yapabilecekleriniz Doğru form alanı özelliklerini ayarlayın

Siteniz kullanıcı adı/adres için giriş alanları kullanıyorsa, otomatik düzeltme seçimini kaldırın, otomatik büyük harf kullanımını etkinleştirin:

Adınız:

Bu teknik sayesinde, bir siteyi mobil cihazlar için uyarlarken, T9 otomatik giriş sisteminin adları değiştirmesini engellemiş olursunuz, örneğin, " Ervan" Açık " Erivan».

İlk otomatik kullanımını ayarlayarak büyük harfler kelime türlerinde, kaynağın misafirlerini sürekli olarak harflerin büyük harflerini eklemek zorunda kalmaktan kurtaracaksınız, başka bir deyişle, her kelimenin başına bir büyük harf yerleştirilecektir (örneğin, " Ken yanıyor" dönüşecek Ken Burns"):




Siteniz kullanıcıdan bir e-posta isterse, mobil cihaz klavyesinde @ sembolünü yazmak zorunda kalmaması için 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ınızın tarayıcısında 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. Sayfanın başındaki meta etiketi ayarlayarak bu geçerli değeri @viewport özelliğine ayarlayın:

Mobil cihazdan siteye tekrar giriş yaptığınızda belirttiğiniz genişlik otomatik olarak seçilecek yani kaynağın konuğu zoom kullanmaya zorlanmayacaktır.

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




Ve burada genişlik değeri doğru seçilmiştir:




Site akıcı bir düzen üzerine kuruluysa ve tüm ekran boyutlarıyla uyumluysa işiniz çok daha kolay hale geliyor. Siteyi mobil cihazlara uyarlarken genişliği denemenizi tavsiye ederiz, böylece kaynağınızın güzel görünmesini ve okunabilir kalmasını sağlarsınız. Seçilen değer ve şuna ayarlayın: meta etiketi.

Görüntü genişliğini %100 olarak ayarla

Sitenizi seçilen genişliğe ayarladıktan sonra bazı resimlerin aşırı geniş olacağını unutmayın. Önceden, böyle bir sorunla uğraşmak zorunda değildim, çünkü masaüstü monitörler oldukça geniş bir çözünürlüğe sahip, birçok resim genişliğe sığıyor:




Resimleriniz için maksimum genişliği %100 olarak 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 eklemeyi unutmayın:

img (maksimum genişlik: %100)

olarak ayarlarsanız Arkaplan resmi sadece ayarlamanız gereken img etiketi olmayan herhangi bir resim CSS özelliğiİçerecek arka plan boyutu. Dolayısıyla, ekran çözünürlüğü %100 ölçekte işlemek için yeterli değilse arka plan boyutu 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şelenmeyin - modern mobil cihazlar buna izin vermez. Gerçek şu ki, bir site ziyaretçisi yakınlaştırmayı kullandığında, tarayıcı resmin netliğini artırır. Ancak, yakınlaştırmaya izin vermediği için portalınızın meta etiketinde user-scalable=no özelliğine sahip olmadığından emin olmalısınız:

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

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

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

Şimdi giriş alanları siteyi mobil cihazdan kullanırken ekran dışına çıkmayacaktır.

Form Gönderimi Onay Düğmelerini Devre Dışı Bırak'ı Kullanırken Dikkatli Olun

Düğmeye ilk tıklamadan sonra gönder özelliği durursa, formun gönder düğmesine birden fazla tıklama olmayacaktır.

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

Böylece bir düğmeyi pasif hale getirdiğinizde, kullanıcının tekrar tıklamasını engellemiş olursunuz ve sorun sadece ağ kaybı olmayabilir. Evet, tarayıcı benzer cihaz kapanacak gelen çağrı, ve formu doldurduktan sonra göndermenize izin vermeyeceği için engellenen bir düğme sorunu ortaya çıkacaktır.

Gönder düğmesini devre dışı bırakmaya karar verirseniz, siteyi mobil cihazlara uyarlarken birkaç saniye devre dışı bırakın.

Uzun satırlar için word-wrap kullanın

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



Satırın ekranın kenarına ulaştığında sarılacağı bu sözcük kaydırmayı kullanın. Böylece site konuğu, kaydırmaya başvurmadan tüm bilgileri aynı anda görebilecek:

Burada bir şifreye ihtiyacınız olacak:

Boşluklara dikkat edin

Hepimiz, uzun bir dize oluşturuyorlarsa, her beş karakterin boşluklarla ayrıldığı gerçeğine alışkınız. Ne de olsa, bir kişinin başka bir uygulamada daha fazla giriş yapmak için bunları hatırlaması daha kolay olacaktır.

Ancak akıllı bir kullanıcının karakterleri kendi başına girmeyi kabul etmesinin pek olası olmadığını not ediyoruz - panoyu biliyor. Doğru, sizin tarafınızdan yerleştirilen boşlukları manuel olarak silmek zorunda kalacak. Bunları bir cep telefonunda mı yoksa tablette mi temizlemenin uygun olduğunu düşünün?

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

.split m ( dolgu: 0em 0,5em )kod: 435143a1b5fc8bb

Gördüğünüz gibi karakterler arasında boşluklar kalıyor ancak kopyalarken bunların giderilmesine gerek yok. Ve zaman kazandırır!

Medya sorgularının faydaları

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

/* normal css */ .tabs ( dolgu: 10px 2em ) @media ekranı ve (maks-genişlik: 500px) ( /* sadece ekran 500px'den darsa geçerlidir */ .tabs ( padding: 3px 1em ) )

Sabit konumlandırmadan kaçının

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

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




Siteyi mobil cihazlara uyarlamanın en kolay yolu, mobil cihazlarda görüntülendiğinde sabit konumları reddetmektir.

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

/* normal css */ #başlık ( konum: sabit ) @medya ekranı ve (maksimum genişlik: 500 piksel) ( /* yalnızca ekran 500 pikselden darsa geçerlidir */ #başlık ( konum: statik ) )

Standart yazı tiplerini kullan

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

Tipik olarak, bu tür dosyalar büyük bir hacimle karakterize edilir, yani bir mobil cihazda indirilmeleri uzun zaman alır. 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 bir yazı tipine sahip metin görüntülenecektir. Ardından, sayfayı yeniden oluşturursunuz ve konuk orijinal olarak seçilen yazı tipini görür.

Ancak CSS kurallarının iki versiyonunu yazmanız gerekecek: biri varsayılan yazı tipi için, diğeri indirilen yazı tipi için.

İnanın bana, böyle bir çözüm en uygun olacaktır: Bir kişi yazı tipleri indirilirken ihtiyacı olan her şeyi okuyacak ve ardından tasarımı görebilecek. Aşağıdaki kodu kullanın:

WebFont.load(( google: ( aileler: ["Open Sans"] ) )); .header (font-family: Arial) .wf-opensans-n4-active .header (font-family: "Open Sans")

Vurguluyoruz: .wf-opensans-n4-active sınıf seçici, site koduna Yazı Tipi Yükleyici tarafından dinamik olarak, ancak yalnızca yazı tipi yüklendiğinde eklenir.

Kullanıcılara okunabilir içerik sunun

Tipik olarak, mobil cihaz kullanıcıları İnternet'i belirli bir amaç için kullanır. Örneğin, farklı mağazalardaki ürünlerin fiyatlarını karşılaştırmak istiyorsanız, salon iletişim bilgilerini, ilacı kullanma talimatlarını bulun.

Bu nedenle, başlığa ilgi duyduklarında sitenizde görünürler. Daha sonra küçük bir ekrandan okunmak üzere hazırlanmış içeriği keşfetmeleri onlar için önemlidir.

Bu kuralı İngilizce olarak tanımlamak için oldukça kapsamlı bir "atıştırmalık" kelimesi vardır (İngilizce "atıştırmalık" - atıştırmalık). Bu nedenle, bu tür kullanıcılar için içerik tam olarak atıştırılabilir, yani hareket halindeyken hızlı okuma ve göz gezdirme için uygun olmalıdır.

Bir siteyi ekran okuyucular için mobil cihazlara uyarlarken göz önünde bulundurmanız gereken ana özellikleri ana hatlarıyla açıklayalım:

• Kısa, öz ve dikkat çekici bir başlıkla başlayın. 10 kelimelik bir metin oluşturmanızı ve büyük bir yazı tipi kullanmanızı tavsiye ederiz.
• 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.
• Numaralı ekle / madde işaretli listeler mobil kullanıcılarınızın aradıklarını hızlı bir şekilde bulmalarını kolaylaştırmak için.
• Ek olarak bilgileri yapılandıran ve algıyı basitleştiren görsel eklemeler kullanın.
Adapte olmak e-postalar küçük bir ekrandan okumak için

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

• MailChimp.
• Weber.
• Sürekli iletişim.
Bağlantıları "dokunulabilir" düğmelerle değiştirin

Kullanıcılar mobil cihazlardan kendilerine uygun olmayan sitelere geçer geçmez kendilerine “şişman parmak sendromu” teşhisi koyuyorlar. Tıbbi terminolojide bulunmaz, bu alandaki uzmanların argosudur ve belirli bir öğeye parmakla vurmaya çalışırken yapılan hataları tanımlar.

Bir kişinin onlarla sorun yaşamaması için bir düğme, bir gezinme öğesi için hangi boyut en uygun olacaktır? Sitenizi mobil cihazlara nasıl uyarlayacağınızla ilgili bazı ipuçları:

• Apple buna inanıyor optimal boyut düğmeler için gezinme öğeleri 44 x 44 piksel oranında başlar.
• Nokia, bu öğeleri oluştururken minimum 48 x 48 piksel veya 0,7 x 0,7 cm boyutlarını önerir.
• Microsoft, 34'e 34 piksel düğmeleri önerir.

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



Gösterdiğimiz örnekte sitenin tam sürümünün menüsü linkler şeklinde yapılmıştır. Burada on inçlik bir tablette istenilen bölüme hemen ulaşmak son derece zor olacaktır.

Sözde mobil uyumlu düğmeleri, 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, aşağıdaki eklentileri kullanmanızı öneririz:

• Çarpıcı Renkli Kutular ve Düğmeler. Bununla birlikte, farklı boyutlarda, renklerde ve kullanışlı düğmeler oluşturabilirsiniz. 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 izin verecektir.
Wordpress JetPack için mobil cihazlar için site uyarlaması için en iyi ve ücretsiz eklenti



en çok konuşalım basit yöntem sitenin mobil cihazlar için WordPress'e uyarlanması, en fazlasına sahipken yüksek seviye yeterlik. JetPack araç seti, bu görevi sizden en az çabayla yapacaktır - sadece bir düğmeye basın.

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

MobilBasın



En yaygın olanlardan biridir basit eklentiler. İki tema ile gelir ve mobil geliştiriciler tarafından daha fazla tema oluşturmak 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. İstatistiklere göre 4,3 milyondan fazla indirildi.

Avantajı, bir satır kod bile yazmadan sadece birkaç dakika içinde güzel, hızlı bir mobil site oluşturabilmenizdir. İÇİNDE Ücretli sürüm WPtouch Pro olarak adlandırılan, ayrı bir yönetici paneli, bilet sisteminde destek alacaksınız.

Wapple Architect Mobil Eklentisi



Bu eklenti, çeşitli cihaz ve platformlarda web içeriğini özelleştirmek, oluşturmak ve sunmak için özel olarak oluşturulmuş WAPL biçimlendirme dilinde yazılmıştır.

Her gadget için kendi API'sini kullanır ve bu seçenek, masaüstü sitenin adres yapısına dokunmadığı için sniffing yönteminden çok daha iyidir. Görünüşe göre bu eklentinin kullanımı kolay ve oldukça basit bir çözüm.

Mobil Dedektör



Siteyi mobil cihazlara uyarlama seçeneği, sitenin kullanıcı cihazıyla uyumlu bir sürümde, yani ekran çözünürlüğü, diyagonal vb.

Toplamda önceden yüklenmiş yedi mobil tema seçeneği vardır. Ayrıca Mobile Detector, ekran ayarlarına göre görüntülerin boyutunu ve çözünürlüğünü bağımsız olarak değiştirir. Ayrıca kendi widget'larını, istatistik koleksiyonunu sunar.

Temel Faydalar:

• 5.000'den fazla gadget içeren bir veritabanını kullanarak otomatik gadget tanıma.
• tahsis yeteneği standart telefonlar Gelişmiş cihazlar arasında.
• Tekil ziyaret sayısı, arama trafiği vb. göstergeleri içeren mobil kullanıcılara ilişkin istatistiklerin hazırlanması.
WP Mobil Sürüm



Aslında bu, daha önce sunulan sürümün bir kopyasıdır - aynı avantajlara, seçeneklere sahiptir, ancak diğer şeylerin yanı sıra Disqus yorum sistemini destekler, mobil kart Siteler için kendi oluşturucusuyla XML.

İkincisi yararlı olabilir Arama motoru optimizasyonu. Siteyi mobil cihazlara uyarlamak için tasarlanan bu eklentinin mobil versiyon hızlandırılmış önbelleğe alma sağlayan m.facebook.com gibi bir alt etki alanında, mobil tanımlama bilgilerini destekler.

WordPress Mobil Paketi



Siteyi mobil cihazlara uyarlama seçeneği, popüler mobil cihazları tanımlamanıza izin veren ve ihtiyaç duydukları çözünürlük ve kalitede içerik görüntülemenizi sağlayan alan eşlemeyi, arama aracılarını destekler. Tek bir tema için özelleştirilebilir renk şemaları da sağlanır.

Site tablolarının mobil cihazlar için uyarlanması

Bir siteyi mobil cihazlara, yani farklı çözünürlüklere uyarlarken en zor şeyin 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.

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

Öncelikle tablonun görünümüne bakalım:




Bootstrap duyarlı tablo düzeni

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

Bunu uygulamaya koymak için tablo, maksimum genişliği %100 olan bir div içine sarılır, taşma: otomatik.



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

Gerçekten duyarlı bir tablonun düzeni

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

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



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



Bunu yapmak için, başlatma sırasında, tüm site tablolarının uyarlanabilir olmasını istiyorsak, tablo sınıfını veya yalnızca 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.

Kesme noktaları başlatma sırasında ayarlanabilir:



Görünüşe göre 0-720 aralığında mobil, 720-1024 - tablet ve 1024'ün üzerinde - masaüstü kuralına uyuyor. Gerekirse, oluşturabilirsiniz büyük miktar tüzük.

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



Eklentinin tüm özelliklerinden bahsetmedik ama bu blok uyarlanabilir tablolar oluşturmak için yeterli olacaktır.

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



Siteyi 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 sürümünü geliştirmeniz yalnızca 54 dakikanızı alacak.

Mevcut servislerin çoğunun akıllı telefonlarla çalışmayı hedeflediğini, mobiSiteGalore ise eski telefonlar için siteler hazırlamanıza izin verdiğini unutmayın.

• MobStac



MobStac ile HTML5 ile hazırlanmış bir mobil web sitesine sahip olursunuz. Ek olarak, ayarlarda değişiklik yapma veya tasarımı değiştirmek için belirli bir şablon seçme olanağına sahipsiniz ki bu zor olmayacak.

MobStac'in yerleşik bir mobil web sitesi para kazanma planı sunan var olan tek hizmet olduğunu vurguluyoruz. Eksi, hizmetin hala beta sürümünde olmasıdır, ancak bir davetiye alabilir ve ardından kayıt olabilirsiniz.

• Mofuse



Burada iki yaklaşım kullanarak web sitesinin mobil bir versiyonunu geliştirmek mümkün olacaktır: mofuse yardımıyla her şeyi kendiniz yapın veya siteyi bir uzman ekipten sipariş ederek mobil cihazlara uyarlayın.

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

• Mobil Uygulama Amerika



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

• 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ı, şu anda popüler olan markalar da dahil olmak üzere 13.000'den fazla mobil cihaz modelini destekliyor.

Ancak, bir siteyi mobil cihazlara uyarlamanın maliyeti konusunda endişeleriniz varsa, bu hizmet tam size göre, çünkü bu hizmet aracılığıyla ne kadar çok web sitesi barındırırsanız, o kadar çok web sitesi barındırırsınız. büyük indirim almak. Başka bir deyişle, bMobilized, mobil cihazlara uyarlanması gereken bir site ağı sahipleri için neredeyse ideal olacaktır.

• Harekete Geçir



Mobify tanındı en iyi hizmet e-ticaret ile ilgili olanlar için. Sahiplerine HTML5 işlevselliği sunar ve geliştirme ekibi, istekleriniz doğrultusunda mobil web sitenizi oluşturur.

Uygulamada görüldüğü gibi, fikir aşamasından itibaren tamamen işleyen bir elektronik mağaza oluşturmak üç haftadan fazla sürmez. Ek olarak, kendinizi onun gelişimine kaptırma fırsatınız da var.

Yukarıda açıklanan tüm yöntemleri denemenize rağmen sonuçtan hala memnun değilseniz, profesyonellerin yardımına başvurma zamanı.




Dizi ( => 21 [~ID] => 21 => 28.09.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 [~ACTIVE] => Y => Y [~GLOBAL_ACTIVE] => Y => 500 [~SORT] => 500 => Makaleler: Dmitry Svistunov [~NAME] => Makaleler: Dmitry Svistunov => 11076 [~RESİM] = > 11076 => 7 [~LEFT_MARGIN] => 7 => 8 [~RIGHT_MARGIN] => 8 => 1 [~DEPTH_LEVEL] => 1 => Dmitry Svistunov [~TANIM] => Dmitry Svistunov => metin [~DESCRIPTION_TYPE ] => metin => Makaleler, Dmitry Svistunov Dmitry Svistunov [~SEARCHABLE_CONTENT] => Makaleler, Dmitry Svistunov Dmitry Svistunov => statyi-dmitriya-svistunova [~CODE] => statyi-dmitriya -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] => => [~EXTERNAL_ID] =>)

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

Yandex raporlarından alınan istatistiklere göre, genel seferberliğe rağmen kullanıcılar akıllı telefonlardan çok bilgisayarlardan alışveriş yapı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ında ürün aradığını iddia ediyor.

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 %54'üne denk gelen 66 milyon kişidir (2017). Aynı zamanda masaüstü kullanıcı sayısı da azalmaktadır.

Kommersant gazetesinin haberine göre Runet'in mobil segmentteki izleyici kitlesi 2017'de %47'den %56'ya çıktı. Dahası, büyüme yaşlı neslin pahasına gerçekleşiyor çünkü gençler arasında İnternet kullanım düzeyi uzun süredir maksimum sınırına ulaşmış durumda.

ilgili en büyük hizmet sağlayıcısı ağ teknolojileri Cisco, 2020'de ortaya çıkması gereken 5G ağlarını test ediyor. Cisco 2016'da 2021'e kadar olacağını tahmin etti mobil trafik yedi kat büyüyecek.

Ayakkabı ve aksesuar satan 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ırada, öğ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 RuNet'teki sitelerin büyük bir kısmı mobil cihazlarda hala çarpık bir şekilde görüntüleniyor. Örneğin, menü tüm ekranı kaplayabilir veya tam tersi, sitenin düzeni ekranın ötesine geçer ve son derece rahatsız edici 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.

Duyarlı 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 ayarlayacak ş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, bir web sitesinde aslında çok nadiren kullanılan bir dizi yan çubuk, menü, widget ve benzeri şeyler görmeye alışkınız. Bu nedenle, uyarlanabilir sürümde yalnızca gerçekten önemli ve işlevsel olan kalır. Örneğin, bir çevrimiçi mağaza için bu, telefonlu bir başlık, bir transformatör menüsü ve ürünlerdir, gerisi gereksizdir, ancak bu bir satın alma için yeterlidir.

Genel olarak, mobil cihazlar için uyarlanabilir tasarımın, sitenin oluşturulmasından önce bile önceden tasarlanması gerektiği kabul edilir, bu nedenle, belki de yiğit web yöneticisi hayal kırıklığına uğrayacaktır. Ancak bu büyük bir yanılgıdır, bu nedenle yalnızca uyarlanabilirlik adına tüm site şablonunu tamamen değiştirmek veya tüm CMS'yi tamamen değiştirmek gerekli değildir. Mevcut sitenizi herhangi bir büyük değişiklik veya komplikasyon olmadan çok hızlı bir şekilde uyarlayabilirsiniz.





Duyarlı ve duyarlı web sitesi tasarımı arasında bir fark var mı?

Aslında, duyarlı ve uyarlanabilir kavramlarının bir farkı vardır. Bir zamanlar, akıllı telefonlar gezegeni fethetmeyi düşünmezken, düzen 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). Aralarındaki 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: bir akıllı telefon, tablet, dizüstü bilgisayar için.

Artık her iki seçenek de uyarlanabilir düzende kullanılıyor, birbirlerini tamamlıyorlar. Sayfanın düzeni (ızgara), üç 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 genişler. 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 sitelerin mobil uyumluluğuna daha fazla odaklanmaktadır. Mobil cihazlar için zaten ayrı bir arama var. Örneğin Yandex, sitenin mobil cihazlara uygunluğunu dikkate alan Vladivostok algoritmasını kullanır, bu nedenle siteniz mobil cihazlara uyarlanmamışsa, akıllı telefon aracılığıyla istek giren bir ziyaretçi sitenizi aramada görmez. sonuçlar. Ve site hala arama sonuçlarındaysa, o zaman en altta

Duyarlı bir mobil sürüm olmadan, ziyaretçiler sitenizde zorluklarla karşılaşacak ve bu da tüm sitenin davranışsal faktörleri üzerinde kötü bir etkiye sahip olacaktır. Bir ziyaretçi bir akıllı telefonda tam hantal 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 SEO'daki konumları büyük ölçüde etkiler, sitede geçirilen süreyi, görüntülenen sayfa sayısını içerir. Uyarlanabilir sürümün tanıtılması, tüm bu sorunları herhangi bir yan etki olmaksızın çözer. Bazı projelerde site trafiği %40'a kadar büyüyebilir.

Google Analytics ve Yandex.Metrics'te kullanışlı analiz sistemi. Sistemler, sitenizin hareketliliğini otomatik olarak belirleyerek mobil cihazlar üzerinden yapılan trafik istatistikleri ve dönüşümlerle hazır raporlar oluşturur. Bu, kitlenizin hareketliliğini belirlemek için çok kullanışlıdır.

Uyarlanabilir düzenin dezavantajları yoktur. Bir eksi dışında: eski nesil aşırı basitleştirilmiş ve büyük öğeleri sevmiyor, onlar alışkın büyük ekranlar ve menüde çok sayıda küçük öğe.





Hangisi daha iyi: mobil mi yoksa uyarlanabilir sürüm mü?

Akıllı telefonlar için optimize etmenin bir yolu, web sitesinin yalnızca akıllı telefonlardan açılabilen ayrı bir mobil sürümünü oluşturmaktır. Cihaz tipi tespiti sunucu tarafında gerçekleşir. İÇİNDE Son zamanlarda Uyarlanabilir düzenden çok daha pahalı, geliştirilmesi ve sürdürülmesi daha zor olduğu için giderek daha az kullanılmaktadır. Mobil sürüm, yalnızca çok karmaşık ve standart dışı web hizmetleri için uygundur.

Vicdansız büyük ajanslar, müşterileri dolandırarak bundan yararlanır. Ne de olsa, ayrı bir mobil sürümü uygulamanın maliyeti, uyarlanabilir bir düzen uygulamaktan birkaç kat daha yüksektir, bu nedenle sizi uyarlanabilir bir sürümden caydırmaları onlar için daha karlı.

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

• Uyarlanabilir düzende, koddaki değişiklikler tüm cihazlar için anında görüntülenecektir. Örneğin, değiştirmeniz veya yeni önemli işlevler eklemeniz gerekirse. Sitenin mobil versiyonu olması durumunda her iki versiyonda da değişiklik yapmanız gerekecektir. Ve böylece her seferinde programcılara ve düzen tasarımcılarına yapılan harcamaları ikiye katlıyor.
• Uyarlanabilir bir sitede, sitenin mobil versiyonu oluşturulurken kullanılan yöntemin aksine içerik kopyalanmaz.
• Uyarlanabilir sürümde masaüstü ve akıllı telefon için sayfadaki adres aynı kalır, bu nedenle her seferinde yeniden yönlendirme ayarlamak zorunda kalmazsınız.
• 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 yapılması gerekenleri söylemişti. uyarlanabilir sürüm ve mobil sürüm tamamen saçmalık.

Hayat kesmek! Bir web sitesini mobile uyarlamanın sandığınızdan çok daha ucuza yapılabileceğini biliyor muydunuz? Çünkü aslında bu çok büyük bir çaba gerektirmiyor ve iş kısa zaman siteniz için herhangi bir sonuç olmadan. Kural olarak, web stüdyoları cesur fiyat etiketleri sunar: 10.000 ₽ ila 20.000 ₽ arasında ve aslında uyarlama, Kwork serbest borsasında uzaktan yalnızca 500 ₽ karşılığında 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 öğeleri bırakacağınızı ve hangilerini kaldıracağınızı belirlemeniz gerekir. Ve bunu bir akıllı telefon ve bir tablet için ayrı ayrı yapın. Akıllı telefon ve tabletteki yer sınırlıdır, bu nedenle çok önemli olmayan blokları feda etmemiz ve yalnızca bırakmamız gerekecek. fonksiyonel elemanlar ve yalnızca ziyaretçiye yardımcı olan şey.

Bu arada, WordPress'te, yeni premium temaların çoğu, mobil sürümün yanı sıra amp sayfalarını da destekler. Eksiksiz bir " " kılavuzumuz var, duyarlı WordPress sitelerini okuyun ve oluşturun.

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