Susun atur Laman Web

Contoh & Idea Susun Atur Laman Web Terbaik


Susun atur laman web anda dapat menentukan kejayaannya. Dapatkan reka bentuk yang salah dan orang akan keliru dan bingung, merosakkan pengalaman pengguna. Mereka mungkin terlepas kandungan kritikal atau gagal melihat ajakan bertindak.

Tetapi kepentingan susun atur anda semakin jauh. Reka bentuknya harus sesuai dengan kandungan laman web anda. Dengan susun atur yang betul, kandungan anda dapat bersinar, tetapi dengan salah satu kandungan boleh menjadi sesak, sukar dibaca dan tidak berinspirasi.

Susun atur laman web anda dapat menentukan kejayaannya. Dapatkan reka bentuk yang salah dan orang akan keliru dan bingung, merosakkan pengalaman pengguna. Mereka mungkin terlepas kandungan kritikal atau gagal melihat ajakan bertindak.

Tetapi kepentingan susun atur anda semakin jauh. Reka bentuknya harus sesuai dengan kandungan laman web anda. Dengan susun atur yang betul, kandungan anda dapat bersinar, tetapi dengan salah satu kandungan boleh menjadi sesak, sukar dibaca dan tidak berinspirasi.

Akhirnya semua laman web mempunyai sistem grid yang terletak di bawah reka bentuk laman web. Lajur dan baris ini memberikan susunan untuk kandungan anda dan memandu pengguna melihat halaman. Dalam grid ini, anda boleh membuat banyak pendekatan yang berbeza. Setiap laman web mempunyai grid asas di mana pereka telah membina susun atur.

Walau bagaimanapun, ketika memilih reka bentuk susun atur yang tepat untuk laman web anda, terdapat beberapa titik permulaan yang dapat anda gunakan untuk memulai.

Perlu dinyatakan bahawa anda tidak perlu berpegang pada satu pendekatan. Anda boleh menggabungkan pelbagai susun atur di laman web anda dengan mudah atau bahkan pada satu halaman seperti halaman arahan.

Oleh itu, mari kita lihat pilihan susun atur paling umum yang tersedia untuk anda.

Kita mulakan dengan corak susun atur yang paling mudah, lajur tunggal.

1. Susun atur Lajur Tunggal

Walaupun susun atur yang paling tidak rumit akan anda temui, susun aturnya telah meningkat dengan ketara sejak pertumbuhan web mudah alih. Ini kerana laman web boleh menggunakan reka bentuk yang sama pada peranti mudah alih, tablet, dan desktop, sehingga mengurangkan masa pengembangan.

Juga, susun atur lajur berfungsi dengan baik untuk mewujudkan pengalaman membaca yang hebat kerana memfokus pengguna pada kandungan tanpa gangguan pada kedua-dua belah pihak. Itulah sebabnya laman blog Sedang menggunakannya untuk semua artikel mereka.

Medium menggunakan susun atur lajur tunggal untuk meningkatkan pengalaman membaca.

Akhirnya, apabila digabungkan dengan gambar, susun atur lajur tunggal dapat memberikan kesan yang kuat kerana ia membolehkan anda menunjukkan gambar tersebut seluas mungkin. The Ocean Resort adalah contoh terbaik dalam tindakan ini.

Ocean Resort menggunakan lebar penuh reka bentuk lajur tunggal untuk memaksimumkan kesan imejan.

Dengan mempertimbangkan faktor-faktor ini, pertimbangkan untuk menggunakan susun atur lajur tunggal jika anda mahu orang menghabiskan banyak masa membaca di laman web anda atau jika anda mempunyai imejan yang memerlukan ruang untuk bersinar.

Kerana kesederhanaannya, terdapat sedikit cabaran mengenai susun atur lajur tunggal. Walau bagaimanapun, anda perlu mempertimbangkan aliran maklumat dengan teliti. Pesanan apa yang diperlukan pengguna untuk melihat kandungan anda?

Sebagai contoh, sangat berguna untuk memberi pengguna ringkasan mengenai apa yang diliputi oleh halaman di bahagian atas untuk menarik mereka masuk dan memberikan ajakan bertindak yang jelas hingga akhir.

