Duyarlı web tasarımı ne kadar önemlidir?


29

Son zamanlarda duyarlı web tasarımını kullanmanın avantajları ve dezavantajları hakkında çeşitli görüşler duydum ve küçük coğrafi bölgeleri hedefleyen küçük işletmeler için duyarlı web tasarımının uygulanmasının gerekli olup olmadığını merak ediyor muydum?

Bununla ilgili sahip olduğum bazı alt sorular:

  1. Farklı boyutlar / cihazlar için ayrı kod kullanılması yerine, duyarlı web tasarımını kullanmak daha mı iyi?

  2. Potansiyel olarak SEO’yu etkileyebilir mi (olumlu veya olumsuz)?

  3. Bu tasarım yöntemini kullanarak bir işletme için bir web sitesini optimize ederken karşılaşabileceğim temel problemler nelerdir?


İçeriği gerçekten değiştirmeden başlık sorunuzda çok ciddi bir değişiklik yaptınız . Bundan gerçekten emin misin? (İpucu: Cevap şimdi "hayır" dır.)
Su

@Su 'Bunun için üzgünüm, aldığım cevapları tamamen değiştireceğini fark ettim, bu yüzden bir' geri alma 'yaptım
yaşamları

1
Ne kadar önemli? Çoğu site için sıfırdan çok az önemli. Bir Uygulama veya araç için daha çok (1) Duyarlı vs Adaptive? Kişiden kişiye ve projeden projeye değişir. Kısacası, hiçbir yöntem daha iyi değildir ve kullanım da sitenin izleyicisine bağlıdır. (2) SEO’yu etkiler mi? Hayır. (3) Ana konular? Daha fazla test etmek, daha fazla hata düzeltmek ve daha fazla kodlamak zorunda kalacaksınız, bazı şeyler küçültülmüş genişliğe sahipken çalışmaz ve bazı şeyler kaldırır ya da değiştirirseniz TOS'u (adsense) ihlal eder. İşte IMHO'nun
Anthony Hatzopoulos

Yanıtlar:


21

Mobil internet kullanımının, bundan sonraki birkaç yıl içinde masaüstü kullanımını aşacağı tahmin edilmektedir , bu nedenle, bir tür mobil optimizasyon, herhangi bir işletme için ciddi bir husustur.

Birçok yönden, bu özellikle küçük, yerel işletmeler için doğrudur: Tahmin edilebileceği gibi, birçok mobil arama yakındaki şeyleri bulmaya odaklanmış olma eğilimindedir - bir dükkan bulmayı, tekrar arama yapmayı vb.

Mayıs 2012 itibariyle, duyarlı tasarım Google’ın akıllı telefonlar için tasarım yaparken önerdiği sektörün en iyi uygulamasıdır. Başlıca faydalardan biri, tek bir site işletiyor olmanız: bu, tasarlamanız, inşa etmeniz, sürdürmeniz ve tanıtmanız gereken tek site. Verimli.

SEO açısından bakıldığında, ayrı bir mobil siteye, örneğin, egmexample.com'a ev sahipliği yapmak, 2 ayrı siteyi optimize etmeniz ve işletme değerinizi (PageRank, yetki vb.) İki konuma bölmeniz gerektiği anlamına gelir. Kullanıcı aracısı tespiti yoluyla aynı URL’lerde içerik sunmaktan kaçınmanıza rağmen, bu eforun çoğaltılmasıyla ilgilenmez (hala 2 ayrı sitedir) ve ayrıca daha fazla teknik zorluk ortaya koyar, örneğin kullanıcı aracınızı sağlama algılama işleri çalışır ve güncel tutulur; arama motorları doğru içeriği doğru dizinde indeksler.

Sonuçta, duyarlı tasarım zarif bir çözümdür.

