El Reka bentuk responsif sangat penting sekarang kerana format yang berbeza yang dihadapi pengguna dari tablet, telefon bimbit dan juga komputernya. Reka bentuk responsif dalam pemasaran e-mel dan halaman arahan lebih penting daripada komunikasi omnichannel dengan pelanggan kami.
Oleh itu, anda mesti memandang serius dengan mengambil templat yang berbeza lebar yang berbeza untuk tiba dengan reka bentuk terbaik mungkin surat berita atau halaman arahan tersebut di mana pelanggan masa depan yang kami mahukan mereka menukar dari iklan kami di Google atau Facebook akan tiba.
Reka bentuk responsif dalam pemasaran e-mel
Pemasaran e-mel adalah salah satu cara untuk mengumumkan tawaran pada produk atau siaran baru yang dibuat di blog kami sehingga sempit dengan cara yang lebih mendalam dengan semua pengikut kami.
Surat berita ini responsif bermaksud mereka dapat dilihat dengan sempurna dari telefon bimbit, tablet atau komputer. Oleh itu, kita harus mencuba alat yang diperlukan supaya semua elemen visual cukup harmoni untuk membaca buletin dengan mudah.
Buletin IKEA
Responsif bermaksud bahawa paparan halaman pada peranti yang berbeza sentiasa betul. Untuk ini kami mempunyai alat pemasaran e-mel yang membantu kami menguji buletin yang dibuat dalam format yang berbeza dan dengan itu mengubah nilai seperti padding atau margin sehingga mereka dapat diposisikan semula dengan sempurna kerana kami mengurangkan lebar penyemak imbas kami.
Di dalamnya reka bentuk web dengan CSS "Media Queries" digunakan untuk merancang laman web mengikut format. Hingga 360px adalah untuk telefon bimbit, dan dari 360 hingga 650 piksel kami dapat melakukan pengubahsuaian untuk semua pengguna yang melihat laman web kami dari tablet.
Beberapa prinsip untuk buletin pemasaran e-mel kami adalah:
- Hierarki visual yang bersih: tajuk dalam H2 untuk meninggalkan teks dalam format perenggan.
- Dua sumber berbeza: satu untuk tajuk dan satu untuk teks menjadikan buletin kami lebih mudah dibaca.
- El penggunaan warna untuk membezakan tajuk, teks dan elemen lain: kita secara beransur-ansur boleh berubah dari kelabu gelap ke warna yang lebih terang.
- Un CTA (Ajakan bertindak) jelas dan dapat dibezakan: jika logo syarikat kami berwarna merah, CTA dapat dalam warna ini sementara yang lain dalam warna pelengkap.
Kami memberi anda contoh yang hebat tentang yang hebat reka bentuk responsif dalam buletin yang dilakukan oleh Filmin dan yang anda dapat lihat pada gambar yang disediakan. Tipografi yang jelas berwarna putih, dan teks dengan warna kelabu yang sangat terang tetapi memungkinkan kita untuk dengan cepat menggambarkan pelbagai ruang di mana kita dijemput untuk membaca jika kita mahu. CTA bukan berasal dari dunia lain, tetapi ia membantu dengan ikon pembiakan dan yang membuat kita melihat apa yang menanti kita.
Ruang yang mencukupi di pinggir, putih sebagai warna utama untuk teks dan yang sangat sesuai dengan logo Jenama; dikelilingi oleh kelabu yang menjadikannya menonjol. Gambar menarik yang menetapkan titik untuk buletin yang terlibat sejak saat pertama. Ruang mereka juga dibiarkan di sisi sehingga keseluruhan lebar skrin tidak "dimakan".
Dalam versi desktop mengekalkan prinsip-prinsip tersebut, bahkan meninggalkan lebih banyak ruang dalam teks dan meninggalkan margin besar di setiap sisi:
Reka bentuk responsif di halaman arahan
The prinsip yang sama dapat digunakan dalam reka bentuk responsif dari halaman arahan. Adalah sangat penting untuk meluangkan masa di dunia untuk memilih templat dengan betul dan mengikuti beberapa peraturan dalam reka bentuk:
- Kesederhanaan visual: Kami bercakap mengenai menjaga ruang kosong untuk memberi tumpuan kepada CTA.
- Gambar yang cantik dan menarik kepada pembaca, tanpa melupakan resolusi dan kelihatannya sempurna.
- Kepentingan warna dan yang kami tekankan lagi.
Kita harus mengusahakan reka bentuk halaman arahan yang responsif untuk telefon bimbit, tablet dan desktop. Ambil masa yang diperlukan untuk menguji berulang kali kerana setiap perubahan ia dilihat dalam ketiga format tersebut, kerana kita boleh mempercayai diri sendiri dan lupa bahawa perubahan yang dibuat dalam CSS akan kelihatan mengerikan di telefon bimbit.
Halaman Pendaratan Hotjar
Ini kerja yang boleh membosankan, tetapi sangat penting kita meluangkan masa untuk menguji setiap perubahan. The penggunaan margin sisi dan cuba, seboleh-bolehnya, jangan ketinggalan peraturan di CTA atau butang tindakan:
- Itu jarak berhubung dengan teks dan margin butang adalah progresif dalam ketiga-tiga format. Ia tidak kecil atau besar dan berada pada ketinggian yang sama.
- La nisbah dalam saiz butang CTA dengan elemen-elemen lain di mana ia berada mesti disediakan.
Contoh yang jelas mengenai ini adalah kerja yang dilakukan oleh Shopify di halaman arahan anda di desktop dan di mana anda dapat melihat dalam versi mudah alih. Perhatian terhadap penggunaan warna, ruang putih dan teks dengan ukuran dan tipografi yang sesuai:
Serangkaian petua untuk dimiliki halaman pendaratan yang lebih baik untuk perniagaan atau kedai dalam talian anda dan buletin tersebut sangat penting untuk mendapatkan kemas kini dan promosi tersebut kepada pengguna anda.