Posts

Cara Membuat Web Desain Guide Style

Dalam pembuatan website akan mendapatkan lebih banyak dan lebih kompleks dan biasanya bukan pekerjaan yang dilakukan satu orang. Hal ini penting untuk memastikan desain yang konsisten dan dioptimalkan untuk memenuhi tujuan bisnis dan menciptakan pengalaman menyenangkan bagi pengguna.

Salah satu cara untuk memastikan tim yang ada di halaman yang sama ketika merancang bagian yang terpisah dari website atau menyimpan desain dari developer adalah untuk menciptakan dokumentasi atau web desain style guide.

Hal ini bermanfaat untuk memiliki style guide untuk menciptakan pengalaman yang berpadu antara halaman yang berbeda.  Juga membantu untuk memastikan bahwa development masa depan atau produksi pihak ketiga akan mengikuti pedoman mereka dan akan dianggap sebagai bagian dari keseluruhan

Sebuah guide style adalah kumpulan dari elemen-elemen pra-desain, grafis dan aturan desainer atau developer harus mengikuti untuk memastikan bahwa potongan situs web yang terpisah akan konsisten dan akan menciptkan pengalaman yang kohesif diakhir.

Mengapa penting?

Hal ini sangat penting ketika beberapa desainer bekerja pada sebuah website ataupun web aplikasi untuk memastikan bahwa mereka tidak menafsirkan terlalul banyak dan tidak mengubah atau menyesuaikan style didasarkan pada preferensi pribadi. Dalam perkembangannya, memiliki unsur-unsur yang didefinisikan dari website memudahkan bagi developer untuk menggunakan elemen-elemen ini. Selain itu dapat membuat lebih mudah karena mereka akan mendapatkan elemen apa yang harus mereka kode dan akan melihat persis bagaimana mereka perlu melihat dari awal.

Dalam rangka untuk membuat developer hidup lebih mudah dalam menjalankan tugas desainer untuk mencakup semua interaksi yang mungkin seperti hover, link, kunjungan dan bagian lain untuk title, link, button dan lain-lain.

Membuat web desain style guide

Mempelajari produk

Pertama, Anda perlu mempelajari produk sehingga Anda memahami apa yang terdapat didalamnya. Kenali cerita dibalik produk, mengamati tim dan mengetahui visi, misi dan nilai-nilai perusahaan. Hal ini penting untuk menggali lebih dalam produk sehingga style guide Anda akan menghasilkan visual dan emosional akan mewakili organisasi.

Jika Anda seorang desainer yang tidak bisa koding, cukup buka Photoshop dan memberikan dokumen Anda judul dan penjelasan singkat dengan dokumen tersebut. Jika Anda dapat koding, lebih baik untuk membuat dokumen html dengan aset pra-kode sehingga mereka dapat dengan mudah digunakan kembali.

Tentukan tipografi

Menurut Oliver Reichenstein, tipografi adalah 95% bagian dari web desain. Anda harus mendapatkan tipografi yang tepat karena merupakan salah satu alat komunikasi yang penting antara pengunjung dan website Anda.

Mengatur hirarki dan mengidentifikasinya. Ada jenis headline : h1,h2, h3, h4, h5 dan h6. Kemudian pada body nya ada copy, bold dan variasi italic. Pikiran tentang copy kustom yang akan digunakan untuk link yang lebih kecil, intro teks dan sebagainya. Menyediakan font family, weight dan color.

Color Palette

Mulailah dengan menetapkan warna utama untuk style guide Anda yang akan mendominasi website Anda, warna dominan harus mencakup tidak lebih dari tiga warna. Dalam beberapa kasus, bagaimanapun, Anda akan warna sekunder dan bahkan tersier untuk menggambarkan user interface Anda, pastikan Anda mendefinisikannya juga. Juga termasuk warna netral seperti putih, abu-abu dan hitam untuk warna produk utama untuk berdiri keluar.

Voice

Suara yang dimaksudkan adalah salinan yang sebenarnya. Anda telah mempelajari produk sebelum memulai style guide dan menemukan bahwa produk  muda dan trendi. Jika tidak ada arah untuk suara salinan, Anda harus mendefinisikan itu. Hal ini dapat menjadi contoh sederhana diberikan menunjukan suara yang harus profesional namun lucu dan ramah.

Ikonografi

Icon telah ada selama ribuan tahun dan lebih tua dari teks dan kata-kata. Mengambil keuntungan dari menggunakan icon dalam proyek Anda karena icon akan memberikan ide instan untuk pengunjung seperti apa yang terjadi dan apa yang akan terjadi selanjutnya. Memilih ikon yang tepat akan memberikan lebih banyak konteks untuk konten dari palet warna, menyalin atau grafis. Bila menggunakan icon, pastikan untuk memikirkan target audiens, agama, sejarah sehingga Anda menghindari kesalahpahaman. Satu hal lagi, berfikir tentang produk dan nilai-nilainya.

 Gambar

Gambar berbicara ribuan kata-kata. Pastikan untuk menyertakan gambar yang mendefinisikan gaya daa arah gambar website harus digunakan. Sekali lagi, berfikir tentang nilai-nilai produk dan misinya agar dapat menggambarkan sebuah produk tersebut.

 Form

Form adalah apa yang membuat situs web atau aplikasi web interaktif dan dinamis sehingga pengguna dapat memasukan data dan kemudian akan dapat memanipulasi dan melakukan aksinya.

Pastikan untuk membangun hirarki dan termasuk umpan balik mungkin dari form aktif, hover, menambahkan peringatan error dan pesan sukses termasuk hal-hal seperti password yang terlalu lemah, pesan email yang tidak valid atau pemberitahuan yang sederhana misalnya “Email terkirim”.

Tombol

Tombol adalah campuran palet warna, form dan suara. Mengandalkan aset ini sebelumnya dibuat untuk membuat tombol konsisten mencari dan fungsional dengan desain yang digambarkan berbeda.

Spasi

Bagaimana spasi dalam style guide?  Hal ini sangat penting untuk menyebutkan jarak tersebut. Hal ini dapat dalam bentuk grid digunakan untuk layout; dapat spacing didefinisikan antara berita utama, tombol, gambar, form dan elemen lainnya.

Memperoleh jarak yang tepat adalah penting karena memberikan lebih ruang pernapasan untuk unsur-unsur dan konsisten membuat pekerjaan Anda terlihat terstruktur dan profesional.

Kesimpulan