Diğer sorularınızı cevaplamak için:

  1. Yukarıda değinilmiş, ancak mobil pazarın ne kadar çabuk geliştiğini de düşünün. Mobil çözümünüz ne kadar esnek olursa, yetişmek için o kadar az şey yapmanız gerekir.

  2. Karşılaştığınız şeye bağlı olarak, ancak yukarıda belirtildiği gibi, diğer 2 ana seçeneğin ikisinde de önemli SEO zorlukları var.

    "Gizleme" konusunda, örneğin çoğu uygulamada duyarlı tasarıma özgü olan arama motorlarından içerik gizleme konusunda bazı endişeler var. Ancak, bu olmasa da, bildiğim kadarıyla, büyük arama motorlarından herhangi biri tarafından açıkça cevaplandırılmış olsa da, Google’ın “en iyi uygulama” olarak gördüğü, Google’ın içeriklerin yasal olarak gizlenmesi arasında fark edebileceğinin bir göstergesi olarak görülebilir. Cihaz optimizasyonunun nedenleri ve diğer, daha az meşru gizlenme nedenleri.

  3. Bence asıl zorluk, mobil içeriğe hangi içeriğin gösterileceğini belirlemek. Sitenize bağlı olarak, bu bir sorun olmayabilir, ancak birçok durumda. Buradaki en önemli husus, mobil ziyaretçilerinizin ne yapmaya çalıştığını anlamaktır. Örneğin, bir iPhone'daki biri muhtemelen hızlı, kolay bilgi veya işlem ister. Bir iPad'deki aynı kişinin daha yavaş bir gezinme deneyimine ilgi duyması daha olasıdır.

Bu soru ve cevap, gelecekte dört yıl sürecek derecede eğlenceli.
dwjohnston,

12

Arkasındaki fikir, cihaza bakmaksızın ziyaretçinize en uygun tarama deneyimini vermektir. Bir mobil cihaz kullanan ziyaretçilerinizin sayısının düşmek yerine neredeyse muhtemelen artacağı için, o rotaya gitmek tamamen mantıklı geliyor.

Blog'lar ve CMS için hemen deneyebileceğiniz ve ne aldığınızı beğenip beğenmediğinizi (müşterilerin veya bazı cihazlarınla ​​doğrulayın) bulabileceğiniz uygun fiyatlı (ucuz demek değil) temaları var.

  1. Özel bir sebepten dolayı, her zaman bir kod tabanına odaklanmaya çalış. Bunun bir nedeni, "web uygulaması" gibi özel bir web sitesi sunmak isteyebilirsiniz.

  2. SEO: hayır. Yanıt vermeyen bir düzen kadar iyi ve kötü.

  3. Başlangıçta biraz daha planlama yapmak zorundasınız. En küçük cihazda hangi içerik görüntülenmeli, içeriğin sırası nasıl olmalıdır? Bunun gibi şeyler. Veya: İçeriğim, desteklenen boyutlarımın hepsinde iyi görünüyor mu? Yalnızca tarayıcı ölçekli görüntüleri değil, yeniden boyutlandırılmış görüntüleri sunmak için her boyut için resimlerinizin boyutlarını optimize etmek isteyebilirsiniz. CMS'iniz bunu desteklemiyorsa, biraz daha iş gerekir.

Harici bir kaynaktan gelen reklamları eklemeyi planlıyorsanız, verilen formatların birlikte iyi çalışıp çalışmadığını da doğrulamanız gerekir.

Düzenle:

Geçmişe ait web analitiği verileriniz varsa (Google Analytics’i söyleyin) varsa, Mobil vs Mobil olmayan kullanıcı sayısını kolayca arayabilir, kullanılmış cihazları tanımlayabilir (gerçek donanıma kadar) ve ekran çözünürlüklerine bakabilirsiniz. ("Sayfalarımı gerçekten görüyorlar mı, yoksa sadece bir kısmını mı kaydırmalılar?").

İkinci düzenleme:

