SlideShare una empresa de Scribd logo
1 de 5
Tugas 6 Rekayasa Web 0316
Nama: Rostarina.Hutagaol.
Nim: 1312510231
Fakultas : Teknik Informatika
Universitas Budi Luhur
 RESPONSIVE WEB DESIGN
 Responsive Web Design adalah sebuah
teknik yang digunakan untuk membuat
layout website menyesuaikan diri dengan
tampilan device pengunjung, baik ukuran
maupun orientasinya. Jadi tampilan yang
berada di desktop komputer dengan tampilan
yang diakses melalu SmartPhone misalnya,
itu akan berbeda tampilannya. Responsive
Web Design Untuk mengetes tampilan yang
menggunakan teknik Responsive tersebut
tidak harus mengaksesnya melalui mobile
device ataupun device lainnya, namun cukup
dengan meminimize browser saja ke dalam
 KELEBIHAN DAN KEKURANGAN
Teknik ini sudah mulai banyak digunakan dikalangan web
desainer luar maupun lokal dan memiliki beberapa
keuntungan, salah satunya adalah penghematan penggunaan
sub domain, yang tadinya kalau mengakses harus
menggunakan kata “mobile” atau “m” didepan domainnya,
sekarang cukup dengan mengetik nama domainnya saja dan
tampilan akan menyesuaikan dengan device yang digunakan.
Keuntungan yang paling utama tentu saja dapat mengurangi
jumlah development menjadi satu saja untuk dipakai semua
devices. Lalu kelemahan dari teknik ini adalah jika digunakan
pada website yang bertujuan untuk menampilkan gambar saja,
seperti website fotografi misalnya. Resource gambar yang
diload oleh device kita akan sama dengan yang diload
dikomputer kita. Untuk itu kita perlu memperhatikan apakah
website yang kita buat cocok untuk dipakaikan teknik
Responsive ini.
 Beberapa contoh web dengan karakter
Responsive Web Design!
 3200tigres.wwf.fr
 stephencaver.com
 spigotdesign.com
 forefathersgroup.com o foodsense.is
o deren.me
o colly.com
o alistapart.com example
 Bandingkan beberapa contoh framework yang telah
mengimplementasikan Responsive web design, seperti Bootstrap,
Foundation?
a. Bootstrap b. Foundation
Bootstrap merupakan framework HTML, CSS,
dan JavaScript terpopuler untuk pengembangan
website responsive, serta proyek mobile pertama
kali yang digunakan di web. Fitur-fiturnya yang
dikemas dengan baik yang sangat mendukung
sekali bagi keperluan Anda untuk pengembangan
situs yang responsive dan aplikasi.
Foundation merupakan framework front-
end responsive terpopuler lainnya. Dengan
framework HTML5 yang modern ini, Anda
dapat mendekati desain web juga untuk
mobile, atau menampilkan dari ukuran
layar besar ke ukuran mobile.
Foundation ini bisa dipergunakan untuk
situs yang responsive, email dan aplikasi
sehingga terlihat begitu menakjubkan
pada setiap perangkat. Sehingga
foundation ini dapat dijadikan pilihan yang
profesional bagi desainer, developer dan
dikerjakan secara tim.
Bootstrap memiliki layout grid responsive dengan
12 kolom, komponen ikonik, kustom jQuery
plugin, dan masih banyak lagi. Bootstrap telah
terdokumentasi dengan baik sehingga mudah
memandu Anda untuk menggunakannya.
Framework ini adalah platform open source,
jadi gratis untuk Anda gunakan, jangan khawatir
sudah banyak tutorial yang tersedia.

Más contenido relacionado

La actualidad más candente

Presentation1
Presentation1Presentation1
Presentation1
esuctudy
 
Bahan ajar multimedia tapin 0
Bahan ajar multimedia tapin 0Bahan ajar multimedia tapin 0
Bahan ajar multimedia tapin 0
sadadkhalfi
 
Blogspot & wordpress
Blogspot & wordpressBlogspot & wordpress
Blogspot & wordpress
Muly Yanti
 