Anda harus mempelajari produk Anda untuk membuat guide style. Pastikan untuk mendapatkan bagian yang berbeda dari hak desain dan memastikan bahwa panduan guide style dan mencakup semua skenario yang mungkin saat menyalakan desain menjadi produk pekerjaan.

Prototyping di Browser: Tips dan Tool untuk Desainer

Tugas prototype web adalah sebuah proses yang luas untuk membuat gambaran rangka dasar dengan fitur interaktif. Sementara gambaran rangka dasar mungkin masih gambaran statis atau sketsa, prototype sering interaktif dengan fungsi untuk semua halaman utama.

Program editing grafis selalu menjadi pilihan yang paling populer untuk prototyping. Tapi dalam beberapa tahun terakhir lebih banyak pengembang (developer) yang beralih ke prototyping di browser. Hal ini jauh lebih cepat, lebih bersih dan sederhana ketika membangun merek proyek baru. Tapi bagaimana cara kita memulainya?

Dalam postingan ini kita akan membahas tentang dasar-dasar prototyping di browser dan info tentang tool untuk membantu Anda selama dalam proses tersebut.

Dasar-dasar dari Browser Prototyping

Website dapat digambarkan sebagai interface digital yang dibangun agar berjalan dalam web browser. Banyak desainer ingin membuat interface tersebut di editor grafis sebelum pindah ke coding.

Tapi itu lebih dimengerti bagi website prototype di browser untuk melihat bagaimana setiap fitur bekerja, dan untuk mengukur konsep awal seperti struktur layout dan animasi halaman.

Belum ada cara terbaik untuk prototype meskipun kebanyakan desainer memiliki rutinitas mereka sendiri untuk memulai sebuah proyek baru. Banyak desainer masih lebih suka untuk memulainya di Photoshop, tapi mulai dibrowser memiliki banyak keuntungan.

  • Mudah untuk menguji dan mengubah sistem grid
  • Breakpoints dapat ditambahkan sesuai keinginan
  • Efek dinamis seperti menu dropdown dapat diuji langsung
  • Anda mulai dengan basis kode kecil dan perlahan-lahan tambahkan lagi yang lebih

Photoshop tidak memungkinkan Anda untuk secara dinamis berinteraksi dengan mockup. Hal ini juga berlaku untuk breakpoint responsif dimana Anda perlu untuk membuat dokumen individu atau kelompok layer breakpoint.

Pada akhirnya prototype browser adalah representasi yang lebih akurat dari interface akhir. Mockup dan sketsa yang datar dan statis. Ini masih merupakan aset berharga, tapi akhirnya Anda akan membutuhkan layout interaktif. Inilah sebabnya mengapa browser prototyping menghemat banyak waktu.

Anda dapat melompat langsung dari sketsa awal ke browser untuk membuat prototype web interaktif dengan semua fitur-fitur utama yang Anda butuhkan dalam versi akhir.

Tool yang digunakan untuk mencapai prototype akan sangat bervariasi. Tapi jangan mempersamakan tool dalam proses tersebut.

Anda dapat membuat prototype dalam browser menggunakan HTML/CSS dasar, library open source, atau tool lain seperti browser add-ons. Tidak peduli apa yang Anda gunakan tujuannya selalu sama: untuk membuat kerangka UI interaktif dengan model bagaimana situs akhir akan berjalan.

Proses Prototyping

Mungkin ini merupakan cara terbaik dengan memulai dengan sketsa kertas untuk melakukan rendering ide. Sketsa ini bisa dilakukan dalam program grafis, tetapi Anda pada umumnya memiliki lebih banyak kebebasan ketika bekerja di atas kertas.

Dengan cepat beralih ide-ide baru dan hanya mendapatkan nuansa kasar untuk desain. Anda bisa menandakan kolom, gutter dan membuat catatan tertulis untuk menggambarkan properti container (width, padding, dll)

01-sketches-wireframe-design

Setelah sketsa terlihat baik Anda dapat pindah ke browser. Bertujuan untuk merancang layout grayscale dasar pertama. Hal ini dapat dilakukan dengan banyak sumber daya yang berbeda seperti Placehold.it yang menghasilkan gambar abu-abu dasar dari berbagai ukuran.

Dengan layout abu-abu sederhana Anda dapat lebih fokus pada grid, tipografi, spasi dan unsur-unsur dinamis seperti slideshow atau menu dropdown. Tujuan dari tahap ini adalah untuk merancang bagaimana layout harus berjalan tanpa terganggu oleh estetika.

02-placehold-it-webapp-images

Anda ingin meluruskan semua link potensial dengan browser bug dan breakpoints responsif. Mendapatkan layout keseluruhan dan fungsional di semua browser.

Dari sana Anda dapat dengan cepat menambahkan konten, gambar dan style terkait tanpa khawatir tentang gambaran yang lebih besar. Ini benar-benar strategi terbaik untuk prototyping di browser karena Anda berfokus pada unsur besar pertama.

Jika layout break di Firefox itu akan terlihat sama apakah Anda memiliki warna atau tidak. Tapi itu jauh lebih mudah untuk memperbaiki masalah layout saat Anda hanya mementingkan tata letak.

Setelah Anda memiliki prototype yang berfungsi penuh Anda akan memiliki waktu yang jauh lebih mudah untuk coding fitur tambahan seperti background, tile, icon dan fitur lainnya yang sejenis.

Ada banyak hal yang harus dipertimbangkan dalam tahap prototype ini. Setiap proyek akan memiliki tujuan sendiri, tapi disini adalah daftar singkat dari tujuan mempertimbangkan saat prototyping.

  • Apakah layout berjalan disemua browser utama?
  • Apakah ada cukup ruang putih diantara elemen?
  • Apakah semua elemen halaman dinamis berfungsi dengan baik?
  • Apakah Anda konfigurasi semua yang diperlukan breakpoint responsif?

Tool Browser Prototyping

Sangat penting untuk dicatat Anda benar-benar tidak memerlukan tool khusus atau library untuk membangun prototype browser. Anda dapat menulis HTML/CSS/JS kode secara umum dan mendapatkan prototype siap kerja dengan cepat.

Tapi ada begitu banyak library yang dapat menghemat waktu. jQuery adalah contoh library terbaik yang dapat membantu saat menulis JavaScript.

Anda seharusnya merasa bebas untuk menggunakan resource apapun yang Anda rasa nyaman. Tetapi jika Anda sedang mencari tool-tool baru kami sangat menyarankan opsi berikut. Semuanya benar-benar bebas dan super mudah untuk menambahkan ke tahap prototype.