Bu yayına göre "Mobil Web Sitelerine Duyarlı Tasarım: İşletmeniz için doğru çözüm nedir?" "Google Analytics blogunda, Duyarlı Tasarım ile tasarlanan bir sitenin şu Uzmanları içerdiğini unutmayın:

  • Güncelleme kolaylığı
  • Arama Motorları için Optimize Edilmiş
  • Dönüşüm ekleme ve yönlendirme kodları

Ayrı Mobil Sitenin Artıları:

  • Mobil kullanıcı ihtiyaçları için tasarlama
  • Quicke site oluşturma
  • Mükemmel DIY seçenekleri

Resmi Google Web Yöneticisi Merkezi Blogunda "Duyarlı tasarım - medya sorgularının gücünden yararlanılması" makalesi , "Duyarlı Tasarım" ın gerçekten nasıl uygulandığına dair güzel bir giriş yapar.

Google Geliştiriciler'de "Mobil Optimize Edilmiş Web Siteleri Oluşturma" durumları:

"Google, web yöneticilerinin, tüm cihazlar için aynı HTML’yi sunan, yanıt veren web tasarımını kullanarak sektördeki en iyi uygulamayı takip etmelerini önerir [...]"


2
Google, sitenin yüklenmesi daha uzun sürerse, sitenizi daha düşük sıralar.
Steffan Donal

2
@Ruirize Evet ama ... O, Duyarlı Tasarım'ın SEO üzerinde olumsuz bir etkisi olup olmadığını sordu. Ve Duyarlı Tasarım, bir sayfanın yüklenmesi daha uzun sürmez. Yani "hayır". Sadece bunu yapmak isterseniz ;-)
initall

@initall - Duyarlı tasarım , yalnızca mobil sitenizi nasıl tasarladığınıza bağlı olarak, sitenizin bir mobil cihaza yüklenmesi daha uzun sürebilir. Daha küçük bir sayfa boyutuna sahip olsaydı (daha az ön içerik, daha az kitaplık vb.), Belki de siteniz bir mobil cihazda olduğundan daha uzun sürecektir. Yine de, düşük bant genişlikli ağlar için tek bir siteyi optimize etmek iyi olur ama bunun farkında olması gereken bir şey var.
Nick,

1
@Nick Tabii, Mobil siteyi optimize edilmiş bir siteyi daha genel bir siteyle (Responsive) karşılaştırırsanız, kazanan ... şaşırtıcı değil. Bu bir gotchas
initall

3

Ve bunun önemi: Ben "duyarlı tasarım" (RD) bir vızıltı-terimdir (exaggerate, ben orada bir RD sahip bir öğeye% 100 ben Genişlik koyarsanız) ilk sandığından da önemli olduğunu düşünüyorum görünür bunun daha önemli gerçekte olduğu gibi her şey gibi şartlı.

RD uygulamak gerekli midir?

Bazı tanımları belirtmeniz gerekeceğini cevaplamak için:

  1. Hedef kitleniz kim?
  2. Hedefiniz ne tür bir izleyicidir
  3. Web sitenizin amacı nedir
  4. Web sitenize nereden erişilecek (çoğu durumda)
  5. vb.

Bu pazarlama analizine çok benzer. Bu, doğru kitle için doğru ortama sahip olmakla ilgilidir (belki de izleyicileriniz çoğu gün bir bilgisayarın önünde otururlar veya en son iPhone ile devam ediyorlar). İkisini de yaparlarsa, o zaman elbette RD merkezidir.

Farklı boyutlar / cihazlar için ayrı kod kullanılması yerine, duyarlı web tasarımını kullanmak daha mı iyi?

Kullanıcı Arayüzünün karmaşıklığına ve nasıl kullanacağınıza bağlı. Tipik bir sayfa çoğu durumda çeşitli ekranlar için farklı CSS setleri kullanılarak oluşturulabilir. Ancak, daha karmaşık veya karmaşık UI'ler farklı yaklaşımlar gerektirebilir, bu nedenle hangi cihazın kullanıldığına bağlı olarak farklı bir sayfa yapısı ve strateji sunmak akıllıca olabilir (örneğin Google haritaları, çoklu dokunma arayüzü ..).