La actualidad más candente (18)

Risma aja
Risma ajaRisma aja
Risma aja
 
Annatia ndisay
Annatia ndisayAnnatia ndisay
Annatia ndisay
 
Tugas rekayasa web
Tugas rekayasa webTugas rekayasa web
Tugas rekayasa web
 
Presentation1
Presentation1Presentation1
Presentation1
 
Tugas 6 rekweb 0316
Tugas 6 rekweb 0316Tugas 6 rekweb 0316
Tugas 6 rekweb 0316
 
Tugas 6 rekayasa web_ nasrul akbar 1412510552
Tugas 6  rekayasa web_ nasrul akbar 1412510552Tugas 6  rekayasa web_ nasrul akbar 1412510552
Tugas 6 rekayasa web_ nasrul akbar 1412510552
 
Wordpress: More Than Just CMS
Wordpress: More Than Just CMSWordpress: More Than Just CMS
Wordpress: More Than Just CMS
 
Fit 06 aban
Fit 06 abanFit 06 aban
Fit 06 aban
 
Bahan ajar multimedia tapin 0
Bahan ajar multimedia tapin 0Bahan ajar multimedia tapin 0
Bahan ajar multimedia tapin 0
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Adobe collaborative with app
Adobe collaborative with appAdobe collaborative with app
Adobe collaborative with app
 
Tugas 6 individu ikhdal rusmawan 1212510851
Tugas 6 individu ikhdal rusmawan 1212510851Tugas 6 individu ikhdal rusmawan 1212510851
Tugas 6 individu ikhdal rusmawan 1212510851
 
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
Tingkatkan Pengalaman Pengguna dengan Matrik Web Vitals - Dimas Maulana Dwi S...
 
Penjelasan Responsive Web Design
Penjelasan Responsive Web DesignPenjelasan Responsive Web Design
Penjelasan Responsive Web Design
 
Tugas 6 rekweb
Tugas 6 rekwebTugas 6 rekweb
Tugas 6 rekweb
 
Herman punya
Herman punyaHerman punya
Herman punya
 
Tugas 6 – 0317(individu)
Tugas 6 – 0317(individu)Tugas 6 – 0317(individu)
Tugas 6 – 0317(individu)
 
Blogspot & wordpress
Blogspot & wordpressBlogspot & wordpress
Blogspot & wordpress
 

Similar a Tugas 6 rekayasa web 1312510231 rostarina

Bab1 pengantar web_design
Bab1 pengantar web_designBab1 pengantar web_design
Bab1 pengantar web_design
hafriems
 

Similar a Tugas 6 rekayasa web 1312510231 rostarina (20)

Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529
 
Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529Tugas 6 ku 0316 1311511529
Tugas 6 ku 0316 1311511529
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
 
Tugas 6 – rekayasa web
Tugas 6 – rekayasa webTugas 6 – rekayasa web
Tugas 6 – rekayasa web
 
Tugas 6 rekweb
Tugas 6   rekwebTugas 6   rekweb
Tugas 6 rekweb
 
Isfan fs
Isfan fsIsfan fs
Isfan fs
 
Tugas6.rekweb
Tugas6.rekwebTugas6.rekweb
Tugas6.rekweb
 
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptxSesi 2 - Pemanfaatan Framework Bootstrap.pptx
Sesi 2 - Pemanfaatan Framework Bootstrap.pptx
 
Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2Adi prasetya 1511510370 tugas2
Adi prasetya 1511510370 tugas2
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server DockerMembuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
Membuat Aplikasi dengan Framework Hybrid Flutter dengan Database Server Docker
 
13.4.pptx
13.4.pptx13.4.pptx
13.4.pptx
 
Makalah Mobile Programming
Makalah Mobile ProgrammingMakalah Mobile Programming
Makalah Mobile Programming
 
