Tuntas Web Responsive

8/20/2019 Tuntas Web Responsive

1/129

7

UCAPAN TERIMA KASIH

Buku ini saya persembahkan khusus untuk:

1.

Kedua orang tuaku yang selalu memberikan do’a

2. Isteriku Umie yang selalu memberikan motivasi dalam suka maupun

duka, anak-anakku Fascal Galih Hariyanto, Izal Fathoni dan Cahyani

Putri Riyanto yang selalu menghibur di saat lelah

3. Rekan-rekan kerja di PDII-LIPI: Budi Nugroho, Sjaeful Afandi,

Ekawati Marlina, Al Hafidz Akbar Maulana S., Rishadi, EndangMulus Rahayu, dan Ratih Keumala Sari

4. Romi Satria Wahono dan Hendro Subagyo, selaku guru dan

inspirator

5. Rekan-rekan lain yang tidak dapat saya sebutkan satu persatu.

Semoga buku ini bermanfaat


2/129

7

KATA PENGANTAR

Jika kita perhatikan perkembangan internet semakin tidak terkendali, hal

ini mengubah pola hidup seseorang. Dulu orang harus ke pasar atauhypermarket untuk membeli barang namun sekarang dapat dilakukan

melalui smartphone. Dulu untuk membeli tiket pesawat harus datang ke

agen terdekat namun sekarang dapat dipesan melalui smartphone. Dulu

para mahasiswa maupun peneliti harus datang ke perpustakaan untuk

mendapatkan infromasi yang diinginkan, namun sekarang dapat

ditemukan hanya melalui smartphone.Pada tahun 2011-2012, Google melakukan riset "Trends in digital device

& internet usage" (Smartphone, Tablet, Netbooks, dan TV Internet)

dengan total 3.000 responden terhadap lima negara yaitu: Amerika

Serikat, Inggris, Jerman, Perancis, dan Jepang. Riset dilakukan dengan

berbagai metodologi yang menghasilkan output dari berbagai sudut

pandang, salah satunya adalah akses internet melalui smartphone,Amerika Serikat 44%, Inggris 51%, Perancis 38%, Jerman 29%, dan

Jepang 20%. Cisco System, Inc juga memprediksi bahwa pada tahun 2015

jumlah pengguna dan fitur perangkat mobile akan meningkat secara

eksponensial yang akan mencapai sekitar 788 juta ponsel untuk

mengakses halaman website. Hal ini dikarenakan browser berbasis mobile

sudah dapat menampilkan halaman situs web sama bagusnya denganbrowser berbasis PC/Notebook.

Melihat perkembangan teknologi dan hasil riset yang dilakukan oleh

perusahaan terkemuka, kita seharusnya dapat mengambil hikmah untuk

mempersiapkan dalam menghadapi tantangan 10 tahun ke depan,


3/129

8

minimal jangka pendek. Bagaimana mengubah mindset seseorang yang

awalnya hanya menggunakan PC/Notebook untuk mengakses halaman

situs web beralih ke smartphone ? Kuncinya adalah Web Responsif,

karena dengan teknologi tersebut akan memudahkan pengguna dalam

mencari informasi yang diinginkan. Tampilan situs web harus disesuaikan

dengan media dan resolusi yang digunakan oleh pengguna.

Pengguna akan “malas” untuk mengakses sebuah situs web jika tampilan

versi mobile sama dengan versi PC/Notebook. Betapa tidak? Teks akan

terlihat sangat kecil jika diakses melalui smartphone, harus diperbesar

dulu tampilannya kemudian harus sering melakukan scroll. Semua

kendala dan kesulitan tersebut harus segera diatasi agar pengguna lebihnyaman membaca informasi yang disajikan.

Buku ini wajib dibaca agar permasalahan situs web Anda segera dapat

diatasi, pada akhirnya pengunjung makin banyak dan sering berkunjung

kembali di lain waktu.

Bogor, Februari 2014

Slamet Riyanto


4/129

7

DAFTAR ISI

BAB I PENDAHULUAN

BAB II PERBEDAAN FIXED, LIQUID, ADAPTIVE, DAN

RESPONSIVE WEB

2.1

Fixed Web Design

2.2 Liquid/Flexible Web Design

2.3 Adaptive Web Design

2.4 Responsive Web Design

BAB III CSS FRAMEWORK

3.1

What is CSS Framework?

3.2 960 Grid System

3.3 Blueprint

3.4 Bootstrap

3.5 Cardinal

3.6 Cascade Framework

3.7

Columnal3.8 Floatz

3.9 Fluidable

3.10 Foundation

3.11 Gumby Framework

3.12 Skeleton

3.13

YAML (Yet Another Multicoloumn Layout)3.14 YU CSS Grids

BAB IV WEB DESIGN WIREFRAME FOR MOCKUP

4.1 MockFlow


5/129

8

4.2 Axure

4.3 Balsamiq Mockup

4.4 Pencil Project

4.5 HotGloo

4.6 Mockingbird

4.7

Cacoo

4.8 ProtoShare

4.9 iPlotz

4.10 JustinMind

BAB V DESAIN RESPONSIF UNTUK MEROMBAK ALUR KERJA

5.1

Mobile First

5.2 Content Strategy

5.3 Sketch and Prototype

5.4 Frameworks

5.5 Breakpoints

5.6 Scalable Images

5.7

Minicifation

BAB VI PRAKTIKUM MEMBUAT WEB RESPONSIF

6.1 Merancang Template yang Keren

6.2 Menentukan CSS Framework

6.3 Management File dan Direktori

6.4

Merancang Template dengan Sistem Grid6.5 Membagi Tata Letak berdasarkan Kolom

6.6 Praktek Sederhana dalam Format HTML5

BAB VII CSS3 MEDIA QUERY

7.1 General Style

7.2

Desktop and Notebook Widescreen High Resolution7.3 Desktop and Notebook

7.4 Netbook and Tablet

7.5 Smartphones


6/129

9

BAB VIII BEST PRACTICE: DYNAMIC WEB WITH PHP & MYSQL

8.1 Persiapan Awal

8.2 Membuat Function

8.3 Proses Query untuk Frontend

BAB IX HALAMAN ADMINISTRATOR

9.1 Menggunakan Free Admin Template

9.2 Merancang Halaman Administrator

9.3 Membuat Panel Menu

9.4 Membuat Halaman Login

9.5 Membuat Dashboard

9.6

Membuat Modul Berita

9.6.1 Menampilkan Daftar Berita

9.6.2 Form Input

9.6.3 Multilevel Dropdown Menu

9.6.4 Insert into MySQL

9.6.5 Form Edit

9.6.6 Update into MySQL9.6.7 Delete from MySQL


7/129

1

BAB 1PENDAHULUAN

Jika Anda berpikir harus mengembang website versi mobile, pikir ulang

kembali sebelum melaksanakan. Tampilan website yang ideal harus

memiliki berbedaan tampilan ketika diakses melalui mobile, tablet

maupun PC/Notebook. Hal ini untuk memberikan kenyaman kepada

pengguna ketika mencari informasi dalam website tersebut. Apa yang

terjadi jika website diakses melalui mobile ? Teks tidak mungkin terbaca

dan harus memperbesar tampilan beberapa kali. Ini akan membuang

waktu dan energi hanya sekadar ingin melihat sebuah menu yangditampilkan. Mengapa hal ini bisa terjadi? Sistem yang digunakan untuk

membangun website tersebut tidak mendukung teknologi responsive web.

Diskusi tentang Responsive Web Design (RWD) sudah populer sejak

tahun 2012, namun belum banyak yang menerapkan teknologi tersebut.

Jumlah pengguna dan fitur untuk perangkat mobile telah meningkat

secara eksponen dalam beberapa tahun terakhir. Browser versi mobile

sekarang dapat menampilkan halaman web sama bagusnya dengan versi

desktop, sehingga sekarang menjadi hal biasa bagi orang untuk

melakukan browsing melalui website dari ponsel atau tablet. Cisco

memprediksi bahwa pengguna ponsel akan tumbuh lebih besar di masa

depan sehingga pada tahun 2015 akan bertambah menjadi 788 juta

pengguna ponsel.

Beberapa website luar negeri sudah banyak yang menerapkan karena hal

ini memang sangat penting. Sedangkan di Indonesia belum banyak yang

menerapkannya, banyak faktor yang mempengaruhinya. Bisa

menyangkut masalah dana, waktu, sumberdaya manusia, pengetahuan,


8/129

2

dan faktor lainnya. Bagaimana jika ingin mengembangkan responsive web

tanpa mengganggu website yang sudah ada? Hal ini akan dijelaskan secara

mendetail pada bagian lain dalam buku ini.

Menurut sebuah survei yang dilakukan oleh Proyek Pew Research Center

for Excellence in Journalism (PEJ) bekerjasama dengan The EconomistGroup, merinci berita yang digunakan pada perangkat mobile

mengungkapkan bahwa setengah dari semua orang dewasa di Amerika

Serikat kini memiliki koneksi mobile ke web melalui sebuah smartphone

atau tablet, secara signifikan pada tahun 2011, dan ini memiliki implikasi

besar terhadap mekanisme berita yang akan dikonsumsi dan dibayar.

Pengguna ponsel, tidak hanya memeriksa berita utama pada perangkatmereka, walaupun hampir semua menggunakan perangkat untuk update

berita terbaru. Banyak juga membaca berita lama - 73% orang dewasa

mengkonsumsi berita melalui tablet mereka untuk membaca artikel-

artikel secara mendalam atau setidaknya kadang-kadang, termasuk 19%

yang melakukannya setiap hari. Sepenuhnya 61% dari konsumen berita

setidaknya kadang-kadang membaca cerita yang lebih panjang, dan 11%secara teratur.

Tahun 2013 menjadi tahun RWD untuk lepas landas, mengingat adopsi

yang cepat dari tablet dan smartphone - dan fakta bahwa pengguna saat

ini tampaknya lebih suka membaca berita mereka melalui web mobile

dibanding dalam bentuk aplikasi.

“Now more than ever, we’re designing work meant to be viewed along a

gradient of different experiences. Responsive web design offers us a way

forward, finally allowing us to 'design for the ebb and flow of things” – Ethan

Marcotte, seorang penulis Responsive Web Design.

Dasar desain web responsifPada dasarnya RWD memungkinkan situs web untuk menanggapi atau

beradaptasi dengan ukuran viewport yang berbeda, lebih kecil atau lebih

besat tanpa mengatur domain atau subdomain khusus untuk pengguna

yang menggunakan perangkat ponsel ketika mengakses situs web.


9/129

3

Tampilan dan nuansa warna dapat dipertahankan untuk memiliki

pengalaman yang sama meski menggunakan ukuran perangkat yang

berbeda. Hal ini dimungkinkan dengan penggunaan viewport meta tag

dan CSS3 media query.

Viewport meta tag dan CSS3 media queries

Sebuah web responsif utamanya dibangun dengan dua komponen.

Komponen pertama adalah meta tag viewport. Tag ini ditempatkan dalam

tag dan digunakan untuk mengontrol skala dari halaman website.

Misalnya, menambahkan viewport meta tag dengan mengatur skala awal

1 yang akan memungkinkan halaman web untuk ditingkatkan sebesar 100persen dari skala ukuran viewport saat membuka untuk pertama kalinya.

