Bir Mobil Web Sitenin Tasarımı ve Kurulumu

Günümüz dünyasında 5.9 milyar cep telefonu kullanıcısı olduğunu biliyor musunuz? Ve her geçen dakika bu sayıya 1000 kişi daha ekleniyor.

Online olarak harcanan toplam zamanın yaklaşık %40’ı bir mobil cihaz üzerinden yapılan işlemlerden oluşuyor.

Mobil Web site Tasarımı

Pek çok müşteri odaklı şirket, mobil platformun vaat ettiğini şimdiden görmüş durumda ve bu yönlenimde kendilerine mobil bir web site hazırladılar. Bugün mobil web site geçici olan bir moda değildir. Yakın bir gelecekte mobil sitelerin varlıklarını bir gereklilik olarak kanıtlayacağı tahmin ediliyor. Yeni İnternet standart olarak Google’ın mobil güncellemesinde iş yerleri için bir mobil web sitenin varlığını gereklilik olarak kıymetlendirmesi bekleniyor. Şu anda İnternet’te gezinen milyonlarca WAP mobil kullanıcısı var. Ancak cihazlarında doğru şekilde yüklenen tüketici odaklı mobil sitelerin sayısı konusunda aynı şeyi söylemek mümkün değil.

Mobil bir web sitesinin tasarımında uygulanması gereken özel prosedürler bulunmaktadır. Aşağıdaki makale, bir mobil web sitesinin nasıl tasarlanacağını ve inşa edileceğini öğrenmenize yardımcı olmak için hazırlanmıştır.

Mobil Web Site Kullanıcılarını Anlamak

Başarılı bir mobil web sitenin hazırlanması için ilk basamak ziyaretçi profilini anlamaktır. Mobil web site kullanıcıları genel olarak başka bir şeyi yapmakla meşguldür. Bir işlem için sırada beklemek, bir yere doğru yürümek veya arkadaşlar ile vakit geçirmek gibi. Ana odakları sizin siteniz değildir. Bu yüzden ihtiyaç duyduklarına hızlı ve kolayca ulaşabilmelidirler. Şayet bu gerçekleşmezse başka bir yerde aramak üzere sitenizi terk edeceklerdir.

Masaüstü kullanıcıları ile mobil kullanıcıları arasındaki temel farklılık mobil kullanıcıların İnternet’i gider ayak durumlarda kullanıyor olmaları iken masaüstü kullanıcılar daha öngörülebilir ve sabit ortamlarda bulunmaktadırlar. Bu durum, en başarılı sonuçlar için mobil web sayfa tasarımlarının erişilebilir, sezgisel ve çekici olması gerekliliğini doğurur.

Mobil Web Site Geliştirme Fiyatlandırma Paketleri

QUBE MEDYA’daki bilgili web geliştiricileri ve yaratıcı web tasarımcıları ekibimiz, web sitenizin en önemli çevrim içi varlığının mobil bir sürümünü oluşturabilir ve tasarlayabilir. Çok fazla deneyim ve yetenek sahibini tek bir yerde buluşturmuş olmak bize mobil cihazlar için tasarım yapmanın en iyi yollarını bilme yetkinliği sunuyor.


ÖZELLİKLERTEMELGELİŞMİŞGELİŞMİŞ / SEO ile
Daha fazla bilgi için, Bize Ulaşın..BaşlatBaşlatBaşlat
Daha fazla bilgi için, Bize Ulaşın..1,500 TL
Başlangıç Yatırımı Sonrası
2,000 TL
Başlangıç Yatırımı Sonrası
2,500 TL
Başlangıç Yatırımı Sonrası
Mobil sayfaların tasarımları ve oluşturulmaları
Mevcut website ile tutarlı tasarım ve markalaşma
Otomatik boyutlanma ve uyumluluk
Mobil ziyaretçileri yönlendirmek için verilen kodu yükleme
Email için tıkla işlevi
Aramak için tıkla işlevi
Mobil siteyi açma/kapama kabiliyeti
Lokasyon haritası
YouTube video eklentisi (uygulanabilir ise)
Google Analitik ziyaretçi takip eklentisi
Mobil site haritası geliştirme
Web Formu kurulumu-
Mobil için SEO--
Aylık Yatırım Geri Dönüşüm takibi için çağrı takip sayısı izleme200 TL / ay Ek Ücret ile200 TL / ay Ek Ücret ile200 TL / ay Ek Ücret ile
Özgün programlamaTeklif AlınTeklif AlınTeklif Alın
Veritabanı entegrasyonuTeklif AlınTeklif AlınTeklif Alın
Başlangıç Yatırımı1,500 TL2,000 TL2,500 TL

