50 alat fantastis untuk desain web responsif

Pengarang: Monica Porter
Tanggal Pembuatan: 17 Berbaris 2021
Tanggal Pembaruan: 17 Boleh 2024
Anonim
Introduction To Responsive Web Design - HTML & CSS Tutorial
Video: Introduction To Responsive Web Design - HTML & CSS Tutorial

Isi

Seperti yang diperkenalkan / diciptakan oleh Ethan Marcotte dalam artikelnya "Desain Web Responsif" serta buku terlarisnya, seseorang membutuhkan tiga elemen untuk membuat situs menjadi responsif:

  1. Kisi fleksibel / cair
  2. Gambar responsif
  3. Kueri media

Ada banyak artikel bagus lainnya yang membahas motif, konsep, dan teknik terkait desain web responsif, jadi kami akan tetap memfokuskan artikel ini pada beberapa alat teratas yang akan membantu Anda menjadi responsif secara bertanggung jawab.

Alat untuk memulai

Sebelum Anda mulai membangun situs Anda, yang terbaik adalah membuat sketsa bagaimana elemen-elemen pada halaman akan beradaptasi agar sesuai dengan ukuran browser yang berbeda dari berbagai perangkat yang akan dilihatnya, dan untuk menghindari pemutusan hubungan yang sering kali berasal dari pemikiran utama tentang desain desktop dan sisa iterasi responsif lainnya sebagai renungan (lihat terutama komentar Stephanie (Sullivan) Rewis).

01. Lembar Sketsa Desain Web Responsif

Kumpulan lembar sketsa responsif ini, oleh Jeremy P Alford, adalah titik awal yang bagus untuk mulai memetakan bagaimana bagian halaman akan bergeser dalam resolusi yang berbeda.


02. Sketchbook Desain Responsif

Jika Anda lebih suka menyimpan semua sketsa Anda di satu tempat, Anda mungkin ingin mempertimbangkan buku terikat kawat berisi 50 lembar sketsa responsif ini oleh perusahaan App Sketchbook.

03. Wireframes Responsif

Salah satu kesulitan dalam membangun situs web responsif adalah menggunakan wireframes untuk menunjukkan bagaimana desain responsif akan bekerja. James Mellers dari Adobe telah mengumpulkan alat eksperimental ini untuk menunjukkan bagaimana wireframing responsif dari tata letak yang kompleks dapat bekerja.


04. Pola Tata Letak Multi-Perangkat

Saat merencanakan desain responsif, ada gunanya untuk melihat bagaimana orang lain telah mendekatinya sebelum Anda, jadi Pola Tata Letak Multi-Perangkat Luke Wroblewski, yang mencantumkan pola populer dengan tautan ke contoh, adalah tempat yang tepat untuk memulai.

05. Ubin Gaya

Ubin Gaya Samanatha Warren mengusulkan teknik baru untuk desain di era responsif; daripada maket desain lebar tetap, ini seperti contoh atau papan mood yang menunjukkan pendekatan desain umum tanpa membahas detail yang terperinci.

Alat untuk grid fleksibel / fluida

Seperti yang dinyatakan sebelumnya, komponen pertama yang dibutuhkan untuk desain responsif adalah grid fleksibel / fluida.Berikut ini sudah dibuat sebelumnya: Anda hanya perlu mengunduhnya dan Anda akan segera menuju ke situs yang lebih responsif.


06. Sistem Kisi Emas

Joni Korpi, yang juga mengembangkan Less Framework, baru-baru ini merilis versi baru dari sistem grid yang andal untuk desain responsif. Dianggap "lipat" karena mudah beradaptasi dari 16, menjadi delapan, hingga empat kolom, Sistem Kisi Emas juga dilengkapi dengan hamparan browser kecil yang memperlihatkan kisi pada halaman Anda untuk pengujian.

07. Lipat960

Tuan-tuan berbakat di Paravel, Inc. telah merilis kisi 960.gs yang dimodifikasi yang mereka gunakan sebagai dasar untuk proyek responsif mereka.

08. SimpleGrid

SimpleGrid, oleh Conor Muirhead, dibuat dengan responsivitas yang tertanam, sehingga mudah untuk memulai dan menjalankan proyek situs web responsif Anda.