Chrome Workspace

03-chrome-workspaces-devtools

Ada fitur mungil yang bagus di Google Chrome DevTool disebut Workspace. Ini merupakan direktori lokal pada disk Anda yang dapat diikat ke browser ketika editing.

Jika Anda membuat HTML/CSS prototype sederhana dan buka di chrome, Anda akan dapat mengedit pada panel DevTool. Dengan menciptakan Workspace, kamu bisa menyelamatkannya di browser suntingan lokal ke file di komputer Anda. Anda juga dapat membuat file baru dan menduplikasi kode lokal di Chrome.

Sebagian besar pengembang sudah menggunakan DevTool jadi hal ini merupakan cara bagus untuk membuat prototype dalam browser. Lihat tutorial singkat ini untuk setup workspace di Chrome.

Bootstrap

04-bootstrap-css-open-source

Setiap developer frontend harus tahu tentang library Bootstrap. Muncul dengan komponen pre-built dan class CSS untuk setiap elemen halaman dapat Anda bayangkan.

Anda akan mendapatkan button, column, tab widget tab, menu drop down dan banyak fitur situs umum lainnya. Tidak perlu untuk menulis sesuatu dari awal karena Bootstrap sudah mencakup semuanya.

Satu-satunya kelemahannya adalah karena sangat banyak website yang menggunakan Bootstrap akan menjadi agak membosankan. Jika Anda ingin menimpa Bootstrap dengan custom style Anda sendiri maka hal itu merupakan libarary prototyping besar.

Foundation

05-zurb-foundation-resource-prototyping

Salah satu pilihan yang sangat populer lainnya adalah ZURB Foundation. Menurut kami Foundation jauh lebih bersih dan sederhana daripada Bootstrap, hanya karena tidak memiliki banyak style default.

Foundation ini sangat mudah untuk ditimpa dengan style Anda sendiri untuk tombol, link dan widget. Bootstrap sering digunakan dalam proyek-proyek yang menggunakan style Bootstrap secara umum. Tapi Foundation begitu dasar dan Anda hampir harus menambahkan style custom.

Foundation merupakan framework yang powerfull yang datang dengan semua komponen utama yang sama seperti Bootstrap, tetapi tanpa style yang unik.

Pure CSS

06-pure-css-open-source-library

Framework CSS/JS lain yang kami rekomendasikan adalah Pure CSS. Open source seperti Foundation dan Bootstrap. Muncul dengan grid, tipografi, button, dan kompunen dinamis juga.

Mungkin Pure CSS ini merupakan campuran yang baik dari fungsi dan estetika. Hal ini jelas sederhana, tapi tepat untuk prototype apapun dan hanya menawarkan banyak fitur dalam satu library ringkas.

Handcraft

07-handcraft-prototyping-tool-extension

Berikut adalah add-on unik Google Chrome yang memungkinkan developer untuk menyimpan dan berbagi prototype online. Disebut Handcraft dan dapat didownload secara gratis di Chrome Web Store.

Setiap kali Anda sedang membangun prototype hal yang paling umum yaitu menulis semua kode secara lokal. Dengan Handcraft Anda dapat meyimpan prototype ini secara online dengan URL unik untuk mempercepat proses sharing dengan yang lain. Hal itu membuat pekerjaan Anda lebih mudah ketika berkolaborasi dengan klien atau anggota tim kreatif Anda.

Kesimpulan

Cara terbaik untuk memulai dengan prototyping browser hanya perlu berlatih. Apakah Anda memiliki proyek mendatang atau jika Anda perlu untuk membuat sesuatu hanya memulainya dan rajin berlatih browser prototyping

Awalnya merasa aneh tetapi dari waktu ke waktu dapat membuat proses building yang lebih sederhana. Dan jika Anda bekerja dengan salah satu source diatas dijamin Anda akan terkesan seberapa cepat Anda dapat mengembangkan layout dari awal. Semoga bermanfaat jangan lupa sharing yah

Cara Memilih Tool Desain Image Responsif

Desain web responsif bukanlah konsep mewah lagi, hal itu merupakan sebuah kebutuhan. Tidak ada keraguan tentang fakta bahwa mobile dan perangkat portable yang mengambil alih dan sebagian besar situs web luar sana memerlukan skala rendah untuk lebih cocok dengan perangkat mereka. Beberapa hari yang lalu pun kita telah membahas Tool dan ServiceWeb Desain Responsif

Mungkin Anda sudah tahu segala sesuatu tentang topik ini, tapi hari ini kita akan melangkah sedikit lebih ke detail dan berbicara tentang salah satu pendekatan terbaru, gambar responsif. Sayangnya tidak hanya ukuran website saja yang penting, tetapi juga ukuran elemen yang interaktif, seperti gambar.

Mengapa ukuran gambar penting?

Apalagi sejak semakin banyak orang mulai menggunakan perangkat mobile, ukuran gambar menjadi masalah besar. Ingat bahwa tidak semua orang browsing internet dari Wi-Fi, tetapi banyak sebenarnya yang melakukannya pada bandwith 3G mereka sendiri, yang biasanya terbatas. Dan jika pengunjung ingin mengakses situs Anda dari daerah dengan jangkauan internet yang lemah, koneksi Edge mungkin tidak cukup tepat untuk memuat gambar dalam waktu yang layak.

Orang-orang akan lebih cenderung untuk meninggalkan situs web Anda ketika melihat banyak gambar yang harus dimuat. Mereka tidak ingin gambar Anda memperlambat semua menjadi down dan pasti Anda tidak ingin mengkonsumsi bandwith yang terbatas bagi sebagian, mungkin gambar yang tidak relevan.

Sudah ada beberapa teknik diluar sana yang dapat digunakan untuk menangani dengan pendekatan ini, seperti Github HiSRC, Foresight.js dan Picturefill, Adaptive Images dan beberapa lainnya. Ada banyak pilihan diluar sana meskipun ide gambar responsif cukup baru.

Diskusi utama

Hal ini juga penting untuk mengetahui mengapa gambar responsif merupakan salah satu bagian yang paling sulit dari metodologi desain responsif. Hal ini juga penting untuk diingat bahwa semua tool-tool yang disebutkan diatas merupakan cara yang berbeda dari “hacking” CSS dan tidak satupun darinya sempurna.