Juga, fikirkan bagaimana anda dapat memastikan pengguna menatal halaman ke bawah. Susun atur lajur tunggal cenderung lebih panjang, dan tidak selalu jelas bagi pengguna bahawa terdapat lebih banyak kandungan di bahagian bawah. Petunjuk visual, seperti anak panah dapat membantu.

Sekiranya susun atur lajur tunggal kelihatan sedikit membatasi, tetapi anda masih mempunyai banyak kandungan untuk berkomunikasi, pertimbangkan untuk menggunakan reka bentuk yang memberi tumpuan kepada kandungan.

2. Susun atur Berfokus Kandungan

Pereka web sering menggunakan susun atur yang fokus pada laman web atau blog berita, dan biasanya mempunyai lajur utama untuk kandungan dan satu atau lebih lajur sampingan untuk maklumat tambahan.

Kelebihan susun atur ini ialah ia dapat membantu anda menguruskan panjang garis isi tengah dengan mengubah lebar lajur sisi. Itu penting kerana jika panjang baris teks terlalu panjang atau pendek, menjadi lebih sukar untuk dibaca, sehingga mengurangkan pemahaman dan penyimpanan maklumat.

Namun, jika dilakukan dengan betul, susun atur fokus kandungan sangat sesuai untuk mana-mana laman web yang berpusat pada salinan. Rahsianya ialah memecah kandungan dalam susun atur ini menjadi potongan kecil dan mudah dicerna.

Catatan di Boagworld memecah kandungan dengan tajuk, senarai, gambar dan petikan menarik.

Sebagai contoh, di blog saya, anda akan dapati bahawa rata-rata catatan saya diberi tanda baca berdasarkan tajuk, senarai, gambar dan petikan. Ini semua teknik untuk membantu pengguna mengimbas artikel, mencari bahagian yang menarik.

Pertimbangan yang teliti juga perlu diberikan pada ruangan sebelah. Penting bahawa pereka web meletakkan kandungan yang tepat di lajur ini dan secara visual mereka mempunyai pemberat yang betul.

Masalahnya ialah pengguna mengharapkan untuk mencari kandungan sekunder di lajur sisi dan dengan itu memberi perhatian yang lebih sedikit. Oleh itu, jika anda merancang untuk memasukkan sesuatu seperti ajakan bertindak di lajur sampingan, ia perlu cukup kuat untuk menarik perhatian.

Sebagai contoh, perhatikan bagaimana Majalah Smashing menggunakan ilustrasi kucing yang berwarna-warni untuk menarik perhatian pada borang pendaftaran buletin mereka di lajur kanan.

Majalah Smashing menggunakan lajur sampingannya untuk memberikan maklumat sekunder mengenai jawatan tersebut.

Bukan bahawa susun atur fokus kandungan sesuai untuk setiap halaman laman web anda. Laman web sering memasangkan susun atur ini dengan reka bentuk gaya majalah.

3. Susun atur Majalah

Seperti namanya, pendekatan tata letak ini digunakan secara meluas di majalah atau laman berita untuk menunjukkan sebilangan besar cerita yang berbeza.

Diilhamkan oleh susun atur cetakan, mereka memungkinkan gabungan tajuk utama dan gambar untuk memperkenalkan cerita. Itu boleh menjadi cara yang menarik untuk menyampaikan apa yang pada dasarnya adalah senarai pautan.

Ia juga merupakan susun atur yang sangat baik untuk menonjolkan kandungan yang selalu berubah. Itulah sebabnya laman web berita suka The Washington Post jadi nikmatilah.

Laman web berita cenderung menyukai susunan gaya majalah.

Walau bagaimanapun, susun aturnya tidak tanpa kekurangannya. Susun atur majalah boleh menjadi sukar untuk dibuat responsif, sering memerlukan perubahan reka bentuk sepenuhnya untuk peranti skrin yang lebih kecil.

Gaya susun atur laman web ini juga agak luar biasa, dengan sebilangan besar gambar dan tajuk utama meminta perhatian.

Kaedah paling berkesan untuk mengatasi masalah ini adalah dengan membuat hierarki visual yang jelas. Dengan kata lain, buat sebahagian daripada ‘cerita’ lebih besar daripada yang lain.

Dengan pelbagai ukuran cerita, mereka memberi petunjuk kepada pengguna.