Komponen kedua adalah CSS3 media query (http://www.w3.org/TR/css3-

mediaqueries/ ) yang menentukan gaya untuk ukuran viewport tertentu.

Misalnya potongan kode berikut menunjukkan bagaimana kita dapat

menyembunyikan gambar ketika ukuran viewport adalah antara 321 px

dan 480 px. (@medi a scr een and ( mi n- wi dt h: 321px) and ( max-

wi dt h: 480px) {i mg { di spl ay: none; }}).

Keterbatasan desain web responsif

Point penting di sini adalah RWD tidak cukup sempurna, ada beberapa

masalah yang harus diselesaikan, termasuk membuat gambar menjadiresponsif. Praktek saat ini untuk membuat gambar responsif adalah

menggunakan skala agar sesuai dengan viewport dengan maksimal lebar

(max-width: 100%) atau mungkin menyembunyikan tampilan (display:

none) ketika gambar tidak ingin ditampilkan.

Masalah lain yang saat prakte di lapangan adalah bahwa hanya mengubah

presentasi gambar, sedangkan gambar yang sebenarnya apda dokumenHTML tetap ditidak berpengaruh. Ini berarti bahwa pengguna masih bida

mengunduh resolusi gambar yang sama dengan ukuran lebih besar

terlepas dari perangkat dan viewport yang digunakan, hal ini

http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/css3-mediaqueries/


10/129

4

mengakibatkan konsumsi bandwidth terbuang dan juga mengurangi

kinerja situs web, khususnya pengguna mobile.

Gambar Responsif dengan elemen

Baru-baru ini di World Wide Web Consortium (W3C), sebuah kelompokyang disebut Kelompok Komunitas Gambar Responsif