Masalah utama dengan skala rendah gambar adalah kita tidak dapat mengharapkan foto yang dimaksudkan untuk layar 27 inch untuk terlihat baik pada iPhone. Banyak gambar baru yang harus di upload untuk perangkat yang lebih kecil. Gambar responsif jauh lebih baik dari gambar yang diperkecil dan ada lebih banyak hal yang perlu dipertimbangkan selain tampilan atau dimensi browser. Beberapa hal seperti kualitas tampilan (kerapatan pixel, kapabilitas warna), konektivitas dan jenis masukan juga harus dipertimbangkan.

Selain itu banyak bandwith akan sia-sia jika perangkat mobile harus mendownload foto besar yang sama dan kemudian skalanya agar sesuai layar.

Semua tool tersebut diatas sangat terbatas, ingatlah! Beberapa dari mereka akan bekerja cukup baik untuk projek-projek Anda. Dalam rangka untuk menemukan satu yang cocok untuk Anda, mungkin ada beberapa hal untuk mempertimbangkannya. Ini akan membantu Anda membuat keputusan dan akhirnya memilih solusi yang cocok untuk proyek Anda.

Apakah Anda ingin memvalidasi?

Jika Anda bingung dengan validasi, maka beberapa teknik mungkin bekerja lebih baik dibandingkan yang lain. Tool seperti Picturefill menggunakan elemen yang berbeda untuk menjadi fungsional – elemen ini mungkin menjadi standar dimasa depan, tapi untuk saat ini secara teknis belum valid, yang berarti file HTML tidak akan memvalidasinya.

Jika validasi penting, kami sarankan Anda untuk melihat di Adaptive Images, HiSRC dan Responsive Enhance, yang semuanya menggunakan sintaks yang valid dan mana validasi tidak harus menjadi masalah.

validator

Apakah Anda sudah memiliki konten?

Hal ini penting untuk memikirkan tentang berapa banyak konten yang sudah Anda posting di blog dimana Anda ingin menggunakan tool ini. Jika Anda memiliki blog yang berusia tiga tahun, pasti akan ada beberapa gambar bagi Anda untuk dimodifikasi. Anda mungkin perlu untuk memeriksanya melalui setiap post dan setiap tag gambar dan mengubah semuanya dengan manual. Ini akan memakan waktu berminggu-minggu.

Adaptive Images mungkin menjadi solusi terbaik disini, karena tidak berpengaruh dengan perubahan markup. Apakah Adaptive Image sederhana. Adaptive Image mengirimkan permintaan routing gambar melalui file PHP yang memberikan gambar dalam ukuran yang sesuai untuk layar. Jika Anda, memiliki proyek kecil dan bisa untuk memperbarui kembali setiap gambar, kami pikir Anda harus melakukannya.

Bagaimana Tentang Markup Khusus?

Hal lain yang penting untuk dipertimbangkan saat Anda memiliki banyak konten adalah jika tool yang Anda gunakan mengharuskan Anda untuk menambahkan atribut khusus untuk setiap elemen gambar.

Beberapa tool membutuhkan penggunaan HTML khusus. Sementara tidak ada yang salah dengan sintaks ini dari sudut pandang semantik, mungkin bukan menjadi tugas yang sangat mudah untuk menyelesaikan bila Anda memiliki 400 gambar yang siap ditambahkan pada website Anda.

Jika terjadi akan kembali untuk mengedit setiap elemen bukanlah pilihan untuk Anda, kemudian Adaptive Images adalah cara yang terbaik. Sekarang Anda dapat menguji situs Anda menggunakan tool Responsif Desain.

Apakah Anda ingin Javascript/jQuery?

Beberapa teknik yang disebutkan diatas tidak menggunakan JavaScript, sementara yang lain melakukannya. Ini sangat tergantung dengan pilihan Anda, tapi kami akan menghindari memilih teknik yang menggunakan JavaScript sendiri. Ketika Anda memikirkan platform mobile, JavaScript bukan bahasa pemrograman terbaik untuk digunakan.

Umumnya tool yang menggunakan JavaScript akan membutuhkan elemen <noscript> dengan <img> atribut tambahan, dalam kasus pengguna JavaScript dimatikan. Kadang-kadang kode hack ini harus ditambahkan oleh Anda.

Jika Anda benar-benar melanggar penggunaan JavaScript, Sencha.IO mungkin menjadi pilihan terbaik. Sebagai gantinya gunakan cookies, tool ini mendeteksi string User Agent dan memberikan sebuah ukuran gambar yang sesuai untuknya.

Ingat bahwa jQuery juga JavaScript, sehingga tool yang tergantung pada librarynya, seperti HiSRC dan rwdImages, mungkin juga bekerja sedikit lambat.

318

Cropping atau mengubah ukuran

Anda juga perlu bertanya pada diri sendiri bagaimana Anda ingin tool yang digunakan dapat bekerja dengan gambar-gambar; beberapa dari mereka mungkin mengubah ukurannya, beberapa orang juga mungkin memotongnya. Sementara keduanya memiliki kelebihan dan kelemahan.

Jika Anda mengambil gambar yang besar dan mengubah ukurannya, mungkin konten tidak terlihat lagi pada ukuran skala kecil. Disisi lain, cropping gambar mungkin bisa lebih merusak gambar, seperti ketika memotong konten keluar dapat mengubah gambar yang bagus menjadi jelek karena rincian penting gambar hilang.

Picturefill mungkin menjadi pilihan terbaik dalam kasus ini, karena memungkinkan Anda untuk lebih spesifik tentang source dan berbagai situasi yang berbeda.

Apakah Anda menggunakan PHP atau yang lainnya?

Anda mungkin tidak peduli dengan diri ini, tetapi tool yang Anda gunakan dapat melakukannya. Beberapa dari mereka tidak didasarkan pada JavaScript, tetapi masih menggunakan .htaccess dan PHP. Hal ini memerlukan server Apache. Ingat bahwa banyak situs berjalan di Ruby dan Python, tidak hanya pada PHP. Responve Images merupakan salah satu tool terbaik menggunakan PHP.

Apakah Anda ingin menguji bandwith?

Jika pengujian bandwith user adalah sesuatu yang ingin Anda gunakan sebagai bagian dari pengambilan keputusan, ada beberapa tool yang melakukannya, seperti Foresight.js dan HiSRC.

Meskipun tidak terlalu sulit untuk men-download filt test dan menghitung waktu download, ada yang disayangkan tidak ada native bandwith media query.