SEO’yu etkileyebilir mi (olumlu veya olumsuz)?

SEO, tasarımdan çok içerikle ilgili . Yalnızca Google, tasarımın ağırlıklandırılıp yaratılmadığını ancak tasarım / düzen olup olmadığını bilir, ancak genel olarak içeriğiniz yüksek kalitede ise bu, gerçek tasarımdan daha fazla ağırlıklandırılır.

Bu tasarım yöntemini kullanarak bir işletme için bir web sitesini optimize ederken karşılaşabileceğim temel problemler nelerdir?

Yanlış kitle için tasarlama. Hedefinizi analiz edin ve mümkünse güncel teknik verilerle tedarik edin (ör. Platform hakkında bilgi sağlayan ziyaretçi kayıtları vb.)

Yeni teknoloji her zaman risklidir, ref. Facebook için HTML5 sorunu. Bu noktada tam olarak olgun değildir ve IE6 ile standart sorunlara benzer çeşitli problemleri davet etmektedir.

Mümkün olduğunca basit tutun. Süslü web sayfaları, kullanıcının gerçekten sayfanızı kullanması gerekene kadar çok kısa bir süre için değerlidir. Yaptığı her tıklama için bir solmaya bitirmek için 1/2 saniye beklemek zorunda kalırsa, kullanıcı oldukça hızlı bir şekilde kaybolacaktır. Bunun gibi şeyler.


1
Cevabınızın bazı kısımlarına net bir hayır : "Duyarlı tasarımı" "esnek" veya "akışkan" konseptleriyle karıştırmayın. Ekran boyutuna göre, duyarlı bir tasarım "sabit" görünebilir, çünkü tarayıcı genişliğine bağlı olarak farklı CSS sunmak için ortam sorgularına bağlıdır. "Genişlik:% 100" değil. Ben bunu "vızıltı terimi" olarak adlandırmam çünkü makul bir kavram, güncel bir sorunun güzel bir cevabı ve sadece bir yutturmaca değil. SEO ile ilgili: En azından Google, bir başkasına karşı tema düzenine karşı bireyi tespit etmek için biraz çaba sarf etti; Yine: RD kendiliğinden kötü veya iyi değil, içeriğinize bağlıdır.
initall

1
Çamurlu su olmasına rağmen 'sabit' yorumun% 100'ü geride kaldı. İş yerindeki duyarlı sahalarım akışkan iç unsurlarla düzeltildi. Ben şu anda biraz vızıltı bir kelime olduğunu iddia ediyorum ama çok yakında sadece web tasarım / geliştirme olarak adlandırılacağını hayal ediyorum. Sanırım şirketlerin duyarlı olmak yerine mobil bir siteye sahip olmaları halinde SEO etkisinin olabileceğini düşünüyorum ... ama bu SEO'nun akıllıca etkileri hakkında hiçbir fikrim yok.
DBUK

2

Diğer cevapları inceledim, gereksiz olduğumda beni affet ... Bu noktada günde 8 + saat boyunca her gün duyarlı tasarım yapıyorum ... Müşterilerim bunu istiyor çünkü mobil kullanıcıların 'benzersiz' olmasını istiyorlar işverenim bunu ister çünkü Google tarafından tercih edilen yöntem olarak övülür ve iyi düzenlenir. (ve Google tarafından büyük olasılıkla iyi bir şey yapmanın yolu olarak övünen varsa, SEO için en iyisi)

Farklı boyutlar / cihazlar için ayrı kod kullanılması yerine, duyarlı web tasarımını kullanmak daha mı iyi?