(http://www.w3.org/community/respimg/ ) mengusulkan elemen baru

yang disebut untuk mengatasi situasi. Elemen ini

memungkinkan pengiriman ukuran gambar yang tepat dan resolusi

didasarkan pada situasi tertentu. Perlu dicatat bahwa unsur baru ini, pada

saat penulisan, masih dalam tahap rancangan, yang berarti bahwa itubelum diterapkan oleh vendor browser. Spesifikasi ini dapat berubah atau

bahkan dihapus di masa depan. Perhatikan contoh script berikut:

Perhatikan potongan kode di atas, akan memberikan file gambar big.jpg

dengan resolusi tinggi dan mungkin lebar yang lebih luas hanya ketika

viewport minimal 768px, sedangkan file gambar medium.jpg dengan

resolusi yang lebih rendah dan ukuran file akan disampaikan saat

viewport minimal 320px. Kemudian, bila kondisi tersebut tidak

terpenuhi, gambar small.jpg kecil akan ditampilan. Terakhir, di bagian

bawah daftar, kami juga memiliki satu gambar lagi dengan elemen ,

hal ini juga digunakan untuk memberikan gambar cadangan untuk

browser yang tidak mendukung elemen .

http://www.w3.org/community/respimg/http://www.w3.org/community/respimg/http://www.w3.org/community/respimg/http://www.w3.org/community/respimg/


11/129

5

BAB 2PERBEDAAN FIXED,

LIQUID, ADAPTIVE, DAN RESPONSIVE WEB

.

Situs web (dalam bahasa Inggris: Web site, web site, atau sites) adalah

sejumlah halaman web yang memiliki topik saling terkait, terkadang

disertai pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas

lainnya. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah

server web yang dapat diakses melalui jaringan seperti internet, ataupun

Local Area Network (LAN) melalui alamat internet yang dikenali sebagai

Uniform Resources Locator (URL). Gabungan atas semua situs yang

dapat diakses publik di internet disebut pula sebagai Word Wide Web

atau disingkat WWW.

Tampilan sebuah website dapat mempengaruhi pengguna dalam mencari

informasi. Jika tampilan awal sudah membingungkan, dalam hitungan

detik pengguna tersebut akan segera meninggalkan situs web yang baru

saja diakses. Halaman situs web yang ditampilkan kepada pengunjung

bergantung pada beberapa aspek diantaranya resolusi monitor, browser,

dan media yang digunakan.

Dalam sebuah situs resmi http://www.w3schools.com menampilkan

statistik data pengguna internet berdasarkan resolusi yang digunakan,

seperti nampak pada gambar berikut.

http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/


12/129

6

Gambar 2.1 Statisk pengguna internet berdasarkan resolusi monitor

Dari data tersebut, dapat dijadikan referensi untuk mengembangkan situs

web agar dapat diakses melalui berbagai macam resolusi tanpa

mengurangi prinsip esetika desain, kegunaan, dan kemudahan akses.

Berikut ini sedikit penjelasan beberapa rancangan web yang dapat

digunakan sebagai bahan pertimbangan sebelum mengembangkan situsweb yang dinamis.

2.1 Fixed Web Design

Fixed web design tetap adalah tata letak dimulai dengan ukuran tertentu

yang ditentukan oleh perancang web. Para perancang web telah

menetapkan lebar, terlepas dari ukuran tampilan halaman jendela

browser. Sebuah situs web yang menggunakan tipe ini memiliki

pembungkus (wrapper ) yaitu lebar tetap (fixed-width ), dan komponen di

dalamnya memiliki lebar dalam presentase (percent ) maupun tetap (fixed )

dalam format pixels. Yang terpenting adalah pengaturan wrapper agar

tidak berubah. Situs web ini tidak memperdulikan resolusi layar yang

dimiliki pengunjung, mereka akan melihat lebar yang sama seperti

pengunjung lainnya. Berikut beberapa alasan pro dan kontra sebagai

bahan pertimbangan dalam mendesain halaman situs web berbasis fixed.


13/129

7

Pro

− Fixed-width layout lebih mudah digunakan dan lebih mudah untuk

menyesuaikan dalam hal desain.

− Lebar adalah sama untuk setiap browser, sehingga mengurangi

kerumitan terhadap gambar, form, video dan konten lainnya yang

menerapkan fixed-width

− Tidak perlu untuk mengatur lebar minimal (min-width) dan lebar

maksimal (max-width), yang tidak didukung oleh setiap browser.

− Bahkan, jika sebuah situs web yang dirancang agar kompatibel

dengan resolusi terkecil 800x600, konten masih akan cukup lebar

pada resolusi yang lebih besar agar mudah dibaca.

ontra

− Tata letak menggunakan fixed-width dapat membuat ruang putih

berlebihan bagi pengguna dengan resolusi layar yang lebih besar,

sehingga mengganggu jarak proporsional, keseimbangan, dan

prinsip-prinsip desain lainnya

− Resolusi layar yang kecil mungkin memerlukan scroll bar horizontal,

bergantung lebar layout tetap tersebut

− Tekstur mulus, pola dan gambar lanjutan diperlukan untuk

mengakomodasi pengunjung dengan resolusi yang lebih besar

− Umumnya memiliki nilai keseluruhan yang lebih rendah ketika

dinilaid dari sisi kegunaan


14/129

8

Gambar 2.2 Tata letak rancangan situs web berbasis “Fixed”

Gambar 2.3 Contoh situs web menggunakan teknologi fixed web design


15/129

9

2.2 Liquid/Flexible Web Design

Tata letak situs web yang menerapkan liquid didasarkan pada persentase

dari ukuran jendela browser saat itu. Teknologi ini melenturkan ukuran

jendela browser, bahkan tampilan saat ini mengubah ukuran browser

secara otomatis saat pengunjung melihat situs web. Tata letak liquid

memungkinkan penggunaan yang sangat efisien dari ruang yang

disedikan oleh jendela browser web yang diberikan atau bergantung pada

resolusi monitor. Teknologi ini disukai para perancang web yang

memiliki banyak informasi yang didapat dalam ruang yang terbatas,

karena mereka tetap konsisten dalam ukuran dan bobot halaman relatif

dari orang yang melihat halaman situs web.

Di sini lain, beberapa perancang web mungkin tidak menggunakan desain

dengan teknologi fluid karena berbagai alasan, namun sering melupakan

beberapa manfaat jika menggunakan tata letak liquid. Berikut beberapa

alasan pro dan kontra sebagai bahan pertimbangan dalam mendesain

halaman situs web berbasis liquid.

Pro

− Rancangan halaman situs web berbasis liquid terlihat lebih user-

friendly karena menyesuaikan pengaturan pengguna

− Jumlah spasi ekstra putih mirip antara semua browser dan resolusi

layar, yang menjadi lebih menarik secara visual

− Jika dirancang dengan baik, tata letak liquid dapat menghilangkan

scroll bar horizontal dalam resolusi layar yang lebih kecil.

ontra

− Perancang kurang memiliki kendali atas apa yang dilihat pengguna

dan dapat mengabaikan masalah karena karena tata letak terlihat baikpada resolusi layar khusus mereka


16/129

10

− Gambar, video, dan jenis konten lainnya dengan set lebar mungkin

perlu diatur pada beberapa kasus untuk mengakomodasi resolusi

layar yang berbeda

− Dengan resolusi yang sangat besar, kurangnya konten dapat

menciptakan ruang putih berlebih yang dapat mengurangi estetika.

Gambar 2.4 Tata letak rancangan situs web menggunakan teknologi liquid

Gambar 2.5 ( http://www.stuffandnonsense.co.uk/ )

http://www.stuffandnonsense.co.uk/http://www.stuffandnonsense.co.uk/http://www.stuffandnonsense.co.uk/http://www.stuffandnonsense.co.uk/


17/129

15

BAB 3CSS FRAMEWORKS

.

3.1 What is CSS Framework?

Framework adalah bentuk dasar struktur konseptual yang dapat

digunakan sebagai "awal" untuk mengerjakan proyek web. Misalnya,

mendefinisikan ulang secara global, dasar yang konsisten, pengaturan

tipografi atau gaya standar untuk bentuk berulang-ulang setiap kalimengerjakan proyek web baru. Dengan memanfaatkan Framework, Anda

dapat mempersiapkan default-style sekali dan menggunakan kembali

dalam semua proyek web masa depan. Ini yang disebut sebagai kerangka

CSS (CSS Framework).

CSS Famework merupakan kumpulan library dokumen CSS yang

digunakan untuk membuat pengembangan halaman web yang lebihstandar, cepat dan tidak rumit dalam bahasa Cascading Style Sheet (CSS).

CSS Framework biasanya menyediakan CSS style untuk mengatur

tipografi (typography ), tata letak (layout ) - umumnya dalam sistem grid,

serta menata ulang browser.

Dalam dunia desain web, untuk memberikan definisi yang lebih

sederhana, Framework didefinisikan sebagai paket terdiri dari struktur file

dan folder kode standar (dokumen HTML, CSS, JS, dan lain-lain) yang

dapat digunakan untuk mendukung pengembangan website, sebagai

dasar untuk mulai membangun sebuah situs.


18/129

16

“[ Framework is] a set of tools, libraries, conventions, and best

practices that attempt to abstract routine tasks into generic modules

that can be reused. The goal here is to allow the designer or

developer to focus on tasks that are unique to a given project, rather

than reinventing the wheel each time around.” [Framework For

Designers, by Jeff Croft] .

Pada dasarnya ada 2 jenis Framework untuk membedakan yaitu backend

dan frontend . Perbedaan ini diambil bergantung pada kerangka tersebut

lapisan presentasi (presentation layer ) atau lapisan aplikasi/logis

(application/logic layer ).

Gambar 3.1 Pembagian kerangka lapisan Framework ( http://www.awwwards.com )

KENTUNGAN

− Meningkatkan produktifitas dan menghindari kesalahan umum. Jika

Anda mengembangkan beberapa situs yang sifatnya sama, sebuah

abstraksi dari kode CSS secara dramatis dapat mempercepat

produktifitas Anda, membantu untuk menghindari kesalahan secara

umum dan menyederhanakan manajemen kode CSS.

http://www.awwwards.com/http://www.awwwards.com/http://www.awwwards.com/http://www.awwwards.com/


19/129

17

− Menormalkan basis kode/klas. Anda memiliki kode default CSS dan

markup XHTML sehingga akan selalu menggunakan ID dan nama

kelas yang sama dalam proyek Anda. Konsistensi kode pada seluruh

proyek sehingga mempermudah bagi Anda dan menjaga situs web

tanpa menggali ke dalam sumber kode dari setiap proyek yang pernah

dilakukan

− Memiliki alur kerja yang lebih baik dalam tim. Jika CSS Framework

didokumentasikan dengan baik, dapat digunakan dalam sebuah tim

sebagai common ground-up , sehingga dapat menghindari

kesalahpahaman dan memastikan alur kerja secara optimal. Hasil

terakhir dalam menghindari kesalahan dan membantu Anda untukmemenuhi tenggat waktu tanpa mengorbankan kualitas produk dan

tanpa biaya mahal

− Browser yang kompatibel secara optimal. CSS Framework disebut

sebagai "bulletproof", sehingga Anda tidak perlu khawatir tentang

masalah kompatibilitas browser dan bisa segera mulai coding

− Memiliki kode yang bersih baik terstruktur dan lengkap. CSS

Framework menyediakan dengan dasar pemikiran dengan baik untuk

situs Anda, menggunakan styling dasar dari semua tag html – elemen

yang Anda akan merasa perlu untuk gaya dari awal proyek Anda.

KERUGIAN

− Perlu waktu untuk memahami Framework. Dibutuhkan untuk

memahami arsitektur dari Framework jauh melampaui tugas kasar

coding dari awal

− Membutuhkan keakraban yang erat dengan arsitektur kode Anda.

Menggunakan CSS Framework eksternal, Anda masih perlu

pemahaman yang mendalam tentang kode Anda. Anda perlumengetahui persis bagaimana kerangka kerja Anda benar-benar

dibangun. "Dengan membangun sebuah situs dari bawah ke atas,

Anda mendapatkan pengetahuan tentang arsitektur situs Anda yang

tidak bisa dipelajari melalui studi atau dokumentasi”


20/129

18

− Mungkin mewarisi bug atau kesalahan seseorang. Jika Anda

menggunakan CSS Frameworks eksternal Anda mungkin mendapat

masalah untuk memperbaiki bugs orang lain yang jauh lebih

memakan waktu daripada memperbaiki bug Anda sendiri

− Mengembangkan situs pada kerangka kerja bukan pada pengetahuan

yang solid CSS. Masalah besar dengan Framework adalah ketika

sudah naik dan datang pengembang yang menempelkan pada

Framework yang bertentangan dengan kode tersebut

− Mendapatkan kode sumber yang membengkak. Apakah itu dalam

kerangka bahasa pada sisi server atau JavaScript library, sering

muncul persentase besar dari kode yang tidak akan pernah

dieksekusi. Meskipun sisi server utama tidak menjadi masalah,

namun hal ini dapat menurunkan kinerja kerangka sisi klien seperti

JavaScript library

− CSS tidak dapat dibingkai semantik. CSS dan (X) HTML berjalan

beriringan. (X) HTML adalah bahasa semantik di alamnya, yang tidakmungkin untuk membungkus dalam gaya kerangka. Kerangka CSS

pasif menghilangkan sebagian besar dari nilai semantik dari markup

dokumen dan ini harus dihindari

− Mengabaikan keunikan proyek Anda. Desain harus didasarkan pada

konten, bukan pada template standar yang Anda gunakan berulang-

ulang.

3.2 960 Grid System

960 Grid System merupakan upaya untuk merampingkan alur kerja

pengembangan web dengan menyediakan dimensi yang umum

digunakan, berdasarkan lebar 960 piksel. Ada dua varian: 12 dan 16kolom, yang dapat digunakan secara terpisah atau bersama-sama.

12-column grid dibagi menjadi bagian-bagian yang 60 piksel lebar. 16-

column grid terdiri dari penambahan 40 pixel. Setiap kolom memiliki 10

pixel margin di sebelah kiri dan kanan, yang membuat 20 pixel celah lebar


21/129

19

antara kolom. Premis dari sistem ini cocok untuk prototyping cepat, tapi

itu akan bekerja sama dengan baik ketika diintegrasikan ke dalam

lingkungan produksi. Ada lembar sketsa untuk cetak, desain tata letak,

dan file CSS yang memiliki pengukuran secara identik.

Bagi mereka lebih nyaman merancang pada 24-column grid, versialternatif juga disertakan. Ini terdiri dari kolom 30 piksel lebar, dengan 10

pixel gutters , dan 5 pixel buffer pada setiap container . Hal ini membuat

teks menyentuh pada browser Chrome. Dengan memanfaatkan push_XX

dan kelas pull_XX , unsur-unsur dapat disusun kembali, independen dari

urutan di mana mereka muncul dalam markup. Hal ini memungkinkan

Anda untuk menyimpan info lebih relevan yang lebih tinggi dalamHTML, tanpa mengorbankan presisi terhadap tata letak halaman Anda.

Misalnya, melihat kode sumber halaman ini untuk melihat bagaimana tag

H1 telah diposisikan kembali.

Untuk mengunduh aplikasi ini, silakan kunjungi website resmi di

http://960.gs/ .

Gambar 3.2 Tampilan halaman utama website 960 Grid System

3.3 Blueprint

Blueprint adalah kerangka CSS yang dirancang untuk mengurangi waktu

pengembangan dan memastikan kompatibilitas cross-browser ketika

bekerja dengan Cascading Style Sheets (CSS). Hal ini juga berfungsi

http://960.gs/http://960.gs/http://960.gs/


22/129

20

sebagai landasan bagi banyak alat yang dirancang untuk membuat

pengembangan CSS lebih mudah dan mudah diakses oleh pemula.

Blueprint dirilis di bawah versi modifikasi dari Lisensi MIT, sehingga

perangkat lunak bebas. Hal ini dapat digunakan baik sebagai, atau lebih

diadaptasi untuk digunakan melalui sebuah alat kompresi yang ditulis

dalam Ruby.

Fitur utama kerangka kerja CSS ini adalah: Grid mudah disesuaikan,

Sensible default typography, tipografi dasar, atur ulang browser CSS

dengan sempurna, stylesheet untuk pencetakan, script powerfull untuk

kustomisasi, penggembungan (bloat) diperkecil sebanyak mungkin.

Untuk mengunduh CSS Frameworks ini, silakan kunjungi website resmidi http://www.blueprintcss.org/ .

Gambar 3.3 Tampilan halaman utama website bluprint

3.4 BootstrapBootstrap adalah kumpulan alat yang gratis untuk membuat website dan

aplikasi web. Ini berisi HTML dan CSS berbasis desain template untuk

tipografi, bentuk, tombol, navigasi dan komponen antarmuka lainnya,

serta opsional ekstensi JavaScript. Bootstrap dikembangkan oleh Mark

http://www.blueprintcss.org/http://www.blueprintcss.org/http://www.blueprintcss.org/http://www.blueprintcss.org/


23/129

21

Otto dan Jacob Thornton di Twitter sebagai kerangka untuk mendorong

konsistensi di alat internal. Sebelum Bootstrap, berbagai perpustakaan

yang digunakan untuk pengembangan antarmuka, yang menyebabkan

inkonsistensi dan beban pemeliharaan tinggi.

Bootstrap memiliki dukungan yang relatif lengkap untuk HTML5 danCSS 3, sehingga kompatibel dengan semua browser utama. Informasi

dasar dari kompatibilitas situs atau aplikasi yang tersedia untuk semua

perangkat dan browser. Terdapat konsep kompatibilitas parsial yang

membuat informasi dasar dari sebuah situs web yang tersedia untuk

semua perangkat dan browser. Misalnya, sifat diperkenalkan pada CSS3

untuk sudut dibulatkan, gradien dan bayangan yang digunakan olehBootstrap meskipun kurangnya dukungan oleh browser web lama.

Bootstrap adalah modular dan pada dasarnya terdiri dari serangkaian

stylesheet LESS yang menerapkan berbagai komponen toolkit. Sebuah

stylesheet disebut bootstrap.less mencakup komponen-komponen

stylesheet. Pengembang dapat menyesuaikan file Bootstrap sendiri,

memilih komponen yang ingin mereka gunakan dalam proyek mereka.

CSS Framework ini hadir dengan lebar standar 940 pixel, layout grid.

Pengembang dapat menggunakan tata letak variable-width . Untuk kedua

kasus, toolkit memiliki empat variasi untuk menggunakan resolusi yang

berbeda dan jenis perangkat: ponsel, portrait dan landscape, tablet dan PC

dengan resolusi rendah dan tinggi. Setiap variasi menyesuaikan lebar

kolom.

Bootstrap dilengkapi dengan beberapa komponen JavaScript dalam

bentuk plugin jQuery. Mereka menyediakan elemen antarmuka pengguna

tambahan seperti kotak dialog, tooltips , dan carousels . Mereka juga

memperluas fungsionalitas dari beberapa elemen antarmuka yang ada,

termasuk misalnya fungsi auto-complete untuk bidang masukan. Dalam

versi 2.0, plugin JavaScript berikut ini didukung: Modal, Dropdown,

Scrollspy, Tab, Tooltip, Popover, Alert, Button, Tutup, Carousel dan

Typeahead.


24/129

22

Untuk menggunakan Bootstrap dalam sebuah halaman HTML,

pengembang cukup mengunduh Bootstrap CSS stylesheet dan termasuk

link dalam file HTML yang tersedia di website resmi

http://getbootstrap.com/ .

Gambar 3.4 Tampilan halaman utama website Bootstrap

3.5 Cardinal

Cardinal adalah Framework CSS kecil "mobile first", dengan gaya standar

yang berguna, fluid tipography, dan sistem grid responsif. Kerangka kerja

ini menghilangkan keputusan desain estetika yang dapat berati lebih

besar, kerangka CSS lebih rumit. Cardinal mendukung "mobile first,"pendekatan device-agnostic untuk desain responsif. Artinya, desain

aplikasi Anda seharusnya tidak peduli tentang dimensi pixel dari

perangkat itu sedang dilihat. Isi dalam desain harus menentukan

bagaimana dan di mana tata letak harus mengubah atau merespon.

Idenya adalah bahwa jika Anda merancang untuk perangkat pertama,

memaksa Anda untuk memprioritaskan dan menentukan data apa yang

paling penting dan tindakan dalam aplikasi Anda. Hasil akhirnya adalah

sebuah aplikasi yang difokuskan pada tugas utama pengguna seharusnya

untuk menyelesaikan, tanpa masalah kinerja, konten asing, dan

http://getbootstrap.com/http://getbootstrap.com/http://getbootstrap.com/


25/129

23

antarmuka yang mengganggu banyak aplikasi yang mengambil top-down,

pendekatan "PC first".

Cardinal menggunakan konvensi penamaan sederhana untuk kelas CSS

yang dapat dibaca manusia dan mudah untuk ditafsirkan. Sementara

terinspirasi oleh pendekatan Block, Element, dan Modifier (BEM),konvensi penamaan yang digunakan dalam Cardinal jauh lebih kompleks.

Untuk menggunakan aplikasi ini, silakan unduh melalui website resmi di

http://cardinalcss.com/ .

Gambar 3.5 Tampilan halaman utama website Cadinal

3.6 Cascade Framework

Cascade Framework adalah kerangka frontend gratis untuk membuat

website dan aplikasi web. Mirip dengan Bootstrap yang berisi berbagai file

HTML dan komponen antarmuka berbasis CSS, serta opsional ekstensi

JavaScript. Tidak puas dengan arsitektur Bootstrap, John Slegers inginmenciptakan alternatif yang menawarkan lebih banyak fleksibilitas dan

kinerja yang lebih baik tanpa memotong kembali pada fitur. Framework

ini hadir dengan nama Cascade Framework untuk proyek dan dirilis di

bawah Lisensi MIT pada Maret 2013.

http://cardinalcss.com/http://cardinalcss.com/http://cardinalcss.com/


26/129

24

Cascade Framework 2 saat ini sedang dalam pengembangan dan akan

melibatkan penulisan ulang dari basis kode ke dalam bahasa Sass

(Syntactically Awesome Stylesheets).

Cascade CSS framework adalah sebuah proyek yang unik saat ini. Tidak

seperti kebanyakan kerangka CSS yang berfokus pada User Interface (UI),Cascade berfokus pada kode organisasi dan kepatuhan cross-browser ,

sesuatu yang kebanyakan pengembang CSS frontend saat ini tidak peduli

lagi. Sementara pengembang kerangka CSS telah sibuk dalam kemasan

modul sebanyak UI karena mereka dapat dalam inti kerangka kerja

mereka, kebanyakan dari mereka lupa masalah utama dengan

pengembangan Web, masalah yang sudah ada sejak awal 2000-an:kepatuhan cross-browser .

Untuk menggunakan aplikasi ini, silakan unduh melalui website resmi di

http://www.cascade-framework.com/ .

Gambar 3.6 Tampilan halaman utama website Cascade Framework

3.7 Columnal

Columnal CSS sistem grid adalah "remix " dari beberapa orang lain dengan

beberapa kode kustom di dalamnya. Columnal merupakan jaringan

elastis, sementara beberapa inspirasi kode (dan ide untuk subcolumns)

diambil dari 960.gs. Columnal membuat prototyping responsif sedikit

lebih mudah. Dengan pengaturan lebar 1140p dalam fluid , akan

http://www.cascade-framework.com/http://www.cascade-framework.com/http://www.cascade-framework.com/


27/129

25

merespon dengan lebar kebanyakan browser. Hal ini tidak dianjurkan

untuk penggunaan produksi, hal ini dimaksudkan hanya sebagai alat

prototipe secara cepat.

Columnal adalah proyek Pulp + Pixels (http://www.pulpandpixels.com/ ).

Hal ini didasarkan pada pekerjaan dari orang-orang yang fantastiscssgrid.net dan 960.gs, yang pertama kali membuat kode mereka terbuka

dan tersedia. Beberapa kelebihan Framework ini diantaranya : Built-in

debugging CSS untuk menunjukkan struktur dari setiap halaman yang

sedang dibangun, sub-kolom (kolom dalam kolom) untuk lebih pilihan

tata letak, awalan dan akhiran untuk ruang ekstra dalam kolom sebelum

atau setelah konten, kelas jarak vertikal CSS, PDF sistem grid untukmembuat sketsa situs sebelum membangun, wireframing template.

Silakan kunjungi situs mereka untuk informasi lebih lanjut di

http://www.columnal.com/ .

Gambar 3.7 Tampilan halaman utama website Columnal

3.8 Floatz

Floatz adalah kerangka CSS yang fleksibel, kuat dan mudah digunakan.

Ini menyediakan set kelas kaya yang dapat digunakan kembali CSS dan

potongan kode yang membantu web designer dan programmer untuk

membangun state of the art,, semantik sehingga situs web lebih mudah

http://www.pulpandpixels.com/http://www.pulpandpixels.com/http://www.pulpandpixels.com/http://www.columnal.com/http://www.columnal.com/http://www.columnal.com/http://www.pulpandpixels.com/


28/129

26

diakses dan aplikasi, berdasarkan standar we dalam waktu relatif singkat.

Floatz adalah hasil dari bertahun-tahun menggunakan CSS dalam

berbagai jenis proyek-proyek berbasis web, mencoba untuk menemukan

cara untuk meringankan penggunaan. Hal ini digunakan dalam berbagai

jenis situs web konten berbasis serta aplikasi web modern dan dengan

demikian sangat kuat.

Keutamaan Framework ini dapat diringkas sebagai berikut: flexible

layouts, better accessibility, increased productivity, less bandwidth , dan broad

browser support . Untuk menggunakan aplikasi ini, silakan unduh melalui

website di https://code.google.com/p/floatz/ .

Gambar 3.8 Tampilan halaman utama website Floatz

3.9 Fluidable

Fluidable adalah mobile fi rst , sistem grid responsif yang tetap memiliki

gutter dan mendukung variabel kolom. Framework ini mandiri, ringan

dan dibangun menggunakan LESS. LESS merupakan ekstensi dari CSS,

yang menambahkan perilaku dinamis seperti variabel, mixin, operasi, dan

fungsi. LESS dapat dijalankan pada sisi klien (Chrome, Safari, FIrefox)

maupun server (menggunakan Node.js dan Rhino).

https://code.google.com/p/floatz/https://code.google.com/p/floatz/https://code.google.com/p/floatz/https://code.google.com/p/floatz/


29/129

27

Fitur utama Fluidable adalah: Fluid Layout, Mobile First, Responsive,

Variable Column, Nestable, dan Fixed Gutters.

Setiap set kolom dibungkus dengan .col-group dan dapat berisi sejumlah

kolom. Saat ini, kolom menggunakan model border-box untuk

meningkatkan kenyamanan. Anda memiliki lima pilihan untukmenyesuaikan grid dengan kebutuhan Anda: jumlah kolom, lebar

maksimal situs Anda, dan lebar gutter yang ditetapkan dalam standar

ukuran ems. Variabel @screen menentukan break point responsif.

Anda dapat mengkonfigurasi Fluidable untuk sejumlah kolom

menggunakan variabel @column. Fluidable memiliki tiga set kelas

jaringan yaitu: Mobile .col-mb-x untuk perangkat kecil seperti ponsel.Tablet .col-x dan Desktop .col-dt-x untuk layar yang lebih besar. Satu set

kelas untuk mendorong kolom menggunakan margin kiri. Hal ini baik

untuk digunakan, bukan menciptakan kolom kosong. Gunakan .offset-0

untuk tidak ada offset.

Silakan kunjungi website resmi http://fluidable.com/ untuk informasi

lebih lanjut dan mengunduh aplikasi ini.

Gambar 3.9 Tampilan halaman utama website Fluidable

http://fluidable.com/http://fluidable.com/http://fluidable.com/http://fluidable.com/


30/129

35

BAB 4WEB DESIGN WIREFRAME

FOR MOCKUP

Ketika memulai sebuah proyek desain web baru, hal tersebut merupakan

ide yang baik untuk memulai dengan prototipe. Tujuan dari prototipe

adalah untuk mengkomunikasikan tata letak halaman tanpa terperangkap

dalam elemen warna dan desain. Wireframes dapat menghemat waktu

karena membantu semua pihak yang terlibat mencapai kesepakatan

tentang penempatan elemen halaman utama seperti header, area konten,

menu navigasi, dan footer. Kuncinya adalah untuk mendapatkan tata

letak sehingga jika terjadi perubahan yang sangat drastis tidak akan

mengubah detail rinci terhadap elemen yang telah ditempatkan dalam

prototipe.

Ada beberapa cara yang berbeda bagi seorang perancang web untuk dapat

mengambil sebuah aplikasi wireframes, dan bahkan ada aplikasi yang

dirancang khusus untuk ini. Berikut ini, ada beberapa aplikasi yang dapat

berfungsi sebagai wireframe untuk merancang web dalam bentuk

prototipe ataumockup .

4.1 MockFlow

MockFlow memungkinkan Anda untuk merancang dan berkolaborasi

(secara real-time) maket user interface untuk perangkat lunak Anda dan

situs web. Muncul dengan berbagai built-in komponen & ikon.


31/129

36

Mockflow merupakan alat wireframe online untuk pengembang

perangkat lunak dan website. Web developer dapat menggunakan aplikasi

untuk mendapatkan konsep visual yang siap dalam beberapa menit.

Mockflow adalah solusi yang lebih cepat daripada gambar atau coding

wireframes. Pengguna dapat langsung menggunakan Mockflow dan

berbagi desain dengan klien. Pengguna juga dapat menyusun strategi

hampir dengan built-in SiteMap Visualizer tersebut.

MockFlow dilengkapi dengan berbagai komponen dan ikon maupun item

tambahan yang dapat dibeli dari "MockStore." Halaman dapat diatur

dengan Sitemaps dan pengguna dapat menentukan link untuk

menyajikan prototipe yang dapat diklik. MockFlow juga kompatibeldengan perangkat mobile seperti tablet dan smartphone yang

menjalankan iOS atau sistem operasi Android. Melalui MockFlow,

pengguna dapat mengedit prototipe mereka, memanfaatkan perpustakaan

yang luas objek dan gambar dan mempublikasikan seluruh proyek

mereka baik format HTML offline atau bahkan ke aplikasi lain seperti

Adobe PDF atau Powerpoint.

Gambar 4.1 Tampilan halaman utama website MockFlow


32/129

37

4.2 Axure

Axure memungkinkan aplikasi desainer untuk membuat wireframes,

diagram alur, prototipe, dan spesifikasi untuk aplikasi dan situs web. Ini

memungkinkan Anda menggunakan widget siap pakai termasuk tombol,

kolom formulir, bentuk, dan unsur-unsur dinamis yang bisa Anda editdan format yang di lingkungan yang akrab. Anda dapat pula membuat

sendiri widget kustom library.

Gunakan Axure untuk membangun wireframes sederhana atau prototipe

yang kaya dengan logika kondisional, konten dinamis, dan perhitungan

tanpa coding . Setelah Anda dapat menguasainya, mereka akan kagum

berapa banyak yang dapat Anda lakukan dan seberapa cepat.

Gambar 4.2 Tampilan aplikasi Axure

4.3 Balsamiq Mockups

Balsamiq Mockups merupakan aplikasi yang dapat digunakan untuk

menggambar dalam format digital, sehingga Anda dapat mengubah dan

mengatur ulang kontrol dengan mudah, dan hasil akhirnya adalah jauh

lebih bersih. Dengan 75 kontrol pre-built untuk memilih dari, Anda dapat

merancang sesuatu dari kotak dialog super-sederhana untuk aplikasi

penuh, dari sebuah situs web sederhana untuk sebuah Rich Internet

Application.


33/129

38

Balsamiq Mockup memungkinkan Anda menambahkan dan mengedit

User Interface wireframes langsung dari Google Drive. Ilterasi secara real-

time dengan stake holder Anda untuk pindah dari desain untuk

pengembangan lebih cepat. Didirikan pada tahun 2008, Balsamiq adalah

sebuah perusahaan kecil yang bertujuan membuat software sederhana.

Gambar 4.3 Tampilan aplikasi Balsamiq Mockup

4.4 Pencil Project

Pencil dibangun dengan tujuan memberikan secara gratis dan open-source

GUI prototyping tool yang dapat dengan mudah menginstal dan

digunakan untuk membuat mockup pada platform desktop yang populer.

Pensil menyediakan berbagai built-in bentuk koleksi untuk menggambar

berbagai jenis antarmuka pengguna mulai dari desktop untuk platform

mobile. Mulai dari 2.0.2, Pencil dikirimkan dengan Android dan iOS UI

stensil pra-instal. Hal ini membuat lebih mudah untuk memulai protyping

aplikasi dengan instalasi sederhana.


34/129

39

Fitur gambar yang populer juga diimplementasikan dalam Pencil untuk

menyederhanakan operasi menggambar. Ada juga banyak koleksi lain

yang dibuat oleh masyarakat dan didistribusikan secara bebas di Internet.

Anda dapat dengan mudah mengambil koleksi dan menginstalnya ke

Pensil dengan operasi drag-and-drop sederhana.

Gambar 4.4 Tampilan aplikasi Pencil Project

4.5 HotGloo

HotGloo benar-benar berbasis web dengan banyak fitur yang

memungkinkan anda bekerja dengan cara drag & drop dan skala item

dengan mudah. Ini juga memiliki dukungan untuk kolaborasi real time.

Beberapa fitur yang menjadi unggulan wireframe ini adalah : 1) Mudah

digunakan. Perangkat lunak yang baik tidak perlu kompleks. Itu sebabnya

HotGloo sangat intuitif dan mudah digunakan; 2) Kolaboratif. Wireframe

secara real-time dengan tim Anda untuk mendapatkan pekerjaan yang

dilakukan lebih cepat dan berkomunikasi dengan rekan kerja melalui

pengembangan pada fungsi chatting untuk menghindari gangguan; 3)

Independen. Bekerja pada proyek Anda di manapun Anda berada dan

kapanpun Anda inginkan. Akun Anda dapat diakses 24/7, terlepas sistem

operasi atau browser yang Anda gunakan; 4) Interactive. Elemen link ke


