50 alat hebat untuk reka bentuk web yang responsif

Pengarang: Monica Porter
Tarikh Penciptaan: 17 Mac 2021
Tarikh Kemas Kini: 17 Mungkin 2024
Anonim
How to use the Group for the Responsive Web Design
Video.: How to use the Group for the Responsive Web Design

Kandungan

Seperti yang diperkenalkan / diciptakan oleh Ethan Marcotte dalam artikelnya "Reka Bentuk Web Responsif" dan juga buku terlarisnya, seseorang memerlukan tiga elemen untuk menjadikan laman web responsif:

  1. Grid fleksibel / bendalir
  2. Gambar responsif
  3. Pertanyaan media

Terdapat banyak artikel hebat lain yang merangkumi motif, konsep, dan teknik mengenai reka bentuk web yang responsif, jadi kami akan memusatkan perhatian artikel ini pada beberapa alat utama yang akan membantu anda menjadi responsif.

Alat untuk memulakan

Sebelum anda memulakan dengan membina laman web anda, lebih baik anda membuat sketsa bagaimana elemen-elemen pada halaman tersebut akan disesuaikan agar sesuai dengan pelbagai ukuran penyemak imbas dari pelbagai peranti yang akan dilihat, dan untuk mengelakkan pemutus hubungan yang sering timbul daripada memikirkan terutamanya reka bentuk desktop dan selebihnya lelaran responsif sebagai renungan (lihat terutamanya komen Stephanie (Sullivan) Rewis).

01. Lembaran Lakaran Reka Bentuk Web Responsif

Kumpulan lembaran lakaran responsif ini, oleh Jeremy P Alford, adalah titik permulaan yang baik untuk mula memetakan bagaimana bahagian halaman akan beralih dalam resolusi yang berbeza.


02. Buku Lakaran Reka Bentuk Responsif

Sekiranya anda lebih suka menyimpan semua lakaran anda di satu tempat, maka anda mungkin ingin mempertimbangkan buku ini dengan 50 helaian lakaran responsif oleh syarikat App Sketchbook.

03. Rangka Wire Responsif

Salah satu kesukaran untuk membina laman web responsif adalah menggunakan bingkai kawat untuk menunjukkan bagaimana reka bentuk responsif akan berfungsi. James Mellers dari Adobe telah mengumpulkan alat eksperimen ini untuk menunjukkan bagaimana penyusun wayar yang responsif dapat berfungsi.


04. Corak Susun atur Pelbagai Peranti

Semasa merancang reka bentuk responsif, berguna untuk melihat bagaimana orang lain menghampirinya sebelum anda, jadi Corak Susun atur Pelbagai Perisian Luke Wroblewski, yang menyenaraikan corak popular dengan pautan ke contoh, adalah tempat yang baik untuk memulakan.

05. Jubin Gaya

Ubin Gaya Samanatha Warren mencadangkan teknik baru untuk reka bentuk pada zaman responsif; daripada mockup reka bentuk lebar tetap, ini seperti swatch atau papan mood yang menunjukkan pendekatan reka bentuk umum tanpa membahas terperinci.

Alat untuk grid fleksibel / bendalir

Seperti yang dinyatakan sebelumnya, komponen pertama yang diperlukan untuk reka bentuk responsif adalah grid fleksibel / bendalir.Perkara berikut sudah dibuat sebelumnya: anda hanya perlu memuat turunnya dan anda akan segera menuju ke laman web yang lebih responsif.


06. Sistem Grid Emas

Joni Korpi, yang juga mengembangkan Less Framework, baru-baru ini melancarkan versi baru sistem grid yang boleh dipercayai untuk reka bentuk responsif. Disifatkan sebagai "lipat" kerana mudah menyesuaikan diri dari 16, lapan, hingga empat lajur, Sistem Grid Emas juga mempunyai hamparan penyemak imbas kecil yang memperlihatkan grid pada halaman anda untuk diuji.

07. Foldy960

Tuan-tuan berbakat di Paravel, Inc. telah melepaskan grid 960.gs yang telah diubah suai yang mereka gunakan sebagai asas untuk projek responsif mereka.

08. SimpleGrid

SimpleGrid, oleh Conor Muirhead, dibangun dengan responsif yang disediakan, jadi mudah untuk bangun dan berjalan dengan projek laman web responsif anda.

