Alat 13 untuk Reka Bentuk Web Responsif

Reka bentuk web responsif memastikan laman web berfungsi dengan baik pada peranti dan skrin yang berbeza. Gunakan alat reka bentuk responsif untuk memastikan pengguna mempunyai pengalaman tontonan yang optimum.

Berikut adalah senarai alat reka bentuk responsif. Terdapat alat untuk membina elemen laman web yang responsif, dan alat untuk menguji reka bentuk anda pada pelbagai jenis peranti dan saiz skrin yang sebenar. Terdapat alat premium dan percuma.

Alat untuk Design Responsif

Reka bentuk responsif, secara bergambar secara responsif. Dicipta oleh James Mellers dari Adobe, alat mudah ini membolehkan pengguna untuk bermain dengan contoh ilustrasi reka bentuk responsif. Ubah saiz tetingkap pelayar anda untuk melihat jenis kekangan saiz yang akan anda gunakan. Harga: Percuma.

Reka bentuk responsif, secara bergambar secara responsif

Reka bentuk responsif, secara bergambar secara responsif

Bootstrap. Membangun projek pertama yang responsif, mudah alih di web dengan salah satu perpustakaan bahagian depan yang paling popular. Bootstrap adalah rangka kerja sumber terbuka untuk membangun dengan HTML, CSS, dan JS. Pantas prototaip idea anda atau bina keseluruhan aplikasi anda dengan sistem grid responsif Bootstrap, komponen prebuilt, dan plugin yang dibina di jQuery. Harga: Percuma.

Ujian Mesra-Mudah Google. Uji betapa mudahnya pengunjung boleh menggunakan halaman anda pada peranti mudah alih dengan menggunakan Ujian Mudah Alih Mudah Google. Merancang laman web anda untuk mesra mudah alih memastikan bahawa halaman anda berfungsi dengan baik pada semua peranti. Harga: Percuma.

Justinmind. Justinmind adalah alat prototaip semua-dalam-satu untuk apl web dan mudah alih. Tentukan laman web dan apl untuk web, iOS, dan Android dengan antara muka drag-and-drop - tiada pengekodan yang terlibat. Menyesuaikan dan menyesuaikan lengkung anda dengan susun atur yang dinamik untuk memuatkan semua saiz skrin merentas semua peranti dengan peristiwa dan tindakan fleksibel Justinmind. Justinmind akan membolehkan anda melihat dan menguji prototaip aplikasi web dan mudah alih anda dengan serta-merta dari mana-mana pelayar, dengan paparan web asli dan kulit peranti yang berbeza. Harga: Rancangan bermula pada $ 19 sebulan.

Justinmind

Justinmind

Gridset. Gridset membolehkan pereka untuk menyediakan grid susun atur kreatif untuk web tanpa perlu risau tentang pengiraan. Gridset membolehkan anda menyesuaikan grid khusus di seluruh titik putus yang anda tentukan untuk reka bentuk responsif yang berkesan, memastikan kandungan anda kelihatan baik di mana-mana skrin. Harga: Rancangan bermula pada $ 9 sebulan.

Imej Adaptif. Imej Adaptasi mengesan saiz skrin pelawat anda dan secara automatik mencipta, membuat cache, dan menyampaikan versi peranti bersambung semula imej HTML terbenam yang bersesuaian. Ia bertujuan untuk digunakan dengan reka bentuk responsif, digabungkan dengan teknik imej cecair. Tiada perubahan markup diperlukan. Harga: Percuma.

FitText. Plugin jQuery untuk menaikkan jenis web, FitText menjadikan fon saiz fleksibel. Gunakan plugin ini pada susun atur cecair atau responsif anda untuk mencapai tajuk yang boleh terbaca yang mengisi lebar unsur induk. FitText adalah untuk teks paparan yang besar sahaja. Harga: Percuma.

FitText

FitText

Ghostlab. Dengan Ghostlab, anda boleh menguji mana-mana laman web pada pelbagai penyemak imbas dan peranti mudah alih secara serentak. Hanya seret URL ke Ghostlab dan klik butang "Main". Mulakan ujian di salah satu pelayar atau peranti yang disambungkan. Semua pelayar dan peranti lain akan mencerminkan tindakan anda - butang klik, pautan berikut, menatal halaman, mengisi borang, dan melayang tetikus anda ke atas elemen istimewa. Ambil tangkapan skrin secara langsung dari dalam Ghostlab, tuliskannya dalam editor imej bersepadu, dan seretnya ke mana-mana pelacak bug yang anda gunakan. Harga: $ 49.

Adakah saya Responsif? Adakah saya Responsif adalah alat untuk tangkapan cepat pada titik break reka bentuk responsif. Cukup masukkan URL anda. Susun semula dan susun semula peranti dengan mengklik dan menyeret peranti. Gunakan bookmarklet Am I RWD untuk menyemak respons di mana-mana tapak dengan satu klik dari penyemak imbas anda sendiri. Harga: Percuma.

Responden. Responsinator membantu pembuat laman web dengan cepat mendapatkan petunjuk tentang bagaimana laman responsif mereka akan melihat pada peranti yang paling popular. Walau bagaimanapun, ia tidak meniru bagaimana ia akan kelihatan. Untuk ujian yang tepat selalu menguji pada peranti sebenar. Harga: Percuma.

Responden

Responden

Mod Peranti Google Devoolools. DevTools Google Chrome adalah satu set alat pengarangan, debugging, dan profil yang dibina dalam Google Chrome. Gunakan Mod Responsif semasa pembangunan aktif tapak dan aplikasi anda dan ubah saiz paparan sering untuk membuat reka bentuk bebas responsif yang menyesuaikan dengan jenis peranti yang tidak diketahui dan masa hadapan. Uji tindak balas tapak anda menggunakan emulator skrin Mod Peranti. Kawalan paparan membolehkan anda menguji laman web anda terhadap pelbagai peranti, serta responsif. Harga: Percuma.

Tumpukan Penyemak Imbas. Browser Stack adalah platform untuk ujian pelayar berasaskan web secara langsung. Uji pelbagai peranti mudah alih Android dan iOS fizikal dan tablet untuk hasil yang paling tepat. Uji dengan pelayar desktop 1,100 pada mesin sebenar, dengan streaming media, alat pemaju, pintasan papan kekunci dan banyak lagi. Hasilkan tangkapan skrin pada saiz peranti sebenar pada iOS, Android, OS X, dan Windows. Harga: $ 29 sebulan.

CrossBrowserTesting. CrossBrowserTesting memberikan anda akses kepada pelayar dan peranti pelawat anda menggunakan. Lakukan ujian manual dan penerokaan interaktif pada desktop dan pelayar mudah alih 1,500. Ambil tangkapan skrin secara automatik merentas berbilang pelayar sekaligus, membandingkan susun atur responsif penuh halaman. Ambil ujian visual dengan setiap perubahan baru, dan bandingkannya dengan versi sejarah untuk ujian regresi yang lebih mudah. Harga: $ 29 sebulan.

CrossBrowserTesting

CrossBrowserTesting

Source

Sila tinggalkan balasan anda

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.