nim : 1412510016 nama : muslim rohadi tugas 6 rekayasa web universitas budi luhur

1. TUGAS 6 REKAYASA
WEB
NIM : 1412510016
NAMA : MUSLIM ROHADI
UNIVERSITAS BUDI LUHUR
2016

2. RESPONSIVE WEB DESIGN
Responsive Web Design (RWD) adalah sebuah metode atau pendekatan sistem web
desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam
berbagai perangkat, baik mobile maupun komputer meja. Dengan metode ini, web
akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun
perangkat komputer meja dengan ukuran monitor besar. Ukuran huruf, user
interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi
layar monitor yang tersedia. Hasilnya pengguna akan merasakan pengalaman mudah
membaca, nyaman dan melihat informasi web tersebut sama dengan jika ia melihat
melalui perangkat komputer meja.
Pengertian
Ciri Web dengan Desain Web Responsif
• User interface-nya beradaptasi di berbagai perangkat berbeda
• Ukuran huruf, tata letak dan gambarnya beradaptasi di berbagai ukuran layar
yang berbeda
• Umumnya menggunakan scrolling dan swipe untuk bernavigasi di perangkat
mobile
• Lintas platform

3. colly.com
CONTOH
RESPONSIVE WEB DESIGN
deren.me
alistapart.com foodsense.is

4. FRAMEWORK
RESPONSIVE WEB DESIGN
Bootstrap
Bootstrap adalah sebuah library framework CSS yang di buat khusus untuk bagian pengembangan
front-end website. bootstrap merupakan salah satu framework HTML, CSS dan javascript yang
paling populer di kalangan web developer. pada saat ini hampir semua web developer telah
menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat
cepat. karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat
tombol, grid, navigasi dan lainnya.
Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang
sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen
class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada
halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan
bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang
menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan
class dan CSS sendiri.

5. FRAMEWORK
RESPONSIVE WEB DESIGN
Gumby
Gumby merupakan salah satu CSS Framework yang cukup menarik. Desain yang khas dengan
dokumentasi yang tersedia secara online. Cukup mudah untuk digunakan. Fitur yang dimiliki
hampir sama dengan bootstrap, yaitu: grid system, responsiveness, hingga UI.
Foundation
Salah satu perusahaan yang bergerak di bidang Web Design bernama Zurb mendedikasikan diri
mereka untuk ikut berkontribusi dalam pengembangan web melalui pembuatan sebuah CSS
Framework bernama Foundation. Fitur standar yang harus ada dalam CSS Framework mereka
kemas dengan rapi. Tak lupa mereka pun memberikan dokumentasi yang lengkap dalam
penggunaan Foundation ini.

6. FRAMEWORK
RESPONSIVE WEB DESIGN
Less Framework
Less Framework ini memanfaatkan salah satu tool yang bernama Less CSS. Dia merupakan sebuah
tool yang dapat anda manfaatkan dalam penulisan CSS yang lebih simpel dan efisien selayaknya
anda menulis kode PHP atau Javascript. Dan Less Framework hadir dengan mengemas Grid
System dan Responsiveness untuk membuat kode anda jauh lebih simpel dan lebih efisien lagi.
Unsemantic
Unsemantic adalah generasi penerus dari 960.gs. Pendahulunya hanya menyediakan grid system
saja untuk layouting website, sedangkan pada Unsemantic telah ditambahkan pula fitur
Responsiveness demi mengikuti trend teknologi website yang ada. Dokumentasi yang sederhana
cukup untuk membantu anda yang ingin menggunakan framework ini pada pembuatan website
anda.

7. PERBANDINGAN FRAMEWORK
BOOTSTRAP DENGAN FONDATION
Framework Bootstrap Framework Foundation
• Template yang menggunakan
Bootstrap lebih rapi
• Waktu pembuatan yang lebih
cepat
• Template yang menggunakan
bootstrap lebih ringan
• Responsive dan tidak
responsive
• Dokumentasi lengkap
• Minim gambar
• Mudah dikenali
• Grid sistem yang baik
• Komponen dan fitur
lebih banyak
• Baik untuk penggunaan
gambar
• Template yang
menggunakan
foundation lebih berat
• Dokumentasi terbatas