09. Grid CSS 1140px

Sistem grid responsif lain yang hebat adalah 1140px CSS Grid oleh pereka Melbourne Andy Taylor, yang beralih dari resolusi desktop yang luas ke telefon bimbit.

10. Sistem grid CSS kolum

Sistem grid Columnal, yang dibuat oleh Pulp + Pixels aka pengarah kreatif Nick Gorsline, didasarkan pada sistem grid 1140px, tetapi dengan beberapa barang tambahan seperti kit reka bentuk dengan lembaran lakaran dan templat wireframing, serta gaya debugging CSS.

11. Sistem grid semantik

Sambungan CSS yang diproses sebelumnya seperti Sass dan LESS menjadi semakin popular, dan sistem grid Semantik Tyler Tate menggunakannya untuk memberi kesan maksimum dalam sistem grid ini yang mendakwa tidak menggunakan kelas atau elemen yang tidak perlu. Baca lebih lanjut di coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSAH

Seperti sistem grid Semantik Oddbird's SUSY mencipta sistem grid yang tidak menggunakan markup tambahan atau kelas khas, tetapi SUSY hanya ditujukan kepada pengguna Sass (dan pelanjutannya, Kompas).

13. Gridpak

Gridpak, oleh Erskine Design, adalah salah satu penjana grid responsif terbaru di sekitar. Ini membolehkan anda mengatur lajur dan selokan pada sejumlah titik putus, kemudian mengeluarkan fail CSS, JavaScript dan PNG sehingga seluruh pasukan anda bekerja dari titik permulaan yang sama.

14. Gridset

Masih ada sedikit misteri mengenai Gridset kerana, pada saat saya menulis ini, sebenarnya belum dilepaskan. Tetapi alat oleh Mark Boulton Design menjanjikan sistem grid khusus, bukan preskriptif dan kaedah untuk menyimpan dan menguruskan grid anda secara dalam talian.

15. Grid Photoshop yang lebih baik untuk RWD

Elliot Jay Stocks mencadangkan untuk meninggalkan standard grid 960px de facto lama dan berfungsi dari pangkalan 1000px sebagai gantinya, menjadikan semua pengiraan peratusan lebih mudah digunakan. Sekiranya anda bersetuju, dia membuat JPA untuk anda mula bekerja dengannya.

16. Grid Bendalir

Sekiranya reka bentuk anda sangat khusus dan anda perlu membuat grid tersuai anda sendiri, anda boleh melakukannya dengan .net Awards kalkulator grid lancar calon baru Harry Roberts.

17. Kalkulator Responsif

Kalkulator piksel hingga peratusan lain, tetapi yang satu ini oleh Stu Robson melangkah lebih jauh daripada yang lain dengan membuat semua peraturan CSS untuk anda, yang bermaksud anda boleh menyalin dan menampalnya ke dalam helaian gaya anda.

Alat untuk gambar responsif (dan teks)

Komponen penting lain dalam reka bentuk web responsif adalah gambar yang lancar. Walaupun teknik untuk mendapatkan gambar yang lancar adalah mudah, mengoptimumkan prestasi dan memuatkan halaman untuk pelbagai peranti nampaknya merupakan salah satu cabaran terbesar dalam reka bentuk web yang responsif. Berikut adalah beberapa sumber untuk mendekati masalah ini.

18. Imej Responsif

Filament Group merancang cara untuk mengirim gambar bersaiz tepat berdasarkan resolusi layar. Eksperimen ini dengan gambar pertama mudah alih yang berskala responsif dan bertanggungjawab memerlukan dua gambar dengan ukuran berbeza untuk dijadikan rujukan.

19. Imej Adaptive

Matt Wilcox mendapat inspirasi dari alat Responsif Imej untuk membuat Imej Adaptive, yang menggunakan PHP dan sedikit JavaScript untuk menayangkan gambar yang sesuai ke peranti pengguna tanpa memerlukan penambahan tambahan.

20. Sencha.io Src (dahulunya Tinysrc)

Sencha menyediakan perkhidmatan awan yang mengirimkan versi diolah yang dioptimumkan untuk ukuran peranti yang memintanya. Untuk mengetahui cara menggunakannya, lihat docs.sencha.com/io/src/.

21. FitTeks