Sebagai contoh, perhatikan bagaimana Vogue laman web menumpukan perhatian pada gambar sebelah kiri dengan menjadikannya lebih besar. Mereka secara efektif memberitahu pengguna di mana hendak melihat terlebih dahulu.

Ini juga membantu bahawa antara muka pengguna yang lain mudah, dengan tipografi bersih dan bar navigasi sederhana. Sekiranya anda akan menggunakan susun atur majalah, anda perlu bekerja keras untuk memastikan perkara menjadi mudah.

Kelemahan susun atur majalah lain yang berpotensi adalah bahawa ia boleh kelihatan ‘boxy’ kerana grid yang mendasari ia sangat kelihatan. Walau bagaimanapun, anda boleh mengurangkannya dengan mengambil inspirasi dari jenis susun atur kami yang seterusnya.

4. Susun atur Pemecahan Grid

Susun atur yang nampaknya memecah grid asasnya secara visual jauh lebih menarik daripada pendekatan yang lebih tradisional. Mereka juga bagus untuk menarik perhatian pada elemen skrin tertentu yang keluar dari lajur biasa.

Contohnya, ambil Laman web Festival VR Arles. Perhatikan bagaimana mereka menarik perhatian anda ke bar navigasi mereka dengan meletakkannya bertindih dua lajur.

Festival VR Arles menarik perhatian anda ke bar navigasi mereka dengan menindih dua lajur.

Penggunaan praktikal lain dari susun atur pemecah grid adalah menggunakannya untuk melapisi teks pada gambar sedemikian rupa sehingga menarik perhatian pada salinannya. Apabila halaman web benar-benar meletakkan teks pada gambar, ia sering hilang. Namun, seperti yang anda boleh lihat dari contoh di bawah, jika teksnya bertindih sebahagiannya, ia akan lebih menonjol.

Reka bentuk ini menarik perhatian teks dan ajakan bertindak dengan meletakkannya sebahagian dengan gambar.

Kelemahan susun atur pemecah grid adalah sukar untuk dibuat dengan betul, terutamanya apabila laman web perlu responsif. Sebenarnya, kebanyakan reka bentuk pemecah grid tidak serupa. Masih terdapat grid yang mendasari, dan semua elemen skrin masuk ke dalamnya. Hanya grid jauh lebih kompleks dan tidak begitu jelas. Itu membuat mereka sukar merancang.

Kerumitan yang wujud adalah mengapa anda cenderung melihatnya digunakan oleh syarikat yang diketuai reka bentuk seperti agensi reka bentuk atau jenama fesyen. Mereka menunjukkan tahap kecanggihan reka bentuk yang menarik bagi penonton tertentu.

Sekiranya susun atur pemecahan grid terasa terlalu rumit untuk keadaan anda, tetapi anda masih mahu melakukan sesuatu yang lebih inovatif dan tidak biasa, pertimbangkan reka bentuk skrin penuh.

5. Susun Atur Skrin Penuh

Susun atur skrin penuh, seperti namanya, sesuai pada satu skrin tanpa perlu pengguna menatal. Itu menjadikan mereka sesuai untuk bercerita atau persembahan.

Contohnya, ambil, Spesies dalam Kepingan. Pengalaman persembahan yang kaya dan interaktif ini menceritakan kisah 30 spesies yang terlibat.

Spesies dan Potongan adalah pengalaman interaktif yang kaya dan semuanya berlaku tanpa perlu menatal.

Seperti yang anda lihat, susun atur skrin penuh adalah yang terbaik apabila disertakan dengan gambar yang hebat. Itu menjadikan mereka pilihan terbaik untuk laman web yang kaya dengan fotografi, ilustrasi atau video.

Bukan anda harus berpegang teguh pada pendekatan skrin tunggal. Pada pandangan pertama, Roux di laman web Parlimen Square nampaknya laman web skrin penuh dalam arti yang sama dengan Spesies dalam Potongan. Imej indah mereka memenuhi keseluruhan ruang pandang.

Laman web ini menggunakan keseluruhan ruang pandang untuk mempamerkan fotografi yang luar biasa.

Walau bagaimanapun, adalah mungkin untuk menavigasi lebih jauh ke bawah halaman untuk melihat kandungan tambahan. Malangnya, ini menunjukkan satu kelemahan yang berpotensi dengan pendekatan susun atur ini. Pengguna tidak selalu sedar bahawa mereka boleh menatal dan boleh kehilangan kandungan berharga.

