Posts

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.

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.