Tool menggunakan teknik ini mungkin satu atau dua detik lebih lambat, tetapi manfaat yang didapatkan penyampaian gambar berdasarkan bandwith Anda saat ini merupakan aset.

testing

Bagaimana kerugiannya?

Sebagian besar tool-tool ini memiliki uptime yang sangat baik, tapi Anda tidak pernah tahu. Sebagian besar tool-tool ini benar-benar pihak ketiga dan jika down mereka tidak akan memproses permintaan dari situs Anda dan tidak akan memberikan gambar yang sesuai dengan ukuran layar pengguna. Dengan aplikasi pihak ketiga Anda selalu mengalami resiko downtime, sehingga Anda juga harus memikirkan kelemahan masalah ini.

Jika Anda tidak ingin memberikan aplikasi pihak ketiga untuk akses ke file Anda, kemudian mencoba Server Side Responsive Image.

Apakah Anda benar-benar membutuhkan tool?

Jika situs Anda berjalan dengan WordPress, Anda bahkan tidak perlu tool tersebut. Image Uploader dari WordPress memiliki opsi skala kecil untuk gambar Anda, sehingga Anda dapat memilih mana yang akan digunakan. Dan kami cukup yakin beberapa CMS (Content Management System) lain memiliki fitur yang sama. Dalam hal ini, menggunakan aplikasi pihak ketiga bahkan mungkin tidak diperlukan.

Solusi WordPress lebih lanjut

Bertahun-tahun yang lalu Steve Jobs telah mengatakan “there’s an app for that” sekaligus terlalu banyak. Jika Anda ingin WordPress Steve Jobs, Anda mungkin ingin mengatakan “there’s a plugin for that”, karena ada harfiah plugin untuk segala sesuatu di WordPress. Ada juga sebuah plugin yang disebut Mobble, yang mendeteksi ukuran layar dan menemani CSS Media Query.

Pelajari lagi

Jika gambar responsif merupakan sesuatu yang membuat Anda tertarik, Anda harus tahu sudah ada komunitas W3C resmi membahas dan mengembangkan hal-hal untuk itu. Anda dapat menemukan komunitasnya disini. Anda dapat banyak belajar dari sana, untuk mengenal lebih banyak orang yang tertarik dengan topik yang sama dan bahkan kontak dengan orang-orang dari industri.

Dalam kasus yang Anda ingin ketahui cerita dibalik gambar responsif, Anda harus membaca cerita ini. Anda mungkin tidak belajar banyak dari itu, tapi hal itu sangat baik untuk dibaca jika Anda tertarik pada pembicaraan.

45

Intinya

Jadi Anda pikir Anda tahu segala sesuatu tentang desain web responsif. Nah, tampaknya masih ada sesuatu yang baru yang tidak Anda ketahui atau tidak  menyadarinya.

Gambar responsive sama pentingnya dengan elemen lain dari konsep “desain web responsif”. Anda harus mempelajarinya dan meneliti beberapa pilihan dan menemukan yang tepat untuk Anda, jika Anda memutuskan Anda membutuhkan salah satunya. Dengan begitu banyak pilihan yang tersedia diluar sana. Semoga artikel ini bermanfaat untuk Anda.

Apa yang harus Desainer Ketahui tentang Bootstrap 4

Sejak Agustus 2011, ketika Bootstrap pertama kali diluncurkan, telah mendapatkan popularitas dalam desain web dan dunia development. Secara keseluruhan style sheet CSS-driven dengan poweful, mobile pertama, responsif, framework front-end dengan banyak fitur baru yang ditambahkan termasuk tuan rumah plugin JavaScript, tool dan icon yang berjalan seiring dengan bentuk dan beberapa komponen lainnya, cukup aman dan bisa dikatakan bahwa Bootstrap telah menempuh perjalanan panjang.

Untuk saat ini kita memiliki Bootstrap 4 dengan versi alpha yang merupakan rilisan belum lengkap dan tidak cocok untuk produksi. Dengan versi ini ada perubahan besar ditoko. Banyak fitur baru yang ditambahkan dan pilihan kutomisasi akan tersedia.

Meskipun mungkin ada beberapa argumen tentang Bootstrap yang merupakan framework CSS terbaik untuk digunakan, hampir setiap desainer dapat membangun apapun cukup banyak dengan Bootstrap, dan kritikus juga bisa jika mereka mengambil sedikit waktu untuk mengkonfigurasi styling Boostrap standar.

Mengapa Desainer Menyukai Bootstrap

Jika Anda seorang desainer, Anda mungkin menikmati dalam membuat desain dengan framework Bootstrap. Berikut adalah beberapa alasan mengapa desainer menyukai bootstrap :

  • Gratis. Bootstrap open source. Tidak perlu menarik keluar kartu kredit Anda.
  • Kekuatan system grid : bootstrap memiliki responsif terbaik, sistem grid untuk mobile pertama yang tersedia. Sangat mudah untuk digunakan dan fleksibel yang memungkinkan Anda untuk menghasilkan layout prototipe dan membuat kustomisasi mudah.
  • Kustomisasi : Bootstrap sepenuhnya dapat kutomisasi. Itu berarti Anda dapat membuat desain yang berbeda dari itu, mengabaikan tampilan dasar template Bootstrap. Semua CSS dan JavaScript dapat diganti jadi tidak ada masalah pekerjaan dengan hal itu.
  • Pengembangan yang pesat : Bootstrap menawarkan CSS dan komponen JavaScript yang dapat  digunakan kembali yang dapat membantu desainer dengan mudah membuat fungsi dan elemen yang mereka butuhkan untuk desain mereka.
  • Dokumentasi yang sangat baik : Bootstrap memiliki dokumentasi yang luar biasa yang dapat membantu Anda untuk memahami setiap bagian dari framework apakah Anda seorang pemula ataupun sudah profesional.

Hal yang Perlu Diketahui Desainer tentang Bootstrap 4

Sebagai seorang desainer, perlu mempelajari fitur terbaru dan terupdate. Untuk desain website dengan Bootstrap Anda mungkin berpikir secara berbeda, tapi kita tidak berpikir itu membuang-buang waktu dalam mengetahui dan memahami hal-hal yang perlu dipertimbangkan ketika merancang situs web berbasis Bootstrap.

Warna

Bootstrap 4 hadir dengan lima warna utama didalamnya. Warna-warna ini hadir dengan class masing-masing dan prefiks yang dapat digunakan kembali diberbagai komponen seperti button, link  dan alert. Lihat gambar dibawah ini.

