Tips Desain Email HTML – Berurusan Dengan Gambar

Berurusan dengan Gambar di Email

Pengkodean email HTML tidak sama dengan pengkodean halaman web HTML, sayangnya, karena klien email seperti Outlook 2007 dan Gmail hanya mendukung subkumpulan kode HTML (sekitar 45% untuk spesifik.) Dengan mengingat hal ini, berikut adalah hal penting untuk diingat saat menggunakan gambar dalam email HTML.

Berurusan dengan Gambar di Email: Pemblokiran gambar = Konten X-rated

Secara default, Outlook, Yahoo, Gmail, dan klien email lainnya. Nonaktifkan tampilan gambar secara default, sehingga penerima Anda harus mengklik kanan atau secara eksplisit memilih untuk menampilkan gambar. Ada sekitar 70% kemungkinan bahwa email grafis HTML yang bagus, buatan tangan akan terlihat seperti penjajaran acak merah & # 39; Xs & # 39; ketika sudah diterima. Jadi, ketika mendesain email Anda, mulailah dengan mengasumsikan bahwa penerima Anda akan memiliki tampilan gambar yang dimatikan. Selanjutnya, anggap bahwa 105% dari penerima Anda akan terlalu malas untuk mengaktifkan tampilan gambar. Kemudian pastikan bahwa email Anda menyampaikan informasi penting melalui teks email. Kami menyarankan aturan 80/20: 80% teks hingga 20% gambar di email Anda.

File gambar sebenarnya tidak dikirim sebagai bagian dari email HTML (Catatan – Anda dapat mengirim gambar bersama sebagai bagian dari lampiran MIME tetapi ini jarang digunakan.) Gambar di-host di server Anda, (atau di server kami secara gratis jika Anda adalah pelanggan Pinpointe.) Ketika penerima Anda memutuskan untuk melihat gambar, gambar diunduh. Jadi pastikan untuk menggunakan jalur yang mutlak dan sepenuhnya memenuhi syarat untuk gambar apa pun. Sebagai contoh:

Ini berfungsi: CATATAN: Saya telah mengganti karakter dengan [and] sehingga ditampilkan dalam ezines:

  [img src = "http://www.imageserver.com/pretty-image.gif"] 
Ini tidak bekerja:
[img src = "../ images / pretty-image.gif"]

Saldo Salin dan Gambar

Buat tata letak yang memastikan teks Anda mengalir di sekitar gambar sedemikian rupa sehingga pembaca Anda dapat fokus pada pesan, bukan ruang merah & kosong. Sepanjang baris yang sama, hindari tata letak format yang dimulai dengan gambar spanduk, yang akan membuat titik mati besar di bagian atas pesan dan jendela pratinjau klien saat tampilan gambar dinonaktifkan.

Penting juga untuk menyeimbangkan jumlah teks vs grafik di email Anda untuk alasan SPAM. Banyak filter email menghasilkan skor SPAM berdasarkan grafik & # 39; ke teks & # 39; perbandingan. Teknik pemblokiran SPAM ini dikembangkan karena versi sebelumnya dari SPAM firewall yang disaring pada konten teks, tetapi kemudian spammer licik mulai membuat pesan yang benar-benar merupakan gambar yang sangat besar. Kebanyakan filter SPAM sekarang memberi peringkat teks ke rasio grafik sebagai mekanisme peringkat spam lainnya.

Gunakan ALT-text Tag

HTML memungkinkan Anda untuk melampirkan tag teks deskriptif ke gambar grafik. Teks ditampilkan ketika grafik tidak atau tidak dapat ditampilkan. Jika gambar IS ditampilkan, teks ALT akan ditampilkan ketika kursor berada di atas gambar. Either way, kamu menang. Perhatikan bahwa Outlook 2007/2010 tidak menampilkan teks ALT; namun hampir semua klien email melakukannya, dan menggunakan teks ALT tidak menyebabkan masalah apa pun dengan Outlook, jadi kami sangat menyarankan menggunakan teks ALT.