Anda juga perlu mempertimbangkan dengan teliti bagaimana susun aturnya akan disesuaikan dengan pelbagai ukuran. Sebagai contoh, adakah pendekatan skrin penuh berfungsi pada peranti mudah alih? Juga, adakah gambar akan berubah ketika ukuran layar berubah atau hanya menyusut? Anda dapat dengan cepat menemui titik fokus gambar yang dipangkas keluar dari kawasan yang dapat dilihat pada ukuran yang lebih kecil.

Walaupun begitu, jika anda mempunyai gambar yang menakjubkan untuk dipamerkan, anda akan berusaha untuk mendapatkan reka bentuk susun atur yang lebih baik. Tetapi, jika anda mahukan pilihan untuk menambahkan beberapa keterangan dan ajakan bertindak di samping gambar tersebut, anda mungkin ingin mempertimbangkan susun atur yang bergantian.

6. Susun atur Berselang-seli

Corak susun atur bergantian adalah salah satu yang paling biasa dijumpai di web. Anda akan dapati ia terdiri daripada serangkaian blok kandungan, yang masing-masing mempunyai susun atur dua lajur. Blok biasanya terdiri dari gambar di satu sisi dan teks di sisi lain.

Yang memberikan namanya ialah gambar bergantian di sebelah. Jadi blok pertama akan mempunyai kandungan di sebelah kiri dan gambar di sebelah kanan, sementara blok berikutnya membalikkan susun atur itu.

Ini adalah pendekatan susun atur yang sangat digemari ketika menerangkan ciri atau faedah produk. Contohnya, produk perisian seperti Webydo akan menggunakan gambar untuk menunjukkan ciri dan kemudian salinannya untuk menerangkan bagaimana ia berfungsi atau faedah yang diberikannya.

Webydo teks dan gambar bergantian dalam kandungan yang berbeza menyekat laman webnya.

Bukan bahawa blok kandungan ini terhad pada gambar dan teks. Kadang-kadang laman web menggantikan gambar dengan video. Begitu juga, bahagian isi elemen boleh merangkumi segalanya, dari ikon hingga testimoni atau ajakan bertindak.

Sebagai contoh, Tukarkan termasuk testimoni dan ajakan bertindak di samping teks mereka di setiap blok kandungan.

Convertkit merangkumi testimoni dan ajakan bertindak di samping gambarnya.

Sebahagian daripada sebab blok bergantian sangat umum adalah bahawa mereka adalah pendekatan susun atur yang sederhana dengan beberapa kekurangan. Sekiranya anda perlu menyampaikan beberapa nilai jual, hampir selalu merupakan pilihan susun atur yang boleh dipercayai.

Sudah tentu, keperluan anda mungkin berbeza, jadi pilihan lain yang perlu dipertimbangkan adalah susun atur berdasarkan kad.

7. Susun atur Berasaskan Kad

Susun atur halaman berdasarkan kad adalah pendekatan susun atur biasa yang akan anda lihat di seluruh web.

Susun atur berasaskan kad adalah cara yang baik untuk memberi pengguna pelbagai pilihan untuk dipilih oleh pengguna, memberikan mereka maklumat yang cukup mengenai setiap pilihan untuk membuat keputusan.

Itu menjadikan mereka pilihan popular untuk halaman senarai produk dari laman web eCommerce. Ini membenarkan laman web untuk menampilkan gambar produk, keterangan, dan harganya. Anda bahkan boleh menambah fungsi seperti “simpan untuk kemudian” seperti yang anda lihat dari Laman web Asos.

Laman web e-dagang seperti Asos menggemari susun atur berdasarkan kad untuk memaparkan senarai produk.

Walau bagaimanapun, anda akan menemui laman web yang menggunakan susun atur berdasarkan kad dalam keadaan di mana pengguna perlu memilih dari senarai. Sebagai contoh, penggunaan khas lain adalah menampilkan senarai artikel di blog atau laman berita.

Susun atur berdasarkan kad membolehkan anda memaparkan gambar cerita, tajuk, dan keterangan, serta perincian tambahan mengenai siaran yang ingin anda sertakan. Ke atas blog adalah contoh terbaik dalam penggunaan tindakan seperti ini.

