BM ajansından yeni bir raporun olması sürpriz değil. Uluslararası Telekom Birliği , gelecek 9 ay içindeki insanlara göre gezegende daha fazla mobil abonelik olacağını tahmin etti. 'Akıllı telefon devrimi' kesinlikle bizim üzerimizdedir ve son yıllarda mobil web tasarımı patlamıştır.

Bu, web geliştiricilerinin işlerini rekabet etmek ve geleceğe dönük olarak korumak istemeleri durumunda mobil site tasarımıyla uğraşmak zorunda kalmaları anlamına geliyordu. Bunu akılda tutarak, geliştiricilere bir başlangıç ​​noktası vermek için bazı ipuçlarını bulmaya çalışıyorum, ilerlemeden önce akılda tutulması gereken bazı şeyler var.

Hızlı hareket eden teknolojiyi düşünün

İPad'in piyasaya sürülmesinden bu yana mobil cihazların ne kadar ileriye geldiğine hızlı bir bakış, mobil teknolojinin hızlı hareket eden, sürekli değişen bir endüstri olduğunu ve bu nedenle geleceğe yönelik tasarımı nasıl tasarlayacağınızı düşünmek konusunda akıllıca olacaktır.

Bu, bir şekilde sitenin birkaç yıl içinde yaşayabileceğinden emin olmak için son trendleri takip etmenin hayati önem taşıdığı anlamına gelir. Duyarlı tasarım, elbette, şu anda tüm öfke ve bu muhtemelen planınızın bir parçası olacak.

Ziyaretçilerinizin çoğunun akıllı telefonlar olacağını düşünmek güvenli olsa da, tüm isteklerinizi dikkate almaya değer değildir ve bu yüzden bunu tasarımda kullanmanız gerekebilir. Hedef kitleyi planlama aşamalarında araştırmaya değer, böylece kullanılan ortak cihazların yanı sıra kullanıcı davranışları ile de dikkat çekebilirsiniz.

Kullanıcı davranışından bahsediyor…

Mobil web ziyaretçileri, hareket halindeyken web sitelerine mutlaka erişemez ve bu akılda tutulması gereken bir şeydir. Çoğu zaman, mobil tarama beklerken yapılır; trende, arabada ya da evde koltukta.

Bu, tasarımı basitleştirmek için çok basit bir şekilde tersine çevrilebilir. İçeriğiniz dışında hiçbir şey barındırmayan bir çıplak kemikler siteniz varsa, bu, sitenizin gerçek kullanımdan çok fazla bir şey sağlamadığından ve büyük boyutlu bir banner reklamdan başka bir şey sayılmayacağından, bu kitleye karşı koyucu olabilir.

Bu günlerde cep telefonu, internette gezinmek için masaüstünden daha fazla olmasa da, tasarım süreci boyunca bunu aklınızda bulundurun ve sitenizin kullanımı kolay, ancak içerik açısından zengin olmasını sağlayın.

Mobil sitenizi optimize etme

Mobil web sitelerini optimize etmek de özellikle açılış sayfaları için hayati önem taşımaktadır, çünkü bunlar web sitesinin giriş noktasıdır. Bu, basit bir gezinme deneyimi, açık metin, kolay tek tıklamayla formlar ve ilgili meta bilgileri ve alt etiketleri vermek için, bir mobil web sitesinin kullanıcıyla birlikte göz önünde bulundurularak optimize edilmesi gerektiği anlamına gelir.

Dosya boyutları ağırlık cinsinden düşünülmeli ve açılış sayfalarına güçlü bir harekete geçirici mesaj eklenmelidir. Formları kullanmanız gerekiyorsa, bunları olabildiğince basit tutun, mümkün olduğunca az sayıda girdi alanıyla birlikte kullanıcının hayal kırıklığına uğrayıp gitmesine izin vermeyin.

Aynısı eylemler için de geçerli; Onları basit tutun ve sadece gerektiğinde kullanın. Süslü bir navigasyon sistemine sahip olmak güzel olsa da, kullanılamaz olması durumunda yüksek bir hemen çıkma oranı bekleniyor.

Düğmelerin kullanılması gerektiğinde, "başparmak testi" ni geçtiğinden emin olun, yani sizi istenmeyen bir sayfaya götürecek başka bir içeriğe çarpmadan parmağınızı kullanarak bir düğmeye basmanız gerekir.

Optimizasyon, duyarlı bir web sitesi oluştururken dikkate alınması gereken bir şeydir. Son zamanlarda, duyarlı tasarımın ağı nasıl yavaşlattığına ve esasen yanıt veren sitelerin ölümü anlamına gelip gelmeyeceğine dair birçok tartışma gündeme geldi. Ancak, sitenin her seferinde sitenin tam masaüstü sürümünü otomatik olarak indirmemesini sağlamak için bir siteyi hızlandırabilen koşullu yükleme teknikleri vardır.