09. Kotak CSS 1140px

Sistem grid responsif hebat lainnya adalah 1140px CSS Grid oleh desainer Melbourne Andy Taylor, yang beralih dari resolusi desktop lebar ke seluler.

10. Sistem grid CSS kolom

Sistem kisi kolom, dibuat oleh Pulp + Pixels alias direktur kreatif Nick Gorsline, didasarkan pada sistem kisi 1140px, tetapi dengan beberapa barang tambahan seperti kit desain dengan lembar sketsa dan templat wireframing, serta gaya debugging CSS.

11. Sistem grid semantik

Ekstensi CSS pra-proses seperti Sass dan LESS menjadi semakin populer, dan sistem kisi Semantik Tyler Tate menggunakannya untuk efek maksimum dalam sistem kisi ini yang mengklaim tidak menggunakan kelas atau elemen yang tidak perlu. Baca selengkapnya di coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Seperti sistem grid Semantic, SUSY Oddbird menciptakan sistem grid yang tidak menggunakan markup tambahan atau kelas khusus, tetapi SUSY hanya ditujukan untuk pengguna Sass (dan ekstensinya, Kompas).

13. Gridpak

Gridpak, oleh Erskine Design, adalah salah satu generator grid responsif terbaru. Ini memungkinkan Anda mengatur kolom dan talang di sejumlah breakpoint, kemudian mengeluarkan file CSS, JavaScript, dan PNG sehingga seluruh tim Anda bekerja dari titik awal yang sama.

14. Gridset

Masih ada sedikit misteri di Gridset karena, pada saat saya menulis ini, sebenarnya belum dirilis. Tetapi alat dari Mark Boulton Design menjanjikan sistem kisi yang dipesan lebih dahulu, non-preskriptif, dan cara untuk menyimpan dan mengelola kisi Anda secara online.

15. Grid Photoshop yang lebih baik untuk RWD

Saham Elliot Jay mengusulkan untuk meninggalkan standar grid de facto 960px yang lama dan bekerja dari basis 1000px sebagai gantinya, membuat semua penghitungan persentase lebih mudah untuk dikerjakan. Jika Anda setuju, dia membuat PSD untuk Anda mulai bekerja dengannya.

16. Kotak Cairan

Jika desain Anda sangat terspesialisasi dan Anda perlu membuat kisi khusus sendiri, Anda dapat melakukannya dengan kalkulator kisi fluida pendatang baru yang brilian dari .net Awards, Harry Roberts.

17. Kalkulator Responsif

Pixel lain untuk kalkulator persentase, tetapi yang satu ini oleh Stu Robson melangkah lebih jauh dari yang lain dengan menghasilkan semua aturan CSS untuk Anda, yang berarti Anda bisa menyalin dan menempelkannya ke dalam stylesheet Anda.

Alat untuk gambar responsif (dan teks)

Komponen penting lainnya dari desain web responsif adalah gambar yang mengalir. Meskipun teknik untuk mendapatkan gambar yang mengalir sangat mudah, mengoptimalkan kinerja dan pemuatan halaman untuk perangkat yang berbeda tampaknya menjadi salah satu tantangan terbesar dalam desain web yang responsif. Berikut beberapa sumber daya untuk mengatasi masalah tersebut.

18. Gambar Responsif

Grup Filamen menemukan cara untuk mengirim gambar berukuran tepat berdasarkan resolusi layar. Eksperimen dengan gambar yang memprioritaskan seluler ini yang menskalakan secara responsif dan bertanggung jawab memerlukan dua gambar dengan ukuran berbeda sebagai referensi.

19. Gambar Adaptif

Matt Wilcox mengambil inspirasi dari alat Gambar Responsif untuk membuat Gambar Adaptif, yang menggunakan PHP dan sedikit JavaScript untuk menyajikan gambar yang sesuai ke perangkat pengguna tanpa memerlukan markup tambahan.

20. Sencha.io Src (sebelumnya Tinysrc)

Sencha menyediakan layanan cloud yang mengirimkan versi gambar yang dihosting yang dioptimalkan untuk ukuran perangkat yang memintanya. Untuk mengetahui cara menggunakannya, lihat docs.sencha.com/io/src/.

21. FitText