Daha iyi olduğunu söyleyebilirim, evet. Kodunuzun çoğu, bir iPhone uygulaması, bir droid uygulaması, bir iPad uygulaması, bir kibar uygulaması ... yazmaktan daha az işle sonuçlanan aynı koddur.

Potansiyel olarak SEO’yu etkileyebilir mi (olumlu veya olumsuz)?

Bir tasarım açısından, tarafsız olduğunu hissediyorum; Ancak, bir istatistik açısından, duyarlı tasarımlarım gerçekten iyi gidiyor. Müşteriler onları sever ve müşteriler onları kullanmayı sever.

Bu tasarım yöntemini kullanarak bir işletme için bir web sitesini optimize ederken karşılaşabileceğim temel problemler nelerdir?

İlk başta yapmak biraz zor ... medya sorguları için biraz araştırma yapmanız ve tercihen denemek için bazı mobil cihazlarınız olması gerekiyor. Pencerenizi masaüstünüzde yeniden boyutlandırmanın yakın olduğunu, ancak mobil cihazların interneti nasıl sağladığını bazen beklediğinizden farklı olduğunu unutmayın. Örneğin, başlık için bir bg tekrarı kullandığım ve masaüstünde tüm görüntülenebilir alana yayılan duyarlı bir site tasarladım; Ancak, iOS'ta nedense kısa keser ...

Duyarlı bir tasarım öğrenmeyi ve denemeyi öneririm. Bu siteye atlamak için bakın: http://html5boilerplate.com

Başlıktaki soruyu cevaplamak için önemlidir: önemli ve bunun farkında olmanız ve nasıl tasarlayacağınız konusunda sizi bilgilendirir ve kullanmamaya karar verirseniz, müşteriniz olarak belirlediğiniz tutumu savunmak için hazırlıklı olmalısınız. Bu tasarıma sahip. Deneyimlerime göre, müşteriler ve müşteriler aynı şekilde duyarlı tasarımları seviyorlar. Mutlu müşteriler ve mutlu müşteriler benim için devam etmem için bir nedendir :)


1

Yanıt veren web tasarımı önemlidir - eğer yeni bir site oluşturuyorsanız sitenizi duyarlı hale getirmeniz GEREKİR. Zaten, trafiğin% 50'si mobil cihazlardan ve tabletlerden geliyor ve sadece bu da büyümekle kalmayacak, internet kullanımının en baskın şekli olacak.

Küçük coğrafi bölgeleri hedefleyen küçük işletmeler için, daha da kritiktir - SEO, yeni bir küçük işletme için çok zor olacak, ancak ürününüz iyi ise, yaptığınız işi paylaştığınız kişiyi en üst düzeye çıkarabilirsiniz.

Sosyal medya okumak söz konusu olduğunda, insanlar çoğunlukla şu anda mobil cihazları kullanıyorlar - genellikle sabahları ve geceleri yatakta.

Siteniz bir mobil cihazda kullanılamıyorsa, ilgili kitlenizi etkileyen herhangi bir hisse israf olur. Bunu istemiyorsun Olmasını önlemek için kritik öneme sahiptir.

Duyarlı veya ayrı kod ile ilgili: Duyarlı tasarıma yönelik en önemli dezavantajı, ayrı kod tabanları kadar hızlı olmamasıdır. Bu hız kaybı, küçük bir yerel işletme söz konusu olduğunda, sitenin diğerlerinden neden 0.2 saniye daha yavaş olduğu konusunda diğer faktörler kullanıcıların aklına geldiğinde kesinlikle küçük bir yerel işletme durumunda ihmal edilebilir hale gelecektir.

Duyarlı tasarımın en büyük avantajı aynı kod tabanını tutmanızdır. Bu, bakım maliyetlerini, test maliyetlerini ve geliştirme maliyetlerini azaltır.

