Duyarlı web tasarımı için 50 harika araç

Yazar: Monica Porter
Yaratılış Tarihi: 17 Mart 2021
Güncelleme Tarihi: 17 Mayıs Ayı 2024
Anonim
🔴 282.canlı - Stokta PATLAYAN Hiç Satılmayacak PS4 Oyunlarının Satışı
Video: 🔴 282.canlı - Stokta PATLAYAN Hiç Satılmayacak PS4 Oyunlarının Satışı

İçerik

Ethan Marcotte tarafından hem "Duyarlı Web Tasarımı" makalesinde hem de en çok satan kitabında tanıtıldığı / icat edildiği üzere, bir siteyi duyarlı hale getirmek için birinin üç öğeye ihtiyacı vardır:

  1. Esnek / akışkan bir ızgara
  2. Duyarlı görüntüler
  3. Medya sorguları

Duyarlı web tasarımıyla ilgili nedenleri, kavramları ve teknikleri ele alan çok sayıda başka harika makale var, bu nedenle bu makalenin odak noktasını sorumlu bir şekilde duyarlı olmanıza yardımcı olacak bazı en iyi araçlar üzerinde tutacağız.

Başlamak için araçlar

Sitenizi oluşturmaya başlamadan önce, sayfadaki öğelerin, görüntülenecekleri çeşitli cihazların farklı tarayıcı boyutlarına nasıl uyacaklarını belirlemek ve genellikle öncelikle düşünmekten kaynaklanan bağlantı kesintilerini önlemek en iyisidir. masaüstü tasarımı ve yanıt veren yinelemelerin geri kalanı sonradan düşünülmüştür (özellikle Stephanie (Sullivan) Rewis'in yorumuna bakın).

01. Duyarlı Web Tasarımı Eskiz Sayfaları

Jeremy P Alford'un hazırladığı bu duyarlı çizim sayfaları seti, sayfa bölümlerinin farklı çözünürlüklerde nasıl değişeceğini haritalandırmaya başlamak için harika bir başlangıç ​​noktasıdır.


02. Duyarlı Tasarım Eskiz Defteri

Tüm eskizlerinizi tek bir yerde tutmayı tercih ediyorsanız, o zaman App Sketchbook şirketi tarafından hazırlanan bu tel ciltli 50 duyarlı eskiz kitabını düşünmek isteyebilirsiniz.

03. Duyarlı Tel Kafesler

Duyarlı web siteleri oluşturmanın zorluklarından biri, duyarlı tasarımın nasıl çalışacağını göstermek için tel çerçeveler kullanmaktır. Adobe'den James Mellers, karmaşık mizanpajların duyarlı tel çerçevelemesinin nasıl çalıştığını göstermek için bu deneysel aracı bir araya getirdi.


04. Çok Aygıtlı Yerleşim Kalıpları

Duyarlı bir tasarım planlarken, diğer insanların sizden önce ona nasıl yaklaştığını görmek yararlıdır, bu nedenle Luke Wroblewski'nin popüler kalıpları örneklerle birlikte listeleyen Çok Aygıtlı Yerleşim Kalıpları, başlamak için harika bir yerdir.

05. Stil Fayansları

Samanatha Warren'ın Stil Fayansları, duyarlı çağda tasarım için yeni bir teknik önermektedir; Bunlar, sabit genişlikte tasarım örneklerinden ziyade, genel tasarım yaklaşımını ayrıntılı ayrıntılara girmeden gösteren renk örnekleri veya ruh hali panoları gibidir.

Esnek / akışkan bir ızgara için araçlar

Daha önce belirtildiği gibi, duyarlı tasarım için gereken ilk bileşen esnek / akışkan bir ızgaradır.Aşağıdakiler önceden oluşturulmuştur: Bunları indirmeniz yeterlidir ve hızlı bir şekilde daha duyarlı bir siteye doğru yola çıkarsınız.


06. Altın Izgara Sistemi

Less Framework'ü de geliştiren Joni Korpi, kısa süre önce duyarlı tasarım için güvenilir bir grid sisteminin bu yeni sürümünü yayınladı. 16'dan sekize, dört sütuna kolayca uyum sağladığından "katlama" olarak kabul edilen Altın Izgara Sistemi, test için sayfalarınızdaki ızgarayı ortaya çıkaran küçük bir tarayıcı katmanına da sahiptir.

07. Foldy960

Paravel, Inc.'deki yetenekli beyler, duyarlı projelerinin temeli olarak kullandıkları değiştirilmiş 960.gs ızgarasını yayınladı.

08. SimpleGrid

Conor Muirhead imzalı SimpleGrid, hızlı yanıt verme özelliğiyle oluşturulmuştur, bu nedenle duyarlı web sitesi projenizi kurmak ve çalıştırmak kolaydır.

09. 1140px CSS Izgarası

Bir başka harika duyarlı grid sistemi, geniş bir masaüstü çözünürlüğünden mobile kadar uzanan, Melbourne tasarımcısı Andy Taylor imzalı 1140px CSS Grid'dir.

10. Sütunlu CSS ızgara sistemi

Pulp + Pixels, diğer adıyla kreatif direktör Nick Gorsline tarafından oluşturulan Sütunlu ızgara sistemi, 1140 piksel ızgara sistemine dayanıyor, ancak eskiz sayfaları ve tel çerçeve şablonlarının yanı sıra CSS hata ayıklama stilleri içeren bir tasarım kiti gibi bazı ekstra özellikler içeriyor.

11. Anlamsal ızgara sistemi

Sass ve LESS gibi önceden işlenmiş CSS uzantıları giderek daha popüler hale geliyor ve Tyler Tate'in Anlamsal ızgara sistemi, bunları gereksiz sınıflar veya öğeler kullanmadığını iddia eden bu ızgara sisteminde maksimum etki için kullanıyor. Coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/ adresinde daha fazlasını okuyun.

12. SUSY

Semantik ızgara sistemi gibi Oddbird'ün SUSY'si de fazladan işaretleme veya özel sınıflar kullanmayan bir ızgara sistemi yarattı, ancak SUSY yalnızca Sass (ve onun uzantısı Compass) kullanıcılarını hedefliyor.

13. Gridpak

Gridpak, Erskine Design tarafından, piyasadaki en yeni duyarlı şebeke üreticilerinden biridir. Sütunlarınızı ve oluklarınızı bir dizi kesme noktasında ayarlamanıza olanak tanır, ardından tüm ekibinizin aynı başlangıç ​​noktasından çalışması için CSS, JavaScript ve PNG dosyaları çıkarır.

14. Izgara kümesi

Bunu yazdığım sırada henüz yayınlanmadığı için Gridset üzerinde hala hafif bir gizem havası var. Ancak Mark Boulton Design'ın aracı, ısmarlama, kuralcı olmayan ızgara sistemleri ve ızgaralarınızı çevrimiçi kaydetme ve yönetme yolu vaat ediyor.

15. RWD için daha iyi bir Photoshop ızgarası

Elliot Jay Stocks, eski 960px fiili ızgara standardını terk etmeyi ve bunun yerine 1000px tabanından çalışmayı önererek tüm yüzde hesaplamalarının daha kolay çalışılmasını sağlıyor. Kabul ediyorsanız, çalışmaya başlamanız için bir PSD yaptı.

16. Akışkan Izgaralar

Tasarımınız son derece uzmanlaşmışsa ve kendi özel ızgaranızı oluşturmanız gerekiyorsa, bunu .net Ödülleri parlak yeni aday Harry Roberts’ın sıvı ızgara hesaplayıcısı ile yapabilirsiniz.

17. Duyarlı Hesap Makinesi

Başka bir piksel yüzdesi hesaplayıcısı, ancak Stu Robson tarafından yapılan bu, sizin için tüm CSS kurallarını oluşturarak diğerlerinden bir adım daha ileri gidiyor, yani bunları stil sayfalarınıza kopyalayıp yapıştırabilirsiniz.

Duyarlı görüntüler (ve metin) için araçlar

Duyarlı web tasarımının bir diğer önemli bileşeni de akıcı görüntülerdir. Akıcı görüntüler elde etme tekniği basit olsa da, farklı cihazlar için performansı ve sayfa yüklemesini optimize etmek, duyarlı web tasarımındaki en büyük zorluklardan biri gibi görünüyor. İşte bu soruna yaklaşmak için bazı kaynaklar.

18. Duyarlı Görüntüler

Filament Group, ekran çözünürlüğüne dayalı olarak uygun boyutta bir görüntü göndermenin bir yolunu tasarladı. Duyarlı ve sorumlu bir şekilde ölçeklenen mobil öncelikli görüntülerle yapılan bu deney, başvurulacak farklı boyutlarda iki görüntünün olmasını gerektirir.

19. Uyarlanabilir Görüntüler

Matt Wilcox, herhangi bir ekstra işaretleme gerektirmeden kullanıcının cihazına uygun görüntüleri sunmak için PHP ve biraz JavaScript kullanan Uyarlanabilir Görüntüler oluşturmak için Duyarlı Görüntüler aracından ilham aldı.

20. Sencha.io Src (eski adıyla Tinysrc)

Sencha, talep eden cihazın boyutuna göre barındırılan görüntülerin optimize edilmiş sürümlerini gönderen bir bulut hizmeti sağlar. Nasıl kullanılacağını öğrenmek için docs.sencha.com/io/src/ adresine bakın.

21. Metni Sığdır

Paravel, Inc'in bir başka cevheri de, tasarıma ve cihaza duyarlı başlık web türünü yapmak için bir jQuery eklentisi olan FitText.js'dir. Ayrıntılar için trentwalton.com/2011/05/10/fit-to-scale/ adresine bakın.

22. slabText

FitText ve SlabType algoritmasından esinlenen Brian McAllister'ın slabText'i, tanımlanmış bir genişlikte tutulurken duyarlı bir şekilde yeniden boyutlandırılan kalın metin blokları oluşturan bir jQuery eklentisidir.

Medya sorguları için araçlar

Artık düzeninizin farklı cihazlar, değişken ızgara ve değişken görüntüler için nasıl değişeceğine dair bir fikriniz olduğuna göre, sayfanın öğelerini yanıt verme durumuna geçirmek için medya sorgularına ihtiyacınız var.

23. Respond.js

Duyarlı tasarımla ilgili bir sorun, medya sorgularını okuyamayan tarayıcıların geride kalmasıdır. Bu, hedef kitlenizle ilgili bir sorun olmayabilir, ancak yine de eski tarayıcılardaki kullanıcıları barındırmak için iyi bir uygulamadır. Respond.js, Scott Jehl tarafından, yalnızca min-width ve max-width özelliklerini destekler.

Daha fazla bilgi için filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/ adresine bakın.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, Wouter van der Graaf tarafından, IE'nin eski sürümlerinin ve diğer tarayıcıların her türlü medya sorgusunu etkili bir şekilde test etmesini ve uygulamasını sağlar.

25. Adapt.js

Orijinal 960.gs ızgara sisteminin yazarı Nathan Smith, tarayıcı boyutlarını algılayan ve yalnızca gerekli stil sayfalarına hizmet veren bir komut dosyası olan Adapt.js'yi yazdı - medya sorguları gibi, ancak medya sorguları olmadan, yani eski tarayıcılarda da çalışıyor.

26. Kategori

Bu, ters açıdan yaklaşılan cihaz algılamadır - Brett Jankord'un Categorizr betiği, masaüstü veya tablet olarak aksi tespit edilmedikçe cihazların mobil olduğunu varsayar ve tarayıcılara sempatik bir şekilde kaynak sunmanıza olanak tanır.

Duyarlı tasarım (ve mobil) kazan plakaları

Verimli, duyarlı bir iş akışı ruhu içinde, kazan plakaları, tasarımların tarayıcıya daha geç taşınması sürecini kolaylaştırır. Bu kazan plakalarının çoğu, yukarıda bahsedilen araçların en iyilerini tek bir düzgün pakette birleştiriyor: önce mobil, içerik-dışarı felsefelerini uygularken komut dosyalarıyla geliştirilmiş esnek bir ızgara.

27. 320 ve Üzeri

Andy Clarke'ın 320 and Up'ı, LESS ve Bootstrap gibi diğer birçok modern web tasarım aracıyla bütünleşen mobil öncelikli bir standart metindir (bkz. # 30). Bir siteyi hızla kurup çalıştırmanın hafif ve çevik bir yoludur. Ayrıca Andy ile yeni versiyon hakkında bize daha fazla bilgi verdiği röportajımıza bir göz atın.

28. Izgarasız

Gridless, tipografi ve çapraz tarayıcı uyumluluğuna odaklanarak duyarlı tasarımlarınız için temel oluşturabilecek bir HTML5 ve CSS3 standart metnidir.

29. İskelet

Başlangıç ​​noktası en küçük çözünürlük olan önceki iki kazan plakasından farklı olarak, Dave Gamache tarafından oluşturulan Skeleton geliştirme kiti 960.gs grid sistemine dayanıyor ve mobile göre ölçekleniyor. Skeleton ayrıca geliştiricilerin üzerine stiller oluşturmaları için harika bir stil çerçevesine sahiptir.

30. Önyükleme

Twitter tarafından oluşturulan ve şimdi açık kaynaklı olan Bootstrap, bir siteyi hızlı bir şekilde çevrimiçi hale getirmek için bir çerçeve ve bileşenler dizisidir ve sürüm iki itibariyle tüm temel parçaları duyarlı bir şekilde çalışır.

Eklentiler, şimler ve çoklu dolgular

Modern tarayıcılar ve yazılımlar yanıt verme özelliğine sahip olma eğiliminde olsa da, bazen tutarlı bir deneyim sağlamak için ekstra araçlar kullanmak zorunda kalıyoruz.

31. Duyarlı Eklenti

Marios Lublinski, mevcut herhangi bir WP temasını duyarlı bir temaya dönüştürmeyi vaat eden bir WordPress eklentisi yazdı. Bunun nasıl çalıştığını henüz bilmiyorum, çünkü bu yazının zamanı olarak piyasaya sürülmedi, ancak sözünü tutarsa ​​çok faydalı olmalı.

32. Devirme

İçerik taşma işlemi masaüstü tarayıcılarda iyi çalışır, ancak daha eski mobil tarayıcılar bunu tutarsız bir şekilde ele alır. Çalışkan Filament Group'un Overthrow polyfill'i, tüm mobil kullanıcıların mümkün olan en iyi deneyimi yaşamasını sağlayarak cihazlar arasında tutarlı ve zarif bir bozulma sağlar.

33. MediaTable

Marco Pegoraro'nun jQuery eklentisi MediaTable, küçük ekranlı cihazlarda büyük veri tablolarının nasıl görüntüleneceği, duyarlı sütunlar oluşturma ve uygun yerlerde bir göster / gizle geçişi ekleme sorununu aşmanıza yardımcı olmak için Respond.js ile birlikte çalışır.

"Test etme, test etme: 1-2-3 ..."

Duyarlı iş akışının bir başka yönü, hedef cihazlarınızı ve çözünürlüklerinizi bilmek ve ardından bunları test etmektir.

34. resizeMyBrowser

ResizeMyBrowser, ön uç geliştiricisi Chen Luo tarafından, duyarlı bir şekilde tasarlanmış sayfaları test etmek veya ihtiyaçlarınıza uygun olanı bulamazsanız yeni bir ön ayar oluşturmak için tarayıcı pencereniz için önceden ayarlanmış birkaç boyuta sahiptir.

35. cevap

Remy Sharp tarafından oluşturulan resizeMyBrowser, responsivepx'e çok benzer şekilde, sayfalarınızı, medya sorgularınızın ne kadar iyi tetiklendiğini ve kesme noktalarının tasarımda nerede olduğunu belirlemek için genişliği ve yüksekliği test edebileceğiniz bir pencereye yükler.

36. Duyarlı Tasarım Testi

Tasarımcı ve geliştirici Matt Kersley'den inanılmaz derecede faydalı bir araç: Çeşitli tarayıcı boyutlarında nasıl işlediğini görmek için duyarlı sitenizin URL'sini Duyarlı Tasarım Testi'ne girmeniz yeterlidir.

37. Sorumlu

Bir URL girin ve The Responsinator size birçok yaygın cihaz boyutunda nasıl göründüğünü - acımasız robotik verimlilikle - gösterecektir. Tama Pugsley ve Andy Hovey bundan sorumlu.

38. Responsive.is

Başka bir sayfa içi aygıt öykünücüsü olan Responsive.is, bir URL yazmanıza ve ardından onu bir dizi farklı ön ayar arasında hızla yeniden boyutlandırmanıza olanak tanır. Önümüzdeki Typecast uygulamasının arkasındaki ekip tarafından yapıldı.

39. Screenqueri.es

Bir tane daha tarayıcı boyutları aracı, ancak Mandar Shirke'den Screenqueri.es, kapsamlı bir mobil ve tablet ön ayarları setinin yanı sıra hassas ölçümü çok daha kolay hale getiren bir ızgara ve cetvellere sahip olarak kendisini farklılaştırıyor.

40. Aptus

Siteleri birden çok tanımlı boyutta test etmek için başka bir uygulama, ancak Aptus Mac'te yereldir. Mac App Store aracılığıyla kullanılabilir ve yerel olması, kolay ekran görüntüleri ve çevrimdışı destek gibi ekstra özellikler getirir.

41. Duyarlı Tasarım Bookmarklet

Victor Coulon çok basit ama etkili bir yer imi oluşturdu; herhangi bir web sayfasında etkinleştirdiğinizde, sitenizin farklı boyutlarda nasıl işlediğini görebilmeniz için dört genel ekran boyutu arasında geçiş yapmanızı sağlayan bir araç çubuğu ekler.

42. Duyarlı Tasarım Testi Bookmarklet

Benjamin Keen tarafından hazırlanan bu yer imi, kendi cihaz boyutlarınızı ve istediğiniz kadar çok veya az tanımlamanıza izin vererek daha fazla özelleştirme sağlar. Etkinleştirildiğinde, kolay karşılaştırma için siteyi seçilen tüm boyutlarda yan yana gösterir.

43. Ekran Sineği

QuirkTools tarafından sunulan Screenfly, bir siteyi masaüstü, tablet, mobil ve televizyonda farklı çözünürlüklerde test etmenize olanak tanır. Masaüstü testi şu anda Safari ile sınırlıyken, tablet ve mobil cihazlar cihazlar ve tarayıcılar için daha fazla seçeneğe sahip. Televizyon Opera ile sınırlıdır.

44. Ortam Sorgu Göstergesi

Johan Brook, tarayıcı tarafından bir medya sorgusunun ne zaman tetiklendiğini test etmek için saf bir CSS yöntemi sunar. Ortam Sorgusu Göstergesi, tasarım kırılma noktalarını test etmek ve bunlarla oynamak için başka bir iyi araçtır.

45. Şim

RWD hareketinin poster çocuğu olan Boston Globe'un yeniden tasarımında kullanılan araçlardan biri olan Shim, aynı Wifi ağındaki birden fazla cihazda bir web sayfası çalıştıran ve cihazlar arası testi çok daha kolay hale getiren bir Node.js uygulamasıdır. .

46. ​​Arabayla Giriş

Shim'i çalıştırmak için bir Node.js sunucunuz yoksa Scott Jehl, temelde aynı şekilde çalışan, ancak PHP, Apache ve bir .htaccess dosyası kullanan Drive-In adlı daha basit bir sürüm geliştirmiştir.

47. Adobe Shadow

Adobe, bu uzaktan hata ayıklama aracıyla web teknolojilerine girmeye devam ediyor. Shadow ve Chrome uzantısını Mac veya Windows'a, ayrıca Shadow istemcisini Android veya iPhone'a yükleyin ve web sayfalarını birçok farklı cihaz arasında paylaşabilirsiniz.

48. Opera Mobile Emulator + Uzaktan Hata Ayıklama

Mobil sayfalarda hata ayıklamanın daha kolay bir yolu, Opera ve Opera Mobile Emulator'ü yüklemek ve ikisini Uzaktan Hata Ayıklama seçeneğiyle bağlamaktır. Kurulumu basit ve hızlıdır ve WebKit'ten daha fazlasını test etme avantajına sahiptir.

Daha fazla ilham

Başkalarının tasarımlarını nasıl duyarlı hale getirdiği konusunda bir fikir edinmek ister misiniz?

49. MediaQueri.es

Henüz görmediyseniz, Mediaqueri.es sitesi, duyarlı tarafa geçen, sürekli artan sayıda siteye sahiptir.

50. @RWD

Ethan Marcotte, RWD dünyasından en son haberleri, araçları ve vitrinleri getiren bir Twitter hesabı çalıştırıyor.

Denise Jacobs bir konuşmacı, yazar, web tasarım eğitmeni ve yaratıcılık evangelisti olmaya bayılırken, Peter Gasston The Book of CSS3'ün yazarı ve Broken Links'te blog yazan deneyimli bir web geliştiricisidir.

Bunu beğendin mi? Bunları oku!

  • Mobil web sitesi oluşturmak için profesyonel ipuçları
  • En iyi CSS ve JavaScript teknikleri
  • Bir uygulama nasıl oluşturulur
  • Tasarımcılar için en iyi ücretsiz web yazı tipleri
  • Artırılmış Gerçeklik için sırada neler olduğunu keşfedin
  • Ücretsiz dokuları indirin: yüksek çözünürlüklü ve şimdi kullanıma hazır
Önceki Makale

AR tasarımı için 8 altın kural
Sonraki Makale

Çocukların seveceği yaratıklar yaratmanın sırrı
Bugün Oku
Halloween doodles: en ürkütücü Google Doodles
Daha Fazla Oku

Halloween doodles: en ürkütücü Google Doodles

Mayıs Ayı 2024
Bu ürkütücü Cadılar Bayramı karalamaları, izi tartışma ız en iyi tatilin hava ına okmak için mükemmel bir şey. Cadılar bayramına artık adece birkaç hafta kaldı, bu y...
Tour de France logosunun hikayesi
Daha Fazla Oku

Tour de France logosunun hikayesi

Mayıs Ayı 2024
Bi iklet anatının hacminin de ifade ettiği gibi, bi iklet ürmenin pek çok ta arımcı için bir tutku olduğunu biliyoruz, bu nedenle pek çok ta arımcının bu yılki Tour de France'a...
Aklınıza gelmemiş olabilecek 7 kesinti aktivitesi
Daha Fazla Oku

Aklınıza gelmemiş olabilecek 7 kesinti aktivitesi

Mayıs Ayı 2024
Kilitlenme başladığından beri, reklam öğeleri kapalı kalma ürelerini na ıl dolduracakları hakkında çevrimiçi olarak fikirlerini paylaşıyorlar. Ücret iz der ler ve kur lar unan...