Bir Mobil Web Site’ye Nasıl Sahip Olabilirim?

Mobil cihazlar için optimize edilmiş bir site oluşturmak veya uyumlu web tasarımı ve mobil için en iyi uygulamaları öğrenmek mi istiyorsunuz? Şık, çekici ve sezgisel mobil web sitelerini nasıl tasarlayacağımızı biliyoruz. Mobil site tasarımı ve işiniz için bunu nasıl başarabileceğinizi öğrenmek için okumaya devam edin.

Mobil Web Sitesi Tasarımı Temel İlkeleri

İlk olarak, genel olarak masaüstü tarayıcıları için kullanılan web tasarım yöntemlerinin mobil cihazlarla uyumlu olmadığını bilmelisiniz. Sitenizin mobil bir cihazda iyi çalışabilmesi için W3C tarafından belirlenen bir takım yönergeler bulunuyor. Mobil web sitelerini oluşturmak ve erişilebilir kılmak adına bu tasarım yönergelerine uymalısınız. Bu kurallar, kullanıcı dostu bir mobil web sitesinin nasıl tasarlanacağı ile ilgili temel bilgileri sunmaktadır.

Cep telefonları bazen hızlı bir şekilde büyük miktarda veri indiremez ve mobil kullanıcılar sabırsız veya aceleci olma eğilimindedir. Dolayısıyla, mobil sitenizi hızlı yükleme ve yükleme süreleri göz önünde bulundurarak tasarlamak çok önemlidir. Mobil kullanım için bir web sitesi tasarlarken, hız neredeyse her zaman bir numaralı faktör olacak ve böylece ziyaretçileriniz hızlı bir şekilde ihtiyaç duyduklarına ulaşabilecekler.

Bir mobil web sitesi oluşturmak için en kolay yol, var olan sitenizi, duyarlı tasarım olarak adlandırılan, her ölçekteki mobil cihaz ve ekranlarla uyumlu çalışır hale getirmektir. Bunu yapmaya karar verirseniz, düzen, tasarım ve yapım açısından büyük değişiklikler olmasını bekleyebiliriz.

Mobil web erişimi için tasarım yapmaya girişmeden önce dikkat etmeniz gereken ilkeler

  • Maksimum uyumluluk sağlamak adına sitenizin mizanpajı için CSS kullanılmalıdır. Tablolar kullanmaktan kaçının.
  • Siteniz XML veya XHTML kullanarak kodlanmışsa, karakter kodlamanız UTF-8 olarak ayarlandığında, en kolayı kullanıma sahip olabilirsiniz.
  • Farklı mobil cihazların farklı ekran boyutlarına sahip olduğunu göz önünde bulundurmalısınız. Akılda kalacak “akıcı” bir düzen ile tasarlayın ve inşa edin.
  • Mobil kullanıcıların, site arama ve gezinme gibi sayfanın üst kısmında görmek isteyeceğiniz tüm önemli bilgileri kullanışlı bir mobil sayfa tasarımı oluşturmak için eklemeyi unutmayın. Bir mobil siteye göz atmak zaman gerektirebilir. Bu yüzden okuması zahmetli veya sıkıcı içerikten kaçınmak gerekir. Mobil site tasarımınızı tüketicileriniz için uygun hale getirin.
  • Parmaklar için tasarım. Tıklama hedefleri, minimum 30-40 piksel boyutunda olmalı ve tıklanabilirliği kolaylaştırmak için öğeler arasında boşluk kullanmalıdır.
  • İndirme zamanını göz önünde bulundurun. Bazı aydınlatma koşullarında okunabilirliği azaltabildikleri için arka plan görüntülerinden kaçının. Simgeler gibi daha küçük resimleri tek bir dosyaya birleştirin ve bunları sayfaya yerleştirmek için CSS kullanın. Bu, cihazınızın yapması gereken http isteklerinin sayısını azaltır. Son olarak, resimlerin boyutunu küçültün ve javascripti küçültün.
  • Formların, taşınabilir bir aygıtta kullanılması zor olabilir. Metin girmek zaman alacağından dolayı, kullanıcıya ihtiyaç duydukları şeyi seçebilecekleri radyo düğmeleri ve listeleri sunmak isteyebilirsiniz. Ayrıca, bir formun tamamlanması için kullanıcının geçtiği ekran sayısını azaltın. Alanı doğru kullanmak adına form etiketleri sola hizalanmak yerine üstte hizalanmalıdır.
  • Formlar, minimum miktarda veri girişi gerektirmeli ve kullanıcı bir daha ki sefer siteyi ziyaret ettiği sırada verileri hatırlamalıdır.
  • Çoğu tarayıcı eklentileri veya uzantıları desteklemez; bu nedenle, sitenizin düzgün görüntülenmesi için gerekli olmamalıdır.
  • Son olarak, “Az, Çoktur.” ifadesi, mobil tasarım için geçerlidir. Gereksiz grafikleri kullanmaktan kaçının.