Namun permata lain dari Paravel, Inc adalah FitText.js, pemalam jQuery untuk menjadikan jenis web utama responsif terhadap reka bentuk dan peranti. Untuk maklumat lanjut lihat trentwalton.com/2011/05/10/fit-to-scale/.

22. slabTeks

Diilhamkan oleh FitText dan algoritma SlabType, slabText Brian McAllister adalah pemalam jQuery yang membuat blok teks tebal yang diubah saiznya secara responsif sambil tetap pada lebar yang ditentukan.

Alat untuk pertanyaan media

Sekarang setelah anda mempunyai idea tentang bagaimana susun atur anda akan berubah untuk peranti yang berbeza, grid cecair dan gambar cecair, anda memerlukan pertanyaan media untuk mengalihkan elemen halaman ke keadaan responsif.

23. Respon.js

Satu masalah dengan reka bentuk responsif ialah penyemak imbas yang tidak dapat membaca pertanyaan media ketinggalan. Ini mungkin bukan masalah dengan khalayak sasaran anda, tetapi masih merupakan amalan yang baik untuk mengakomodasi pengguna di penyemak imbas yang lebih lama. Respond.js, oleh Scott Jehl, hanya menyokong sifat lebar minimum dan lebar maksimum.

Untuk lebih banyak 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, membolehkan versi lama IE dan penyemak imbas lain untuk menguji dan menggunakan semua jenis pertanyaan media dengan berkesan.

25. Adapt.js

Nathan Smith, pengarang sistem grid 960.gs yang asal, telah menulis Adapt.js, skrip yang mengesan dimensi penyemak imbas dan hanya menyajikan lembaran gaya yang diperlukan - seperti pertanyaan media tetapi tanpa pertanyaan media, yang bermaksud ia juga berfungsi pada penyemak imbas yang lebih lama.

26. Kategorizr

Ini adalah pengesanan peranti yang didekati dari sudut yang bertentangan - Skrip Kategorizr Brett Jankord menganggap bahawa peranti mudah alih kecuali jika dikesan sebagai desktop atau tablet, yang membolehkan anda memberikan sumber kepada penyemak imbas dengan cara yang bersimpati.

Plat dandang reka bentuk responsif (dan mudah alih)

Dalam semangat aliran kerja responsif yang cekap, plat dandang memudahkan proses memindahkan reka bentuk ke penyemak imbas lebih cepat daripada kemudian. Sebilangan besar plat dandang ini menggabungkan yang terbaik dari alat yang disebutkan di atas ke dalam satu pakej yang kemas: grid fleksibel yang diperkuat dengan skrip, sambil menerapkan falsafah mudah alih pertama yang mudah alih.

27. 320 dan Ke Atas

Andy Clarke's 320 and Up adalah boilerplate pertama mudah alih yang berintegrasi dengan banyak alat reka bentuk web moden yang lain, seperti LESS dan Bootstrap (lihat # 30). Ini adalah cara yang ringan dan tangkas untuk membina laman web dengan cepat. Lihat juga temu ramah kami dengan Andy, di mana dia memberitahu kami lebih banyak mengenai versi baru.

28. Tanpa Grid

Gridless adalah plat pemanas HTML5 dan CSS3 yang dapat menjadi asas untuk reka bentuk responsif anda, dengan fokus pada tipografi dan keserasian penyemak imbas yang disiapkan.

29. Kerangka

Tidak seperti dua plat boiler sebelumnya, yang titik permulaannya adalah dengan resolusi terkecil, kit pengembangan Skeleton, yang dibuat oleh Dave Gamache, didasarkan pada sistem grid 960.gs dan turun ke mudah alih. Skeleton juga mempunyai kerangka gaya yang hebat untuk pembangun untuk membina gaya di atas.

30. Bootstrap

Dibina oleh Twitter dan kini bersumber terbuka, Bootstrap adalah kerangka dan rangkaian komponen untuk mendapatkan laman web dalam talian dengan cepat, dan pada versi dua semua bahagian utamanya berfungsi dengan responsif.

Plugin, shim dan polyfill

Walaupun penyemak imbas dan perisian moden cenderung untuk responsif, kadang-kadang kita harus menggunakan alat tambahan untuk memberikan pengalaman yang konsisten.

31. Plugin Responsif