Permata lain dari Paravel, Inc adalah FitText.js, plug-in jQuery untuk membuat jenis web judul responsif terhadap desain dan perangkat. Untuk detailnya lihat trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Terinspirasi oleh FitText dan algoritme SlabType, slabText Brian McAllister adalah plug-in jQuery yang membuat blok teks tebal yang diubah ukurannya secara responsif sekaligus mempertahankan lebar yang ditentukan.

Alat untuk kueri media

Sekarang setelah Anda memiliki gagasan tentang bagaimana tata letak Anda akan berubah untuk perangkat yang berbeda, kisi yang berubah-ubah, dan gambar yang berubah-ubah, Anda memerlukan kueri media untuk menggeser elemen laman ke dalam keadaan responsif.

23. Respond.js

Satu masalah dengan desain responsif adalah browser yang tidak dapat membaca kueri media tertinggal. Ini mungkin bukan masalah dengan target audiens Anda, tetapi masih merupakan praktik yang baik untuk mengakomodasi pengguna di browser lama. Respond.js, oleh Scott Jehl, hanya mendukung properti min-width dan max-width.

Untuk lebih lanjut lihat filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, oleh Wouter van der Graaf, memungkinkan versi IE dan browser lain untuk secara efektif menguji dan menerapkan semua jenis kueri media.

25. Adapt.js

Nathan Smith, penulis sistem grid 960.gs asli, telah menulis Adapt.js, sebuah skrip yang mendeteksi dimensi browser dan hanya melayani stylesheet yang diperlukan - seperti kueri media tetapi tanpa kueri media, yang berarti ia juga berfungsi di browser lama.

26. Kategorisasi

Ini adalah pendeteksian perangkat yang didekati dari sudut yang berlawanan - Skrip Categorizr Brett Jankord menganggap bahwa perangkat adalah seluler kecuali jika terdeteksi sebagai desktop atau tablet, memungkinkan Anda untuk menyajikan sumber daya ke browser dengan cara yang simpatik.

Boilerplate desain responsif (dan seluler)

Dengan semangat alur kerja responsif yang efisien, boilerplate memfasilitasi proses pemindahan desain ke browser lebih cepat daripada nanti. Sebagian besar boilerplate ini menggabungkan yang terbaik dari alat yang disebutkan di atas menjadi satu paket rapi: kisi fleksibel yang disempurnakan dengan skrip, sambil menerapkan filosofi konten keluar yang pertama untuk seluler.

27. 320 dan Up

Andy Clarke's 320 and Up adalah boilerplate pertama seluler yang terintegrasi dengan banyak alat desain web modern lainnya, seperti LESS dan Bootstrap (lihat # 30). Ini adalah cara yang ringan dan lincah untuk mengaktifkan dan menjalankan situs dengan cepat. Lihat juga wawancara kami dengan Andy, di mana dia memberi tahu kami lebih banyak tentang versi baru.

28. Tanpa kisi

Gridless adalah boilerplate HTML5 dan CSS3 yang dapat berfungsi sebagai dasar untuk desain responsif Anda, dengan fokus pada tipografi dan kompatibilitas lintas-browser yang terintegrasi.

29. Kerangka

Tidak seperti dua boilerplate sebelumnya, yang titik awalnya adalah resolusi terkecil, kit pengembangan Skeleton, yang dibuat oleh Dave Gamache, didasarkan pada sistem kisi 960.gs dan diturunkan ke seluler. Skeleton juga menawarkan kerangka gaya yang bagus bagi pengembang untuk membangun gaya di atasnya.

30. Bootstrap

Dibangun oleh Twitter dan sekarang bersumber terbuka, Bootstrap adalah kerangka kerja dan serangkaian komponen untuk membuat situs online dengan cepat, dan pada versi dua semua bagian intinya bekerja secara responsif.

Plugin, shims, dan polyfill

Meskipun peramban dan perangkat lunak modern cenderung siap untuk responsif, terkadang kami harus menggunakan alat tambahan untuk memberikan pengalaman yang konsisten.

31. Plugin Responsif

Marios Lublinski telah menulis plugin WordPress yang menjanjikan untuk mengubah tema WP saat ini menjadi yang responsif. Bagaimana ini bekerja Saya belum tahu karena belum dirilis pada saat penulisan ini, tetapi jika memenuhi janjinya, itu akan sangat berguna.