Mobil Web Kullanıcı Profilini Tanımak

Mobil İnternet kullanıcısı sürekli hareket halindedir. Meşgul hayatına geri dönebilmek için hızlı bir bilgiye ihtiyaç duyar. Temel olarak, başka şeyler yapmakla meşguldür ve siteniz onun için öncelikli değildir. Ana odak noktası, şu anda görüntülediği web sitesi değil, bu nedenle aradığı bilgilerin hızlı ve kolay erişilebilir olması gerekiyor. Kısa dikkat süreleri, mobil web siteleri için tasarım sürecini gerçekten ciddi anlamda etkileyebilir.

Mobil web kullanıcılarını ve masaüstü web kullanıcılarını karşılaştırırken, onları birbirinden ayıran bazı önemli unsurlar vardır. Mobil web kullanıcıları sürekli “hareket halinde” durumundalar. Bir işleri için sırada duruyorlar, bir yerlere doğru yürüme sırasında cihazlarını kontrol ediyorlar. İşlerin nasıl gittiğini kontrol etmek için yalnızca bir iki dakika süren daha kısa süreli senaryolar içerisindeler. Uzun soluklu işler için orada değiller ve cihazlarını ceplerinden çıkardıkları kadar çabuk yerine koyuyorlar.
Masaüstü kullanıcıları çok farklı. Büyük ihtimalle, oturan veya durağan bir yerde öngörülebilir bir çevredeler. İki kullanıcı birbirinden çok farklıdır ve ikisi de çevrim içi olduğunda tamamen farklı tecrübeler arzu ediyorlar. Dolayısıyla, bu taleplerin her ikisini de karşılayan bir web sitesi tasarımı gerçek anlamda bir meydan okumaya dönüşebilir.

Mobil İçin Planlama Yaparken

Aslında bir mobil web sitesi tasarlamaya başlamadan önce yapmanız gereken birbirinden farklı çok şey var. İlk olarak, sizi doğru yöne yönlendirmeye yardımcı olacak birkaç temel konuya karar vermelisiniz.

  • Sitenizi kim kullanıyor?
  • Kullanıcılarınız sitenize geldiklerinde ne yapıyor?
  • Sitenize nereden erişiliyor?
  • Siteniz hangi zaman aralığında erişiliyor?
  • Kullanıcılar neden sitenize geliyor?

Buradaki hassas işlem, web sitesinin ana odak noktasını netleştirmek ve bunu belirgin ve erişilebilir kılmaktır. Mobil bir web sitesi tasarlamak, mobil web kullanıcısının görmek için geldiklerini – ana odak noktasını bulmasını kolaylaştırmak zorunda olduğunuz anlamına gelir.

Mobil Web İçin Kullanıcı Dostu Rehberlik

Parmaklar İçin Tasarla

Mobil web kullanıcıları genellikle bir fare veya klavye kullanmazlar. Bunun yerine, mobil web gezintisi için parmaklarını kullanmaları gerekir. Detayda ise büyük parmaklar, küçük parmaklar, ıslak parmaklar ve sıska parmaklar kullanıyorlar. Herkesin parmakları farklı! Kolay olmayabilir, ancak mobil web sitenizi tasarlarken bu farklı parmak tiplerini göz önünde bulundurmanız gerekir. Mobil web sitesini tasarlarken düşünmeniz gereken birkaç çeşit parmak ucu için işte size birkaç ipucu:

  • Parmak uçları genellikle 40 ila 80 piksel genişliğindedir ve tıklama hedeflerinin minimum 30 ila 40 piksel boyutunda olması gerekir. Bu küçük düğmeler ve bağlantılar gerçekten hareket ettirmek için sinir bozucu olabilir ve hareket halindeki mobil kullanıcıların bunun için zamanı yoktur!
  • Fareyle üzerine gelme (hover) etkinliklerini kullanmaktan kaçının – etkin (active) etkinlikler, kullanıcı deneyimi için daha faydalıdır ve bir parmak ucunun beklediği şekilde işlev görür.
  • Boşluklar iyidir! Daha fazla boşluk kullanmak, tıklanabilir öğeler arasındaki boşluğu arttırır ve yanlış tıklamalardaki bir mobil kullanıcının yaşayacağı hayal kırıklığını azaltır.