Catatan : Dalam Bootstrap 3 class defaultnya adalah “btn-secondary”.

bootstrap-4-colors

System Grid Bukan Pixel Lagi

Dalam Bootstrap versi 1-3, grid diukur melalui pixel. Namun, dalam Bootstrap 4, grid diukur melalui ems dan rems. Jadi jika Anda bekerja pada Photoshop desain tata letak sebuah situs web itu cukup membantu jika Anda akan melihat hasil pengukuran yang setara dengan ems untuk pixel.

Grid-System-e1444291529140

Gutter

Bootstrap biasanya datang dengan lebar 30 gutter, 15px disetiap sisi kolom. Ini berarti padding kiri dan kanan untuk kolom akan 15px setiap sisi, dimana sebagai margin kiri dan margin kanan untuk baris adalah 15px. Itu memberi Anda gambaran bagaimana Anda akan menempatkan ruang pada setiap kolom pada desain Anda.

Salah satu hal yang baik tentang Bootstrap 4 adalah memungkinkan Anda menyesuaikan dan mengkompilasi pembangunan Anda sendiri berdasarkan kebutuhan Anda. Termasuk juga warna, ukuran kontainer dan gutter padding. Seringkali Anda ingin memilih kolom dan menghapus padding dengan CSS. Anda dapat membuat sendiri class helper utility Anda untuk mencapainya dengan cepat. Periksa contoh kode dibawah ini :

 

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

Memperbaiki navbar

Hal yang paling sulit dan paling rumit ketika menggunakan Bootstrap 3 adalah navbar. Sangat sulit untuk mencari tahu navbar karena Anda perlu menambahkan banyak class untuk membuatnya. Selain itu, Anda juga perlu pergi ke CSS Anda untuk menyesuaikan warna dan beberapa style.

Dalam Bootstrap 4, ada banyak class yang telah dihapus dan lebih banyak pilihan untuk skema warna yang ditambahkan. Hal ini memberikan lebih banyak pilihan untuk mengontrol layout navigasi website. Anda dapat memeriksa dokumentasi disini jika Anda ingin mempelajarinya lebih lanjut.

bootstrap-4-navbar

Opt-in flexbox untuk Desain Responsif Bisa Diaktifkan

Bootstrap 4 memungkinkan pengguna untuk menggunakan modus Layout Flexbox CSS3. Flexbox adalah mode layout yang menawarkan susunan elemen pada halaman untuk tujuan responsif. Ini menyediakan container fleksibel yang dapat memperluas atau menyusut ukuran elemen pada area pandang yang berbeda.

Sementara ini hal besar tentang desainer mencoba untuk membuat desain responsif mereka, ini hanya akan bekerja pada browser yang lebih tinggi dari Internet Explorer 9.

Mengoptimalkan Styles Menggunakan SASS Daripada LESS

Bootstrap 3 digunakan LESS sebagai CSS pre-processor utama, namun karena populer developer front-end kontributor telah beralih ke SASS melalui Libsass Sass Compiler yang ditulis dalam C/C++ Bootstrap 4.

Sekarang Anda dapat menyesuaikan style seperti warna, jarak, link style, tipografi, tabel, breakpoint grid dan container melalui berkas _variables.scss.

Kesimpulan

Meskipun Bootstrap hanya salah satu dari banyak framework yang tersedia untuk menciptakan desain responsif, website mobile pertama, ia menawarkan banyak kemungkinan untuk desainer. Mengetahui tentang pembaruan dan komponen baru akan membuat pembangunnan yang lebih mudah.

Kami harap Anda menikmati ketika membaca artikel ini. Jangan lupa untuk berbagi atau share agar ilmu kita bertambah.

Cara Menggunakan Warna Pastel dalam Desain Web

Penggunaan warna-warna pastel dalam desain web lebih dari trend baru, yang merupakan teknik desainer yang telah digunakan selama bertahun-tahun untuk membuat dampak visual.

Ketika Anda mendengar “pastel” pink pucat, biru, dan kuning mungkin muncul dalam pikiran, tetapi ada jauh lebih banyak untuk jenis palet warna. Pastel tidak harus memiliki bayi yang baru lahir untuk merasakannya. Warna ini bisa sangat jelas ketika dipasangkan dengan unsur-unsur lain dalam cara yang tepat.

Disini kita akan melihat 10 cara untuk menggunakan warna pastel dalam desain web, berdasarkan situs yang telah menggunakannya dengan baik.

Pastel Photography

solasie

Overlay pastel pada foto atau foto yang diambil dalam kondisi pencahayaan yang tepat dapat membuat kanvas halus dan besar untuk sebuah situs web. Dengan nada lebih kalem dalam sebuah foto, desainer memiliki area yang lebih tersedia untuk penempatan elemen lainnya.

Menggunakan pastel photography juga dapat membantu membuat kontras dengan unsur-unsur lain, seperti logo atau tombol. Perhatikan juga bagaimana logo indah Solasie cocok dengan foto pastel bernada. Konsep yang sama ini akan membuat roh bagus juga.

Pastel Background

mum

Sebuah background pastel dapat menjadi cara yang bagus untuk menggunakan banyak warna tanpa penggunaan berlebihan. Karena tone lebih tenang dari pastel, mereka dapat digunakan untuk menutupi kanvas tanpa merasa terlalu kuat.

Sebuah kecenderungan umum ketika bekerja dengan background pastel adalah dengan menggunakan variasi dari corak tunggal untuk skema warna monokromatik seperti Dear Mum. Warna tunggal menciptakan visual yang kuat dan kontras yang indah dengan elemen teks putih. Dipasangkan hanya dengan tipografi yang tepat, teknik ini juga menciptakan suasana modern dengan nuansa hipster.

Bold Pastel

marie

Meskipun Anda tidak sering berfikir tentang “bold” dan “pastel” dalam kalimat yang sama,  jenis ini palet warna dapat membantu Anda membuat desain yang jelas. Karena pastel cenderung untuk jatuh kembali,itu adalah pilihan yang bagus jika Anda ingin melakukan sesuatu di sekitarnya.

Marie Catrib ini melakukan pekerjaan besar ini. Warna pastel cukup jelas tapi masih tampak keluar dari jalur sehingga Anda dapat melihat wanita itu mengintip keluar dari warna lapisan. Kejelasan pastel membantu Anda melihat dan fokus pada gambar, backdrop benar-benar diredam akan menciptakan dampak yang buruk.

Pastel untuk Mood