32. Menggulingkan

Penanganan luapan konten berfungsi dengan baik di browser desktop, tetapi browser seluler lama menanganinya secara tidak konsisten. Overthrow polyfill dari Filament Group yang rajin menambahkan degradasi anggun yang konsisten di seluruh perangkat, memastikan bahwa semua pengguna seluler mendapatkan pengalaman terbaik.

33. MediaTable

Plugin jQuery Marco Pegoraro, MediaTable, bekerja dengan Respond.js untuk membantu Anda mengatasi masalah bagaimana menampilkan tabel data besar pada perangkat layar kecil, membuat kolom responsif dan menambahkan tombol tampilkan / sembunyikan jika sesuai.

"Menguji, menguji: 1-2-3 ..."

Aspek lain dari alur kerja responsif adalah mengetahui perangkat dan resolusi target Anda, lalu mengujinya.

34. resizeMyBrowser

resizeMyBrowser, oleh pengembang frontend Chen Luo, memiliki beberapa dimensi preset untuk jendela browser Anda untuk menguji halaman yang dirancang secara responsif atau membuat preset baru jika Anda tidak dapat menemukan yang sesuai dengan kebutuhan Anda.

35. responsivepx

Sama seperti resizeMyBrowser, responsivepx, dibuat oleh Remy Sharp, memuat halaman Anda di jendela tempat Anda dapat menguji lebar dan tinggi untuk menentukan seberapa baik kueri media Anda diaktifkan dan di mana breakpoint dalam desain.

36. Pengujian Desain Responsif

Alat yang sangat berguna oleh perancang dan pengembang Matt Kersley: cukup masukkan URL situs responsif Anda dalam Pengujian Desain Responsif untuk melihat bagaimana situs merender pada berbagai ukuran browser.

37. Responsinator

Masukkan URL dan The Responsinator akan menunjukkan kepada Anda bagaimana tampilannya dalam berbagai ukuran umum perangkat - dengan efisiensi robotik yang kejam. Tama Pugsley dan Andy Hovey bertanggung jawab untuk yang satu ini.

38. Responsive.is

Emulator perangkat dalam halaman lainnya, Responsive.is memungkinkan Anda mengetikkan URL lalu dengan cepat mengubah ukurannya di antara berbagai preset yang berbeda. Itu dibuat oleh tim di balik aplikasi Typecast yang akan datang.

39. Screenqueri.es

Satu lagi alat dimensi peramban, tetapi Screenqueri.es dari Mandar Shirke membedakan dirinya dengan memiliki serangkaian prasetel seluler dan tablet yang ekstensif, serta kisi dan penggaris yang membuat pengukuran halus jadi lebih mudah.

40. Aptus

Aplikasi lain untuk menguji situs pada berbagai ukuran yang ditentukan, tetapi Aptus adalah Mac-native. Ini tersedia melalui Mac App Store, dan menjadi asli membawa fitur tambahan seperti tangkapan layar yang mudah dan dukungan offline.

41. Bookmarklet Desain Responsif

Victor Coulon telah membuat bookmarklet yang sangat sederhana namun efektif; ketika Anda mengaktifkannya di halaman web mana pun, ia menambahkan bilah alat yang memungkinkan Anda beralih di antara empat dimensi layar umum sehingga Anda dapat melihat bagaimana situs Anda menampilkan pada ukuran yang berbeda.

42. Bookmarklet Tes Desain Responsif

Bookmarklet oleh Benjamin Keen ini memungkinkan lebih banyak penyesuaian dengan membiarkan Anda menentukan ukuran perangkat Anda sendiri, dan sebanyak atau sesedikit yang Anda suka. Saat diaktifkan, ini menunjukkan situs di semua ukuran yang dipilih, berdampingan untuk memudahkan perbandingan.

43. Screenfly

Screenfly, oleh QuirkTools, memungkinkan Anda menguji situs dengan resolusi berbeda di desktop, tablet, seluler, dan televisi. Pengujian desktop saat ini terbatas pada Safari, sedangkan tablet dan seluler memiliki lebih banyak opsi untuk perangkat dan browser. Televisi terbatas pada Opera.