DİKEY KAYDIRMA İÇİN OPTİMİZE EDİN

Dikey kaydırma, web siteleriyle olan geçmiş deneyimlerine dayanarak kullanıcılar için doğal bir davranış haline geldi. Son derece tabii olan bu özellik mobil web kullanıcılarının da doğal beklentilerinden olan bir kullanım şekli. Kullanıcılar genelde yatay kaydırma yerine dikey kaydırmaya alışkınlar ve bu alışkanlık kullanıcıların mobil web sitenizdeki içeriği kaçırma ihtimalini de azaltan bir fayda sağlıyor.

Mobil web sitelerini basit biçimlerde (listeler gibi) tasarlamak, dikey kaydırmanın site ziyaretçileri için kolay ve kullanımı kolaylaştırılmasına yardımcı olur. Bu, ziyaretçilere, küçük metin, fotoğraf veya düğmelerdeki bağlantıları hedeflemeden, sitenizdeki içeriğe hızlıca dokunabilmelerine olanak tanır.

İNDİRME ZAMANINI GÖZ ÖNÜNDE BULUNDURUN

İndirme zamanları, mobil web kullanıcısı için çok önemlidir. Unutmayın, kısa dikkat süreleri vardır. Hızlı ve kolay bir şekilde bilgiye ulaşabilmek isterler. Büyük görüntüleri beklemek için zamanları yok! Bunu göz önünde bulundurarak, büyük arka plan görüntülerinden kaçının. Arka plan resimleri yalnızca indirme sürelerini artırır ve belirli ışık koşullarında okunabilirliği azaltabilir. Düzenli görüntüler için küçük resimleri tek bir dosya olacak şekilde birleştirmeyi düşünebilirsiniz. Daha sonra bunları mobil web sitesinde doğru bir şekilde konumlandırmak için CSS kullanabilirsiniz. Harici stil sayfalarını ve javascript’i doğru bir şekilde kullanmak yükleme sürelerini kısaltmanıza da yardımcı olabilir.

Bir mobil site tasarlamak isterseniz, her şeyi ısırık boyutunda tutmanız önemlidir. Bu web sitesi metni için geçerlidir, ancak kullanıcıların telefonlarının indirmesi gereken içerik için de geçerlidir. Mobil bir web sitesinin nasıl tasarlanacağını düşündüğünüzde, web sitenizin alan verimliliği ne kadar yüksek olursa, o kadar hızlı indirir ve o kadar erişilebilir olacağını unutmamak önemlidir.

MOBİL FORMLAR

Mobil web sitenizin kullanıcılarının, mobil cihazları akılda tutarak tasarlanmış olan mobil formları kullanarak gerekli düzenlemeleri yaptığınızdan emin olun. Mobil form tasarım ipuçlarınız için işte size bir kontrol listesi:

  • Doğal web formu kontrollerini kullanmak çok önemlidir, çünkü kullanıcının bu konuda belli bir alışkanlığı vardır.
  • Form doldurmak için ziyaret ettikleri ekran sayısını en aza indirin. Mobil kullanıcılar orada ne kadar uzun süre kalırsa, form doldurmadan önce ayrılma olasılığı da o kadar yüksek olacaktır.
  • Mobil kullanıcılar yanlış girdikleri bir şifreden nefret eder. Onlara bir seçenek kutusuyla şifre karakterlerini görüntülemelerine izin verin ve bu, yalnızca şifrelerini doğru yazamadığı için vazgeçen mobil görüntüleyenlerin sayısını azaltacaktır.
  • HTML5 form giriş türlerini (e-posta, URL, sayı, aralık, tarih toplayıcılar, arama, renk) kullanmak, mobil web ziyaretçisinin tamamlayıcı şekillerini de destekler.
  • Yanda hizalı form etiketleri kullanmayın. Bu, çok fazla ekran alanı kaplar ve dikey kaydırma optimizasyonu ile aynı hizada değildir. Bunun yerine, tüm form girişleriniz için üstten hizalı etiketler kullanmayı tercih edin.
  • Mümkün olduğunda kullanıcının girmesi gereken veri miktarını en aza indirin. Verilerin girilmesi, web sitelerinin kesin verilere ihtiyaç duyması nedeniyle kullanıcının girişi üzerinde yoğunlaştırmasını gerektirir. Bu, kullanıcıdan mümkün olan birkaç farklı yolla daha az veri istemek anlamına gelir. Bir başka yöntem, mobil web kullanıcısının daha önce girdiği verileri basitçe hatırlamaktır. Ayrıca, klavye üzerinde bilgi girmekten daha kolay seçilebilen giriş alanları yerine açılır menüleri de kullanabilirsiniz. Ayrıca, mümkün olduğunda otomatik olarak veri toplamak kullanıcıya çok fazla zaman kazandırabilir.