Marios Lublinski telah menulis pemalam WordPress yang menjanjikan untuk mengubah tema WP semasa menjadi tema yang responsif. Bagaimana ini berfungsi, saya belum tahu kerana ini belum dilancarkan pada masa penulisan ini, tetapi jika sesuai dengan janjinya, ia pasti sangat berguna.

32. Menumbangkan

Pengendalian limpahan kandungan berfungsi dengan baik pada penyemak imbas desktop, tetapi penyemak imbas mudah alih yang lebih lama menanganinya secara tidak konsisten. Overflow polyfill dari Filament Group yang rajin menambah kemerosotan yang konsisten di semua peranti, memastikan bahawa semua pengguna mudah alih mendapat pengalaman terbaik.

33. Jadual Media

Plugin jQuery Marco Pegoraro, MediaTable, bekerjasama dengan Respond.js untuk membantu anda mengatasi masalah bagaimana memaparkan jadual data besar pada peranti skrin kecil, membuat lajur responsif dan menambahkan togol pertunjukan / sembunyi di mana sesuai.

"Pengujian, pengujian: 1-2-3 ..."

Aspek lain dari aliran kerja responsif adalah mengetahui peranti sasaran dan resolusi anda dan kemudian mengujinya.

34. ubah saizMyBrowser

resizeMyBrowser, oleh pemaju frontend, Chen Luo, mempunyai beberapa dimensi pratetap untuk tetingkap penyemak imbas anda untuk menguji halaman yang dirancang dengan responsif atau membuat pratetap baru jika anda tidak dapat menemukan halaman yang sesuai dengan keperluan anda.

35. responsifpx

Sama seperti resizeMyBrowser, responsivepx, yang dibina oleh Remy Sharp, memuat halaman anda di tetingkap di mana anda boleh menguji lebar dan tinggi untuk menentukan seberapa baik pertanyaan media anda diaktifkan dan di mana titik pemisah dalam reka bentuk.

36. Ujian Reka Bentuk Responsif

Alat yang sangat berguna oleh pereka dan pemaju Matt Kersley: masukkan URL laman web responsif anda dalam Ujian Reka Bentuk Responsif untuk melihat bagaimana ia dihasilkan pada pelbagai saiz penyemak imbas.

37. Penanggungjawab

Masukkan URL dan The Responsinator akan menunjukkan kepada anda bagaimana ia dipaparkan dalam banyak saiz peranti biasa - dengan kecekapan robot yang kejam. Tama Pugsley dan Andy Hovey bertanggungjawab untuk yang satu ini.

38. Responsif.is

Emulator peranti dalam halaman yang lain, Responsive.is membolehkan anda memasukkan URL kemudian mengubah saiznya dengan cepat antara pelbagai pratetap yang berbeza. Ia dibuat oleh pasukan di sebalik aplikasi Typecast yang akan datang.

39. Screenqueri.es

Satu lagi alat dimensi penyemak imbas, tetapi Screenqueri.es dari Mandar Shirke membezakan dirinya dengan memiliki set pratetap mudah alih dan tablet yang luas, serta grid dan penguasa yang membuat pengukuran halus menjadi lebih mudah.

40. Aptus

Aplikasi lain untuk menguji laman web pada pelbagai ukuran yang ditentukan, tetapi Aptus adalah asli Mac. Ini tersedia melalui Mac App Store, dan menjadi asli membawa ciri tambahan seperti tangkapan skrin yang mudah dan sokongan luar talian.

41. Bookmarklet Reka Bentuk Responsif

Victor Coulon telah membuat bookmarklet yang sangat mudah tetapi berkesan; apabila anda mengaktifkannya di laman web mana pun ia menambah bar alat yang membolehkan anda beralih antara empat dimensi skrin biasa sehingga anda dapat melihat bagaimana laman web anda menghasilkan pada ukuran yang berbeza.

42. Bookmarklet Ujian Reka Bentuk Responsif

Bookmarklet oleh Benjamin Keen ini memungkinkan penyesuaian lebih banyak dengan membiarkan anda menentukan ukuran peranti anda sendiri, dan seberapa banyak atau sedikit yang anda mahukan. Apabila diaktifkan ia menunjukkan laman web pada semua ukuran yang dipilih, berdampingan untuk memudahkan perbandingan.

43. Layar layar