Awwwards menggunakan susun atur berdasarkan kad untuk menyenaraikan catatan di blognya.

Yang terbaik, susun atur kad berdasarkan kad berfungsi dengan baik, dengan jumlah kad berturut-turut berkurang dengan lebar yang tersedia.

Terdapat beberapa kelemahan kecil untuk pendekatan ini. Pertama, kad berfungsi dengan baik apabila anda memasukkan gambar. Ini bermakna jika anda berusaha mencari foto yang sesuai untuk setiap item senarai anda, anda mungkin lebih baik dengan reka bentuk yang berbeza.

Masalah kecil yang lain adalah dengan jumlah kandungan yang berbeza-beza. Sekiranya satu kad mempunyai lebih banyak kandungan daripada kad yang lain, kad itu akan meninggalkan ruang kosong sama ada di dalam kad atau di antara setiap baris.

Sekiranya kad mempunyai jumlah kandungan yang berbeza-beza, ia dapat meninggalkan ruang di antara kad.

Salah satu cara untuk mengatasi masalah ini adalah dengan tidak mencuba dan menyimpan kad pada baris yang sama, seperti yang ditunjukkan dalam contoh di bawah.

Dengan membiarkan kad memenuhi ruang kosong, anda akan memperoleh reka bentuk yang lebih estetik.

Walaupun begitu, ini adalah masalah kecil, yang menjelaskan penggunaan pendekatan susun atur ini secara meluas.

Reka bentuk lain yang sangat popular adalah susun atur gambar wira.

8. Susun atur Wira

Susun atur wira dinamai gambar pahlawan, gambar besar dengan hamparan teks yang mendominasi laman utama di begitu banyak laman web. Apple memanfaatkan imej wira klasik dengan baik.

Apple memanfaatkan imej wira klasik dengan baik.
Pixave untuk MacOS mengambil susunan pahlawan lebih jauh lagi dengan mendominasi reka bentuk halaman utama.
Pixave untuk MacOS mengambil susunan pahlawan lebih jauh lagi dengan mendominasi reka bentuk halaman utama.

Apa yang menjadikan gambar pahlawan begitu lazim adalah gambar tersebut membolehkan anda menyusun gambar anda tawaran nilai dengan cara yang berkesan tepat di pintu masuk laman web anda.

Seperti yang anda lihat dari Pixave dan epal laman web di atas biasanya terdiri daripada gambar latar belakang yang besar, tajuk atau tali, dan keterangan. Susun atur wira juga sering disertakan dengan ajakan bertindak yang menonjol.

Sekiranya anda perlu menerangkan dengan jelas apa yang anda tawarkan di laman utama atau halaman arahan anda dengan cara yang dapat menarik perhatian, maka gambar wira boleh menjadi jalan yang sesuai. Walau bagaimanapun, itu mungkin tahap penggunaannya.

Kadang-kadang anda akan melihat susun atur pahlawan yang digunakan pada halaman berikutnya. Tetapi, dalam kebanyakan kes, gambar pahlawan hanya menarik perhatian dari kandungan yang lebih berharga. Jadi gunakan dengan berhati-hati.

Selain itu, terdapat sedikit kelemahan menggunakan tata letak wira. Ya, mereka biasa, tetapi pengguna biasa dengan mereka, dan ia berkesan.

Pilihan susun atur yang kurang biasa adalah susun atur skrin terbahagi.

9. Susun Atur Skrin Berpisah

Seperti susun atur skrin penuh, skrin split adalah cara yang baik untuk menarik perhatian ketika pengguna pertama kali tiba di laman web anda seperti yang anda lihat dari laman web syarikat reka bentuk web di bawah.

Laman web ini menggunakan susun atur skrin terpisah untuk menjelaskan kedua-dua bahagian penawaran mereka.

Apa yang menjadikan contoh di atas begitu berkesan adalah ada alasan yang jelas untuk susun atur skrin terbahagi. Laman web ini menjelaskan bahawa ada dua sisi perniagaan mereka – reka bentuk dan pembangunan.

Contoh yang serupa adalah ketika anda ingin memberikan pilihan binari yang jelas kepada pengguna. Skrin terbelah masuk akal dalam situasi itu kerana ia membelah layar secara sama antara dua pilihan.

