Web Sitenizi Daha Mobil Dostu Hale Getirmek

Birçok insan her tür, boyut ve markadaki cihazlar aracılığıyla işletmelere çevrimiçi olarak bağlanmaya hazır olduğundan, günümüzde web'e erişmek günümüz dünyasında çok önemlidir.

Normal bir bilgisayarda kullanıcı dostu olan harika bir web sitesi yapmak bir şeydir; her türlü cihazda görüntülenebilen bir tane yapmak başka bir şey. Bu, yalnızca web sitenizi tüketicilere daha küçük akıllı telefonlarda veya büyük düz ekran bilgisayarlarda ve tabletlerde ihtiyaç duydukları şeyi sunacak şekilde tasarladıysanız büyük bir şanstır.

Bu makale, hedef kitleniz için sorunsuz çalışan bir web sitesi oluşturmanın en pratik yollarını inceliyor ve her birinin müşterilerinizin memnuniyetini kesinlikle artıracak artılarını, eksilerini ve etkisini inceliyor.

Peki, en iyi yöntem nedir?

1. Uygulanacak doğru teknolojiye karar verin

İş hedefleri ve müşteri beklentileri de dahil olmak üzere müşterilerinizin ve işletmenizin ihtiyaçlarına uyacak mobil uyumlu bir web sitesi yapmak için kullanılabilecek birçok yol vardır. Web sitenizi tüm ekranlar için yapılandırmak için kullandığınız yaklaşıma bağlı olarak, web sitenizin markası ve işletmesi için benzersiz olduğundan emin olun ve her şeyden önce, yöntem uygun maliyetli olmalı ve tüm sitelere www.example.com gibi tek bir alandan hizmet vermelidir.

Bunu akılda tutarak, mobil uyumlu bir web sitesi yapmak için kullanılabilecek en iyi yöntemlere bir göz atalım. Aslında üç tür vardır ve her yöntem mobil kullanıcılar için farklı bir deneyim sunar: duyarlı tasarım, tamamen ayrı bir mobil site ve uyarlanabilir/RESS/Dinamik tasarım.

Duyarlı web tasarımı (RWD)

Bu tasarım, sunucudan tüm cihazlara gönderilen tek bir HTML kodunu kullanan bir tekniktir ve sayfanın cihazdaki tasvirini ayarlamak için CSS kullanılır. Bu, kod aynı URL'den geldiğinden, ancak içerik o anda kullanılan ekrana sığacak şekilde esnetildiğinden, görüntülemenin herhangi bir cihazda tek tip olmasını sağlar. Duyarlı web sitesi tasarımı, başlangıç ​​maliyeti genellikle daha yüksek olduğundan ancak bir kez tamamlandığında bakımı oldukça kolay olduğundan önceden planlama gerektirir.

kodlama

• Meta name="viewport" kullan

Bu, tarayıcıya içerik görüntüsünü değiştirmesi talimatını verir.

name="viewport" nasıl kullanılır?

Tarayıcıya sayfanın tüm ekran boyutlarına uyum sağlayacağı sinyalini vermek için belgenin başına meta etiketi eklenir.

[kod]
<meta name="viewport" içeriği
[/kod]

Bu meta görünüm etiketi, tarayıcıya, kullanımdaki ekranın genişliğinin boyutunu ve ölçeklendirmesini nasıl düzenleyeceği konusunda talimat verir.

Meta görünüm etiketinin olmaması durumunda, mobil tarayıcılar genellikle yazı tipi boyutlarını artırarak ve web sitesinin içeriğini tam ekran boyutunu kaplayacak şekilde ölçekleyerek veya yalnızca bir kısmını göstererek web sitesinin içeriğini daha iyi göstermeye çalışırlar. Ekranın boyutuna uyan web sitesi. Bunun nedeni, mobil tarayıcıların web sitesinin içeriğini normal masaüstü ekran boyutuna göre varsayılan olarak oluşturmaya çalışmasıdır. Bu, web sitesi içeriğinin yazı tipi boyutları tutarsız olma eğiliminde olduğundan, mobil kullanıcıları zorlaştırır ve bu nedenle onları web sitesinin içeriğini net bir şekilde görmek için yakınlaştırmaya veya çift dokunmaya zorlar.

Duyarlı bir görüntü oluşturmak için <picture> öğesini ekleyin.