Screenfly, oleh QuirkTools, membolehkan anda menguji laman web dengan resolusi yang berbeza di desktop, tablet, mudah alih dan televisyen. Pengujian desktop pada masa ini terhad kepada Safari, sementara tablet dan telefon bimbit mempunyai lebih banyak pilihan untuk peranti dan penyemak imbas. Televisyen terhad untuk Opera.

44. Petunjuk Pertanyaan Media

Johan Brook menawarkan cara CSS murni untuk menguji apabila pertanyaan media telah dicetuskan oleh penyemak imbas. Petunjuk Pertanyaan Media adalah satu lagi alat yang baik untuk menguji dan bermain dengan titik pemecah reka bentuk.

45. Shim

Salah satu alat yang digunakan dalam reka bentuk semula Boston Globe, poster poster pergerakan RWD, Shim adalah aplikasi Node.js yang menjalankan laman web di pelbagai peranti pada rangkaian Wifi yang sama, menjadikan ujian rentas peranti jauh lebih mudah .

46. ​​Memandu masuk

Sekiranya anda tidak mempunyai pelayan Node.js untuk menjalankan Shim, Scott Jehl telah membuat versi yang lebih mudah bernama Drive-In yang berfungsi pada dasarnya dengan cara yang sama, tetapi menggunakan PHP, Apache, dan fail .htaccess.

47. Adobe Shadow

Adobe meneruskan usaha mereka ke dalam teknologi web dengan alat debug jauh ini. Pasang Shadow dan pelanjutan Chrome di Mac atau Windows, serta klien Shadow di Android atau iPhone, dan anda boleh berkongsi halaman web antara banyak peranti yang berbeza.

48. Emulator Bergerak Opera + Debug Jauh

Cara yang lebih mudah untuk men-debug halaman mudah alih adalah dengan memasang Opera dan Opera Mobile Emulator dan menghubungkan kedua-duanya dengan pilihan Debug Jauh mereka. Mudah dan cepat untuk disiapkan, dan mempunyai faedah tambahan untuk menguji lebih dari WebKit.

Inspirasi lebih lanjut

Ingin mendapatkan idea bagaimana orang lain membuat reka bentuk mereka responsif?

49. MediaQueri.es

Sekiranya anda belum melihatnya, laman web Mediaqueri.es mempunyai bilangan laman web yang semakin meningkat yang telah menyeberang ke sisi responsif.

50. @RWD

Ethan Marcotte menjalankan akaun Twitter yang membawa berita, alat dan pameran terkini dari dunia RWD.

Denise Jacobs suka menjadi penceramah, pengarang, pelatih reka bentuk web dan penginjil kreativiti, sementara Peter Gasston adalah pengarang The Book of CSS3 dan pemaju web veteran yang menulis blog di Broken Links.

Suka ini? Baca ini!

  • Petua profesional untuk membina laman web mudah alih
  • Teknik CSS dan JavaScript teratas
  • Cara membina aplikasi
  • Fon web percuma terbaik untuk pereka
  • Ketahui apa yang seterusnya untuk Augmented Reality
  • Muat turun tekstur percuma: resolusi tinggi dan sedia untuk digunakan sekarang
Perkara Sebelumnya.

Mengapa anda harus mengatakan ya lebih daripada tidak dalam reka bentuk
Artikel Seterusnya

Cara mengasah kemahiran reka bentuk anda (jika anda seorang pemaju)
Penerbitan Yang Menarik
Apa itu web hosting?
Lagi

Apa itu web hosting?

Mungkin 2024
Apa itu web ho ting? ekiranya itu adalah oalan yang pernah anda tanyakan kepada diri endiri, anda tidak endirian. ama ada anda mahu membina laman web anda endiri, atau membayar pereka web atau agen i ...
Cara menambah fon di Photoshop
Lagi

Cara menambah fon di Photoshop

Mungkin 2024
Fon di Photo hop: Pautan panta - Tambahkan fon di Photo hop di Mac - Tambahkan fon pada Window - Le en fon - Fon Adobe - OTF v TTFMempelajari cara menambahkan fon di Photo hop adalah kemahiran yang c...
Sertailah revolusi Sketch dengan terbitan baru net
Lagi

Sertailah revolusi Sketch dengan terbitan baru net

Mungkin 2024
elamat datang ke revolu i ket a! Kecuali jika anda hidup di bawah batu, anda akan melihat aplika i ini maju di ruang aplika i reka bentuk. Brian Hoff adalah alah atu daripada banyak pereka web dan pe...