tuntas web responsive
TRANSCRIPT
-
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
-
8/20/2019 Tuntas Web Responsive
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,
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
14/129
8
Gambar 2.2 Tata letak rancangan situs web berbasis “Fixed”
Gambar 2.3 Contoh situs web menggunakan teknologi fixed web design
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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”
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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 ,
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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,
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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/
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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.
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
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
-
8/20/2019 Tuntas Web Responsive
63/129
78
5. Simpan dokumen tersebut dengan nama index html yang berada di
dalam folder utama (di dalam folder re