Web siteniz en güncel tarayıcılarla iyi çalışıyorsa bu genel kuraldır.

Duyarlı web sitesi tasarım tekniğinin önemi

Duyarlı web tasarımı önerilir çünkü:

• Web sitenizin ziyaretçilerinin tek bir URL kullanarak içeriğinize bağlanmasını sağlar. Bu, SEO'yu yönetmeyi oldukça kolaylaştırır, böylece sonuçlarınızın birleştirilmiş bir görünümüne sahip olduğunuz için harika sonuçlar elde edersiniz.
• Uygun maliyetli. Duyarlı web sitelerinin tasarımı genellikle daha uzun sürer, ancak yükseltmelerin yalnızca bir kez uygulanması gerektiğinden, minimum bakım gerektirerek veya hiç bakım gerektirmeden daha uzun süre hayatta kalırlar. Bu aslında zamandan ve paradan tasarruf etmenizi sağlar.
• İyi bir kullanıcı deneyimi sağlayın. Web siteleriniz, kullanıcının seçtiği herhangi bir cihazda esnek ve uyumlu olacak şekilde tasarlanmışsa, onları mutlu eder ve bu aslında müşteri memnuniyetinizi artıracak ve bu da işletmeniz için daha fazla kâr sağlayacaktır.
• Mobil siteleri gerçekten etkileyen yaygın hataların yaşanma olasılığını azaltır.
• Responsive web tasarım tekniği ile kullanıcıların yeniden yönlendirilmesine gerek kalmaz ve bu da yükleme süresini büyük ölçüde azaltır.
• İyileştirilmiş dönüşüm oranı. Optimize edilmiş siteler, görüntülenen cihaz ne olursa olsun tutarlıdır, bu nedenle, müşterilerin çoğu sizinle etkileşime geçebildiğinden, bunlar kullanıcı deneyimlerini artırır.

Aslında, duyarlı web sitesi tasarım stratejisi artık bir trend değil, bir zorunluluktur. Bunun nedeni, müşterilere web sitenizi görüntüledikleri ekran seçimi ne olursa olsun güzel bir optimize edilmiş deneyim sunmasıdır. Bu, hizmetlerinize daha geniş bir erişime sahip olacağınız ve iş dünyasında bir adım önde olmanızı sağlayacağı anlamına gelir.

Uyarlanabilir/RESS/Dinamik tasarım

Bu yöntem, web sitesi sunucusunun ziyaretçi tarafından kullanılan cihazın türünü ve boyutunu fark etmesi ve ardından ister cep telefonu, ister tablet veya büyük ekran olsun, söz konusu cihaz için tasarlanmış özel bir sayfa sunacak şekilde tasarlanmıştır. akıllı televizyon.

Bu web sitesi tasarımı yönteminde, URL de aynı kalır ancak sunucu, ziyaretçi tarafından kullanılan cihazın türüne göre farklı HTML ve CSS kodları gönderen sunucudur.

Uyarlanabilir web tasarımının önemi nedir?

• Azaltılmış bant genişliği vardır, örneğin sitenize bir video göndermek şu kadar kısadır: <video src="…"></video> . Diğer önceki yöntemler tarafından kullanılan daha uzun programlama prosedürü yerine.
• Artan sunucu hızı. Oluşturulmaya hazır içeriğin kullanım sırasında cihaza çok daha hızlı teslim edilmesini sağlar ve ayrıca daha hızlı sayfa yüklemeleri sağlar.
• Tek bir URL kullanımını kullanır. Bu, kullanıcıların yalnızca bir URL tutulduğu duyarlı tasarımla aynıdır.

Uyarlanabilir web sitesi tasarım tekniğinin dezavantajları