sweez

Apakah Anda ingin pengunjung betah diwebsite Anda? Pastel yang bagus untuk menciptakan rasa ketenangan, relaksasi atau kemudahan. Jika emosi merupakan kata-kata yang menggambarkan situs atau bisnis Anda, palet warna pastel mungkin menjadi pilihan yang tepat.

Sweez melakukan pekerjaan yang berat untuk menciptakan hubungan emosional dengan warna. Segala sesuatu tentang gambar ini diredam dengan corak pastel. Dan itu membuat Anda merasa seperti sedang duduk di tempat yang tenang, santai dan menikmati cappucino hangat. Lihatlah seberapa efektifk warna sederhana ini?

Pastel untuk Ilustrasi

money-matter-600x438

Warna pastel membuat pilihan yang cocok untuk ilustrasi juga. Gunakan konsep warna ini untuk menciptakan sesuatu yang membuat para pengguna melihatnya.

Sebuah ilustrasi pastel menarik bersama kedua ide dari apa yang digambarkan dengan ketenangan tertentu dari warnanya. Ilustrasi pastel mungkin menggunakan gambar dimana Anda mungkin tidak mengharapkannya.

Kontras dengan Pastel

kinder-foto

Warna pastel tidak harus digunakan dalam ruang hampa. Warna pastel adalah tool yang bagus untuk menciptakan kontras dengan elemen desain lainnya.

Kinder Fotografie melakukan pekerjaan yang sangat baik menggunakan pastel, foto dan teks cerah. Ada banyak detail-detail kecil dibagian desain pastel, tapi apa yang Anda lihat pertama adalah gambar anak-anak dan kata “smiles”. Kemudian para user mulai memperhatikan beberapa detailnya.

Pastel untuk Navigasi

wonderfully-wild

Pastel juga bisa membantu membuat tool navigasi yang bagus. Umumnya, desainer akan membingkai situs dengan border hitam atau putih untuk bar navigasi namun warnanya dapat berfungsi dalam ruang ini juga.

Alasan pastel dapat berfungsi sebagai tool navigasi karena keluar dari jalur bagian lain dari sebuah desain. Diluarnya misalnya foto merupakan sesuatu yang pengguna lihat pertama dan bereaksi padanya. Elemen navigasi berbaur dengan baik dengan area konten utama, tetapi tidak mendapatkan jalan berkat visual primer dengan pilihan warnanya.

Pastel pada Flat Desain

every-last-drop

Banyak dari apa yang kita lihat dengan tren warna pastel hari ini lahir dari desain flat. Banyak pastel cerah desainer mendukung secara berskala dari beberapa warna super terang yang populer pada awal desail flat muncul.

Apa yang baik dalam menggunakan pastel dalam proyek-proyek desain flat adalah bahwa warna-warna masih memiliki rasa yang sama dan tampilan secara keseluruhan, tapi jangan berhenti berteriak pada user untuk mendapatkan perhatian dengan cara yang sama. Sebuah pastel dan kerangka warna flat membuatnya sedikit lebih mudah untuk menggunakan warna dalam mengarahkan para penggunanya ke bagian tertentu dari layar atau sorotan elemen teks penting.

Pastel Typography

schmutz

Desainer tidak kehabisan akal dalam menggunakan pastel untuk gambar atau background saja. Style warna ini juga dapat diterapkan untuk typography. (Meskipun agak rumit).

Pastel yang digunakan dengan baik dan luas, bold typography dengan background yang lebih mencolok untuk membuat banyak kontras. Dengan menggunakan jenis huruf dengan stroke tebal pada ukuran yang lebih besar, Anda pastikan bahwa warna itu lebih diredam warna yang akan muncul pada layar. Konsep ini harus disediakan untuk pengelompokan kecil dari huruf atau kata-kata dan tidak boleh digunakan untuk body copy.

Pastel untuk Elemen User Interface

tran

Menggunakan pastel sebagai bagian dari skema untuk elemen user interface adalah sebuah konsep menyenangkan. Trik lain lahir dari konsep desain flat, tombol dan elemen lainnya dapat menggunakan warna-warna pastel.

Disitus Duy Tran, setiap kotak pastel sebenarnya sebuah tombol berukuran besar. Warna-warna pastel memberitahu para pengguna bahwa kotak tersebut membuat mudah setiap klik (atau tekan). Corak juga menonjol karena sangat kontras dengan area gambar yang lebih minim. (Setiap gambar dalam slider berdiri terpisah dari tombol pastel).

Kunci untuk menggunakan warna pastel dalam palet warna adalah untuk menciptakan sesuatu yang terlihat fresh dengan memasangkan pastel dengan saturasi yang lebih dalam mungkin Anda mengira gambar yang terang atau elemen kontras putih, Anda dapat membantu menciptakan peredaman warna palet dengan dampaknya.

Warna pastel secara alami memiliki ide yang santai dan menenangkan sekitarnya. Menggunakannya untuk keuntungan Anda saat mendesain website dengan jenis skema warna. Ingatlah bahwa bagaimana warna akan berinteraksi dengan bagian lain dari desain keseluruhan.

Tool dan Service Web Desain Responsif

Web desain responsif adalah pendekatan besar yang memungkinkan pengguna untuk merasakan dan mengalami keindahan merancang resolusi tinggi, bahkan dalam aplikasi pocket mereka seperti smartphone dan tablet komputer. Melihat kembali beberapa tahun lalu dan Anda bisa menilai perubahan-perubahan yang terjadi di sayap mendesain web. Para desainer terikat untuk membuat versi yang kompatibel tidak hanya untuk dekstop resolusi tinggi, tetapi juga cocok untuk layar rendah dengan resolusi apapun. Desainer berterimakasih kepada tool dan service web desain responsif yang selalu ada untuk membuatnya dengan perbedaan dan memuaskan klien dalam arti sebenarnya.

Ada tool web desain responsif tertentu dengan fungsi yang berbeda yang mampu mendeteksi media dimana situs yang sedang dijalankan dan untuk menyediakan pengguna dengan produktivitas terbaik sementara membuatnya sempurna dibaca dan membantu user untuk menavigasi melalui situs. Tujuan untuk menggunakan teknik yang berbeda adalah membuat desain dengan kemampuan yang menyesuaikan gadget hi-tech yang akan datang, tidak peduli seberapa canggihnya.