Presentasi Kelompok 6 Tentang Front End & Back End.pptx
Presentasi Kelompok 6 Tentang Front End & Back End.pptxPresentasi Kelompok 6 Tentang Front End & Back End.pptx
Presentasi Kelompok 6 Tentang Front End & Back End.pptx
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Bab1 pengantar web_design
Bab1 pengantar web_designBab1 pengantar web_design
Bab1 pengantar web_design
 
Pengenalan Web Modern.pptx
Pengenalan Web Modern.pptxPengenalan Web Modern.pptx
Pengenalan Web Modern.pptx
 
Web Desain Hari Ini
Web Desain Hari IniWeb Desain Hari Ini
Web Desain Hari Ini
 

Más de osta92 (7)

Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarina
 
Tugas 7 rekayasa web 1312510231 Rostarina
Tugas 7 rekayasa web 1312510231 RostarinaTugas 7 rekayasa web 1312510231 Rostarina
Tugas 7 rekayasa web 1312510231 Rostarina
 
Tugas 5 rekayasa web
Tugas 5 rekayasa webTugas 5 rekayasa web
Tugas 5 rekayasa web
 
Tugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.hTugas 4 rekayasa web 1312510231 rostarina.h
Tugas 4 rekayasa web 1312510231 rostarina.h
 
Tugas 3 rekayas web 1312510231 rostarina
Tugas 3 rekayas web 1312510231 rostarinaTugas 3 rekayas web 1312510231 rostarina
Tugas 3 rekayas web 1312510231 rostarina
 
Tugas rekayasa web 2_1312510231 _Rostarina.H._KI
Tugas rekayasa web 2_1312510231 _Rostarina.H._KITugas rekayasa web 2_1312510231 _Rostarina.H._KI
Tugas rekayasa web 2_1312510231 _Rostarina.H._KI
 
Tugas Rekayasa Web 0316
Tugas Rekayasa Web 0316Tugas Rekayasa Web 0316
Tugas Rekayasa Web 0316
 

Último

Contoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptxContoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptx
IvvatulAini
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
JuliBriana2
 
Kenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).pptKenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).ppt
novibernadina
 

Último (20)

MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
 
Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat UI 2024
Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat  UI 2024Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat  UI 2024
Tim Yang Lolos Pendanaan Hibah Kepedulian pada Masyarakat UI 2024
 
AKSI NYATA TOPIK 1 MERDEKA BELAJAR. PPTX
AKSI NYATA TOPIK 1 MERDEKA BELAJAR. PPTXAKSI NYATA TOPIK 1 MERDEKA BELAJAR. PPTX
AKSI NYATA TOPIK 1 MERDEKA BELAJAR. PPTX
 
Contoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptxContoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptx
 
Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...
Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...
Aksi Nyata Menyebarkan (Pemahaman Mengapa Kurikulum Perlu Berubah) Oleh Nur A...
 
Memperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptxMemperkasakan Dialog Prestasi Sekolah.pptx
Memperkasakan Dialog Prestasi Sekolah.pptx
 
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHANTUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
TUGAS RUANG KOLABORASI 1.3 PRAKARSA PERUBAHAN
 
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptxDEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
DEMONSTRASI KONTEKSTUAL MODUL 1.3 CGP 10.pptx
 
E-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMAE-modul Materi Ekosistem untuk kelas X SMA
E-modul Materi Ekosistem untuk kelas X SMA
 
Materi Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptxMateri Sosialisasi US 2024 Sekolah Dasar pptx
Materi Sosialisasi US 2024 Sekolah Dasar pptx
 
power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"power point bahasa indonesia "Karya Ilmiah"
power point bahasa indonesia "Karya Ilmiah"
 
vIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsxvIDEO kelayakan berita untuk mahasiswa.ppsx
vIDEO kelayakan berita untuk mahasiswa.ppsx
 
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
PELAKSANAAN (dgn PT SBI) + Link2 Materi Pelatihan _"Teknik Perhitungan TKDN, ...
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
 