• Uyarlamalı programlamanın bazı eksiklikleri vardır, çünkü içerik çatallaması vardır. Bu, farklı cihazlar için özelleştirilmiş aynı içeriğin birden fazla kümesi nedeniyle olur. Bir kişinin gelişmiş CMS'ye sahip olmaması durumunda, içeriği tüm cihazlarda korumak bazı zorluklara neden olabilir.
• İkincisi, bu tür web sitesi tasarımında, hatalı cihaz tespiti gibi bazı yaygın hatalar vardır. Bunun nedeni, sunucular tarafından çalıştırılan komut dosyalarının güncelliğini yitirmesi ve komut dosyalarının tablet kullanıcılarına mobil tabanlı platform göndermesine neden olmasıdır. Bu web sitesi tasarım tekniğinin kullanımından kaynaklanan bir başka hata da, sunucunun bu durumda her zaman çoğunlukla dikey olan bir cihaz yönlendirmesi varsaymasıdır, ancak kullanıcı cihazı yatay konumda tutuyor olabilir.
• Ek olarak, bu web tasarımı, farklı cihazlarda farklı görünen birden fazla site nedeniyle kullanıcıların kafasını karıştırma eğilimindedir. Bu hatadan kaçınmak için markanızın görünüm ve hissinin tüm cihazlarda aynı olduğundan emin olun.

Uyarlanabilir web sitesi tasarımı, web sitelerinde sık sık değişiklik yapan büyük şirketler için çok uygundur. Bununla birlikte, gerekli olan karmaşık web sitesi kod kümelerinden sorumlu olmak için yetenekli bir profesyonel gereklidir.

Farklı bir mobil site oluşturma

Bu, web tasarımcısının, web sitesinin masaüstü sürümünden yapı olarak farklı olan farklı bir mobil site oluşturmayı seçebileceği üçüncü seçenektir. Bu, web sitesi sistemlerinin tüm mobil kullanıcıları algılayıp mobil olarak optimize edilmiş farklı bir web sitesine yönlendireceği şekilde çalışır ve bu genellikle m.example.com gibi ana alanın bir alt alanı olan başka bir alan adı kullanır.

Bu, yalnızca mobil kullanıcıların mobil siteyi görmesini sağlarken, tabletler, akıllı TV'ler gibi diğer cihazlarda bulunan kullanıcılar her zaman masaüstü sitenizi görür.

Bu yöntemin, kullanıcı deneyimini özelleştirmenize ve web sitesinin mobil sürümünü etkilemeden yalnızca masaüstü sitede değişiklik yapmaya karar verebileceğiniz için web sitesinde değişiklik yaparken kolay bir zaman sağlamasına olanak sağladığı için bazı avantajları vardır.

Ancak bu yöntemin, oluşturulan birden çok URL nedeniyle kendi aksaklıkları vardır ve bu, bir web sitesini paylaşmanın, web sitesinin mobil sürümü ile masaüstü sürümünüz arasında yeniden yönlendirme ve entegrasyonun dikkatli bir şekilde yapılmasını gerektirdiği anlamına gelir. Bu aynı zamanda web sayfalarının yüklenmesi için gereken süreyi de artırır.

Bu tür web sitesi tasarımının kullanımından kaynaklanan yaygın hatalar; hatalı yönlendirmeler, eksik açıklamalar ve tutarsız kullanıcı deneyimi.

2. Harika bir kullanıcı deneyimi sağlayacak bir web sitesi tasarlayın.

Harika bir web sitesi tasarımı, temel kurulum ve yapılandırmanın hemen ötesindedir. Pratik olarak mobil uyumlu bir web sitesi üç bölümden oluşur; hız, düzen ve içerik.

Düzen

En iyi mobil kullanıcı deneyimi için web sitenizin düzeni gerçekten öne çıkmalıdır. Dokunmaya duyarlı ve doğru yazı tipini kullanacak şekilde tasarlanmalıdır. Minimum set yazı tipi aslında 12 piksel ve daha küçük herhangi bir şey olmalıdır; mobil kullanıcılarınız web sitenizin içeriğini okumaya çalışırken zorlanacaklar.

Ayrıca web siteniz için doğru genişliği ayarlamalısınız. Normalde insanlar yukarıdan aşağıya kaydırmaya alışkındır, bu nedenle, kullanıcıların yana doğru kaydırmaya zorlandıkları durumlardan kaçının ve hepsinden önemlisi, fareyle üzerine gelinen açılır pencerelerin kullanımını en aza indirir, tahmine dayalı alt kısımlar her şeyi net bir şekilde etiketler.

İçerik

Web sitenizdeki mobil kullanıcı deneyimini geliştirmek için, kullanıcıları aşırı yüklemediğinizden emin olun, mümkün olduğunca doğrudan konuya gitmeye çalışın.

