50 Alat Desain Web Responsif Berguna Untuk Desainer
Selama beberapa hari terakhir, kami telah menunjukkan kepada Anda beberapa tema responsif WordPress dan Joomla terbaik yang dapat Anda unduh dan gunakan di situs Anda. Hari ini, kami akan memberimu alat-alatnya. Terdiri dari kerangka kerja, layanan, dan skrip unduh, kami pikir mereka akan sangat membantu dalam hal pengembangan web yang responsif.
Untuk membuatnya lebih mudah untuk turun ke seluruh daftar alat, kami telah mengategorikannya ke bagian berikut:
- Kisi & Kerangka
- Lembar Sketsa & Gambar rangka
- Plugin JavaScript & jQuery
- Pengujian & Pratinjau
- Bilah geser
- Lainnya
Kisi & Kerangka
[Kembali ke atas]
Kolom
Columnal adalah proyek Pulp + Pixels, yang telah dipinjam dari cssgrid.net sementara beberapa inspirasi kode telah diambil dari 960.gs. Kolom sangat membantu Anda dalam desain web responsif, dengan membuat kisi Anda fleksibel untuk berubah secara dinamis saat jendela peramban diubah ukurannya.
Kerangka
Skeleton adalah kerangka kerja CSS yang sederhana dan kuat, yang terutama disukai oleh pengembang dan desainer karena kesederhanaan dan efisiensinya. Tidak ada yang berat dengan Javascript di sini, hanya CSS yang baik dan murni dengan dokumentasi bersih.
LessFramework 4
Less Framework adalah lebih kurang kerangka kerja, atas nama penciptanya. Ini adalah sistem grid CSS adaptif berdasarkan penggunaan kueri media CSS inline, yang membuat pengembangan situs web responsif jauh lebih mudah.
Sistem Grid Semantik
Semantic Grid System digunakan untuk merancang tata letak grid yang responsif. Ini menggunakan ekstensi CSS pra-diproses seperti KURANG, SCSS atau Stylus untuk memberikan efisiensi maksimum. Anda dapat memilih lebar kolom dan selokan, memilih jumlah kolom dan beralih antara piksel dan persentase.
Sistem Kotak Emas
Golden Grid System adalah sistem fluid-grid yang berfungsi sebagai titik awal desain web responsif Anda. Ini memungkinkan situs web untuk melayani halaman-halaman yang cantik mulai dari 240 hingga 2560px.
320 dan Atas
320 and Up adalah boilerplate kueri media CSS, yang berfungsi sebagai templat awal untuk desain responsif Anda. Ini mengikuti pendekatan yang sepenuhnya terbalik dari beberapa pelat ketel lain yang tersedia.
Inuit.css
Inuit.css adalah kerangka kerja CSS, yang sangat mudah digunakan, bahkan untuk pemula. Ini memiliki pendekatan minimalis, sehingga Anda hanya perlu berurusan dengan hal-hal yang diperlukan, tetapi jika perlu, itu juga dapat diperpanjang dengan beberapa plugin yang tersedia.
Tanpa grid
Gridless adalah boilerplate untuk membuat situs web responsif dan lintas-browser dengan tipografi yang indah. Alat ini berfokus pada pengembangan progresif proyek, dan berfungsi sebagai titik awal dari desain apa pun.
1140 CSS Grid
1140 CSS Grid adalah sistem kisi CSS hebat yang dirancang oleh desainer Melbourne Andy Taylor, yang memungkinkan desain Anda pas di 1140px untuk monitor besar dan tata letak cairan Anda akan beradaptasi dengan mulus ke resolusi kecil lainnya dengan sedikit kerja ekstra.
1KBCSSGrid
1KB CSS Grid yang dirancang oleh Tyler Tate, adalah generator CSS Grid yang sederhana dan ringan. Ini akan memungkinkan Anda untuk mengatur jumlah kolom, lebar kolom dan lebar selokan, dan Anda bisa mendapatkan CSS yang dapat diunduh untuk kisi situs web Anda.
Bootstrap
Bootstrap, dibuat dan dikelola, oleh Mark Otto dan Jacob Thornton di Twitter, adalah kumpulan elemen antarmuka pengguna, tata letak, dan alat javascript yang sangat baik, tersedia secara bebas untuk Anda unduh dan gunakan dalam proyek desain web Anda.
Kalkulator Kotak Fluida
Alat sederhana ini akan membantu Anda untuk dengan cepat mengambil CSS dari desain situs web kotak fluida Anda.
Kisi Cairan
Fluid Grid adalah kerangka kerja fluida sederhana namun bermanfaat, yang menciptakan tata letak responsif berdasarkan 6, 7, 8, 9, 10, 12 atau 16 kolom.
Flurid
Flurid adalah kerangka kerja kotak CSS lintas-browser yang sederhana dan sangat berguna dengan hingga 16 kolom. Dan lagi pula itu tidak menyembunyikan piksel menjadi margin.
Gridset
Gridset adalah alat untuk membuat grid dari jenis apa pun, seperti, kolom, asimetris, tetap, rasio, gabungan, responsif, dan banyak lagi. Alat ini oleh Mark Boulton, masih dalam versi beta, tetapi terbukti menjanjikan. Dan apakah saya menyebutkan, menggunakannya semudah menanamkan tautan.
Gridpak
Gridpak adalah generator grid responsif online, di mana jumlah kolom, padding, dan talang dapat diubah, dan breakpoint kustom dapat ditambahkan. CSS dibuat oleh alat dan siap untuk diunduh. Ini juga menyediakan template kotak PNG, yang dapat digunakan untuk keperluan merancang di Photoshop.
SimpleGrid
SimpleGrid, dikembangkan oleh Michael Kuhn, adalah kerangka kerja CSS yang sangat sederhana dan mudah untuk membuat tata letak berbasis grid yang tak terbatas. Secara default, SimpleGrid disiapkan untuk 4 rentang ukuran layar yang berbeda.
Susy
Susy oleh Oddbird, mirip beraksi dengan Sistem Grid Semantik. Ini tidak menggunakan markup tambahan atau kelas khusus lainnya, tetapi hanya ditujukan untuk pengguna Saas dan kompas ekstensinya.
Grid Cairan Kecil
Tiny Fluid Grid adalah aplikasi web yang luar biasa, yang dapat membantu Anda menentukan sistem kisi situs web Anda secara interaktif. Anda dapat mengatur jumlah kolom, persentase selokan, lebar minimum dan maksimum dari tata letak situs web Anda, dan bisa mendapatkan CSS yang dapat diunduh untuknya.
Sistem Grid Variabel
Variable Grid System dirancang dan dikembangkan oleh SprySoft dan didasarkan pada 960 Grid System. Ini memungkinkan pengembang dan perancang untuk menghasilkan kisi kustom dan kemudian mengunduh file CSS yang menyertainya berdasarkan kisi itu.
Lembar Sketsa & Gambar rangka
[Kembali ke atas]
Lembar Sketsa Desain Web Responsif
Alat ini berguna dalam memetakan penempatan berbagai elemen dalam tata letak situs web Anda di berbagai perangkat. Dengan bantuan perangkat ini, Anda dapat membentuk gagasan tentang di mana menempatkan elemen-elemen yang diperlukan dari suatu situs web untuk ukuran dan resolusi layar yang berbeda..
Wireframes yang Responsif
Responsif Wireframes adalah alat eksperimental yang dibuat oleh James Mellers dari Adobe. Itu dibangun dengan hanya HTML dan CSS (tidak ada gambar atau JS digunakan) yang dapat Anda gunakan untuk memvisualisasikan bagaimana desain responsif Anda akan terlihat seperti pada browser aktual dari berbagai desktop dan perangkat seluler.
Ubin gaya
Style Tiles memberi Anda cara untuk mengembangkan gagasan tentang bagaimana sebuah situs web akan terlihat, terlepas dari gaya rumit yang ikut bermain. Ini memberi Anda kesempatan untuk alur kerja desain responsif yang sempurna dan juga kemampuan untuk mengintegrasikan umpan balik klien.
Plugin JavaScript & jQuery
[Kembali ke atas]
Adaptasi
Adapt.js adalah solusi Javascript dan alternatif yang sangat baik untuk permintaan media CSS. Menggunakan pendekatan @media adalah praktik yang baik, tetapi ini tidak bekerja untuk semua browser. Nathan Smith, pencipta 960 Grid System, merilis Adapt.js, perpustakaan javascript yang sangat ringan untuk mengatasi masalah ini.
Isotop
Isotop adalah plugin jQuery yang luar biasa, yang terbukti sangat berguna saat merancang desain yang responsif. Ini tidak hanya membantu mengatur ulang elemen halaman ketika jendela browser diubah ukurannya atau ukuran layar lebih kecil, tetapi juga membantu untuk memfilter elemen-elemen tersebut..
Masonry
Masonry adalah plugin jQuery yang luar biasa, yang digunakan untuk membuat tata letak yang dinamis dan adaptif. Plugin ini membantu mengatur ulang elemen-elemen dalam desain responsif Anda, sehingga mereka dapat lebih cocok di tempat-terbuka di grid.
Menanggapi
Respond.js adalah skrip yang cepat dan ringan (diperkecil 3 Kb dan 1 Kb), yang tujuan utamanya adalah memungkinkan desain web responsif pada yang tidak mendukung Permintaan Media CSS3, seperti browser IE.
TinyNav.js
TinyNav.js adalah plugin jQuery yang kecil dan ringan, hanya 362 byte, yang mengubah daftar navigasi besar menjadi menu dropdown kecil untuk layar yang lebih kecil.
Plugin Wookmark jQuery
Wookmark adalah plugin jQuery yang mendeteksi ukuran jendela browser dan secara otomatis mengatur elemen halaman menjadi kolom. Anda juga dapat melihat pratinjau langsung di bagian bawah halaman itu sendiri.
Pengujian & Pratinjau
[Kembali ke atas]
ProtoFluid
ProtoFluid adalah alat prototyping berbasis web yang memungkinkan Anda menguji prototipe situs web Anda dalam berbagai ukuran dan resolusi layar. Cukup ketik URL, pilih perangkat (atau dimensi khusus apa pun) dan tekan peluncuran. Karena ini adalah alat berbasis web, itu juga memungkinkan Anda menggunakan ekstensi lain seperti FireBug.
Responsif
Responsive.Is dibuat oleh TypeCast alat emulator browser lain, yang dapat Anda gunakan untuk menguji desain responsif Anda. Cukup ketik URL, dan itu akan secara otomatis mengubah ukurannya tergantung pada perangkat yang Anda pilih.
Responsivepx.Com
ResponsivePx adalah alat yang luar biasa untuk menguji desain situs web responsif Anda. Fitur utama yang membedakannya dari yang lain, adalah kemampuannya untuk mengubah ukuran situs web piksel demi piksel. Fitur luar biasa ini, akan memungkinkan Anda mengidentifikasi breakpoints dan juga menguji bagaimana permintaan media CSS bekerja di situs Anda.
Alat Pengujian Desain Web Responsif
Alat pengujian yang luar biasa, yang memungkinkan Anda melihat situs web responsif Anda dalam berbagai ukuran layar secara bersamaan dalam satu layar, saat Anda membuat atau mendesainnya. Saya suka alat ini terutama karena ini menunjukkan semua resolusi layar berdampingan yang membuatnya lebih mudah untuk debugging.
ReView.Js
ReView adalah sistem viewport dinamis, yang dikembangkan dalam JavaScript murni, yang memberi Anda pengalaman menonton yang fantastis untuk desain Web responsif Anda.
Screenfly
Screenfly oleh QuirkTools, adalah alat luar biasa yang memungkinkan Anda melihat situs web responsif di berbagai perangkat: Desktop, Tablet, Ponsel, dan TV. Ini juga memiliki opsi untuk mengaktifkan atau menonaktifkan gulir atau bahkan memutar layar.
Screenqueri.es
Screenqueri.es adalah alat pengujian desain responsif pixel-sempurna. Masukkan saja alamat situs web yang ingin Anda periksa, dan alat ini yang berkinerja akan menampilkan situs web dalam berbagai ukuran layar sesuai perangkat. Anda juga dapat secara manual mengubah ukuran ukuran piksel demi piksel untuk mengidentifikasi breakpoint.
Responsinator
Uji situs Anda di berbagai perangkat dari iPhone dan iPad, hingga Kindle dan Android di Responsinator. Ini juga menunjukkan situs Anda dalam mode potret dan lansekap. Saya lebih menyukai alat ini karena garis besar perangkat yang ditampilkan pada halaman, yang membawa lebih banyak makna pada keseluruhan proses.
Bilah geser
[Kembali ke atas]
Blueberry
Blueberry adalah slider gambar jQuery open source yang fantastis, yang ditulis khusus untuk tata letak yang cair atau responsif.
Elastislide
Ingin korsel yang secara otomatis akan menyesuaikan dengan ukuran layar ketika jendela browser diubah ukurannya atau ketika Anda berada di layar yang lebih kecil? Elastislide adalah plugin jQuery yang paling cocok untuk kebutuhan Anda.
Slider CSS3 Responsif
Ini adalah slider CSS3 responsif murni yang dapat beradaptasi dengan ukuran layar dan resolusi layar dengan mudah. Yang menyenangkan tentang slider ini adalah, panah masuk ke dalam kotak ketika ukuran layar perangkat cukup kecil. Tidak perlu JavaScript.
ResponsiveSlides.Js
ResponssiveSlides.Js adalah plugin jQuery yang sangat sederhana dan sangat ringan (hanya 1Kb) yang membuat slider responsif menggunakan daftar yang tidak diurut. Ia bekerja pada berbagai browser, juga pada IE6 dan lebih tinggi.
Lainnya
[Kembali ke atas]
Gambar Adaptif
Gambar Adaptive adalah alat online untuk desain web responsif, yang mendeteksi ukuran layar pengunjung dan membuat, menyimpan dan mengirim gambar yang diskala ulang, berdasarkan pada ukuran dan resolusi layar.
FitText.Js
FitText.js adalah alat javascript kecil, yang memungkinkan pengubahan ukuran teks dan berita utama secara otomatis ketika jendela browser diubah ukurannya. Tidak ada lagi kekhawatiran ketidakcocokan ukuran teks dengan alat ini di papan tulis.
FitVid.Js
Ingin mengubah skala video yang tertanam saat jendela peramban diubah ukurannya atau perangkat memiliki resolusi lebih kecil? FitVid.Js dapat membantu Anda mencapai ini. Ini adalah jQuery plugin yang ringan, sederhana, dan mudah digunakan yang digunakan untuk mencapai video tertanam dengan lebar cairan.
Gambar Retina
Gambar Retina adalah solusi javascript yang luar biasa, yang akan secara otomatis melayani @ 2X lebih besar, gambar beresolusi tinggi ketika dilihat pada layar retina. Yang perlu Anda lakukan adalah meletakkan versi resolusi tinggi dari masing-masing dan setiap gambar, dan itu akan mengatur sisanya.
Grid Foto Responsif yang Mulus
Grid Foto Responsif Seamless menampilkan gambar ujung ke ujung pada browser, tanpa ada celah di antara gambar. Foto-foto dibuat dari ubin dan mengalir dari kiri ke kanan di seluruh halaman dalam kolom. Jumlah kolom menyesuaikan sesuai dengan ukuran jendela browser.
SlabText
SlabText adalah plugin atau alat jQuery oleh Brian McAllister berdasarkan pada algoritma slabText, yang membagi headline menjadi baris sebelum mengubah ukuran setiap baris untuk mengisi ruang yang tersedia. Ini sangat mirip dengan plugin FitText.Js yang sedang beraksi.
Zurb - ResponsiveTables
Pernahkah Anda bertanya-tanya bagaimana cara menangani tabel data besar dalam desain responsif? Zurb, kombo CSS / JS memberi Anda jawabannya; dibutuhkan tabel data dan memodifikasinya sehingga tidak merusak tata letak responsif pada perangkat layar yang lebih kecil.
Kategorizr
Categorizr adalah skrip PHP yang sangat kecil, memberikan pengunjung Anda pengalaman web yang lebih bertarget. Ini akan membantu Anda memberikan desain khusus perangkat untuk Tablet, TV, Mobile, atau Desktop.
Bookmarklet Permintaan Media
Media Query Bookmarklet menunjukkan kepada Anda berapa ukuran yang dimiliki oleh viewport saat ini dan permintaan media mana yang dipecat untuknya.
Kalkulator Responsif
Kalkulator Responsif adalah alat daring yang sangat sederhana yang dapat membantu Anda mengubah piksel menjadi persentase saat merancang situs web responsif Anda.
Sampai minggu depan
Di minggu kedua seri ini, kami akan memberi Anda tutorial yang benar-benar akan membawa Anda ke Desain Web Responsif (RWD).
Jangan sampai ketinggalan.