Contohnya, agensi pemodelan 62 Pengurusan menggunakan skrin pisah untuk mendorong pengguna mengenal pasti sama ada mereka mencari model lelaki atau wanita.

62 Pengurusan menggunakan reka bentuk skrin terbahagi untuk mendorong pengguna membuat pilihan antara dua pilihan.

Sayangnya di sebalik jumlah aplikasi yang terhad ini, ada sedikit alasan untuk menggunakan reka bentuk skrin split. Ini adalah pilihan susun atur yang agak terhad, dan tidak banyak senario yang sesuai. Walau bagaimanapun, dalam keadaan di mana ia berada, ia adalah pilihan terbaik.

Pilihan serupa yang memberikan sedikit kelonggaran adalah susun atur yang tidak simetri.

10. Susun atur Asimetris

Walaupun susun atur skrin berpecah memaksa perpecahan yang sama di tengah-tengah ruang pandang, reka bentuk yang tidak simetri membolehkan anda membahagikan skrin walau bagaimanapun anda sesuai.

Kelebihan susun atur ini daripada split-screen adalah bahawa ia membolehkan penekanan pada bahagian halaman tertentu. Semakin banyak harta tanah yang dimiliki oleh satu pihak, semakin banyak tumpuan yang anda fokuskan. Ini seterusnya membolehkan anda mengenal pasti kandungan utama dan sekunder.

Dengan adanya premis lajur primer dan sekunder, anda boleh menggunakan pendekatan dengan pelbagai cara. Sebagai contoh, Félix Lesouef menggunakan kaedah di laman webnya untuk membahagikan antara kandungan dan navigasi.

Félix Lesouef menggunakan susun atur yang tidak simetri untuk menyoroti navigasi laman webnya.

Sebaliknya, Makan Berkhasiat laman web menggunakan lajur kedua untuk membolehkan anda melihat bahagian seterusnya dari laman webnya.

Nourish Eats menggunakan pendekatan susun atur ini untuk memperlihatkan kandungan sekunder dengan lebih jelas.

Dalam banyak cara, susun atur asimetris adalah pilihan yang sangat baik. Ia fleksibel, agak mudah dilaksanakan dan kurang digunakan. Ini adalah kaedah yang mudah untuk menjadikan laman web anda kelihatan berbeza tanpa perlu memusingkan beberapa pilihan lain.

Cara Memilih Tata Letak

Dengan membaca artikel ini, anda telah mengambil langkah pertama dalam memilih susun atur yang betul untuk laman web anda. Anda telah mengetahui jenis pilihan yang tersedia untuk anda.

Seterusnya, anda perlu mengetahui pilihan mana yang mungkin sesuai untuk laman web anda. Salah satu cara untuk melakukan ini adalah dengan melihat pesaing anda. Namun, saya menasihatkan agar tidak berhenti di situ. Bahayanya adalah bahawa anda akan menyalinnya, dan itu akan membuat anda selangkah ke belakang.

Sebaliknya, lihat laman web di sektor lain yang mempunyai jenis kandungan yang berkaitan dengan anda sendiri. Sekiranya anda mempunyai laman web brosur yang bertujuan untuk khalayak B2B, lihat laman web lain yang serupa. Sama juga, jika anda mempunyai laman web eCommerce, lihat eCommerce di sektor lain.

Dari sana, bekerjasama dengan pereka anda untuk bereksperimen dengan beberapa pendekatan yang berbeza. Minta mereka merangka beberapa idea berdasarkan susun atur yang berbeza dan lihat apa yang paling sesuai dengan kandungan anda.

Sekiranya anda mendapati diri anda tidak dapat membuat keputusan atau kurang yakin pada arah yang betul, cuba letakkan pilihan di hadapan beberapa pengguna dan dapatkan reaksi mereka. Jangan hanya bertanya kepada mereka yang mana yang mereka gemari, tanyakan juga kepada mereka sama ada mereka melihat kandungan kritikal atau memahami tentang syarikat itu.

Sebenarnya, anda mungkin akan memilih dan memilih dari pelbagai susun atur pendekatan untuk bahagian yang berbeza dari laman web anda, dan itu tidak mengapa. Kerana ketika menyusun susun atur laman web, penggunaan yang betul pada waktu yang tepat adalah sangat penting.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map