Ayrıca, mobil platformlarda uzun formları doldurmak çok zahmetli olduğu için, ödeme prosedürünüzü mümkün olduğunca basitleştirmelisiniz, bu nedenle dönüşüm oranlarınızı artırmak için ödeme prosedürünüzü kolaylaştırın. Bunu, Google cüzdan anında satın almayı veya ödeme sürecini basitleştiren diğer ilgili hizmetleri etkinleştirerek başarabilirsiniz.

Hız

Bunu, gerçekten hızlı yüklenen sayfalar oluşturarak başarabilirsiniz. Gomez tarafından yapılan araştırmaya göre, her çevrimiçi alışveriş yapan kişi bir sayfanın iki saniyeden daha kısa sürede yüklenmesini bekliyor ve bunların %40'ından fazlası web sitesini terk ediyor. Web sitesi tasarımınız, kitlenizi hayal kırıklığına uğratmamak için gezinmesi kolay olmalıdır, çünkü çoğu web sitesini geri dönme olasılığı olmadan terk edebilir. Web sitenizin kullanılabilirliğini geliştirmek için zaman ayırın. Bu şu yollarla sağlanır:

• Her sayfayı uygun şekilde adlandırmak. Her bir alt navigasyonun ana navigasyona karşılık geldiğinden ve aşırı kalabalık olmadığından emin olun.
• Web sitenizin logosunu web sitenizin sol üst köşesine yerleştirin. Bu, hedef kitlenizin site sahibinden haberdar olmasını sağladığı ve web sitesinin içeriğiyle ilgili olduğu için önemlidir. Ayrıca logonun web sitesinin ana sayfasına doğrudan bağlantı sağladığından emin olun.
• Arama işlevi sağlanmalıdır. Bu, ziyaretçilerin gerçekten aradıkları bilgileri kolayca bulmalarını sağladığı için çok önemlidir.
• İletişim bilgilerini ekleyin. İhtiyaç duyulduğunda sorularınız için sizinle iletişim kurmanın kolayca erişilebilir olduğundan emin olun.
• Çok fazla HTTP isteğini kolaylaştıran sayfa öğelerini azaltmak. Bunun nedeni, mevcut bant genişliğinin mobil kullanıcının masaüstü benzerlerinden daha hızlı gezinmesini sağlamak için güvenilir olmamasıdır.
• Görüntü ve dosya aşırı yüklenmesinden kaçının. Doğru görüntü boyutunun ve dosyanın doğru cihaza sunulduğundan emin olun.

Peki, neden web sitenizi daha mobil hale getirmelisiniz?

Bir web sitesi tasarlamak aslında büyük bir zorluktur ve genellikle web tasarımındaki profesyoneller bile hata yapar. Bu, her yıl yeni internet gadget'larının geldiğini fark ettiğimiz için teknolojik ilerlemeye bağlanabilir. İşte sizi web sitenizi mobil uyumlu hale getirmeye ve tüm kullanıcılarınızı mutlu etmeye zorlayacak bazı nedenler.

Kullanıcıyı düşünün. Müşterilerin web sitenizden beklentileri nelerdir? Herhangi bir zamanda ve herhangi bir yerde kullanmayı seçtikleri herhangi bir cihazda doğru şekilde çalışacak bir web sitesi beklerler. Tüm bunları sağlamazsanız, kötü bir kullanıcı deneyimi sağladığınızdan emin olun ve bu, getirilerinizi büyük ölçüde etkiliyor. Çoklu ekran stratejisi kullanmak, önümüzdeki yıl olağanüstü yüksek bir seviyeye ulaşması beklenen mobil web kullanıcılarının sayısının artması nedeniyle sizi rakiplerinizin önünde tutacaktır. Sonuç olarak, daha mobil uyumlu bir web sitesi, herhangi bir işletmenin başarısını sağlamak için bir zorunluluktur. Aslında, ekibinizi bir araya getirip gruplandırmanız ve işinize en uygun stratejiyi planlamanız gereken zaman, çünkü başkaları için işe yarayan şey sizin için çalışmayabilir, bu nedenle müşterilerinizin ilgisini çekecek ve onları memnun edecek bir web sitesi oluşturun.

Referanslar

Daha fazla bilgi için aşağıdaki siteleri ziyaret edebilirsiniz.

• google.com/think/multiscreen
• Developers.google.com/webmasters/mobile-sites/get-started