Gerçekten Kolay Duyarlı Tasarım
Pek çoğunun duyarlı web’in geleceğe inandığı bir sır değil. Duyarlı bir site oluşturmak, mevcut olan birçok farklı tarayıcıya ve boyuta uyum sağlayabildiği anlamına gelir. Masaüstümde oluşturduğum web sitemin, minium kaydırma ve yakınlaştırma özelliğine sahip bir tablette görülebildiğinden emin olmak istiyorsam, duyarlı bir site oluşturmakla ilgileneceğim.
Duyarlılık sitelerinin popüler olmasının bir nedeni, sadece mantıklı olması. Cep telefonları ve tabletler için bir veya daha fazla ekstra site oluşturmaktan daha ucuzdur. Ayrıca cihazlar ve masaüstü ekranları arasında tutarlı bir görüntüleme deneyimi olduğundan emin olur. Tüm bir web sitesini görmek için pencerenizin boyutunu büyütmek veya yatay olarak kaydırmak eğlenceli değildir.
Duyarlı web tasarımları oluştururken, daha kolay hale geliyor, hatta daha hızlı gitmek için bazı yollar vardır. Bazı CSS ve HTML’ye teşekkürlerimizi sitemize kodlayabiliriz. Diğer elemanlar biraz daha fazla çalışma gerektirir. Her iki durumda da, duyarlı sitenizi minimum sıkıntı ve maksimum sonuçlarla bir araya getirmenize yardımcı olacak bir liste hazırladık.
jQuery eklentileri
İzotop
Isotope, CSS ve HTML tarafından yaratılamayan sihirli düzenler oluşturduğunu iddia eden bir jQuery eklentisidir. Bir kabın içindeki elemanları yeniden düzenleme yeteneğine sahiptir, böylelikle yeniden boyutlandırılırken içine sığar. Öğeleri kategorilere göre filtrelemek ve sıralamak için Isotope da kullanabilirsiniz.
Breakpoints.js
Kırılımcılar geliştiriciler ve tasarımcılar düşünülerek yapıldı. Farklı tarayıcı boyutları için kesme noktaları oluşturmanızı sağlayan bir eklentidir. Tarayıcınız bu boyutlardan birine yeniden boyutlandırıldığında, öğeler ekrana sığabiliyor.
FitText.js
Bu benim favori jQuery eklentilerimden biri çünkü fontlar için. Çok sık yanıt veren web tasarımında, insanlar manşetlerin belirli bir alana yuvarlanmak yerine yanıt vermesi gerektiğini dikkate almıyorlar. FitText bunu yapmanıza izin verir, ancak sadece başlıklar için kullanmayı unutmayın!
Response.js
Breakpoint.js fikrini beğendiyseniz ancak daha fazla özelleştirme istiyorsanız, Response.js yanıttır. JQuery'yi CSS ve HTML'den daha iyi bilen ve duyarlı web siteleri oluşturması gerekenler için gerçekten harika. Sınır değerlerinizi kullanırsınız, ancak cihaz boyutu, piksel oranları ve farklı boyutlar için farklı kaynakları yükleme yeteneği gibi çok daha fazla kişiselleştirme vardır.
TinyNav.js
TinyNav, tarayıcı yeniden boyutlandırıldığında menüleri açmak için listeleri kullanarak herhangi bir menü öğesini değiştirmenize izin veren hafif bir jQuery eklentisidir. Hangi menüleri değiştireceğinizin yanı sıra boyutları da belirleyebilirsiniz. Onun işlevinde geniş değil, ama ne için çok etkili.
Popüler çerçeveler ve sistemler
Duyarlı Izgara Sistemi
Bu sistem, bir kazan levhası veya çerçeve olmayıp, tasarımlarınızı duyarlı hale getirecek bir sistem olduğunu iddia ediyor. Belirli bir boyuta ya da belirli bir gridsize sınırlamadığı için en esnek olanlardan biri gibi görünmektedir. Kendi sütunlarını yüzebilen ve oluşturabilen farklı CSS sınıfları kullanırlar.
Altın Izgara Sistemi
GGS ayrıca bir sistemdir ve bir 'çerçeve' değildir. Web tasarımlarında belirli bir sayıda ızgarayı kullanmaya istekli olanlar için kendilerini bir başlangıç ya da rehber olarak görmekten hoşlanıyorlar. Ekranda 18 sütun veriliyor, ancak tasarımınızda 16 tane var. Kullanmak için kendi genişliklerinizi ve oluklarınızı hazırlayın ve esasen oradan gidin.
1140 Izgara Sistemi
Bir süredir, çoğu tasarımcı 960 piksel genişliğinde web tasarımları kullanıyordu. Sonra bu küçük oldu ve gittiler. Şimdi birçok tasarım 1140 piksel genişliğinde kullanılarak geliştiriliyor. Bu 1140 Izgara Sistemi, geniş genişlikte bir web tasarımında kullanılmak üzere 12 sütun oluşturmanıza izin verir.
Twitter Bootstrap
Bootstrap mevcut en popüler çerçevelerden biridir. Kullanılabilir çapraz tarayıcı (Internet Explorer 7 dahil) yapan ve el cihazlarında duyarlı bir şekilde kullanılabilen 12 ızgaralı bir çerçevedir. Kullanışlı ve sezgisel siteler oluşturmak ve kullanmak için çeşitli stil bileşenleri, tipografi ve JavaScript ile birlikte gelir.
SimpleGrid
SimpleGrid, ızgaralar fikrini alır ve basitleştirir. Çoğu ızgara sistemleri ve çerçeveleri ile, bu bilinmeyen sınıflara ve bilinmeyen sütunlara sahipsiniz. Basit ızgara, hangi sütunların ilk, orta ve son olduğunu belirten sınıflara sahiptir. Ayrıca, daha fazla sütun gibi görünmesini sağlamak için sütunlara farklı 'yuvalar' ekleyebilirsiniz. Bu çok basit ve anlaşılır bir çerçeve.
Diğer duyarlı araçlar
Duyarlı Web Tasarım Sketch Levhaları
Herhangi bir tasarımcı ya da geliştirici gibi, muhtemelen bunları yapmaktan önce tasarımlarınızı çizersiniz. Umarım yaparsın. Değilse, belki de bu RWD eskiz kâğıtlarını kullanarak başlamalısınız. Onlara her şeyi planlayabilmeniz için farklı aygıt ve masaüstü boyutlarıyla geliyorlar.
Duyarlı Tasarım Sketchbook
Kağıda çizim yapma fikrinden hoşlanıyorsanız, ancak tüm karantinalarınızı birleştirmek istiyorsanız, duyarlı tasarım taslağını almayı düşünebilirsiniz. Her sayfada çeşitli ekran boyutlarına sahip 50 sayfalık spiral bir şekilde gelir. Tüm ızgaralar ve matematik zaten sizin için yapıldı, bu yüzden yeni başlayanlar ve duyarlı tasarımda uzmanlar için harika bir araç.
Stil Fayans
Bu, web tasarımcıları için duyarlı tasarım için bir şey mi aradıklarını düşünmemek için güzel bir kaynaktır. Başlıkların (tipografi), logoların, renklerin ve diğer öğelerin eklenmesiyle bir web sitesinin özünü elde etmenizi sağlayan bir PSD. Bunun yanıt veren web tasarımı için kullanılmasının nedeni, herhangi bir boyut, sadece kısıtlama olmaksızın dijital bir fikir ima etmemesidir.
Duyarlı Hesap Makinesi
Piksel mükemmel duyarlı tasarımlar yaratmada bir ton matematik var. Matematiğinizin de doğru olması gerekir, çünkü farklı yüzdeler, genişlikler ve tarayıcı boyutlarıyla uğraşacaksınız. Yardım etmek için, işte size uygun matematik ve CSS'yi sunan bir hesap makinesi.
Sonuç
Duyarlı web’in ne yaptığının farkına varmamız zorunludur. Birçok müşteri, sitelerini çeşitli cihazlara sunmak isteyecek ve duyarlı siteler oluşturmak için daha uygun maliyetlidir. Ayrıca, çerçevelerinizin çoğu ve duyarlı tasarıma yönelik diğer kaynaklarınız, düzenli ve yüksek kaliteli, standart web sitelerinin oluşturulmasına yardımcı olur.
Duyarlı tasarımları başlatmak için en sevdiğiniz yöntemler hangileri? Güven ettiğin bir kaynağı kaçırdık mı? Yorumlarda bize bildirin.