30 Tutorial Desain Web Responsif yang Berguna
Jadi kita telah mencapai akhir dari kita "Minggu Desain Web Responsif", posting malam ini akan menjadi yang terakhir dari seri ini. Kami berusaha sekuat tenaga untuk mengasah keterampilan Anda dalam memanipulasi kode-kode itu untuk merespons sesuka hati ketika ditampilkan pada perangkat yang berbeda. Dan untuk melakukan ini, kami menampilkan 30 Tutorial Desain Web Responsif ditemukan online. Daftar ini tidak dimaksudkan untuk menjadi lengkap tetapi akan membantu Anda memulai memahami dasar-dasar merancang situs web adaptif yang akan memenuhi semua jenis ukuran layar.
Kita akan mulai dengan tutorial pengantar di 'Breaking the Ice', sesuatu seperti kelas RWD: 101 yang harus Anda hadiri untuk memahami konsep sebelum kita melanjutkan ke latihan 'Mulai Membangun'.
Terakhir kita akan mengakhiri dengan bagian 'Lakukan Lagi' di mana kita akan menampilkan tutorial yang bermain dengan tata letak horizontal, video 'elastis', menu drop-down dan navigasi akordeon slide-to-top, thumbnail dan masalah lengket dengan tabel.
Tapi pertama-tama…
Berikut ringkasan dari dua tutorial yang ditampilkan awal minggu ini oleh penulis kami:
Navigasi situs web yang responsif
Oleh Thoriq Firdaus - [Lihat tutorial]
Berikut tutorial untuk membantu Anda membuat navigasi situs web responsif Anda sendiri. Salah satu aspek terpenting dari sebuah situs web adalah betapa mudahnya menavigasi melalui berbagai bagian situs. Cari tahu cara mengoptimalkan ini dengan CSS3 dengan tutorial ini.
Resume yang Responsif
Oleh Jake Rocheleau - [Lihat tutorial]
Jika Anda seorang profesional web dan resume online sudah menjadi bagian dari karir Anda, maka Anda harus mengambil kesempatan untuk mengubah resume yang responsif juga. Mempermudah pemberi kerja dan klien menemukan Anda di perangkat apa pun. Dan saat Anda berada di dalamnya, resume Anda sendiri berfungsi sebagai portofolio dari apa yang dapat Anda lakukan sebagai pengembang.
Memecah Es
Sekarang, dimana kita? Ah ya, mari kita mulai aksi pemecah kebekuan!
Panduan Pemula untuk Desain Web Responsif
Oleh Nick Petit - [Lihat tutorial]
Tutorial ini adalah titik awal yang bagus untuk pemula karena menjelaskan apa arti desain responsif web, bagaimana hal itu terungkap, serta penjelasan tentang kisi-kisi jaringan dan pertanyaan media antara lain. Lihat sumber daya yang tercantum di bagian bawah tutorial juga.
Pengantar Desain Web Responsif: Video
Oleh Nick Petit - [Lihat tutorial]
Ini adalah tutorial yang berdurasi hampir 9 menit yang memeriksa permukaan apa yang dimaksud dengan desain web responsif, bagaimana hal itu terjadi, dampaknya pada desain situs web dan elemen apa yang terlibat dalam menghasilkan desain web responsif . Jika Anda ingin memahami apa desain web responsif tanpa menuju ke pengkodean terlebih dahulu, Anda harus mulai dengan video ini.
Cara Mengubah Situs Web Apa Saja menjadi Situs Responsif
Oleh Rochester Oliveira - [Lihat tutorial]
Ini adalah tutorial lain yang dimulai dari dasar-dasar tetapi memecah semuanya sedikit demi sedikit, termasuk OS dan browser yang membuat Anda responsif terhadap situs web Anda serta elemen-elemen yang terpengaruh ketika situs web dilihat dari perangkat yang berbeda. Penulis juga menampilkan beberapa plugin WordPress dan jQuery yang berguna untuk membantu membuat pekerjaan Anda jauh lebih mudah.
Desain Responsif dalam 3 Langkah
Oleh Nick La - [Lihat tutorial]
Tutorial ini, akan menjelaskan bagaimana Anda dapat menghasilkan desain web yang responsif dengan meta tag, struktur HTML, dan kueri media yang sangat penting. Anda membutuhkan pengetahuan CSS untuk memahaminya ...
Merancang Untuk Web yang Responsif
Oleh Max Luzuriaga - [Lihat tutorial]
Berikut ini adalah artikel yang tidak begitu banyak tutorial karena ini adalah panduan untuk membuat desain web responsif. Yang mengatakan, penulis benar-benar memberitahu Anda yang harus dan tidak boleh dilakukan dari desain web responsif. Ada penjelasan tentang mengapa fitur tertentu tidak cukup responsif, cara bekerja dengan proporsi dan modul, dan yang paling penting, itu relatif pendek dan mudah diserap.
Desain Web Responsif: Panduan Visual
Oleh Andrew Gormley - [Lihat tutorial]
Jika tutorial berisi teks bukan pilihan yang layak, coba tutorial video ini sebagai gantinya. Ini masih agak teknis tetapi jika itu membuat Anda merasa lebih baik, Anda tidak perlu banyak membaca. Ini sekitar 25 menit panjang dan pembuat video benar-benar cepat-fowarded melalui bagian-bagian di mana dia kode, lalu kembali untuk menjelaskan apa yang dilakukan kode.
Mulai Membangun
Baiklah, mari kita mulai membangun beberapa desain responsif, mulai dengan ...
Kisi Cairan
Oleh Ethan Marcotte - [Lihat tutorial]
Katakan kisi, dan Anda akan berpikir 'struktur kaku', katakan cair dan Anda akan berpikir bahwa itu bisa mengalir dari satu sisi layar ke bawah atau atas atau samping ketika Anda menekan ke browser, tetapi kombinasikan keduanya dan Anda mungkin berpikir Anda perlu melihat tutorial ini untuk sepenuhnya menghargai bagaimana fluid grids dapat membantu membuat desain Anda lebih responsif.
Gambar Cairan
Oleh Ethan Marcotte - [Lihat tutorial]
Pada akhir artikel ini, Anda harus tahu siapa Ethan Marcotte. Berikut ini adalah petunjuk: dia adalah orang yang datang dengan konsep dan istilah untuk desain responsif web. Namanya akan cukup banyak muncul di setiap tutorial lain dalam daftar ini jadi mengapa tidak mengambil saran tentang gambar cair langsung dari Master sendiri?.
Pola Navigasi Terukur dalam Desain Web Responsif
Oleh Michael Mesker - [Lihat tutorial]
Tutorial ini berbicara tentang pelajaran yang dipetik penulis dari mengerjakan proyek desain web responsif skala besar. Baca 'langkah-langkahnya' tentang cara membuat template yang lebih mudah dikonfigurasikan untuk hasil yang ramah pengguna dan responsif. Ini adalah tampilan luar biasa di balik layar dalam memahami cara mendesain antarmuka dengan cara terbaik untuk tampilan desktop, tablet, dan seluler.
Desain Web Responsif dengan Kueri Media CSS3
Oleh Nick La - [Lihat tutorial]
Dan tutorial lain yang sangat baik untuk membuat Anda belajar bagaimana mendesain templat situs web responsif lintas-browser dengan HTML5 dan CSS3. Ini adalah pendekatan selangkah demi selangkah dan ada demo desain web sebelum dan sesudah pertanyaan media diimplementasikan untuk lebih menghargai dampak dari pertanyaan media.
Efek CSS: Spasi Gambar Keluar untuk Mencocokkan Ketinggian Teks
Oleh Zoe Mickley Gillenwater - [Lihat tutorial]
Tutorial ini membuat Anda mempelajari cara membuat gambar dengan lebar tetap mengubah ukuran dan jaraknya agar sejajar dengan teks yang menyertainya, tidak peduli bagaimana ukuran jendela browser..
Tata Letak Adaptif dengan Kueri Media
Oleh Aaron Gustafson - [Lihat tutorial]
Pelajari cara menggunakan tata letak adaptif atau fleksibel dengan kueri media CSS. Ikuti saja latihan ini untuk belajar menyesuaikan desain Anda dengan tampilan dua kolom atau tampilan satu kolom serta untuk mempersiapkan desain untuk iPhone dan iPad.
Gambar Responsif: Bereksperimen dengan Ukuran Gambar yang sadar konteks
Oleh Scott Jehl - [Lihat tutorial]
Berikut tutorial yang menggunakan pendekatan build-from-mobile-first. Teknik ini menentukan ukuran yang lebih besar untuk digunakan gambar pada resolusi layar yang lebih besar, dikurangi permintaan gambar serta pengendalian UA.
Melakukan lebih
Video yang Elastis
Oleh Nick La - [Lihat tutorial]
Tutorial ini membahas tentang penskalaan video saat jendela browser Anda diubah ukurannya. Ini pada dasarnya adalah trik CSS dan ada demo untuk melihat trik ini bekerja di tutorial itu sendiri.
Menyembunyikan Dan Mengungkap Bagian Gambar
Oleh Zoe Mickley Gillenwater - [Lihat tutorial]
Tutorial sebenarnya diambil dari buku penulis, menjelaskan cara mengungkapkan atau menyembunyikan bagian gambar tergantung pada resolusi layar. Ini mengajarkan Anda cara memotong gambar secara dinamis ketika ukuran layar berubah, menunjukkan Anda hanya sebagian dari gambar penuh ketika ada ruang terbatas.
Navigator Konten Responsif dengan CSS3
Oleh Mary Lou - [Lihat tutorial]
Lebih suka cara yang lebih menarik bagi pengguna untuk bernavigasi di sisi Anda? Kemudian, Anda harus membaca tutorial ini untuk mempelajari cara membuat kode dalam beberapa transisi keren: fade in, slide, rotations, dan scaling up. Transisi pada dasarnya adalah lapisan konten yang ditampilkan atau disembunyikan dengan pengkodean tertentu.
Buat Template Desain Web Responsif
Oleh Harry Atkins - [Lihat tutorial]
Ini adalah tutorial singkat untuk menghasilkan responsif template web yang berfungsi baik di desktop maupun di iPhone.
Tata Letak Horisontal Responsif
Oleh Mary Lou - [Lihat tutorial]
Tutorial ini mengajarkan Anda cara membuat tata letak horizontal dengan beberapa panel konten yang dapat digulir. Menggunakan The Origin of Species sebagai teks sampel, setiap bab dari buku ini dipisahkan dalam kolom yang ditempatkan bersebelahan dalam mode browser penuh tetapi ketika menyusut menjadi cukup kecil, tata letak berubah menjadi 'buku' sepenuhnya bergulir vertikal.
Ubah Menu menjadi Drop down untuk Layar Kecil
Oleh Chris Coyier - [Lihat tutorial]
Tutorial ini akan menunjukkan kepada Anda cara mengonversi menu ke daftar drop-down ketika jendela browser sempit, atau ketika Anda menggunakan perangkat seluler. Baris tautan di sudut kanan atas halaman dikonversi menjadi menu tarik-turun untuk menghemat ruang tanpa mengorbankan opsi navigasi.
Akordeon Slide-to-Top yang Fleksibel
Oleh Mary Lou - [Lihat tutorial]
Pelajari cara membuat tata letak akordeon sederhana dan fleksibel, dengan transisi fade-in dan lebar yang bisa disesuaikan berdasarkan ukuran layar dan resolusi.
Cara Menggunakan Kueri Media Orientasi CSS3
Oleh Ryan Seddon - [Lihat tutorial]
Berdasarkan aturan sederhana yang mendefinisikan mode potret (tinggi lebih besar dari lebar) dan lanskap (lebar lebih besar dari tinggi), Anda dapat menulis kueri media untuk menargetkan gaya tertentu berdasarkan mode yang Anda lihat. Tutorial ini akan menunjukkan kepada kita bagaimana melakukan hal itu dan dilengkapi dengan tautan ke bunglon pengubah warna yang menggunakan warna untuk menunjukkan perubahan ini saat Anda mengecilkan jendela peramban.
Tabel Data yang Responsif
Oleh Chris Coyier - [Lihat tutorial]
Tabel adalah sumber sakit kepala ketika datang ke ukuran layar kecil tetapi itu tidak berarti bahwa kita harus benar-benar menghindari tabel. Pelajari cara menggunakan kueri media untuk membuat tabel Anda mengubah format sepenuhnya saat Anda beralih ke ukuran layar seluler. Lihat demo untuk mendapatkan ide keajaiban yang bisa Anda buat berdasarkan tutorial ini.
Tampilan slide CSS3 Fluid dengan Efek Parallax
Oleh Ring Wing - [Lihat tutorial]
Buat tayangan slide CSS3 di mana dua gambar latar belakang digunakan dan ketika posisi latar belakang diubah, efek paralaks terlihat. Selain itu, tampilan slide fleksibel, mengubah ukurannya sendiri ketika jendela browser menutup di atasnya.
Cara Membangun Galeri Gambar Mini Responsif
Oleh Joshua Johnson - [Lihat tutorial]
Ini bagus untuk situs web yang menampilkan thumbnail di galeri. Ketika jendela browser diubah ukurannya, tata letak diubah untuk menempati antara dua kolom (ukuran layar lebih kecil) dan lima (maksimum) kolom. Untuk tayangan slide dan slider yang lebih mirip, lihat 10 Galeri Gambar Responsif Terbaik / Rangkai Salindia Terbaik kami.
Mengoptimalkan Email Anda untuk Perangkat Seluler
Oleh Ros Hodgekiss - [Lihat tutorial]
Bahkan email dapat dioptimalkan untuk tampilan layar kecil seperti bagaimana situs web. Sebagian besar waktu teks dalam email HTML diubah ukurannya ke titik yang tidak dibuat agar nyaman dibaca; pelajari cara mengelola ini dan lainnya dari tutorial ini.
menggunakan kerangka kerja
Membangun Situs Web Ramah Seluler yang Responsif dengan Skeleton
Oleh Joshua Johnson - [Lihat tutorial]
Skeleton adalah kerangka kerja luar biasa untuk membangun situs web responsif dengannya. Tutorial ini membawa Anda dalam panduan langkah demi langkah tentang cara menggunakan kerangka kerja kerangka untuk membangun desain responsif yang luar biasa. Anda akan terkejut melihat betapa mudahnya mengimplementasikannya.
Desain Web Responsif dengan Kerangka HTML5 & Kurang 3
Oleh Louis Simoneau - [Lihat tutorial]
Jika Anda belum diperkenalkan ke Less, maka lihat tutorial Less CSS kami terlebih dahulu untuk mendapatkan rasa Less. Dalam tutorial ini, kerangka kerja Kurang digunakan untuk membiarkan Anda melihat dengan jelas efek dari pertanyaan media.
Kesimpulan
Dan itu menyimpulkan Desain Web Responsif seri. Kami berharap bahwa tema, alat, dan sumber daya lain yang ditampilkan dalam seri ini telah membantu mengungkap konsep desain web yang responsif kepada pembaca kami. Tapi bagaimana kami tahu jika Anda tidak memberi tahu kami?
Beri tahu kami tanggapan Anda pada seri dan jika Anda memiliki saran untuk lebih banyak ide yang ingin Anda lihat di hongkiat.com. Kirimkan kami satu baris, atau komentar di bawah ini.