Berikut ini cara menambahkan tag ALT. Pertama, buka tag Gambar (IMG), lalu tambahkan atribut ALT-text. Kode HTML akan terlihat seperti ini: (CATATAN: Saya telah mengganti karakter dengan [and] sehingga mereka ditampilkan dalam ezines)

    [imgsrc="http://wwwimageservercom/pretty-imagegif">[imgsrc="http://wwwimageservercom/pretty-imagegif">
alt = "Pesan ini akan muncul jika gambar diblokir"]

Ukuran Gambar Benar

Yang terbaik adalah ukuran gambar yang tepat sebelum mengirim. Kami telah menerima semua email yang disematkan yang berukuran 800×600 tetapi ditampilkan di email dengan resolusi katakanlah, 200×150. Ini terjadi ketika dimensi gambar disetel ke 200×150 di email. Ini ditampilkan dengan benar di sebagian besar (tetapi tidak semua) klien email tetapi ketika email dibuka, pengguna harus mengunduh file gambar yang 16x lebih besar dari yang seharusnya.

Hindari Spacer Images

Sementara kombinasi gambar spacer dan nested tables sangat populer di web sepuluh tahun yang lalu, pemblokiran gambar di banyak klien email telah mengesampingkannya sebagai teknik yang andal saat ini. Sebagian besar klien mengganti gambar dengan placeholder kosong dalam dimensi yang sama, yang lain menghapus gambar sama sekali. Ini dapat menyebabkan kesan pertama yang buruk bagi banyak pelanggan Anda. Tetap gunakan lebar sel tetap agar pemformatan tetap pada tempatnya dengan atau tanpa gambar.

Selalu sertakan dimensi gambar Anda

Jika Anda lupa mengatur dimensi untuk setiap gambar, sejumlah klien akan menciptakan ukuran mereka sendiri ketika gambar diblokir dan merusak tata letak Anda. Beberapa klien email akan mengabaikan dimensi yang ditentukan dalam kode dan bergantung pada dimensi sebenarnya dari gambar Anda, tetapi kami menyarankan untuk mengatur ukuran gambar secara eksplisit.

Hindari Format Gambar PNG

Lotus Notes 6 dan 7 tidak mendukung gambar PNG 8-bit atau 24-bit, jadi tetap dengan format GIF atau JPG untuk semua gambar, bahkan jika itu berarti beberapa ukuran file tambahan.

Jangan Gunakan Mengapung Gambar

Outlook 2007, Outlook 2010, dan versi sebelumnya Lotus Notes tidak menawarkan dukungan untuk properti float. Sebagai gantinya, gunakan atribut align dari tag .img untuk mengapungkan gambar dalam email Anda, seperti contoh di bawah ini (CATATAN: Saya telah mengganti karakter dengan [and] sehingga mereka ditampilkan dalam ezines.)

  [img src = "http://www.site.com/image.jpg" align = "right"] 

Jika Anda melihat perilaku gambar aneh di Yahoo, tambahkan kode align = "top" ke gambar Anda sering dapat memecahkan masalah ini.

Memahami dan Menggunakan Panel Pratinjau

Lebih dari 70% pelanggan Enterprise menggunakan Outlook, yang menampilkan pratinjau 4 baris ketika penerima Anda menggunakan & # 39; Pratinjau Otomatis & # 39; pane (kebanyakan orang melakukannya.) Jika hal pertama dalam email Anda adalah grafik atau serangkaian tautan ke gambar grafis, maka pratinjau Outlook yang dihasilkan hanya akan menampilkan URL tautan di inbox penerima.

Jika artikel ini bermanfaat, silakan bagikan! Lihat artikel lain milik Pinpointe untuk kiat lainnya tentang Desain dan pengiriman Email.

Artikel ini berasal dari Situs Judi Bola yang merupakan website terpercaya di indonesia ini.

Desain Situs Web – Menggunakan Gambar Latar Belakang

Di mana Gambar Latar Belakang Dapat Digunakan?

Pikiran pertama ketika berpikir tentang gambar latar belakang selalu untuk bagian tubuh yang mengelilingi area konten, tetapi gambar latar belakang dapat digunakan dengan sebagian besar tag html dan tidak terbatas untuk digunakan di bagian tubuh. Anda tidak hanya dapat menetapkan gambar latar belakang ke tag body, Anda juga dapat menetapkan gambar latar belakang ke div, tag h *, atau bahkan tag p. Menggunakan css dan gambar latar memberi Anda kendali yang baik atas presentasi visual materi Anda.

Tips untuk Background Tag Tubuh

Saya lebih suka menggunakan gambar tarikan simetris untuk latar belakang tubuh. Jika gambar menggabungkan pola berat, saya mengaturnya sehingga tidak bergulir dengan halaman. Saya menggunakan posisi tengah atas dan ubin secara horizontal dan vertikal.

Sebuah gambar simetris membentuk latar belakang tanpa jahitan yang terlihat. File gambar sebenarnya bisa sangat kecil sehingga dapat diunduh dengan cepat. Menggunakan gambar latar belakang penuh biasanya berarti file besar. Peselancar pada koneksi yang lebih lambat mungkin tidak akan pernah melihat gambar latar belakang Anda jika terlalu lama untuk mengunduh.

Pilihan lain termasuk menggunakan gambar khusus untuk membentuk gradien warna atau bleed dari sisi atau bagian atas jendela. Ini menarik secara visual dan mungkin lebih tepat dalam beberapa situasi. Untuk menggunakan gambar gradien, satu set file hingga ke ubin hanya secara horizontal atau vertikal. Warna latar belakang untuk halaman dapat diatur untuk berbaur dengan ujung gambar untuk mempertahankan warna.

Menggunakan Gambar Latar Belakang di Area Konten

Saya suka menggunakan gambar latar belakang di area konten untuk memberi tekstur pada halaman. Ketika menggunakan gambar latar belakang untuk area konten seseorang harus yakin bahwa setiap pola dan warna tidak mengganggu keterbacaan halaman. Saya lebih suka warna pastel yang bertekstur ringan untuk area konten.

Gambar-gambar ini saya ingin menggulir dengan halaman. Meskipun gambar tubuh bergulung dengan halaman dapat mengganggu, membuat teks berguling di atas gambar latar belakang juga bisa menjadi masalah. Jika warna latar belakang atau gambar digunakan, penting bahwa ada kontras yang baik antara teks dan latar belakang.

Menggunakan Backgrounds Dengan Tag Lain

Menetapkan warna latar belakang atau gambar ke judul atau tag paragraf dapat menjadi cara untuk menekankan konten tag. Anda dapat menggunakan warna pastel terang untuk menyoroti paragraf atau bagian paragraf. Anda juga dapat menerapkan batas ke salah satu elemen ini untuk meletakkan bagian teks dalam kotak.

Gambar Latar Belakang Dapat Membuat Situs Anda Lebih Menarik

Penggunaan gambar latar belakang yang kreatif dan kreatif dapat sangat meningkatkan daya tarik visual situs web Anda. Daripada dapat mengubah situs web Plain Jane menjadi Cinderella. Bagaimana Anda bisa menggunakan gambar latar belakang untuk meningkatkan desain web Anda?

Program Desain Grafis – Corel Draw

Corel Draw adalah program ilustrasi vektor untuk penerbitan desktop yang dikembangkan dan dipasarkan oleh Corel Corporation. Corel Corporation adalah singkatan dari Cowplan Research Laboratory dan menangani perangkat lunak pengolah grafis. Michael Cowpland, pendiri Corel Corporation, mengembangkan perangkat lunak Corel Draw dengan kolaborasi dua insinyur perangkat lunak Michel Bouillon dan Pat Beirne pada tahun 1989. Ini adalah versi pertama Corel Draw dan perangkat lunak grafis pertama untuk platform windows. Perusahaan ini sukses besar segera dengan merilis perangkat lunak grafis teknologi canggih ini. Setelah kesuksesan perusahaan versi pertama memperkenalkan serangkaian versi yang ditingkatkan. Hingga kini, Corel Draw, total enam belas versi telah diperkenalkan ke pasar dan setiap versi berikutnya diperkenalkan dengan fitur baru dan yang disempurnakan. Versi terbarunya adalah CorelDraw Graphic Suite X6 yang setara dengan 16 yang diperkenalkan pada 20 Maret 2012.

CorelDraw Graphic Suite X6 adalah versi yang sangat kuat dan kreatif yang pernah diluncurkan oleh Corel Corporation. Ini adalah salah satu program editor grafis lengkap. CorelDraw Graphic Suite X6 menyediakan cara yang sangat mudah untuk membuat grafik yang menarik dengan satu set ilustrasi yang kuat, menggambar dan mengedit aplikasi perangkat lunak. CorelDraw Graphic Suite X6 tidak hanya lebih cepat ke pasar tetapi juga sangat mudah digunakan. Selain itu membantu untuk membawa ide-ide cemerlang untuk membuat grafik vektor yang menarik. Apakah Anda seorang ahli perancang grafis atau seniman yang ingin mencapai perbedaan atau kemajuan dalam pekerjaan Anda, CorelDraw Graphic Suite X6 adalah solusi tepat bagi semua orang untuk mencapai hasil yang diinginkan. Berarti Anda memiliki semua yang Anda butuhkan untuk mengekspresikan ide-ide inovatif Anda dan merancang keterampilan dengan pilihan tanpa akhir. Ini adalah tambahan keenam belas dari seri perangkat lunak Corel Draw dan terutama terdiri dari beberapa aplikasi baru dan yang disempurnakan.

  • CorelDRAW X6

Aplikasi ini secara langsung dan naluriah dikenal untuk ilustrasi vektor dan aplikasi tata letak halaman.

  • Corel PHOTO-PAINT X6

Ini adalah aplikasi pengeditan Gambar untuk mendapatkan tampilan yang menarik dan keinginan untuk desainer profesional.

  • Corel PowerTRACE X6

Ini adalah aplikasi hebat untuk melacak gambar bitmap yang akurat dan mengkonversi ke grafik vektor yang dapat diedit.

  • Corel Website Creator X6

Ini adalah aplikasi baru yang termasuk dalam suite untuk memiliki kekuatan dan kemampuan untuk membuat template situs web profesional.

  • Corel CAPTURE X6

Ini adalah alat penangkap yang mudah (hanya utilitas tangkapan layar sekali klik sederhana).

  • Corel CONNECT X6

Ini adalah alat pencari konten yang mudah dan cepat.

  • Photozoom Pro 2

Ini adalah plug-in yang sangat berguna (PHOTO-PAINT) untuk memperluas gambar digital.

  • ConceptShare

Ini adalah alat hebat untuk online interaktif yang bekerja bersama dengan satu atau lebih orang untuk mencapai sesuatu yang lebih baik.

Corel Draw Graphic Suite X6 secara langsung dikenal untuk membangkitkan perasaan kreativitas yang dipaksa bertabrakan dengan setiap tantangan desain grafis. Ketika kita menciptakan sesuatu untuk membangkitkan emosi dan kegembiraan maka kita ingin dunia (terutama para ahli dan pesaing) melihat kreasi kita. Paket suite terbaru CorelDRAW adalah salah satu program desain grafis terbaik yang membantu menciptakan grafis inovatif secara terorganisir dan akurat. Ini benar-benar paket paket aplikasi perangkat lunak profesional untuk mencakup semua jenis alur kerja yang umumnya digunakan dalam pembuatan dan pengeditan grafis.

Keuntungan Grafis Vektor dalam Desain Grafis

Gambar memainkan peran penting dalam setiap jenis desain grafis. Baik Anda melihat kartu nama atau tata letak situs web, Anda akan melihat bahwa gambar memberikan desain daya tarik estetik dan menyampaikan pesan secara efektif. Ada dua jenis gambar, raster dan vektor. Mereka mungkin terlihat sama untuk Anda tetapi raster dan gambar vektor berbeda pada intinya. Gambar vektor dibuat dari titik-titik interkoneksi dan resolusinya independen. Desainer grafis menggunakan grafik vektor dalam proyek desain grafis mereka karena berbagai keuntungan yang ditawarkannya.

  1. Mudah untuk Desain- Anda dapat dengan mudah membuat gambar vektor menggunakan Corel Draw atau Adobe Illustrator. Perangkat lunak ini ramah pengguna dan Anda dapat mendesain gambar yang indah menggunakan berbagai alat mereka. Manfaat gambar vektor adalah bahwa meskipun dapat dirancang dengan sangat mudah, Anda akan mendapatkan hasil yang kaya.
  2. Anda Dapat Mengukur Turun atau Memperbesar Ini- Ini adalah keunggulan grafis terbaik. Sebagian besar ahli desain grafis menggunakan format vektor untuk mendesain logo karena gambar tidak terdistorsi ketika Anda mengubah ukurannya. Klien Anda jelas akan menggunakan logo korporatnya dalam berbagai ukuran dan di tempat yang berbeda. Grafis vektor tidak pernah kehilangan kualitasnya ketika diperbesar atau diperkecil ke ukuran yang lebih kecil.
  3. No Image Distortion- Ketika Anda mencoba untuk memperbesar gambar raster, itu akan di-pixilated dan gambar kehilangan detailnya. Namun, ketika Anda memperbesar gambar vektor, itu tidak pernah menjadi buram. Anda dapat memperbesar grafik vektor ke ukuran apa pun yang Anda inginkan tanpa mengkhawatirkan kualitas gambar.
  4. Mengedit Lebih Mudah- Saat Anda mengedit gambar, Anda tidak perlu mengedit gambar lengkap. Elemen-elemen dari grafik vektor dapat diedit secara terpisah dan itu membuat pekerjaan Anda bebas gangguan. Pilih bagian yang ingin Anda edit dan kerjakan tanpa mempengaruhi bagian lain dari desain.
  5. Ukuran File Kecil- Mengunggah dan mengunduh gambar adalah masalah besar dalam pengembangan situs web. Jika pemirsa situs web Anda harus menunggu untuk waktu yang lama hanya untuk melihat gambar, mereka akan meninggalkan situs Anda. Gambar vektor sangat kecil ukurannya, dibandingkan dengan gambar raster. Ketika Anda menggunakan gambar vektor di tata letak situs web Anda, itu memuat lebih cepat dan menyenangkan audiens Anda.
  6. Terbaik untuk Ilustrasi Terinci- Jika Anda ingin menggambar ilustrasi mendetail dari suatu produk, maka lebih baik untuk menggambar suatu gambar. Gunakan titik dan garis, dan itu membantu Anda menciptakan ilustrasi yang tajam.
  7. Terlihat Baik Saat Dicetak- Keuntungan utama lain dari grafik vektor adalah bahwa tidak hanya terlihat bagus di web, tetapi juga di cetak. Ketika Anda mendesain iklan cetak Anda dalam format vektor, Anda dapat yakin bahwa iklan akan mempertahankan semua daya tarik visualnya.
  8. Secara estetika menyenangkan- Gambar vektor selalu terlihat jernih dan mempertahankan kualitasnya dalam berbagai ukuran. Jika Anda mengubah ukuran gambar bitmap, itu akan kehilangan daya tarik visualnya, tetapi gambar vektor akan mempertahankan keindahan estetisnya.
  9. Bagus untuk Animasi dan Karikatur- Kejelasan gambar vektor membuatnya menjadi pilihan ideal untuk animasi dan karikatur. Jika Anda membuat presentasi bisnis, Anda dapat menggunakan grafik vektor di dalamnya juga.

Ini adalah kelebihan dari grafik vektor. Anda harus menggunakan grafik vektor untuk menawarkan desain grafis yang ringan, skalabel, profesional dan menarik untuk klien Anda.