Bir zamanlar, şu an yaşadığım yerden yaklaşık bir saat uzakta, Photoshop comps ve sabit genişlikli düzenlerini seven bir web tasarımcısı çalıştı. Ve ben de, sonun bozulmasını istemem ama o tasarımcı benimdi.
Daha sonra, kendi işimi önemsediğim için, web tabanlı yaratıcı topluluk “duyarlı tasarım” olarak adlandırılan bu yeni kavram üzerinde çılgına döndü. Genç, parlak gözlü, gür kuyruklu bir profesyonelin yapacağı gibi, ben araştırdım. Sonuçta, en yeni, en son şey her zaman en azından geçen bir bakışta verilmelidir.
Ancak keşfettiğim şey beni dehşete düşürdü. Kötü bir beyni adlandırıldı Ethan Marcotte bir serbest bıraktı damstardly planı web tasarımcılarının daha çok çalışmasını sağlamak! Kitabı, “mobil kullanıcıları göz önünde bulundurmak” ve “web sitelerimizi olabildiğince çok platform üzerinde çalışmamız” konusunda nasıl güldürdüğü ve övgüyle karşı karşıya bıraktı.
Tabii ki elimden geldiğince direndim. Bu iyi ve akıllı iş geleneğine karşı sert ve cesurca savaştım; ama hiçbir şey için değildi. Sonra, mazeretlere geri düştüm: “Ama test etmek için herhangi bir mobil cihazım yok!” Ve bu, sevgili okuyucu, mesele. Birine kesinlikle ihtiyacın yok.
Zaman içinde, bir cep telefonu veya tablet olmadan kendinizi bulmanız gerektiğinde, bazı mobil tarayıcılarda her şeyin iyi görünmesini sağlayan web sitelerini tasarlamanıza yardımcı olacak birkaç temel yönerge geliştirdim.
… Küçük, içerik odaklı bir web sitesinden daha büyük bir şey inşa ediyorsunuz. Büyük web siteleri ve uygulama odaklı siteler kesinlikle gerçek mobil platformlarda test edilmelidir. Demek istediğim, muhtemelen, bunu başarabilirsin, ama tavsiye etmem.
Bilinmeyen değişkenlerle çalışırken, en iyi seçeneğiniz şeyleri aptalca basit tutmaktır. Evet, neredeyse klişe KISS kuralını çağırıyorum çünkü işe yarıyor.
Akıllı telefonlar ve benzeri bir raf olmadan, başkalarının bildiği şeye güvenmeniz gerekir. Neyse ki, daha popüler mobil tarayıcıların yeteneklerini inceleyerek ve birbirleriyle nasıl kıyasladıklarını incelemek için çok fazla zaman ve enerji harcanmıştır.
Hedef kitlenizin ne olduğunu öğrenin ve ardından hangi tür tarayıcıları kullandığını öğrenin. Her zaman olduğu gibi, Google senin arkadaşın. Sonra, tek yapmanız gereken istatistik için tasarım yapmak.
Mobil hedef pazarınızın bir çoğu, Android / iOS'u bir formda veya başka bir şekilde kullanıyorsa, şanslısınız demektir! Onların varsayılan tarayıcıları (ve Firefox gibi en popüler alternatifler) çoğunlukla modern. Gelişmiş düzen teknikleri, temel CSS3 efektleri, jQuery… bunların hepsi büyük ihtimalle makul şekilde iyi sonuç verecektir.
Ancak, hedef kitleniz diğer platformları kullanıyorsa, bunlar hakkında daha spesifik araştırmalar yapmalı ve neler yapabileceklerini ve yapamayacaklarını öğrenmelisiniz.
Şimdi, kullanıcılarınız hakkında çok az bilgiye sahip değilseniz ne yaparsınız? En azından nerede olduklarını anlamaya çalışın. Çoğu web sitesi, en azından kullanıcılarının büyük bir kısmının aldıkları genel bir bölgeye sahiptir. Bu bölge için istatistikleri alın.
Bunların hepsinin başarısız olması, en kötü durum senaryosunu tasarlar.
İşinizi biraz daha kolaylaştırmak için, daha popüler mobil tarayıcıların neleri desteklediğini ve desteklemediklerini oldukça detaylı bir şekilde karşılaştıran bir web sitesi buldum. Bir göz atın mobilehtml5.org .
Ve tabi ki, her zaman popüler olan caniuse.com
Bazı tasarımcıların, her projeye özgü özel kod oluşturarak küfür ettiklerini biliyorum, ancak kör olduğunuzda, konuşmak için, tekerleği yeniden icat etmek pratik bir seçenek değil. Daha önce mobil platformlarda test edilmiş olan çerçeveler, işlemden çok fazla tahminde bulunur.
Tahminler kötüdür. Bunu önlemek.
Şimdi, açıkçası, orada her çerçeveyi denemedim ya da test etmedim, bu yüzden yapmak istediğiniz şeyi yapan bir şeyi bulmanız ve onu araştırmanız ve onu istediğiniz mobil platformun yetenekleriyle karşılaştırmanız gerekir. Yine de, başlayabileceğiniz birkaç tane var:
Bunlar muhtemelen başınızın üst kısmına adını verebilecek olanlardır. Onların karmaşık karmaşıklığı ile karakterizedirler. Düzenleme sistemlerini, UI öğelerini ve jQuery eklentilerini tek bir güçlü pakette bir araya getirirler.
Bunların en ünlüsü çizme atkısı ve vakıf . Onları burada karşılaştırmakla uğraşmayacağım, daha fazla ayrıntıya ihtiyacınız varsa Google "Bootstrap vs. Foundation" devam edin. Şimdilik bilmeniz gereken tek şey, her bir çerçevede, her bileşenin oldukça geniş bir fan tabanı tarafından kapsamlı bir şekilde test edilmiş ve mobil kullanıma hazır olmasıdır.
Bunlar sizin için her şeyi yapmaya çalışmaz, ama sadece başlamak için yeterli verin. Bu, işleri özelleştirmeyi biraz kolaylaştırır, ancak daha karmaşık UI öğelerinin oluşturulması ve / veya şekillendirilmesi size bağlıdır.
Bu kategori şunları içerir iskelet , LESS Çerçeve 4 ve bunun gibi…
Bu aslında benim kişisel favori kategorim. Hazırda boş bir ekran ve bir mizanpaj sistemi ile başlamayı tercih ediyorum, bu da çok fazla CSS'nin üzerine yazmak zorunda kalmadan istediğim web sitesini oluşturmama veya herhangi bir çerçevenin belirli kısımlarını çıkarmaya çalışmamı sağlıyor.
Bu çerçeveler, çoğunlukla, düzen veya sayfa yapısıyla kendilerini ilgilendirmiyor gibi görünmektedir. Fantezi, mobil uyumlu uygulama arabirimi öğeleri eklemenin kolay bir yolunu sağlamak için tasarlanmıştır (read: widgets).
Sadece bir tanesini test ettim, ama araştırmalarım bu kategorideki en iyi üç (veya en azından en popüler) çerçevenin olduğunu söylüyor. jQuery Mobile , KendoUI ürünü , ve Wijmo .
Erişilebilirliğin sadece renk körü veya tamamen kör için değil. Eski mobil tarayıcıların birçoğu, tüm CSS ve Javascript kapalıyken taramayı çok istediği kadar sınırlı.
Bu durumda, en iyi bahsiniz, web sitenizin bu koşullar altında kullanılabileceğinden kesinlikle emin olmaktır. Bu güzel şeyleri kapatın ve kullanıcıların web sitesinin hedeflerini onlar olmadan elde edebilmesinin hala mümkün olduğundan emin olun.
Cihaz emülatörleri genellikle yüzde yüz doğru değildir, ancak düzen ve benzeri gibi en önemli şeyleri test edebilirsiniz. Karşılaştığım hatalar, web yazı tipi oluşturma gibi genellikle küçük şeylerdir. Endişelenme, gerçek donanım üzerinde iyi çalışmalılar.
Ama hangi emülatörleri kullanmalısın?
Bu biraz yavaş çalışır, ama bir çekicilik gibi çalışır. Tüm geliştirici setini indirmelisiniz, ancak sadece Android varsayılan tarayıcısını değil, tüm işletim sistemini yakından taklit eden bir programa sahip olmak iyi bir şey. Ayrıca, sitenizi çeşitli sanal “cihazlarda” test edebilirsiniz.
Bir diğeri temelde reklamı yapılan gibi çalışır. Onu indir, cihazını al ve git.
Firefox'un mobil içeriğinizi test etmek için çeşitli seçenekleri vardır. Birincisi, Mozilla'nın mobil Firefox projesinin render işlevini taklit eden basit bir emülatördür, kod adı: Fennec.
Basit, yeniden boyutlandırılabilir bir pencere sağlayarak aşırı karmaşık değildir, test etmek istediğiniz ekran boyutunu manuel olarak ayarlamanız size kalmış.
second option ikinci seçenek Firefox'un masaüstü sürümü için bir eklentidir. Firefox OS Simulator adlı dublaj, sadece tarayıcı (Android SDK gibi) ile oynamak için tam bir platform sağlar.
Test edemedim bu emülatör Çok büyük bir SDK yüklemeyi gerektirdiği için, yükleme en azından benim için, bu şekilde gönderildi. Yine de, kendi takdirine bağlı olarak test etmek için orada.
Blackberry bir dizi sunuyor BB10 için simülatörler. Belki de benim, ama hiçbirini koşturmada fazla başarı elde edemedim. İşlerini yapmak için yöneten herhangi bir kişiden haber almak isterim.
Son, ama kesinlikle en az değil, Apple bir ücretsiz iOS simülatörü Xcode'un bir parçası olarak Apple cihazlarını test etmek için kullanılabilir. Maalesef, Xcode'un bir parçası olduğu için sadece Mac.
Bütçeye sahipseniz (veya boş zamanlarını sınırlı bir şekilde test ederseniz), çok fazla yanlış olamazsınız. BrowserStack . Birçok masaüstü bilgisayarında ve çok çeşitli cep telefonlarında test yapmanıza izin verecekler. Gerçek şey kadar duyarlı değiller, düzen gibi şeylerle ilgili sorunları size gösterecekler.
Mobil tarayıcılar yakınlaştırma ayarları ile etrafta gezinme eğilimindedir veya bu nedenle deneyimlerim olmuştur. Web sitenizin, tarayıcı pencerenizi mobil boyutlara küçülttüğünüzde nasıl görüneceğini görmek istiyorsanız, belgenizin başına bu güzel HTML parçasını kullanın:
Şunu yeniden söyleyeyim: mobilde minimalizm kayalar. Minimalist estetik, daha az ince ayar ve ayarlamayla daha küçük ekran boyutlarına uyum sağlar ve bana çok zaman kazandırır. Belki de bu sizin bazılarınız için bir no-brainer gibi görünmüyor, ancak bunu yeterince vurgulayamıyorum.
Bu bilgi kolajı, elbette, buzdağının sadece görünen kısmı ve gerçek mobil donanımdaki web sitelerinizi gerçekten test etmek için bir eşleşme değildir, ancak başlamanıza izin vermeli ve bu cihaz laboratuarını elde etmek için mobil tasarımdan yeterince para kazanmalısınız. çok zengin hak ediyor.
Öne çıkan görsel / küçük resim, mobil cihaz resmi Shutterstock üzerinden.