TUGAS 6 REKAYASA WEB

NIM : 1412510016NAMA : MUSLIM ROHADI

UNIVERSITAS BUDI LUHUR2016

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

colly.com

CONTOHRESPONSIVE WEB DESIGN

deren.me

alistapart.com foodsense.is

FRAMEWORK RESPONSIVE WEB DESIGN

BootstrapBootstrap 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.

FRAMEWORK RESPONSIVE WEB DESIGN

GumbyGumby 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.

FRAMEWORK RESPONSIVE WEB DESIGN

Less FrameworkLess 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.UnsemanticUnsemantic 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.

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