Perkembangan teknologi saat ini sudah tidak bisa dipungkiri lagi. Berkembangnya teknologi seperti saat ini mengakibatkan munculnya berbagai perangkat elektronik yang canggih dengan tujuan membantu segala aktivitas manusia secara lebih efisien, mudah, dan tentunya menarik serta dapat meningkatkan gengsi. Banyak yang melakukan aktivitas online melalui device SmartPhone, seperti update status, upload gambar, dan tidak terkecuali mengakses sebuah website. Dengan keadaan yang seperti ini, mau tidak mau sebuah website harus mampu menangani dengan baik bila diakses melalui device SmartPhone tersebut. Bagi yang menggunakan CMS seperti WordPress mungkin sudah tersedia pluginnya, tapi bagaimana dengan yang membuatnya dari awal atau nol atau menggunakan CMS yang belum tersedia plugin mobile tersebut? Tentunya harus membuat ulang website dalam bentuk mobile bukan. Lalu bagaimana solusinya? Nah dengan hadirnya teknologi Responsive ini, dengan menggunakan satu design saja untuk berbagai device yang ada. Ini adalah cara terbaik untuk mendevelop ulang website agar mampu flexible terhadap resolusi layar device pengguna atau pengunjung.
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 ukuran mobile device yang diinginkan, kita sudah dapat melihat tampilan website kita pada layar mobile device.
Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart(http://www.alistapart.com/articles/responsive-web-design/). Ia mengulas tiga teknik yang telah ada yakni Flexible grid layout, flexible images, dan media and media queries ke dalam satu pendekatan dan menamakannya Responsive Design. Beberapa istilah yang digunakan untuk mengacu hal yang sama antara lain fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, dan flexible design.
Marcotte dan beberapa ahli lainnya berargumen bahwa metodologi responsive yang sebenarnya adalah tidak hanya cukup melakukan perubahan layout sesuai dengan ukuran browser yang mengaksesnya, akan tetapi melakukan perubahan total secara keseluruhan terhadap pendekatan yang kita pakai saat mendesain sebuah web. Daripada memulai desain pada ukuran layar desktop yang fixed atau tetap dan kemudian mengecilkannya dan mengatur isinya guna keperluan ukuran yang lebih kecil, maka sebaiknya desain dilakukan pada ukuran viewport yang terkecil terlebih dahulu dan dilanjutkan pada ukuran viewport yang lebih besar.
Viewport atau ukuran layar.
Penting untuk diketahui bahwa viewport dan ukuran layar atau screen size merupakan dua istilah yang berbeda. Viewport merupakan area content pada browser, diluar toolbars, tab, address box atau lainnya pada browser. Lebih sederhananya lagi adalah ukuran atau luasan dimana sebuah website ditampilkan pada browser. Sedangkan screen size mengacu pada ukuran layar secara fisik.
Mengapa harus HTML5 dan CSS3?
HTML5 menawarkan kelebihan yang luar biasa dibandingkan generasi sebelumnya yakni HTML4 dan element yang digunakan pada HTML5 lebih memiliki arti atau gampang kita pahami saat kita membaca atau menuliskannya. CSS3 memiliki salah satu fitur yakni media queries yang merupakan salah satu fitur utama untuk responsive design dan tentunya didukung fitur-fitur lain untuk menghasilkan web yang fleksibel. Beberapa fitur CSS3 yang lain misalnya gradient, shadows, animasi dan transformasi. Namun sekarang sudah ada beberapa framework css yang mampu menangani responsive design salah satunya adalah Bootstrap.
Bootstrap Framework.
Framework sendiri merupakan suatu kertas / kerangka kerja dalam aplikasi web yang di dalamnya memiliki suatu potongan – potongan program yang disusun (modul), sehingga programmer tidak perlu membuat kode dari nol, karena framework telah menyediakannya. Bootstrap merupakan sebuah toolkit yang dikembangkan oleh Twitter untuk mempermudah web developer dalam mendesain tampilan aplikasi. Platform ini awalnya dikembangkan pada ajang Hackweek, sebuah perhelatan developer yang diadakan Twitter. Standarisasi platform tersebut sudah disempurnakan sejak saat itu. Kini, disebutkan Twitter memiliki kerangka kerja yang konsisten untuk mengembangkan aplikasi. Di Bootstrap sudah tersedia CSS, HTML, JQuery Plugi,n dan memiliki fitur 12- cloumn grid system dimana developer tidak perlu menghitung setiap ukuran kolom. Bootstrap pertama kali dirilis pada Agustus 2012. Framework CSS ini menerapkan teknologi responsive design, sehingga website yang dikembangkan mampu menyesuaikan diri dengan ukuran laya pada device.
0 komentar:
Posting Komentar