44. Indikator Permintaan Media

Johan Brook menawarkan cara CSS murni untuk menguji ketika kueri media telah dipicu oleh browser. Indikator Kueri Media adalah alat lain yang bagus untuk menguji dan bermain-main dengan titik putus desain.

45. Shim

Salah satu alat yang digunakan dalam mendesain ulang Boston Globe, poster boy dari gerakan RWD, Shim adalah aplikasi Node.js yang menjalankan halaman web di beberapa perangkat pada jaringan Wifi yang sama, membuat pengujian lintas perangkat menjadi jauh lebih mudah .

46. ​​Drive-In

Jika Anda tidak memiliki server Node.js untuk menjalankan Shim, Scott Jehl telah membuat versi sederhana yang disebut Drive-In yang bekerja dengan cara yang sama pada dasarnya, tetapi menggunakan PHP, Apache, dan file .htaccess.

47. Adobe Shadow

Adobe terus mendorong teknologi web mereka dengan alat debugging jarak jauh ini. Instal Shadow dan ekstensi Chrome di Mac atau Windows, plus klien Shadow di Android atau iPhone, dan Anda dapat berbagi halaman web di antara banyak perangkat yang berbeda.

48. Emulator Seluler Opera + Debug Jarak Jauh

Cara yang lebih mudah untuk men-debug halaman seluler adalah dengan menginstal Opera dan Opera Mobile Emulator dan menghubungkan keduanya dengan opsi Remote Debug. Sederhana dan cepat untuk disiapkan, dan memiliki manfaat tambahan dari pengujian di lebih dari WebKit.

Inspirasi lebih lanjut

Ingin mendapatkan gambaran tentang bagaimana orang lain membuat desain mereka responsif?

49. MediaQueri.es

Jika Anda belum melihatnya, situs Mediaqueri.es memiliki semakin banyak situs yang menyeberang ke sisi responsif.

50. @RWD

Ethan Marcotte menjalankan akun Twitter yang menghadirkan berita, alat, dan pameran terbaru dari dunia RWD.

Denise Jacobs senang menjadi pembicara, penulis, pelatih desain web, dan penginjil kreativitas, sementara Peter Gasston adalah penulis The Book of CSS3 dan pengembang web veteran yang menulis blog di Broken Links.

Suka ini? Baca ini!

  • Kiat pro untuk membangun situs web seluler
  • Teknik CSS dan JavaScript teratas
  • Cara membuat aplikasi
  • Font web gratis terbaik untuk desainer
  • Temukan apa yang selanjutnya untuk Augmented Reality
  • Unduh tekstur gratis: resolusi tinggi dan siap digunakan sekarang
Pasal Sebelumnya

Cara mengecat timbangan
Artikel Berikutnya.

10 grafik gerak yang menakjubkan dalam video musik
Kami Merekomendasikan Anda
Unduh Adobe Acrobat: Dapatkan uji coba gratis Adobe Acrobat
Baca Lebih Lajut

Unduh Adobe Acrobat: Dapatkan uji coba gratis Adobe Acrobat

Boleh 2024
Ingin tahu cara mengunduh Adobe Acrobat? Kami tidak terkejut. Alat pembuatan, pengeditan, dan manajemen PDF ini akan menghemat banyak waktu dan tenaga aat bekerja dengan file Anda di de ktop, web, dan...
OFFSET 2013: Wawancara HVASS & HANNIBAL
Baca Lebih Lajut

OFFSET 2013: Wawancara HVASS & HANNIBAL

Boleh 2024
eni Komputer: Apakah Anda memiliki ke empatan untuk menangkap orang lain berbicara? HVA & HANNIBAL: Kami telah melihat tiga pembicaraan, ejauh ini - dan emuanya angat berbeda: Nata ha Jen, Faile,...
Tantangan menyatukan dua studio desain
Baca Lebih Lajut

Tantangan menyatukan dua studio desain

Boleh 2024
Ketika grup periklanan Kroa ia Bruketa & Žinić OM ingin menambahkan kantor interna ionalnya dengan ba i baru di Wina, mereka bekerja ama dengan agen i digital Au tria Netural untuk menambahkan ra ...