35/129

40

halaman dalam sitemap Anda atau mengatur skenario pengguna yang

berbeda dengan negara-negara, viewstacks dan masih banyak lagi.

Gambar 4.5 Tampilan halaman utama aplikasi HotGloo

4.6 Mockingbird

Mockingbird adalah aplikasi web lain dengan fokus pada kolaborasi. Halini memungkinkan Anda untuk menghubungkan beberapa maket

bersama-sama dan melihat mereka secara interaktif untuk mendapatkan

imajinasi rancangan tampilan melalui aplikasi Anda. Mockingbird adalah

sebuah online tools untuk memudahkan Anda membuat rancangan

maket, link bersama-sama, pratinjau, dan berbagi maket situs web atau

aplikasi.

Untuk informasi lebih lanjut silakan mengunjungi website resmi di

https://gomockingbird.com/ .

https://gomockingbird.com/https://gomockingbird.com/https://gomockingbird.com/


36/129

41

Gambar 4.6 Beberapa fitur Mockingbird

4.7 Cacoo

Cacoo adalah alat gambar online yang user fr iendly , memungkinkan Anda

untuk membuat bermacam-macam diagram, seperti: peta situs, wire

frames, UML dan bagan network. Cacoo dapat dipakai secara gratis.

Beberapa fitur utama yang dimiliki aplikasi ini di antaranya: 1)