Bugünlerde SEO’da büyük olan şey Site Site Kalitesi ’dir - site kalitesinin ölçülmesi zordur, ancak genel olarak Google’ın, bunu ölçmek için Sitedeki Sıçrama Oranı ve Zaman’ı kullanması gerekir. Siteniz cep telefonunu çekiyorsa, trafiğinizin% 50’si yüksek bir hemen çıkma oranına ve düşük katılımlı çok sayıda ziyaretçiye sahip olacak (sayfada 10 saniyeden az).

Bu, sizi Google Cezaları riskine sokar - Google Panda'ya ve yeni (geçen hafta) Tam Eşleme Alanı cezalarına bakın, her ikisi de siteleri 'düşük kaliteye sahip oldukları için cezalandıracaklar'.

Bu yöntemi kullanarak bir işletme için bir web sitesini optimize ederken karşılaşabileceğiniz temel problemler, yeni bir terimdir, herkesin ihtiyacı vardır, bu yüzden yapılması kolay bir şey için gülünç derecede yüksek fiyatlar alan kovboylar vardır.

Örneğin, geçenlerde bir cihaz, bir forum, bir soru-cevap bölümü ve ayrıca çeşitli sayfalar, bloglar vb. Olan tüm cihazlara yaklaşık bir gün içinde tam cevap veren bir web sitesi yaptım.

İşte yapmanız gerekenlerin temelleri:

  1. Gövde dolgusunu ve kenar boşluklarını ayarlayın
  2. Sol veya Sağ taraftaki menüleri açılan menülere taşıyın, belki üstteki seçenekler düğmesinin altına gizleyebilirsiniz.
  3. Kapları yeniden boyutlandırın, mümkün olan yerlerde% 100 genişlik kullanın
  4. Tüm resimlerinizi genişlik% 100 olarak değiştirin
  5. Telefonda hangi şeylerin gerekli olmadığına karar verin (reklamlar?) Ve bunları kaldırın (ekran: yok)

İşte bazı örnek kod:

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

Bunun anlamı akıllı telefonlardan (en fazla 480 piksel genişliğinde) bir sınıf 'ilan kutusu' olan herhangi bir şeyi kaldırmak ve vücut marjını azaltmaktır.

Yeni bir site oluşturuyorsanız, bunu oluşturmak daha kolaydır, çünkü tüm cihazlara uyacak şekilde güzel temiz sınıflar ve iyi stiller içeren temiz bir tasarım oluşturduğunuzdan emin olabilirsiniz.

Umarım bu yardımcı olur!


1

Sadece farklı bir bakış açısı ile chime istiyorum:

Hayır, zorunlu değil hatta tavsiye edilir. Hedef kitlenizin kim olduğuna bağlı. Analitiklerinize bakın ve Mobile’dan gelen yüzde kaçının ve Mobile’a gelenlerin yüzde kaçının Masaüstü kullanıcılarınızla karşılaştırıldığında önemli bir düşüşü var mı?

Çalıştığım yere bir örnek vermek sitemizin duyarlı değildir. Trafiğimizin% 90'ı Masaüstü kullanıcılarından geliyor ve Hemen Çıkma Oranları ve Etkinlik Tamamlama Oranları Masaüstü, Mobil ve Tablet arasında neredeyse aynı.

Bunu değiştirmenin bir maliyeti doğrulanıncaya kadar, bunu yapmamız için maddi bir teşvik yok. Kullanıcıların% 50'si gibi kapsamlı ifadeler mobilde veya bir şey yalnızca tüm kullanıcılar hedef kitlenizse geçerlidir. Aksi takdirde, tamamen ilgisiz ve takip edebileceği kötü bir mantıktır.

Yalnızca mobil cihazlarda hedeflediğiniz kullanıcıların yüzdesine bakmanız gerekir. Özellikle B2B uygulamaları için çoğu insan boş zamanlarında telefonlarına bakmayacak. Masaüstü bilgisayarlarda pazartesiden cumaya trafik alırsınız.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.