Tasarımcılar İçin 50 Faydalı Duyarlı Web Tasarım Araçları
Son birkaç gün boyunca, sitenizde indirebileceğiniz ve kullanabileceğiniz en iyi WordPress ve Joomla duyarlı temalarından bazılarını gösterdik. Bugün sana vereceğiz aletler. Çerçeveler, hizmetler ve indirilebilen komut dosyalarından oluşan web sitesi, duyarlı web geliştirme söz konusu olduğunda harika bir yardımcı olacaklarını düşünüyoruz..
Tüm araç listesine girmeyi kolaylaştırmak için, bunları aşağıdaki bölümlere ayırdık:
- Izgara ve Altyapılar
- Çizim Sayfaları ve Tel Çerçeveler
- JavaScript ve jQuery Eklentileri
- Test ve Önizleme
- kaydırıcılar
- Diğerleri
Izgara ve Altyapılar
[Başa dönüş]
Columnal
Columnal, cssgrid.net'ten ödünç alınan bir Pulp + Piksel projesidir ve bazı kodlar 960.gs'den alınmıştır. Columnal, tarayıcı penceresi yeniden boyutlandırıldığında dinamik olarak değişmek üzere ızgaralarınızı esnek hale getirerek, duyarlı web tasarımınızda size çok yardımcı olur.
iskelet
Skeleton, basitliği ve verimliliği nedeniyle, çoğunlukla geliştiriciler ve tasarımcılar tarafından sevilen basit ve güçlü bir CSS çerçevesidir. Javascript ile ağır kaldırma işlemi yoktur, sadece temiz dokümantasyona sahip iyi ve saf CSS.
LessFramework 4
Daha Az Çerçeve, yaratıcısı adına az ya da çok bir çerçevedir. Yanıt veren web sitelerinin geliştirilmesini çok daha kolay hale getiren satır içi CSS ortam sorgularını kullanmaya dayalı uyarlamalı bir CSS ızgara sistemidir..
Anlamsal Izgara Sistemi
Anlamsal Izgara Sistemi, duyarlı ızgara düzenleri tasarlamak için kullanılır. Maksimum verimlilik sağlamak için LESS, SCSS veya Stylus gibi önceden işlenmiş CSS uzantılarını kullanır. Sütun ve oluk genişliklerini seçebilir, sütun sayısını seçebilir ve piksel ve yüzdeler arasında geçiş yapabilirsiniz.
Altın Izgara Sistemi
Golden Grid System, duyarlı web tasarımınızın başlangıç noktası olarak hizmet veren bir sıvı ızgara sistemidir. Web sitesinin 240 - 2560 piksel arasında değişen iyi görünümlü sayfalar sunmasını sağlar.
320 ve üstü
320 ve Up, bir CSS medyası, duyarlı tasarımınız için başlangıç şablonu olarak hizmet veren bir bulludur. Mevcut diğer birkaç boy levhadan tamamen ters bir yaklaşımı takip ediyor.
Inuit.css
Inuit.css, acemiler için bile kullanımı oldukça kolay olan bir CSS çerçevesidir. Minimalist bir yaklaşıma sahip, bu nedenle yalnızca ihtiyaç duyulan şeylerle başa çıkmanız gerekir, ancak gerekirse, bir avuç eklenti ile de genişletilebilir..
ızgarasız
Gridless, güzel tipografi ile duyarlı ve tarayıcılar arası web siteleri oluşturmak için bir kaynaktır. Bu araç, bir projenin ilerici gelişimine odaklanır ve herhangi bir tasarımın başlangıç noktasıdır..
1140 CSS Izgarası
1140 CSS Grid, Melbourne tasarımcı Andy Taylor tarafından tasarlanan ve tasarımınızın büyük monitörler için 1140 pikselde mükemmel şekilde uymasını sağlayan mükemmel bir CSS ızgara sistemidir ve akışkan düzeniniz çok az ekstra çalışma ile diğer küçük çözünürlüklere sorunsuz bir şekilde uyum sağlar.
1KBCSSGrid
Tyler Tate tarafından tasarlanan 1KB CSS Grid, basit ve hafif bir CSS Grid üreticisidir. Sütun sayısını, sütun genişliğini ve oluk genişliğini ayarlamanıza olanak tanır ve web siteleri kılavuzunuz için indirilebilir bir CSS alabilirsiniz.
çizme atkısı
Twitter'da Mark Otto ve Jacob Thornton tarafından oluşturulan ve bakımı yapılan bootstrap, web tasarım projelerinizde indirmeniz ve kullanmanız için ücretsiz olarak kullanılabilen mükemmel bir kullanıcı arayüzü elemanları, düzenleri ve javascript araçları kümesidir..
Sıvı Izgarası Hesaplayıcısı
Bu basit araç, akışkan ızgarası web sitesi tasarımınızın CSS'sini hızlı bir şekilde almanıza yardımcı olur.
Sıvı Izgaraları
Fluid Grid, 6, 7, 8, 9, 10, 12 veya 16 sütuna dayanan duyarlı düzenler oluşturan basit ama kullanışlı bir sıvı ızgara çerçevesidir..
Flurid
Flurid, 16 sütuna kadar basit ve çok kullanışlı bir çapraz tarayıcı CSS ızgara çerçevesidir. Üstelik pikselleri kenar boşluklarına gizlemiyor.
Gridset
Izgara seti, sütunlu, asimetrik, sabit, oran, bileşik, duyarlı ve daha fazlası gibi her tür ızgarayı yapmak için bir araçtır. Mark Boulton'ın bu aracı hala beta sürümünde, ancak umut verici olduğunu kanıtlıyor. Ve bahsettim mi, kullanmak bir link yerleştirmek kadar basit.
Gridpak
Gridpak, sütun, dolgu ve oluk sayısının değiştirilebileceği ve özel kesme noktalarının eklenebileceği, çevreye duyarlı bir ızgara üreticisidir. CSS, araç tarafından oluşturulur ve indirmeye hazır hale getirilir. Ayrıca, Photoshop'ta tasarım amacıyla kullanılmak üzere kullanılabilecek PNG ızgara şablonlarını da sağlar.
SimpleGrid
Michael Kuhn tarafından geliştirilen SimpleGrid, sonsuz ızgara tabanlı düzenler oluşturmak için çok basit ve basit bir CSS çerçevesidir. Varsayılan olarak, SimpleGrid 4 farklı ekran boyutu aralığı için hazırlanmıştır..
Susy
Oddbird tarafından Susy, Semantik Izgara Sistemine benzer eylemde. Ekstra işaretleme veya herhangi bir özel sınıf kullanmaz, ancak yalnızca Saas kullanıcıları ve uzantıları Compass kullanıcılarına yöneliktir.
Minik Sıvı Izgarası
Tiny Fluid Grid, web sitenizin ızgara sistemini etkileşimli bir şekilde belirlemenize yardımcı olabilecek harika bir web uygulamasıdır. Web sitenizin düzeninin sütun sayısını, cilt payı yüzdesini, minimum ve maksimum genişliğini ayarlayabilir ve bunun için indirilebilir bir CSS alabilirsiniz..
Değişken Izgara Sistemi
Değişken Izgara Sistemi SprySoft tarafından tasarlanıp geliştirilmiştir ve 960 Izgara Sistemine dayanır. Geliştiricilerin ve tasarımcıların özel ızgara oluşturmasını ve ardından beraberindeki CSS dosyasını bu ızgarayı indirmesini sağlar.
Çizim Sayfaları ve Tel Çerçeveler
[Başa dönüş]
Yanıt veren Web Tasarım Kroki Sayfaları
Bu araç, web sitenizin düzenindeki çeşitli öğelerin yerleşimlerini çeşitli aygıtlar arasında eşlemek için kullanışlıdır. Bu cihazın yardımıyla, bir web sitesinin gerekli unsurlarını farklı ekran boyutları ve çözünürlükleri için nereye yerleştireceğinize dair bir fikir oluşturabilirsiniz..
Duyarlı Wireframe
Duyarlı Wireframes, Adobe James Mellers tarafından oluşturulan deneysel bir araçtır. Duyarlı tasarımınızın çeşitli masaüstü ve mobil cihazların gerçek tarayıcılarında nasıl görüneceğini görselleştirmek için kullanabileceğiniz yalnızca HTML ve CSS (resim veya JS kullanılmamıştır) ile oluşturulmuştur.
StyleTiles
Stil Döşemeleri, bir web sitesinin nasıl görüneceğine dair bir fikir edinmenizi sağlar; oyuna giren karmaşık stillerden bağımsız olarak. Size mükemmel bir yanıt veren tasarım iş akışı ve müşteri geri bildirimlerini entegre etme imkanı sunar.
JavaScript ve jQuery Eklentileri
[Başa dönüş]
Adapt.Js
Adapt.js bir Javascript çözümüdür ve CSS medya sorgularına mükemmel bir alternatiftir. @Media yaklaşımını kullanmak iyi bir uygulamadır, ancak bu tüm tarayıcılar için işe yaramaz. 960 Izgara Sisteminin yaratıcısı Nathan Smith, bu sorunun üstesinden gelmek için çok hafif bir javascript kütüphanesi olan Adapt.js'yi yayımladı..
İzotop
İzotop, duyarlı bir tasarım tasarlarken çok yararlı olduğunu kanıtlayan inanılmaz bir jQuery eklentisidir. Tarayıcı penceresi yeniden boyutlandırıldığında veya ekran boyutu daha küçük olduğunda, yalnızca bir sayfanın öğelerini yeniden düzenlemekle kalmaz, aynı zamanda bu öğeleri filtrelemeye de yardımcı olur.
duvarcılık
Duvarcılık, dinamik ve uyarlamalı düzenler oluşturmak için kullanılan mükemmel bir jQuery eklentisidir. Bu eklenti, duyarlı tasarımınızdaki öğeleri yeniden düzenlemenize yardımcı olur, böylece ızgaradaki açık noktalara daha iyi uyum sağlarlar.
Respond.js
Respond.js, hızlı ve hafif (3 Kb küçültülmüş ve 1 Kb gzipped) komut dosyasıdır; temel amacı IE tarayıcıları gibi CSS3 Medya Sorgularını desteklemeyen sitelerde duyarlı web tasarımı sağlamaktır..
TinyNav.js
TinyNav.js, büyük gezinme listelerini daha küçük ekranlar için küçük açılır menülere dönüştüren yalnızca 362 baytlık küçük ve hafif bir jQuery eklentisidir..
Wookmark jQuery Eklentisi
Wookmark, tarayıcı penceresinin boyutunu algılayan ve sayfanın öğelerini otomatik olarak sütunlar halinde düzenleyen bir jQuery eklentisidir. Ayrıca sayfanın alt kısmında canlı bir önizleme görebilirsiniz..
Test ve Önizleme
[Başa dönüş]
ProtoFluid
ProtoFluid, web sitesi prototiplerinizi çeşitli ekran boyutlarında ve çözünürlüklerinde test etmenizi sağlayan web tabanlı bir prototipleme aracıdır. Sadece URL'yi girin, cihazı seçin (veya herhangi bir özel boyutta) ve başlat düğmesine basın. Web tabanlı bir araç olduğundan, FireBug gibi diğer uzantıları da kullanmanızı sağlar.
Responsive.Is
Responsive.Is, TypeCast tarafından duyarlı tasarımınızı test etmek için kullanabileceğiniz başka bir tarayıcı emülatörü aracı tarafından oluşturulur. Sadece bir URL yazın; seçtiğiniz cihaza bağlı olarak boyutunu otomatik olarak değiştirir.
Responsivepx.Com
ResponsivePx, duyarlı web sitesi tasarımınızı test etmek için harika bir araçtır. Onu diğerlerinden ayıran en önemli özellik, web sitesini piksel piksel yeniden boyutlandırma özelliğidir. Bu müthiş özellik, kesme noktalarını tanımlamanıza ve ayrıca CSS medya sorgularının sitenizde nasıl çalıştığını test etmenize izin verecek.
Yanıt veren Web Tasarım Test Aracı
Siz oluştururken ya da tasarlarken, duyarlı web sitenizi aynı anda çeşitli ekran boyutlarında aynı anda tek bir ekranda görüntülemenizi sağlayan harika bir test aracı. Bu aracı seviyorum, çünkü tüm ekran çözünürlüklerini yan yana gösteriyor, bu da hata ayıklamayı kolaylaştırıyor.
ReView.Js
ReView, saf JavaScript ile geliştirilen dinamik bir görünüm sistemidir ve bu sayede size yanıt veren Web tasarımınız için harika bir görüntüleme deneyimi sunar..
Screenfly
QuirkTools tarafından Screenfly, duyarlı web sitenizi çeşitli cihazlarda görüntülemenizi sağlayacak muhteşem bir araçtır: Masaüstü, Tablet, Mobil ve TV. Ayrıca kaydırmayı etkinleştirmek veya devre dışı bırakmak, hatta ekranı döndürmek için bile seçenekleri vardır.
Screenqueri.es
Screenqueri.es bir piksel mükemmel duyarlı tasarım test aracıdır. Kontrol etmek istediğiniz herhangi bir web sitesi adresini girmeniz yeterlidir; bu araç, web sitesini cihaza göre çeşitli ekran boyutlarında gösterir. Kesme noktalarını tanımlamak için piksel piksel boyutuna da elle yeniden boyutlandırabilirsiniz..
Sorumlu
Sitenizi, bir iPhone ve iPad'den Kindle'a ve Responsier'daki Android'de çeşitli cihazlarda test edin. Ayrıca sitenizi hem dikey hem de yatay modda gösterir. Sayfada görüntülenen cihazların ana hatları nedeniyle bu aracı daha çok seviyorum, bu da tüm işleme daha fazla anlam katıyor.
kaydırıcılar
[Başa dönüş]
Yabanmersini
Yaban mersini, özellikle akışkan veya duyarlı düzenler için çalışmak üzere yazılmış harika bir açık kaynak jQuery resim kaydırıcısıdır.
Elastislide
Tarayıcı penceresi yeniden boyutlandırıldığında veya daha küçük bir ekrandayken otomatik olarak ekran boyutuna ayarlanacak bir atlıkarınca mı istiyorsunuz? Elastislid, ihtiyaçlarınız için en uygun jQuery eklentisidir..
Duyarlı CSS3 Kaymak
Bu, herhangi bir ekran boyutuna ve ekran çözünürlüğüne kolayca uyum sağlayabilen saf, duyarlı bir CSS3 kaydırıcısıdır. Bu kaydırıcı ile ilgili güzel şey, aygıtın ekran boyutu yeterince küçük olduğunda okların kutunun içine girmesidir. JavaScript gerekmez.
ResponsiveSlides.Js
ResponsiveSlides.Js, sıralanmamış listeyi kullanarak hızlı bir kaydırıcı oluşturan çok basit ve son derece hafif (sadece 1Kb) bir jQuery eklentisidir. IE6 ve daha üstü tarayıcılarda da çalışır.
Diğerleri
[Başa dönüş]
Uyarlanabilir Resimler
Adaptive Images, ziyaretçilerin ekran boyutunu algılayan ve ekran boyutuna ve çözünürlüğüne bağlı olarak yeniden ölçeklendirilmiş görüntüler oluşturan, önbellekleyen ve sunan yanıt veren web tasarımı için çevrimiçi bir araçtır.
FitText.Js
FitText.js, tarayıcı penceresi yeniden boyutlandırıldığında metin ve başlıkların otomatik olarak yeniden boyutlandırılmasını sağlayan küçük bir javascript aracıdır. Gemide bu araçla artık metin boyutu uyumsuzluğu endişesi yok.
FitVid.Js
Tarayıcı penceresi yeniden boyutlandırıldığında veya cihaz daha küçük çözünürlükte olduğunda gömülü videoları yeniden ölçeklendirmek ister misiniz? FitVid.J'ler bunu başarmanıza yardımcı olabilir. Akışkan genişliğine sahip gömülü videoları elde etmek için kullanılan hafif, basit, kullanımı kolay bir jQuery eklentisidir..
Retina Resimleri
Retina Images, retina ekranında görüntülendiğinde otomatik olarak @ 2 kat daha büyük, yüksek çözünürlüklü görüntüler sunan harika bir javascript çözümüdür. Yapmanız gereken tek şey, her bir görüntünün yüksek çözünürlüklü bir versiyonunu koymak ve gerisini yönetecek.
Kesintisiz Duyarlı Fotoğraf Izgarası
Kesintisiz Duyarlı Fotoğraf Izgarası, resimler arasında hiçbir boşluk bırakmadan, tarayıcıda görüntüleri uçtan uca görüntüler. Fotoğraflar döşenir ve sayfa boyunca soldan sağa sütunlar halinde akarlar. Tarayıcı penceresi yeniden boyutlandırıldığında sütun sayısı buna göre ayarlanır.
SlabText
SlabText, kullanılabilir alanı doldurmak için her satırı yeniden boyutlandırmadan önce başlıkları satırlara bölen slabText algoritmasına dayalı Brian McAllister tarafından oluşturulan bir jQuery eklentisi veya aracıdır. Uygulamadaki FitText.Js eklentisine oldukça benzer..
Zurb - ResponsiveTables
Duyarlı tasarımdaki büyük veri tablolarıyla nasıl başa çıkacağınızı hiç merak ettiniz mi? Zurb, bir CSS / JS combo size cevap veriyor; veri tablolarını alır ve onları daha küçük ekranlı cihazlardaki duyarlı mizanpajı kırmayacak şekilde değiştirir.
Categorizr
Categorizr, çok küçük bir PHP betiğidir, ziyaretçilerinize daha hedefli bir web deneyimi sunar. Tablet, TV, Mobil veya Masaüstü için cihaza özel tasarımlar sunmanıza yardımcı olacaktır.
Medya Sorgusu Bookmarklet
Medya Sorgusu Yer İşareti, mevcut görünümün hangi boyutta olduğunu ve hangi medya sorgusunun bunun için kullanıldığını gösterir.
Duyarlı Hesap Makinesi
Duyarlı Hesap Makinesi, duyarlı web sitenizi tasarlarken pikselleri yüzdelere dönüştürmenize yardımcı olabilecek çok basit bir çevrimiçi araçtır.
Gelecek hafta
Bu serinin ikinci haftasında, sizi gerçekten Duyarlı Web Tasarımına (RWD) sokacak eğiticilere borçlu olacağız..
Kaçırmayın.