Digunakan untuk membuat diagram yang menarik dengan mudah di

dalam Web. Membuat diagram sangat mudah - yang anda butuhkan

hanyalah menjatuhkan stensil yang Anda suka. Selesaikan diagram

dengan konektor jika perlu. Dalam sekejap, Anda mempunyai diagram

bagus secara cepat; 2) Bermacam macam jenis stensil. Ada banyak jenis

stensil sehingga Anda dapat menggambar diagram pada Cacoo untuk

berbagai tujuan. Ini sangat mudah untuk memvisualisasikan apa yang ada

dalam pikiran Anda; 3) Sap siap dan... Mulai Jika Anda pindahkan

sebuah objek,objek akan sejajar dengan benda-benda terdekat secara

otomatis. Rancangan, seperti menyelaraskan dan mendistribusikan secara

merata, semua tersedia. Setiap orang dapat menggambar diagram yang

seimbang dengan mudah; 4) Beberapa lembar kerja dan Latar Belakang.

Masing masing diagram dapat dibuat sampai beberapa lembar,semuanya

menjadi mudah saat membuat diagram secara bersama sama. Dengan

menggambar bagian umum pada lembar latar belakang, pembuatan


37/129

47

BAB 5DESAIN RESPONSIVE

UNTUK MEROMBAK ALUR KERJA

Desain responsif dengan cepat menjadi standar baru dalam industri

pengembangan web. Gerakan ini telah menyebabkan pergeseran dalam

berpikir, terutama penyesuaian alur kerja untuk proses proyek lebih

efisien. Pada awalnya, membedah desain alur kerja responsif, memang

cukup sulit namun jika sudah menemukan maka proyek yang berulang

dapat menjadi lebih efisien dengan memanfaatkan workflow sebelumnya.

Dari struktur konten gambar scalable, kita akan membahas beberapa

teknik yang perlu dipertimbangkan dalam desain responsif berikutnya.Jika Anda seorang desainer atau pengembang, apakah Anda memiliki

beberapa strategi untuk desain web responsif? Berikut ini beberapa

rekomentasi tips dan strategi dalam merancang web responsif.

5.1 Mobile First

Dimulai dengan pendekatan ponsel pertama (mobile fi rst ) dan merancangdengan peningkatan progresif yang mencakup semua basis, hal ini

membantu Anda lebih fokus dan memprioritaskan kendala terhadap

desain ponsel, ketika pengalaman baru dalam membangun desain yang

inovatif. Ini berarti penampilan yang standar dan konten berbasis mobile ,


38/129

48

dioptimalkan untuk perangkat sederhana pertama. Perangkat dengan

layar kecil dan media dukungan query , kemudian disajikan dalam tata

letak yang canggih. Selanjutnya, isi dan tata letak ditingkatkan untuk

kepentingan "Desktop atau Notebook." Ini merupakan strategi

pendekatan yang optimal, bahkan Google juga telah mengadopsi teknik

tersebut.

Merancang untuk perangkat mobile yang lebih canggih, sekarang harus

menjadi titik awal bukan akhir. Hal ini memaksa kita untuk lebih fokus

pada konten penting, untuk optimasi pengembangan, fast-loading

perangkat mobile canggih yang semakin ditingkatkan, namun pengguna

lebih diutamakan.Ketika teknik desain responsif untuk mobile first dalam masa

pertumbuhan, dan menyajikan berbagai tantangan teknis, mengubah

workflow yang berarti Anda sedang membangun pada hal adaptif,

terfokus, ramping, pondasi dasar ramah di masa depan (future-friendly ).