CSS ve JavaScript kaynakları sıkıştırılmalı ve bu konuda yardımcı olacak çok sayıda açık kaynak yazılımı var. Örneğin, UglifyJS kodu sıkıştırmak için JavaScript ile kullanılabilir ve Pusula Çok fazla yaygara ve sıkı çalışma olmadan daha temiz işaretleme, sprite ve uzantılar oluşturmak için kullanılabilir.

Izgara ve kesme noktaları

Duyarlı tasarımı kullanırken, başlangıçta tanımlanacak en önemli şeylerden biri kılavuz ve sınır değerlerdir. Yine, çok sayıda var çevrimiçi araçlar Bu, sütunları ve genişliklerini ve oluklarını tanımlamanıza yardımcı olabilir.

Bazı geliştiriciler, çözünürlüklere göre kesme noktaları belirlemek ister, ancak piyasadaki pek çok mobil cihaz olduğundan ve çözünürlüklerin zamanla değiştiği için bu gerçekten de en iyi çözüm değildir.

Bu, kesme noktalarının çözünürlükten ziyade tasarım ve içeriğe dayalı olması gerektiği anlamına gelir. Kesme noktalarını ve ızgaraları test etmek için, tarayıcı penceresi, yeniden boyutlandırıldığında içeriğin nasıl davrandığını görmek için tasarım projesi sırasında kullanılabilir.

İdeal olarak doğal olarak akmalıdır ve bunu başarmak için ihtiyaç duyduğunuz kadar çok kesme noktası kullanabilirsiniz.

UI, uyumluluk ve yönergeler

Tüm mobil işletim sistemleri, bildiğiniz gibi aynı şekilde oluşturulmaz. Bu nedenle, örneğin Android ve iOS için oluşturulduğunda ve bunlarda kullanılabilen tarayıcılarda kılavuzlara bakmaya değer.

Kullanıcıların çeşitli işletim sistemlerinde taranacağını ve bazılarının eski sürümleri olacağını unutmayın. Bu nedenle, mobil web sitesinin geriye dönük olarak uyumlu olduğundan emin olun. Burada, kitlenin siteye hangi cihazlarda eriştiğini görebildiğiniz için, eğer varsa, ana site için analitiklere bakmak yararlı olacaktır.

Tabii ki, sitenin tamamlanmasını takiben analitiğe bakmak da gerekli değişiklikleri yapmanıza ve geleceği öğrenmenize yardımcı olacaktır.

İçerik, içerik, içerik

Şimdiye kadar hepimizin bildiği gibi, içerik yeniden web'in kralıdır ve bu yüzden içerik modülleri planlamak önemlidir. İçerik modüllerinin davranışı, kullanıcı gezinirken ve harekete geçerken gereken şekilde görüntülendiğinden emin olmak için tanımlanmalıdır.

Bu, modüllerin kendilerini nasıl sıralayacağını ve yeniden sıralayacağını belirlemek için bir masaüstü ve mobil ekran arasında geçiş yaparken içeriğin nasıl görüntülendiğine ve tanımlamanız gerektiğine işaret eder.

Bu bağlamda, bunu planlama aşamasında gerçekten sabitlemek gerçekten daha kolaydır. İçerik görüntülemeyi nasıl tasarlayacağınıza dair bir çizim yapın ve ardından bunun nasıl gerçekleştirilebileceği konusunda çalışın.

Ancak, her şeyi tanımlamak için fazla asılmamayı deneyin. Ana sayfalarınızın wireframe'lere ihtiyacı olsa da, her bir sayfanın bunu takip etmesi gerekmez. Ekran boyutları ve yönlendirmesi için bir ana set oluşturmak gerçekten yeterli olmalıdır.

Önce bir prototip oluşturun ve iyice test edin, tüm yönlerin ilerledikçe çalıştığından emin olun. Ayrıca, test yaparken kullanıcının akılda tutulması, navigasyonun basit ve tercihen maksimum üç kat olmasını sağlamak akıllıcadır. Teknolojik olarak düşünmeyen birini bulmaya çalışın, ancak siteyi test etmek için farklı cihazlar kullanır.

Sonuç

Mobil web tasarımı, müşteriye tam bir hizmet sunabilmek için tasarımcı olarak kavrama yapmak için gerekli bir sorundur. Hayattaki birçok şey gibi, en önemli yönlerden biri de, nasıl ilerleyeceğine dair net bir fikre sahip olmanız için plan yapmaktır.

Etkili planlama ve kullanıcının akılda tutulması, karşılaştığınız çoğu engelin üstesinden gelmenize yardımcı olacak ve kapsamlı testler geri kalanları alacaktır. Duyarlı, hızlı ve basit, mükemmel yararlı içerikle düşünün ve çok yanlış gidemezsiniz.

Öne çıkan görsel / küçük resim, mobil web resmi Shutterstock üzerinden.