Ketika saatnya untuk membicarakan tentang tool web desain responsif, materi yang membuat perbedaan antara merancang tradisional dan mendesain web responsif ini teknik yang digunakan untuk membuat desain responsif. Tidak seperti gaya lebar tetap, desain responsif menggunakan grid fleksibel yang mudah cocok dengan resolusi layar. Jadi sekarang saatnya untuk menghapus rumus width dan memilih pada grid fleksibel yang memungkinkan unsur-unsur untuk dapat mengatur ulang dan mengubah ukuran according sesuai dengan resolusi layar. Layout liquid adalah pilihan lain yang tersedia, tetapi mereka tidak seefektif grid fleksibel.

Konsep penting lain yang berkaitan dengan perancangan web responsif adalah faktor resolusi layar. Hal ini sudah dikatakan bahwa tujuan dari perancangan ini adalah untuk mencocokan dengan resolusi layar, tetapi sering kali tampaknya penting untuk mengkover setiap kemungkinan resolusi, itu tidak mudah untuk melayani, menggunakan grid fleksibel saja. Resolusi yang paling dikagumi adalah 1024×768, seperti ipad yang menggunakan resolusi yang sama. Pada saat yang sama, sebagian besar monitor juga digunakan dibawah resolusi yang sama. Oleh karena itu sebagai seorang desainer Anda harus memodifikasi grid fleksibel dengan cara yang dapat dengan mudah melayani tujuan pengunjung maksimum. Juga, sekarang Anda dapat menguji situs Anda menggunakan mobile test.

Tool dan Service Web Desain Responsif

Adaptive Image di HTML

118

Sebuah solusi drop-in yang secara otomatis membuat, mengolah dan memberikan versi perangkat yang sesuai gambar website Anda. Tidak ada perubahan mark-up yang diperlukan. Adaptif Image dimaksudkan untuk digunakan dengan desain responsif yang dikombinasikan dengan teknik gambar fluid.

Responsive Twenty Ten

218

Kami telah mengambil tema anak dan telah membuat sebuah plugin untuk tema Twenty Ten Anda! Jadi, jika Anda memiliki anak Twenty Ten dan ingin menjadi responsif, hanya menggunakan plugin ini.

Sencha.io

318

Layanan aplikasi yang memungkinkan Anda memberikan gambar dan data ke perangkat mobile lebih cepat dan biaya lebih efektif. Sencha.io adalah Src & Sync, satu set layanan cloud yang memungkinkan developer untuk mengoptimalkan pengiriman aset bergerak dan sinkronisasi offline dan rekan data.

Responsive Data Table

418

Dia memiliki point yang baik. Data tabel bisa sangat luas, dan selalu begitu. Sederet data tunggal perlu disimpan bersama-sama untuk masuk dalam sebuah tabel. Tabel dapat melenturkan lebar, tetapi hanya bisa menjadi begitu sempit sebelum mulai membungkus sel isinya tidak sesuai atau sekedar tidak bisa mendapatkan tabel terbatas.

Screenfly by QuickTool

56

Menguji situs web apapun dibanyak resolusi layar umum, termasuk monitor dekstop tablet, dan perangkat mobile yang lebih kecil.

Responsivepx

66

Masukan url ke situs Anda – lokal atau online: keduanya bekerja – dan menggunakan kontrol untuk mengatur lebar dan tinggi dari viewport Anda untuk menemukan lebar breakpoint yang tepat dalam pixel. Kemudian menggunakan informasi tersebut dalam media query untuk membuat desain responsif.

Responsive Web Desain Sketch Sheet

76

Jika wireframe desain Anda diatas kertas, Anda akan menemukan Responsif Web Desain Skecth Sheet sangat berguna. Ada beberapa yang berbeda layout Anda bisa mendownload secara gratis, yang masing-masing menunjukan beberapa viewport perangkat.

ProtoFluid

95

Pesatnya propotyping dari adaptive CSS dan desain responsif.

mediaQueryBookmarklet

105

mediaQuery bookmarklet memberikan representasi visual dari dimensi viewport saat ini dan yang paling baru dilepas media query.

PxtoEM

119

PxtoEM adalah konversi px em dibuat sederhana. Pilih ukuran body font Anda dalam pixel (px) dan keluar dengan pixel lengkap (px) ke tabel konversi em, membuat desain web elastis dengan CSS sekejap.

resizeMyBrowser

124

Tool sederhana, useful dan bagus aplikasi pengubah ukuran jendela browser untuk Web designer dan developer.

Responsive Design Testing

134

Pengujian desain responsif untuk umum.

Debugging CSS Media Query

144

Dalam desain web responsif kita bekerja dengan situasi yang berbeda, lebar dan ukuran viewport. Fluiditas dan perilaku adaptif merupakan subjek heboh saat ini, dan itu sangat dibenarkan ketika melihat mobile browser landscape saat ini. Kami melakukannya dengan CSS Media Query. Tapi kadang-kadang bisa berantakan – Kami akan berbagi tips cepat untuk menandakan (dengan CSS murni) media query yang benar-benar telah di keluarkan.

WebPutty

154

WebPutty memberikan Anda editor sintaks CSS Anda dapat menggunakannya dari mana saja, kekuatan SCSS dan kompas, side-by-side jendela preview, dan penerbitan instan dengan minifikasi, kompresi dan menyembunyikan control otomatis.

Skeleton

165

Skeleton merupakan koleksi kecil dari file CSS dan JS yang dapat membantu Anda dengan cepat mengembangkan situs yang terlihat cantik diberbagai ukuran, baik itu laptop layar 17” atau iPhone.

1140px CSS Grid System

174

1140 grid cocok dengan monitor 1280. Pada monitor yang lebih kecil menjadi fluid dan menyesuaikan dengan lebar browser. Melalui titik tertentu menggunakan media query untuk melayani hingga versi mobile, yang pada dasarnya susunan semua kolom diatas satu sama lain sehingga arus informasi masih masuk akal. Scrap 1024! Desain pada 1140 untuk 1280 dan dengan sangat sedikit pekerjaan tambahan, itu akan menyesuaikan dirinya untuk bekerja pada hampir setiap monitor, bahkan mobile.

Less Framework 4

184

Less Framework adalah sistem grid CSS untuk mendesain website adaptif. Less Framework berisi 4 layout dan 3 set preset tipografi, semua didasarkan pada grid tunggal.

FitText

204

FitText membuat ukuran font yang fleksibel. Menggunakan plugin ini pada fluid atau layout responsif Anda untuk skalabilitas pokok yang mengisi lebar dari elemen parent.