Gambar 5.1 Ilustrasi desain responsive Mobile First (sumber:

http://bradfrostweb.com/wp-content/uploads/2011/06/progressive_enhancement.jpg )

5.2 Content Strategy

Tujuan dari desain responsif adalah untuk menyajikan pengalaman

pengguna yang terbaik mungkin dalam konteks apapun. Membangun

website responsif adalah waktu yang tepat untuk memikirkan kembali

http://bradfrostweb.com/wp-content/uploads/2011/06/progressive_enhancement.jpghttp://bradfrostweb.com/wp-content/uploads/2011/06/progressive_enhancement.jpghttp://bradfrostweb.com/wp-content/uploads/2011/06/progressive_enhancement.jpg


39/129

49

konten Anda untuk membuatnya lebih mudah dibaca dan diakses,

terlepas dari perangkat apa yang saat itu sedang dilihat. Apakah Anda

memilih graceful degradation atau progressive enhancement , mengadopsi

metodologi "content out " membantu dalam mengembangkan strategi

konten yang menggeser fokus kembali ke pengguna.

Untuk mengembangkan arsitektur informasi dan strategi konten berarti

menempatkan konten pertama dengan menciptakan kerangka kerja

(workflow ) dan struktur berdasarkan penelitian tentang pengguna dan

kebutuhan mereka. Gunakan pengetahuan ini dan dimulai dengan

jumlah minimum konten yang diperlukan untuk membuat desain

“useful ” adalah sebuah pondasi dasar yang kuat, yang Anda dapat lebihserius menambahkan layar dan resolusi yang lebih besar. Ini sama

pentingnya untuk menjawab pertanyaan kunci tentang bagaimana

masing-masing jenis konten cocok menjadi situs tujuan dan menetapkan

konten apa yang dimaksudkan untuk menyelesaikan.

Gambar 5.2 Ilustrasi content-strategy web (sumber : http://dashburst.com/wp-

content/uploads/2013/02/content-strategy.jpg )

5.3 Sketch and Prototype

Setelah Anda memiliki persediaan dan strategi penempatan konten,

mulailah memasukkan sketsa ke dalam alur kerja responsif Anda. Hal ini

akan membantu kreasi cerdas, tata letak yang terorganisir dalam skala.

http://dashburst.com/wp-content/uploads/2013/02/content-strategy.jpghttp://dashburst.com/wp-content/uploads/2013/02/content-strategy.jpghttp://dashburst.com/wp-content/uploads/2013/02/content-strategy.jpghttp://dashburst.com/wp-content/uploads/2013/02/content-strategy.jpghttp://dashburst.com/wp-content/uploads/2013/02/content-strategy.jpghttp://dashburst.com/wp-content/uploads/2013/02/content-strategy.jpg


40/129

50

Berbagai ukuran layar, resolusi dan kemampuan perangkat yang tersedia

saat ini berarti lebih banyak layout yang harus direncanakan. Dengan

menggunakan sketsa sebagai alat responsif, Anda dapat mengambil ide-

ide kasar Anda, mengeksposnya untuk bahan diskusi dan kritik,

menyempurnakan dan merumuskan, dan akhirnya meletakkan fondasi

gambar rangka dan prototipe untuk dilanjutkan dalam proyek.

Ada banyak aplikasi yang dapat digunakan untuk membuat prototipe dan

maket (mockup ). Salah satu aplikasi yang handal untuk merancang web

adalah Adobe Photoshop. Meski begitu, ada juga aplikasi ringan yang

dapat digunakan untuk merancang prototipe web responsif. Pada bagian

lain dalam buku ini dijelaskan beberapa aplikasi untuk membuat maket.Prototipe dalam selemabr kertas memiliki visualisasi dan konten rendah,

yang berarti Anda dapat benar-benar fokus pada interaksi pengguna dan

aliran konten, bukan bagaimana hal itu akan terlihat - setelah semua,

gagasan inti di balik sketsa adalah untuk tetap fokus pada adaptasi dari

konten, bukan container.

Dengan satu set sketsa, Anda dapat memindahkan ke prototyping , yang

merupakan tata letak HTML sederhana (atau gambar workflow ), dengan

tujuan untuk menentukan apakah struktur konten, navigasi, markup dan

breakpoints masuk akal dan dapat bekerja dalam konteks tertentu.

Prototipe mengaktifkan fungsi halus dan interaksi dan, karena minimal

gaya, memusatkan perhatian pada struktur dan konten. Anda dapat

memulai dengan prototyping dengan berbagai workflow dan boilerplates ,

atau Anda dapat memilih untuk memulai dari awal.

Pada beberapa titik dalam tahap sketsa dan prototipe , Anda mungkin

ingin membuat pola library yang dinamis, pendokumentasian library

proyek unsur dan pola dasar, yang digunakan sebagai titik awal untuk

sebuah proyek dan kemudian disesuaikan dengan desain. Hal ini dapat

memungkinkan untuk alur kerja lebih cepat dan sangat berguna untuk

tim yang bekerja bersama-sama. Ada beberapa sumber daya yang tersedia

– Rock Hammer (http://malarkey.github.io/Rock-Hammer/ ) dari Stuff

dan Nonsense, ini adalah salah satu yang cukup mengesankan. Gunakan

http://malarkey.github.io/Rock-Hammer/http://malarkey.github.io/Rock-Hammer/http://malarkey.github.io/Rock-Hammer/http://malarkey.github.io/Rock-Hammer/


41/129

51

sebagai desain atau pola gaya primer atau sebagai dasar untuk

mengembangkan sebuah website responsif.

Gambar 5.3 Contoh prototipe web responsif untuk tablet (landscape)

5.4 Frameworks

Pada saat memilih kerangka CSS (CSS Framework ) sebagian besar fokus

pada ideologi dan prefensi secara pribadi dan menggabungkkan satu alur

kerja responsif Anda. Hal ini dapat mempercepat proses pengembangan,

menormalkan masalah kompatabilitas antar browser yang umum dan

terstruktur, pendekatan berbasis grid, semua fitur tersebut sangat

berharga saat membuat sebuah web responsif. Mungkin manfaat terbesaradalah bahwa meminimalkan proses pengujian dan debugging , sebagai

Framework dapat menghilangkan bug pada browser tertentu dan telah

diuji sebagaian besar browser modern dan perangkatmobile .

Ketika memilih sebuah kerangka kerja (Framework) tersebut sangat

penting untuk mempertimbangkan beberapa poin yaitu: Berapa banyak

pembelajaran yang dibutuhkan untuk membangun dan berjalan normal?Apakah tersedia dokumen dan dukungan? Fitur apa saja yang ditawarkan?

Salah satu kerangka kerja yang menggunakan pendekatan Mobile First

adalah Foundation dari ZURB. Aplikasi ini menggunakan 12 grid kolom

fleksibel yang dapat mengatur skala secara otomatis sesuai resolusi dan


42/129

57

BAB 6PRAKTIKUM MEMBUAT

WEB RESPONSIF

6.1 Merancang Template yang Keren

Template profesional sudah banyak tersedia di internet, baik yang

disediakan secara gratis maupun berbayar. Tata letak konten bervariasi,ada yang membagi dengan beberapa kolom kemudian di bagian bawah

juga dibagi lagi menjadi kolom-kolom kecil untuk menempatkan menu

tambahan, dan masih banyak lagi variasi rancangan template yang

menarik.

Merancang template adalah tugas seorang web designer , dia bertanggung

jawab membuat sketsa, prototipe hingga maket (mockup ). Untukmendapatkan ide dan gagasan ketika akan merancang tampilan halaman

utama (homepage ), perlu melihat dan membandingkan beberapa website

profesional. Tujuannya bukan untuk menjiplak, namun sebagai referensi

dalam memilih warna, menentukan navigasi, menentukan jumlah kolom,

pengaturan tipografi, dan komponen lainnya yang menarik.

Tampaknya tidak semua orang memahami apa bagaimana membuat

rancangan web. Memang, desain web adalah sebagian besar proses kreatif,

oleh karena itu biasa disebut seni (art ) yang lebih dari sekadar ilmu

pengetahuan. Namun karena secara intrinsik berfungsi sebagai media

presentasi, maka berlaku beberapa aturan (atau setidaknya prinsip) untuk


43/129

58

membuat desain web yang menarik. Dengan mengikuti beberapa

petunjuk sederhana, siapa pun harus mampu membuat desain visual yang

menyenangkan sehingga akan mengambil satu langkah lebih dekat

menuju ketenaran. Ups, itu tidak sesederhana yang dibayangkan, bakat

dan pengalaman memang penting, tapi setiap orang dapat mengubah

homepage mereka menjadi sesuatu yang cantik dalam hitungan menit.

Berikut ini prinsip-prinsip kunci yang membuat desain web terlihat baik:

1. Balance. Dalam arti kiasan, konsep keseimbangan visual, mirip

dengan keseimbangan fisik digambarkan oleh jungkat-jungkit. Sama

seperti benda-benda fisik yang memiliki bobot, begitu juga elemen

layout . Jika unsur-unsur di kedua sisi layout memiliki keseimbangan,mereka menyeimbangkan satu sama lain. Ada dua bentuk utama dari

keseimbangan visual: simetris dan asimetris. Kesimbangna simetris

atau keseimbangan formal, terjadi ketika unsur-unsur komposisi

yang sama di kedua sisi garis sumbu.

Gambar 6.1 Contoh website yang menerapkan prinsip simetris (sumber:

http://www.webdesignstuff.co.uk/ta006/files/2011/01/web5.jpg )

http://www.webdesignstuff.co.uk/ta006/files/2011/01/web5.jpghttp://www.webdesignstuff.co.uk/ta006/files/2011/01/web5.jpghttp://www.webdesignstuff.co.uk/ta006/files/2011/01/web5.jpg


44/129

59

Keseimbangan asimetris, atau keseimbangan informal adalah sedikit

lebih abstrak (dan lebih menarik secara visual pada umumnya)

daripada keseimbangan simetris. Daripada gambar cermin di kedua

sisi tata letak, keseimbangan asimetris melibatkan benda-benda

ukuran yang berbeda-beda, bentuk, nada, atau penempatan. Benda-

benda ini diatur sedemikian rupa sehingga, meskipun perbedaan-

perbedaan, mereka menyamakan berat halaman, misalnya, jika Anda

memiliki sebuah objek besar di salah satu sisi halaman, dan pasangan

dengan beberapa item yang lebih kecil di sisi lain, komposisi dapat

masih dianggap seimbang. Meskipun mungkin tidak praktis untuk

semua desain dan klien, jenis simetri-simetri horisontal disebut dapat

diterapkan untuk layout website dengan berpusat konten atau

menyeimbangkan di antara kolom

Gambar 6.2 Contoh website yang menerapkan asimetris (sumber:

https://thinkery.me/ )

2. Grid. Konsep grid terkait erat dengan keseimbangan. Grids adalah

serangkaian garis bantu secara horizontal dan vertikal yang

membantu Anda "memilah-milah" desain. Pikirkan tentang kolom,

kolom lebih mudah dibaca, membuat konten halaman lebih mudah

menyerap. Spasi dan penggunaan Rule of Thirds (atau mirip Golden

Ratio) membuat segalanya lebih mudah pada mata. Menggunakan

grid lebih dari sekadar tentang membuat elemen pada halaman

menjadi persegi dan berbaris: ini tentang proporsi pula. Banyak

https://thinkery.me/https://thinkery.me/https://thinkery.me/


45/129

60

sejarawan seni pelukis Belanda Piet Mondrian sebagai bapak desain

grafis untuk penggunaan canggihnya grid. Namun teori jaringan

klasik telah mempengaruhi upaya artistik yang sukses selama ribuan

tahun. Konsep membagi komposisi elemen kembali meluas ke ide-ide

matematika yang didirikan oleh Pythagoras dan para pengikutnya,

yang didefinisikan sebagai angka rasio daripada unit tunggal.

Pythagorean mengamati pola matematis yang terjadi begitu sering di

alam yang mereka percaya sebagai wahyu. Mereka disebut pola ini

sebagai the golden ratio atau golden ratio atau divide proportion .

Gambar 6.3 Golden Ration

Sebuah versi sederhana dari golden ration adalah aturan pertiga (the

rule of thirds) . Sebuah garis membelah dengan rasio emas dibagimenjadi dua bagian, salah satunya adalah sekitar dua kali ukuran

yang lain. Membagi komposisi menjadi tiga adalah cara mudah untuk

menerapkan proporsi istimewa tanpa kalkulator.

Gambar 6.4 The Rule of Thirds


46/129

61

Salah satu alat favorit saya untuk meletakkan komponen situs web

adalah template dan lembar sketsa dari 960 Grid System Nathan

Smith. Terinspirasi oleh artikel dari web designer Khoi Vinh dan

Mark Boulton, 960 Grid System adalah kerangka CSS terpopuler.

Lebar template berasal dari sebuah artikel oleh Cameron Moll. Dalam

merenungkan lebar yang cocok untuk tampilan dengan lebar 1.024

px, Moll menetapkan di 960px, dan menunjukkan bahwa jumlah itu

dibagi 3, 4, 5, 6, 8, 10, 12, 15, dan 16-menjadikannya sebagai lebar

yang ideal untuk grid. Nathan menggabungkan ide-ide tersebut ke

dalam framework dan menciptakan tiga tata letak yayasan: satu

dengan 12 kolom, satu dengan 16 kolom, dan satu dengan 24.

Gambar 6.5 Contoh website menggunakan 16 kolom grid

3. Color. Warna psikologi adalah bidang studi yang dikhususkan untuk

menganalisis efek emosional dan perilaku yang dihasilkan oleh warna

dan kombinasi warna. Pemilik website E-commerce ingin tahu warna

yang akan membuat pengunjung situs web mereka menghabiskan

lebih banyak uang. Rumah dekorator setelah pemberian warna akan

mengubah kamar tidur menjadi tenang. Pemilik restoran cepat saji

yang mengetahui kombinasi warna akan membuat Anda ingin makan

ukuran super (super-size ). Seperti yang dapat Anda bayangkan,


47/129

62

psikologi warna adalah bisnis besar. Bagaimana jika Anda mengubah

warna website menjadi merah, apakah terlihat bagus? Banyak teori

tentang warna dan kombinasi mereka ada, termasuk konvensi pada

monokrom dan skema kontras.

Menggambarkan hubungan emosional orang yang dapat memilikiwarna bisa menjadi topik yang sangat hippy-esque . Meskipun

sebagian besar desainer hanya mengandalkan makna, karakteristik,

dan kepribadian dari warna tertentu, itu masih berguna untuk

memiliki pemahaman tentang atribut emosional dari beberapa

kelompok warna utama.

Warna merah memiliki reputasi untuk merangsang adrenalin dantekanan darah. Seiring dengan efek-efek fisiologis, merah juga dikenal

untuk meningkatkan metabolisme manusia, warna yang menarik,

dramatis, dan kaya. Warna merah juga merupakan warna gairah.

Oranye adalah warna yang sangat aktif dan energik, meskipun tidak

membangkitkan gairah seperti halnya warna merah. Sebaliknya,

oranye bisa mewakili untuk mempromosikan kebahagiaan, dan

mewakili sinar matahari, antusiasme, dan kreativitas.

Kuning adalah warna yang aktif, dan menjadi sangat terlihat, itu

sering digunakan untuk taksi dan tanda-tanda hati-hati. Ini juga

terkait dengan kebahagiaan.

Hijau paling sering dikaitkan dengan alam. Ini adalah warna yangmenenangkan yang melambangkan pertumbuhan, kesegaran, dan

harapan. Ada sedikit keraguan mengapa warna telah terikat begitu

erat dengan perlindungan lingkungan. Secara visual, hijau jauh lebih

mudah pada mata, dan jauh lebih dinamis daripada kuning, oranye,

atau merah.

Ketika masih kecil, warna favorit saya adalah biru. Bukan sembarang

biru biru, tapi biru langit dari Crayola krayon. Sementara sebagian

besar anak-anak lain yang kurang setuju, warna biru sering dianggap

sebagai warna favorit universal. Pada tingkat touchy-feely , biru

melambangkan keterbukaan, intelijen, dan iman, dan telah


48/129

63

ditemukan memiliki efek menenangkan. Di sisi lain, biru juga telah

ditemukan untuk mengurangi nafsu makan.

Ungu masih merupakan kekayaan dan pemborosan. Pemborosan

yang terbawa ke alam. Ungu paling sering terhubung dengan bunga,

gemstones, dan anggur. Ini menyeimbangkan stimulasi merah danefek biru yang menenangkan.

Dalam budaya Barat, putih dianggap warna kesempurnaan, cahaya,

dan kemurnian. Inilah sebabnya mengapa warna putih digunakan

dalam iklan deterjen, dan mengapa pengantin mengenakan gaun

putih di hari pernikahannya.

Meskipun warna hitam sering menderita konotasi negatif seperti

kematian dan kejahatan, juga dapat menjadi warna kekuasaan,

keanggunan, dan kekuatan, bergantung pada bagaimana itu

digunakan. Jika Anda sedang mempertimbangkan untuk

menggunakan warna tertentu dan bertanya-tanya apa asosiasi untuk

warna itu, hanya bertanya pada diri sendiri.

4. Graphics. Oke, desain besar tidak perlu grafis yang mewah. Tapi

miskin grafis pasti akan mengurangi citra rasa desain. Graphics dapat

menambah pesan visual. Beberapa website memiliki ilustrasi yang

mengesankan, sementara yang lain bersahaja. Anda mungkin bukan

seorang ilustrator atau fotografer yang handal, tapi itu bukan berarti

Anda tidak dapat menempatkan grafis yang besar pada website Anda.Beberapa keterampilan dasar Photoshop, mungkin beberapa stok

gambar besar dan bagus adalah semua yang Anda butuhkan. Cobalah

untuk membuat grafis bersama-sama dengan baik, dan pastikan

mereka mewujudkan gaya untuk keinginan Anda. Meskipun tidak

semua orang memiliki bakat dengan kemampuan alami yang sama.

Anda dapat mengambil beberapa hal dengan belajar dari orang lain,tapi kadang-kadang Anda hanya perlu memilih gaya yang cocok

untuk Anda.


49/129

64

Gambar 6.6 Contoh website yang kaya dengan grafis

5. Typography. Seni adalah subyek yang rumit untuk dibicarakan

karena meliputi begitu banyak unsur. Meskipun dapat dianggap

sebagai cabang dari desain, orang dapat menghabiskan seumur hidup

untuk menguasai semua aspeknya. Tipografi untuk web sedikit rumit

dibanding dengan tipografi untuk cetak (printing ). Perbedaan

terbesar adalah tidak adanya kendali penuh atas jenis penampilan di

web, karena sifatnya yang dinamis. Jelas, render dinamis memiliki

strenght namun perancang web memiliki sedikit kontrol terhadap

pengaturan tipografi. Jenis font yang hilang atau tidak ditemukan

pada komputer pengguna, perbedaan browser dan platform

rendering, dan dukungan standar dalam CSS membuat tipografi web

nampak "menakutkan" jika tidak cocok ketika ditampilkan. Namun

dengan hadirnya CSS3 untuk tipografi web, kita memiliki sarana

untuk membuatnya terlihat lebih menarik, dan yang terpenting

adanya kontrol penuh. Misal efek shadow, border, transparan, dan

lain-lain.


50/129

65

Untuk mengatasi font yang tidak ditemukan atau hilang, dapat

menggunakan font online misalnya Google Font. Selain gratis, jumlah

font juga banyak dan bervariasi. Tipe bold, handwriting, serif, san

serif, dan lain-lain.

Ukuran yang digunakan adalah panjang baris, dan leading adalahtinggi (atau jarak vertikal) baris. Dalam CSS, ukuran dapat dikontrol

dengan mendefinisikan lebar untuk kotak yang berisi (misalnya

elemen paragraf). Keduanya mempengaruhi pembacaan. Jika garis

terlalu pendek atau terlalu panjang, pengguna tidak akan nyaman

membaca konten, ini sering terlihat masalah ini dengan layout fluid .

Antara 40 dan 80 karakter per baris tampaknya lebih ideal.Leading dapat ditingkatkan (atau diturunkan, sesuai kebutuhan)

dengan mendefinisikan properti CSS line-height . Umumnya,

ketinggian garis 1,5 bekerja dengan baik untuk paragraf. Ini berarti

bahwa ketika ukuran teks adalah 12 poin, ketinggian garis menjadi 18

poin (12 × 1,5), yang memberikan teks beberapa ruang.

Gambar 6.7 Contoh website menggunakan tipografi unik

( http://v1.jontangerine.com/ )

http://v1.jontangerine.com/http://v1.jontangerine.com/http://v1.jontangerine.com/http://v1.jontangerine.com/


51/129

66

6. White space. Ruang putih ruang atau ruang negatif, harus dilakukan

dengan apa yang tidak ada. Seperti ukuran dan leading , ruang putih

memberikan teks beberapa ruang kosong Anda dapat membuat

elemen menonjol dengan menambahkan spasi di sekitar mereka.

Copy, misalnya, tidak akan terlihat sempit. Agar dapat dibaca,

pastikan paragraf memiliki padding yang cukup.

Ruang putih adalah salah satu yang paling mudah (karena Anda tidak

perlu menambahkan sesuatu). Dan ini merupakan cara yang paling

efektif untuk membuat desain visual yang menyenangkan dan mudah

dibaca. Ruang putih menambah banyak kelas untuk desain. Jangan

takut untuk meninggalkan beberapa lubang yang terbuka, bahkanmenganga. Desainer berpengalaman tergoda untuk memasukkan

sesuatu ke dalam setiap sudut kecil. Desain adalah tentang

komunikasis sebuah pesan. Elemen desain harus mendukung pesan

ini, tidak perlu menambahkan suara untuk itu.

Gambar 6.8 Contoh website yang menerapkan white space ( http://astheria.com/ )

7. Connection adalah sedikit dari sebuah istilah yang dibuat-buat di

sini, tetapi tampaknya menjadi yang terbaik untuk apa yang kita

maksud. Koneksi di sini mengacu pada desain Web yang memiliki

http://astheria.com/http://astheria.com/http://astheria.com/http://astheria.com/


52/129

67

kesatuan dan konsistensi. Kedua atribut menunjukkan

profesionalisme dari desain. Mereka adalah atribut yang sangat luas .

Sebuah desain harus konsisten dalam penggunaan warna, rangkaian

huruf dengan ikonnya, dan lain-lain.

Ketika sebuah desain tidak konsisten, kesatuan bisa hilang padapengguna. Persatuan adalah sedikit berbeda dari konsistensi.

Persatuan mengacu pada bagaimana unsur-unsur yang berbeda

dalam interaksi desain dan cocok bersama. Misalnya, apakah warna

dan grafis sesuai? Apakah semuanya berkontribusi untuk satu pesan

terpadu? Konsistensi, di sisi lain ditemukan antara halaman-halaman

desain.Dari tujuh prinsip yang telah dibahas, koneksi adalah yang paling

penting. Koneksi berkaitan erat dengan bagaimana semua elemen

berkumpul: keseimbangan, grid, warna, grafis, tipografi dan ruang

putih. Ini adalah semacam perekat yang mengikat semuanya

bersama-sama. Tanpa lem ini, desain berantakan. Anda bisa memiliki

banyak jenis dan palet warna yang cemerlang, tetapi jika grafis yangberantakan maka desain akan gagal.

Dari penjelasan mengenai prinsip pembuatan desain agar kelihatan bagus,

maka seorang web designer harus bisa menciptakan rancangan template

yang impresif. Proses rancangan desain bisa dimulai dengan mencari

referensi tentang bentuk dan model website profesional di internet. Dari

beberapa website yang dijadikan referensi, dapat dipadukan untuk

menghasilkan karya seni yang baru terutama rangancan template

profesional. Mulailah dengan membuat sketsa dasar atau prototipe

dengan aplikasi Wireframe yang telah dijelaskan pada pembahasan

sebelumnya. Nah, dari bentuk sketsa dapat diterjemahkan kembali ke

dalam bentuk mockup agar visualisi dapat tergambar sesuai keinginan.

Dalam bentuk mockup harus sudah mengandung warna, gambar,

tipografi (jenis, ukuran, dan warna huruf), dan elemen lain secara nyata.

Berikut ini beberapa contoh template profesional yang dibuat

menggunakan Adobe Photoshop. Dalam buku ini tidak akan dibahas

proses pembuatan template, silakan baca buku berjudul “Step by Step


53/129

68

Photoshop to CSS3 ” penulis Slamet Riyanto yang ditebitkan oleh

Elexmedia Komputindo.

Gambar 6.9 Desain template untuk high resolution dan desktop/notebook

Gambar 6.10 Desain template untuk tablet dengan orientasi landscape


54/129

69

Gambar 6.11 Desain template untuk tablet dengan orientasi portrait

Gambar 6.12 Desain template untuk mobile dengan orientasi landscape

Gambar 6.13 Desain template untuk mobile dengan orientasi portrait


55/129

70

6.2 Menentukan CSS Framework

Dengan melihat penjelasan pada bagian sebelumnya tentang CSS

Framework, silakan menggunakan dan memanfaatkan sesuai kebutuhan.

Mulai dari CSS yang sangat sederhana hingga yang kompleks sudah

dibahas. Sebagai bahan praktek, penulis menggunakan Bootstrap sebagai

CSS Framework. Selain mudah untuk digunakan, fitur yang disediakan

juga sangat lengkap. Beberapa buku yang mengupas tentang penggunaan

PHP dan Bootstrap juga sudah banyak beredar namun dalam bahasa

Inggris karena di Indonesia belum banyak yang mengupas secara detail.

1 Untuk mengunduh framework tersebut, silakan kunjungi website

http://getbootstrap.com/ kemudian pilih Download Bootstrap.

Gambar 6.14 Mengunduh file Bootstrap

2 Simpan file dalam komputer atau laptop Anda.

Gambar 6.15 Menyimpan file Bootstrap ke komputer pribadi (PC)

http://getbootstrap.com/http://getbootstrap.com/http://getbootstrap.com/


56/129

71

3 Klik mouse kanan, pilih Extract Here.

Gambar 6.16 Mengekstrak file Bootstrap

4 Setelah berhasil terekstrak, nampak dist dan di dalamnya memuat

beberapa folder. Itu adalah folder dan file standar dari CSS

Framework Bootstrap.

Gambar 6.17 Susunan folder file Bootstrap

5 Bagaimana cara menggunakannya? Ikuti pembahasan berikutnya.

6.3 Management File dan Direktori

Hal penting yang harus dilakukan pertama kali sebelum melakukan

coding adalah mengelola file agar program dapat berjalan dengan baik dan

terstruktur. Dokumen-dokumen yang dibutuhkan harus dikelola dengan

baik sehingga pada saat coding tidak membingungkan antara file program

dengan file pendukung.

Bagian ini akan menjelaskan bagaimana membuat nama dan mengaturfile dan direktori dalam sebuah website dan bagaimana mengelola master

dokumen. Ini hal penting, karena nama-nama file dan direktori

menentukan alamat URL untuk halaman website Anda. Nama-nama


57/129

72

yang aneh, tidak logis, atau nama file dan direktori panjang akan

menghasilkan URL yang aneh, tidak logis dan panjang.

Setiap sistem operasi yang digunakan, memiliki aturan tersendiri dalam

mengakses sebuah dokumen. Secara umum, sistem operasi UNIX sangat

ketat dalam penamaan file dan direktori. Oleh karena itu, biasakanlahmembuat nama file dan direktori sesuai kaidah umum.

6.3.1 Penamaan

− Hindari spasi. Pengguna Macintosh menyukasi spasi, namum mesin

UNIX dan URL tidak. Hindarilah spasi. Bahkan Fetch, sebuah

program file-transfer Macintosh, secara otomatis akan mengkonversi

spasi menjadi garis bawah (underscore ) ketika mentransfer file ke

mesin UNIX.

− Hindari simbol khusus. Jangan gunakan # @( ~ dan karakter khusus

lainnya pada file maupun direktori.

− Hindari Pengulangan. Jangan ulangi nama direktori untuk nama file

maupun subdirektori. Sebagai contoh, dalam sebuah direktori

bernama purchasing , Anda mungkin ingin membuat direktori staff .

Anda mungkin menyebutnya staff atau purchasingstaff . Karena Anda

sudah berada di direktori yang disebut purchasing , purchasingstaff

akan mubazir. Perhatikan URL yang dihasilkan.

http://www.sale.com/business/purchasing/staff/ (rekomendasi)

http://www.sale.com/business/purchasing/purchasingstaff/ (buruk)

− Jaga nama yang pendek deskriptif. Berikan file dan subdirektori

pendek namun nama-nama deskriptif. Ingat, nama-nama ini muncul

dalam URL Anda. Juga, menjaga nama pendek menyederhanakan

URL. Jika Anda harus berkomunikasi satu atau memberikan alamatURL secara lisan kepada seseorang, maka akan mudah diingat.

Contoh:

http://pdii.lipi.go.id/research/ (rekomendasi)

http://pdii.lipi.go.id/Office_VP_Research (buruk)

http://www.sale.com/business/purchasing/staff/http://www.sale.com/business/purchasing/staff/http://www.sale.com/business/purchasing/purchasingstaff/http://www.sale.com/business/purchasing/purchasingstaff/http://pdii.lipi.go.id/research/http://pdii.lipi.go.id/research/http://pdii.lipi.go.id/Office_VP_Researchhttp://pdii.lipi.go.id/Office_VP_Researchhttp://pdii.lipi.go.id/Office_VP_Researchhttp://pdii.lipi.go.id/research/http://www.sale.com/business/purchasing/purchasingstaff/http://www.sale.com/business/purchasing/staff/


58/129

73

− Gunakan huruf kecil saja. Kecuali Anda memiliki alasan kuat untuk

melakukan sebaliknya, selalu hanya gunakan karakter huruf kecil

untuk nama file dan direktori. Ingat, URL adalah case sensitive .

− Berikan nama file ekstensi bermakna. Ekstensi nama file tiga atau

lebih karakter yang mengikuti nama file dan dipisahkan dari namafile oleh suatu periode. Ekstensi menyampaikan informasi tentang isi

dari file dan membantu Web browser bagaimana menampilkan atau

melayani dokumen. Contoh : index.html (adalah sebuah file HTML),

graphic.jpg (sebuah file dalam format JPG), newsletter.pdf (sebuah

file dalam format PDF), dan movie.mpeg (sebuah file dalam format

MPEG).

− Nama file index html adalah file yang utama. Jika file utama dalam

direktori home Anda adalah index.html, Anda tidak perlu

menetapkannya dalam URL. Sebagai contoh, kedua link ini bekerja,

tapi yang lebih pendek lebih konvensional dan mungkin lebih mudah

bagi orang lain untuk mengingat dan bagi Anda untuk mengetik.

http://www.utexas.edu/learn/index.html (bagus)

http://www.utexas.edu/learn/ (sangat bagus)

6.3.2 Organisasi

Bagi pengguna Macintosh yang digunakan untuk membuat folder dapat

berisi file dan folder lain. Demikian juga, pengguna PC membuatdirektori, yang dapat berisi file dan direktori lain. Dalam kedua kasus,

Anda menggunakan folder atau direktori untuk mengatur dan

mengkategorikan file ke unit logis. Pada mesin UNIX, menggunakan

direktori untuk mengatur file, seperti yang Anda lakukan pada komputer

mikro.

1

Buatlah file index html pada setiap direktori dan subdirektori. Secara

umum, setiap subdirektori yang Anda buat harus memiliki file

index.html. Pengecualian untuk aturan ini mungkin subdirektori

grafis di mana Anda menyimpan file grafis dan subdirektori form di

mana Anda menyimpan form komentar.

http://www.utexas.edu/learn/index.htmlhttp://www.utexas.edu/learn/index.htmlhttp://www.utexas.edu/learn/http://www.utexas.edu/learn/http://www.utexas.edu/learn/http://www.utexas.edu/learn/index.html


59/129

74

2 Mengatur file ke dalam subdirektori. Buat subdirektori untuk

mengatur file HTML Anda dengan topik tertentu. Sebagai contoh,

Anda dapat membuat beberapa subdirektori, termasuk masing-

masing sebagai berikut: form, images, css, dan lain-lain.

3

Rencanakan untuk pertumbuhan. Web Anda tidak akan pernahlengkap. Anda akan selalu memperbarui halaman yang ada dan

menambahkan yang baru. Sangat penting untuk merencanakan

pertumbuhan yang sejak awal. Cara terbaik untuk merencanakan

pertumbuhan ini adalah untuk membuat direktori bukan file.

Misalnya, Anda ingin melayani bagian newsletter di Web Anda. Ini

singkat, sederhana, 1-sheet newsletter. Anda memiliki keputusanuntuk membuat. Apakah Anda membuat file, bernama

newsletter.html atau newsletter, atau apakah Anda membuat sebuah

subdirektori yang bernama buletin untuk itu? URL yang akan

menyesuaikan.

6.3.3 Mengelola Dokumen MasterApakah Anda tahu di mana salinan master file Web Anda? Oleh karena

kebanyakan penerbit kampus menghasilkan file Web mereka pada

Notebook atau PC mereka kemudian mengunggah file-file ke server

pusat, ada dua salinan dari setiap dokumen Web: satu di server dan satu

di Mac atau PC. Pertanyaannyaa adalah:

− Yang mana dokumen master?

− Apakah yang berada di web?

− Apakah yang berada di Notebook atau meja Anda? Jika demikian, di

mana?

− Apakah yang berada di Notebook dari anggota staf yang keluar bulan

lalu? Jika demikian, di mana Notebook mereka sekarang?

6.4 Merancang Template dengan Sistem Grid

Jika prose pembuatan prototipe menggunakan Wireframe sudah selesai

kemudian dilanjutkan dengan pembuatan mockup menggunakan aplikasi


60/129

75

grafis seperti Adobe Photoshop juga sudah dibuat, langkah selanjutnya

adalah mengolah template ke dalam sistem grid yang dimiliki Bootstrap.

Dalam source code Bootstrap tidak menyertakan panduan grid dalam

bentuk gambar. Namun tidak perlu khawatir, Penulis sudah menyiapkan

file gambar yang dapat digunakan untuk grid.

Penulis tidak akan membahas secara detail proses pembuatan template

menggunakan Adobe Photoshop. Silakan membaca buku “Step by Step

Adobe Photoshop to CSS3” yang ditulis oleh Slamet Riyanto dan

diterbitkan oleh Elexmedia Komputindo. Berikut contoh template yang

ditambahkan grid. Untuk melihat tampilan secara penuh, silakan buka

file yang disertakan dalam CD buku ini.

Gambar 6.18 Tampilan template dengan sistem grid

Mengapa harus menggunakan grid? Dengan grid, proses coding lebih

mudah, desain tampilan lebih simetris dan rapi. Dalam Bootstrap

menganut grid dalam 12 kolom. Jika diperhatikan gambar di atas, desaintersebut terbagai menjadi 12 kolom. Tiap kolom dipisahkan oleh gutter

yang lebarnya sama rata. Untuk mengatur lebar gutter harus mengubah

kode sumber Bootstrap.


61/129

76

Secara default, tiap kolom memiliki nilai padding 75pixel pada semua sisi

(atas, kanan, bawah dan kiri). Dalam prakteknya, Penulis menghilangkan

nilai margin dan padding untuk setiap kolom. Hal ini bertujuan agar

tempilan yang dihasilkan sesuai dengan desain template yang telah dibuat.

6.5 Membagi Tata Letak berdasarkan kolom

Mengapa harus dibagi-bagi? Bagaimana cara membagi template

berdasarkan kolom? Seperti telah dijelaskan pada bagian sebelumnya,

tujuan pembagian kolom untuk mempermudah proses coding, dengan

pembagian kolom, maka kolom yang satu dengan yang lain tidak saling

menutup atau mempengaruhi. Dengan kolom, kita dapat memodifikasikolom tertentu agar berbeda dengan kolom yang lain, misalnya dengan

menambahkan latar belakang warna.

Setiap program akan membaca secara terstruktur mulai dari yang paling

atas kiri kemudian ke kanan lalu ke bawah, dan seterusnya. Program

membaca script yang Anda tulis secara runut. Dengan memperhatikan

cara kerja bahasa pemrograman, kita harus mengikuti pola tersebut.

Perhatikan desain template, paling atas berisi navaigasi menu dan logo.

Sebelum kita mempraktekkan, persiapkan beberapa hal agar dapat

mengikuti petunjuk dalam buku buku. Gunakan Text Editor Sublime

Text, jika tidak ada silakan install terlebih dulu. File instalasi sudah

disiapkan dalam CD buku ini. Setelah terinstall, aktifkan web server yang

Anda miliki (misal: AppServ, XAMPP, Uniform Server, dan lain-lain).

Jika dalam laptop atau PC belum terpasang aplikasi web server, silakan

install XAMPP terlebih dulu.

1. Diasumsikan, Anda telah menyiapkan semua yang dibutuhkan.

Buatlah folder baru dengan nama responsive yang berada dalam

folder xampp/htdocs.

Gambar 6.19 Membuat folder baru


62/129

77

2. Selanjutnya, buatlah folder baru dengan nama assets yang berada di

dalam folder responsive. Ekstrak file Bootstrap dalam CD buku ini

dan letakkan dalam folder assets. Terakhir, buatlah folder images

untuk menyimpan semua dokumen dalam bentuk gambar, foto, atau

ilustrasi.

Gambar 6.20 Stuktur folder dan file

3. Buatlah dokumen baru.

Gambar 6.21 Membuat file baru

4. Ketikkan script dasar

RESPONSI VE WEB DESI GN


63/129

78

5. Simpan dokumen tersebut dengan nama index html yang berada di

dalam folder utama (di dalam folder re

Tuntas Web Responsive

Documents

Transcript of Tuntas Web Responsive