En iyi 10 Responsive Web Tasarım Aracı

En iyi 10 Responsive Web Tasarım Aracı

by serkan, 1 Temmuz 2015

Mobile etkileşimin yaygınlaşması ve artık herkesin istediği anda istediği bilgiye erişebilmesi, web site sahiplerini de mobil arabirim kullanıcıları için çözüm üretmeye zorlamış ve web tasarım standartlarına “responsive” dediğimiz tanımı sokmuştur. Bu sayede tasarımın artık temel standartdı ve hatta ilk temeli olan motto doğdu “Mobile First”. Bu motto ışığında web tasarım ve tasarım sonrası uyumluluk test araçları hem tasarımcı hem de site sahipleri için vazgeçilmez oldu. Şimdi bizim vazgeçilmezlerimizden olan ve size de önerebileceğimiz en iyi 10 responsive web tasarım aracını sıralayalım;

1 – Gridset

İlk başta dahili bir araç olarak geliştirilen Gridset şu anda eksiksiz bir araç haline dönüşmüş durumda. Gridset, web tasarımcılarına ve geliştiricilere responsive tasarıma dayalı projelerde temel oluşturma özelliği taşıyor. Asimetrik, bileşenli, hareketli ve responsive ızgaralardan oluşan tasarım imkanı sunan Gridset, herhangi bir hesaplama yapmayı gerektirmeden responsive ara yüz prototip oluşturma imkanı sunuyor.

Alternatifleri: Frameless, Tiny Fluid Grid, Gridpak, SimpleGrid, Responsify, Responsive.gs,Golden Grid System ve Photoshop Grid for Responsive Design.

2- Bootstrap

Geliştiricilerin gündelik etkinlikleri yerine getirilmesi adına Twitter’daki iki geliştirici tarafından oluşturulan Bootstrap; web tasarım geliştirmeleri için şık, yenilikçi ve etkili kullanıcı ara birimi sunan bir araç olarak dikkat çekiyor. Bootstrap aracı 12 sütunlu responsive ızgara sistemi ve bileşenleri, farklı stiller ile JavaScript eklentilerinden oluşuyor.

“Customizer” özelliği ile tamamen son derece özgün tasarımlar oluşturulabilen Bootstrap aracı değişkenlerin, bileşenlerin, JavaScript eklentilerinin ve daha fazlasını özelleştirebilme imkanı sunuyor. Bootstrap responsive tasarım aracını tema ve ara yüz oluşturma araçları ile daha gelişmiş özellikler ile kullanabilmek mümkün.

Alternatifleri: Skeleton, Foundation, Base, InuitCSS, LESS Framework, Gridless, 320 and Up ve Gumby.

3- Adaptive Images

Adaptive Images responsive web tasarımı aracını görene kadar web sayfanızdaki resimlerin responsive ara yüz olarak kullanıcılara sunabilmeniz için “src” veya “noscript” etiketlerini kullanmanız gerekiyordu. Fakat bu işlem Adaptive Images aracı ile artık çok daha kolay. Tek bir htaccess dosyası, php sayfası ve ekran çözünürlüğünü algılayan tek bir satırlık JavaScript komutu ile responsive ara yüz olarak resimlerinizi web sayfanızda gösterebilirsiniz.

Alternatifleri: ReSRC.it, jQuery Picture, ResponsiveImg, Retina.js ve Retina Images.

4- Responsive Web Tasarım Arayüz Test Aracı