ÇEŞİTLİ KURALLAR

Unutmayın, çoğu mobil tarayıcı eklentileri veya uzantıları desteklemez. Bunların kaldırılması kullanıcıların katılımını artıracak ve site düzgün şekilde çalışacaktır. Arama kutuları ve navigasyonun belirgin ve kolay bulunur olması gerekir; çünkü kullanıcılar genelde mobil web sitelerindeki yerlerini ezbere biliyor olurlar. Daha azı daha fazla. Bu nedenle gereksiz grafiklerden mümkün olduğunca kaçının ve ana noktaya odaklanmayı tercih edin. Bir mobil site oluşturmak için herhangi bir mobil site tasarımcısı için iyi ve pratik bir rehber olarak kendinize şu soruyu sorun: “Siteniz az veya hiç CSS ile kullanılabilir durumda mı?”

Mobil Bir Web Site Nasıl Oluşturulur?

Bir mobil siteye sahip olmanın avantajlarını gören biri misiniz? Mobil web tasarımı için bir takım bilgilere ve birikime gereksinim vardır. İşte başlarken dikkat etmeniz gereken bazı mobil web sitesi tasarım kuralları!

Mobil bir web sitesi oluşturmak, tam ölçekli bir web sitesi oluşturmakla çok benzerdir. Her ikisi de HTML, CSS ve Javascript kullanır ve en sevdiğiniz web geliştirme aracıyla oluşturulabilir. Çoğu mobil tarayıcı, HTML5 ve CSS3’ü de desteklemektedir. Ancak, mobil bir cihazda görüntülenmesini sağlamak için mobil sayfaya eklenmesi gereken birkaç şey de aşağıda belirtilmiştir.

Tarayıcının sayfanın bir mobil tarayıcıda görüntülenmeye hazır olduğunu bildirmesi için web sayfasının <head> bölümünde birkaç etiket gereklidir:

<meta name=”HandheldFriendly” content=”True”>
<meta name=”MobileOptimized” content=”320″>
<meta name=”viewport” content=”width=device-width”>

Ayrıca, web sitenizin hangi cihaz türünü siteyi görüntülemeye çalıştığını tespit etmesini istiyorsanız, gelen cihazı algılayan ve web sitesi düzenini buna göre değiştiren bir php betiği oluşturmanız gerekecektir. Mobil kullanım için bir web sitesi tasarlamak istiyorsanız o noktada birçok kullanılabilir çözüm bulunmaktadır ve bunlara Google aramasıyla ulaşabileceğiniz bilgilerdir. En önemli şey, komut dosyalarını bir cihaz listesindeki (iphone, android, windows vb.) herhangi birine adanmış olarak yaratmamaktır, daha çok hangi cihazın sayfayı görüntülediğini algılayarak uyumlanmak kesinlikle daha faydalıdır. Mobil cihazlar gelir ve gider ve her yeni gelen için listeleri güncellemek bir süre sonra sıkıcı ve yorucu hale gelebilir.

Mobil web sitenizi, tüm mobil cihazlarda aynı şekilde görüntülemek zor olacaktır. En iyi çözüm, mobil web sitenizi mümkün olduğunca temiz ve basit tutmak ve daha eski mobil cihazlar için tasarım ve işlevsellikte geri düşme seçenekleri bulunduğundan emin olmaktır.

Mobil ve Duyarlı Tasarım Kaynakları

Smashing Magazine, mobil web siteleri oluşturma hakkında bilgi edinmek için kullanabileceğiniz harika bir kaynak listesine ve cep telefonları ve tabletler gibi mobil cihazlar için geliştirilirken uyulması gereken kurallar bilgisine sahiptir. Mobil cihazlar için bir web sitesinin nasıl tasarlanacağına dair bazı ilave tavsiyeler arıyorsanız, sizin için mükemmel bir kaynak olabilir.

Görebileceğiniz gibi, bir mobil web sitesi tasarlarken ve oluştururken göz önüne alınması gereken çok şey var. Mobil tasarımın ilkeleri, geleneksel web sitesi tasarımından farklıdır. Yeni kodlama uygulamaları öğrenmek için zamanınız ya da sabrınız yoksa, mobil web sitesi tasarımı konusunda uzmanlaşmış bir QUBE Medya Hizmeti almayı düşünebilirsiniz.

Web sitenizle mobil cihazlara hazır mısınız? Bize Ulaşın..