PPT Mean Median Modus data tunggal .pptx
PPT Mean Median Modus data tunggal .pptxPPT Mean Median Modus data tunggal .pptx
PPT Mean Median Modus data tunggal .pptx
 
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptxTEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
TEKNIK MENJAWAB RUMUSAN SPM 2022 - UNTUK MURID.pptx
 
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
 
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptxBab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
Bab 4 Persatuan dan Kesatuan di Lingkup Wilayah Kabupaten dan Kota.pptx
 
Kenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).pptKenakalan Remaja (Penggunaan Narkoba).ppt
Kenakalan Remaja (Penggunaan Narkoba).ppt
 
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptxPendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
Pendidikan-Bahasa-Indonesia-di-SD MODUL 3 .pptx
 

Tugas 6 rekayasa web 1312510231 rostarina

  • 1. Tugas 6 Rekayasa Web 0316 Nama: Rostarina.Hutagaol. Nim: 1312510231 Fakultas : Teknik Informatika Universitas Budi Luhur
  • 2.  RESPONSIVE WEB DESIGN  Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout website menyesuaikan diri dengan tampilan device pengunjung, baik ukuran maupun orientasinya. Jadi tampilan yang berada di desktop komputer dengan tampilan yang diakses melalu SmartPhone misalnya, itu akan berbeda tampilannya. Responsive Web Design Untuk mengetes tampilan yang menggunakan teknik Responsive tersebut tidak harus mengaksesnya melalui mobile device ataupun device lainnya, namun cukup dengan meminimize browser saja ke dalam
  • 3.  KELEBIHAN DAN KEKURANGAN Teknik ini sudah mulai banyak digunakan dikalangan web desainer luar maupun lokal dan memiliki beberapa keuntungan, salah satunya adalah penghematan penggunaan sub domain, yang tadinya kalau mengakses harus menggunakan kata “mobile” atau “m” didepan domainnya, sekarang cukup dengan mengetik nama domainnya saja dan tampilan akan menyesuaikan dengan device yang digunakan. Keuntungan yang paling utama tentu saja dapat mengurangi jumlah development menjadi satu saja untuk dipakai semua devices. Lalu kelemahan dari teknik ini adalah jika digunakan pada website yang bertujuan untuk menampilkan gambar saja, seperti website fotografi misalnya. Resource gambar yang diload oleh device kita akan sama dengan yang diload dikomputer kita. Untuk itu kita perlu memperhatikan apakah website yang kita buat cocok untuk dipakaikan teknik Responsive ini.
  • 4.  Beberapa contoh web dengan karakter Responsive Web Design!  3200tigres.wwf.fr  stephencaver.com  spigotdesign.com  forefathersgroup.com o foodsense.is o deren.me o colly.com o alistapart.com example
  • 5.  Bandingkan beberapa contoh framework yang telah mengimplementasikan Responsive web design, seperti Bootstrap, Foundation? a. Bootstrap b. Foundation Bootstrap merupakan framework HTML, CSS, dan JavaScript terpopuler untuk pengembangan website responsive, serta proyek mobile pertama kali yang digunakan di web. Fitur-fiturnya yang dikemas dengan baik yang sangat mendukung sekali bagi keperluan Anda untuk pengembangan situs yang responsive dan aplikasi. Foundation merupakan framework front- end responsive terpopuler lainnya. Dengan framework HTML5 yang modern ini, Anda dapat mendekati desain web juga untuk mobile, atau menampilkan dari ukuran layar besar ke ukuran mobile. Foundation ini bisa dipergunakan untuk situs yang responsive, email dan aplikasi sehingga terlihat begitu menakjubkan pada setiap perangkat. Sehingga foundation ini dapat dijadikan pilihan yang profesional bagi desainer, developer dan dikerjakan secara tim. Bootstrap memiliki layout grid responsive dengan 12 kolom, komponen ikonik, kustom jQuery plugin, dan masih banyak lagi. Bootstrap telah terdokumentasi dengan baik sehingga mudah memandu Anda untuk menggunakannya. Framework ini adalah platform open source, jadi gratis untuk Anda gunakan, jangan khawatir sudah banyak tutorial yang tersedia.