Responsive ara yüze sahip bir web sayfası oluşturmak her zaman oluşturmuş olduğunuz web sayfasının akıllı telefon ve tabletler üzerinde sürekli test edilmesini gerektirir. Farklı tarayıcılarda ve ekran çözünürlüklerinde son derece basit araçlar ile bu eylemi yerine getirebilirsiniz. Web sayfasının adres satırına girilerek belirli bir sayfanın responsive ara yüz testini gerçekleştirebileceğiniz araçların başında The Responsive Web Design Tool (http://mattkersley.com/responsive/) yer alıyor. 240 x 320 (küçük ekranlı cihazlar), 320 x 480 (iPhone), 480 x640 (küçük ekranlı tablet), 768 x 1024 (iPad-dikey) ve 1024 x 768 (iPad-yatay) çözünürlüklerinde test imkanı sunan aracın içerik genişliği bakımından mükemmel olmamakla birlikte oldukça işlevsel olduğunu söylemek mümkün.

Alternatifleri: Screen Queries, Screenfly, Responsivepx, Responsinator, Responsive ViewportResponsive.is, ve Resize My Browser.

5- FitText

Responsive ara yüz üzerinde resimlerin ekran çözünürlüğüne göre farklı boyutlarda kullanıcılara sunulması ekran çözünürlüğüne bağlı olarak etkin kullanılabilecek alanın değişiklik göstermesine neden olmaktadır. Tasarımdaki genel görünümün ötesinde metin ve yazı tipi ile ilgili detayları göz önünde bulundurmayı zorunlu hale getirdiğini söylemek mümkün.

Ortaya çıkan bu durumu çözmek için kullanabileceğiniz araçların başında FitText geliyor. Oldukça işlevsel jQuery eklentisi olma özelliği taşıyan FitText aracı ile web sayfasının metin görünümlerine ve yazı tiplere dilediğiniz gibi müdahale edebilirsiniz. Lettering.js veya herhangi bir CSS3 özelliği ile sorunsuz şekilde çalışan eklenti, başlık ve gövde metinlerini farklı ekran çözünürlüklerinde kullanıcıların en iyi şekilde görüntülemesini sağlıyor.

Alternatifleri: BigText, Lettering.js, Kerning.js, Kern.js, Type Butter ve Slabtext.

6. Respond.js

CSS3 eklentilerinden olan Media Queries güncel web tarayıcılarının neredeyse hepsinde sorunsuz şekilde kullanılabilmektedir. Fakat söz konusu sorguların IE8 ve daha önceki tarayıcı sürümlerinde desteklenmesi problem olmaktadır. Respond.js ile bu problem minimum ve maksimum genişlik komutlarının IE6, 7 ve 8 üzerinde kullanılabilmesi mümkün olmaktadır. 1 KB boyutundaki Respond.js eklentisini herhangi bir uygulama ile uyum problemi olmaksızın kullanılabilmektedir.

Alternatifleri: Modernizer, Adapt, Categorizr, CSS3 Media Queries ve Enquire.js.

7. Responsive Slides

Kod altyapısına oldukça az yük getirecek jQuery eklentisi ile tek bir sayfada responsive ara yüze uygun slaytlar oluşturabilirsiniz. Responsive Slides adındaki responsive ara yüz aracı IE 6 ve üzeri tarayıcı sürümlerinde sorunsuz şekilde kullanılabilmektedir.

Responsive ara yüze uygun slayt gösterisi oluşturmanın ötesinde oluşturulan slayt gösterilerinin tüm detaylarının sorunsuz şekilde kontrol edilebiliyor olması Responsive Slides aracının önemli bir özelliği olarak ön plana çıkmaktadır.

Alternatifleri: Flex Slider, Slides.js, PhotoSwipe, Supersized, Camera, RefineSlide, BlueberrySequence.js ve Galleria.

8. Wirefy

Düz, statik bir iskelet ziyaretçilerinize web sayfanızın responsive bir ara yüze sahip olduğunu göstermek veya ne tür işlevsellik sunulduğunu ortaya koymak adına pek kullanışlı bir yapı değildir. Bunun yerine hızlı değişkenlik gösterebilen bir iskeletin olması web sayfanızdaki içeriğin farklı platformlardaki tüm kullanıcılar tarafından içeriğinizin en iyi şekilde takip edilmesini sağlamada etkilidir.

Wirefy,16 sütunlu ızgara tabanlı kullanıcı ara birimi bileşenleri ve stiller ile etkileyici bir web sayfası iskeletinin temelini oluşturma imkanı sunan responsive web ara yüzü oluşturma araçları arasında yer alıyor.

Alternatifleri: Froont, Interactive Style Tiles, Responsive Sketch Sheets, Responsive Wireframe Template, Interface Sketch Templates, Responsive Device Diagrams, Wirify,Responsive Design Sheets, Responsive Wireframes, Webstiles, Responsive Design Sketchbook ve Style Prototypes

9. Responsive Tablolar

Responsive web ara yüzü tasarımında veri tablolarının problem haline gelebilmesi söz konusu olmaktadır. Responsive ara yüze göre normalden çok daha geniş ve karmaşık olabilen tabloların doğru şekilde anlaşılabilmesi ve kullanıcıların görmüş olduğu şeklin iyileştirilebilmesi için tıpkı responsive ara yüz gibi responsive tablolar oluşturulabilmesi gerekmektedir.

ZURB, basit bir JavaScript/CSS kombinasyonu ile responsive ara yüzde herhangi bir probleme mahal vermeden responsive tablo oluşturulma imkanı sunmaktadır. Son derece küçük respovsive-tables.js ve responsive-tables.css adındaki iki dosyadan oluşan eklenti ile kullanıcıların her türlü ekran boyutu ve platformda web sayfanızdaki tabloları en iyi şekilde takip edebilmesini sağlayabilirsiniz.

Alternatifleri: Responsive Data Tables, Stackable.js, Footable, Responsive Tables,Responsive Tables, Responsive SEO Friendly Data Tables, Responsive Approach for Data Tables ve RainbowTables.

10. FlevNav

Responsive web tasarımı artan akıllı telefon ve tablet kullanımı ile günümüz web dünyasının en önemli trendi haline gelmiş görünüyor. İçerik mimarisinin en iyi şekilde oluşturulması responsive web tasarımının yapı taşı olma niteliği taşıyor. Bu yaklaşım üzerine geliştirilen FlexNav aracı medya sorgulamalarını ve JavaScript kullanarak açılık menülerin oluşturulmasını mümkün hale getirmektedir. Dokunmatik ekranlar için optimize edilebilen uygulama menü boyutları başta olmak üzere alt menülerin en iyi şekilde oluşturulmasını sağlamaktadır.

Alternatifleri: TinyNav.js, Navigation Patterns for Responsive Design, MeanMenu, Responsive Solutions for Menu Navigation, jPanelMenu, Responsive Design Approach for Navigation ve Top Drawer.

Yorumunuz


Yorumunuz Var Mı?

Your email address will not be published Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

logobeyaz

The Doors

 

People Are Strange