() translation by (you can also view the original English article)
Desain web responsif telah menjadi semua kemarahan untuk sementara waktu sekarang. Ketika Anda mempertimbangkan semua manfaat yang membawa ke meja untuk setiap pemilik situs, adalah tidak heran bahwa orang tidak bisa berhenti berbicara tentang hal itu.
Responsif website tidak hanya membantu Anda peringkat lebih baik di mesin pencari, tetapi juga meningkatkan konversi Anda dan mengarah ke peningkatan lalu lintas mobile. Jangan lupa bahwa situs web responsif menawarkan pengalaman pengguna yang lebih baik dengan pengunjung Anda dan dapat membantu dengan membangun backlinks kualitas dan peningkatan saham sosial.
Apa yang bahkan lebih baik adalah bahwa membuat sebuah website yang responsif tidak sesulit dulu. Berkat berbagai template dan tema, Anda dapat dengan mudah mengubah situs web non-responsif menjadi responsif yang menghasilkan lebih banyak lalu lintas dan lebih banyak pendapatan.
Namun, memiliki tata letak yang responsif tidak cukup. Website Anda juga harus memiliki fitur yang tepat untuk ceruk tertentu dan fitur tersebut harus mengikuti praktek terbaik dan prinsip-prinsip inti untuk respon. Dalam artikel hari ini, kami akan menampilkan beberapa contoh website responsif bisnis terbaik di sekitar sehingga Anda dapat menggunakannya untuk inspirasi.
Apa yang membuat visual yang bagus pada sebuah Website responsif?
Cairan grid, responsif gambar dan pertanyaan media inti prinsip-prinsip desain web responsif yang membuat adaptif layout mungkin, namun, ada beberapa unsur-unsur lain bahwa setiap situs responsif secara visual besar harus memiliki. Berikut adalah beberapa aturan lain untuk diingat:
- Desain menarik. Tak usah dikatakan bahwa situs web Anda harus memiliki desain visual menyenangkan yang akan membantu Anda menyajikan produk atau jasa Anda dalam cahaya terbaik. Sementara desain menarik sangat subyektif, Anda dapat mengikuti beberapa prinsip dasar seperti menggunakan font terbaca, menggunakan spasi, dan menghindari bentrok warna untuk memastikan situs web Anda estetis.
- Dioptimalkan gambar. Kami telah disebutkan pentingnya responsif gambar; Namun, gambar Anda juga harus dioptimalkan untuk web. Ini berarti bahwa di atas scaling baik dengan tata letak, mereka harus disimpan dalam format yang sesuai. Gunakan JPG untuk gambar seperti potret, pemandangan latar belakang atau gambar lain yang memiliki cukup banyak warna. Menggunakan PNG untuk gambar seperti logo, ikon, dan gambar lain yang memerlukan latar belakang transparan.
- Menonaktifkan lightbox untuk perangkat mobile. Jika Anda punya sebuah situs portofolio, pertimbangkan untuk menonaktifkan efek lightbox pada perangkat mobile. Uji ukuran kolom formulir pada setiap perangkat. Sebagai pemilik situs bisnis, Anda mungkin memiliki beberapa bentuk website Anda. Pastikan untuk menguji formulir di setiap perangkat untuk memastikan kolom formulir menampilkan dengan benar dan besar cukup bahkan pada layar kecil.
- Uji ukuran kolom formulir pada setiap perangkat. Sebagai pemilik situs bisnis, Anda mungkin memiliki beberapa bentuk website Anda. Pastikan untuk menguji formulir di setiap perangkat untuk memastikan kolom formulir menampilkan dengan benar dan besar cukup bahkan pada layar kecil.
- Menonaktifkan popup pada perangkat mobile. Serupa dengan gambar yang dibuka di lightbox, newsletter popup dapat sulit untuk menutup pada layar yang lebih kecil, jadi pertimbangkan melumpuhkan mereka dengan query media tepat.
- Gunakan tombol saham responsif. Akhirnya, pastikan tombol berbagi responsif dan tidak menghalangi konten Anda pada layar yang lebih kecil.
25 website responsif bisnis terbaik
Situs web pada daftar ini memiliki tata letak yang responsif yang tampak hebat pada desktop dan mobile perangkat serta desain yang menarik secara keseluruhan. Jadi, mari kita lihat beberapa web responsif contoh desain:
1. Andersson Wise Architecs
Andersson Wise Architects menggunakan foto untuk menampilkan kemampuan mereka, yang sangat wajar bagi seorang arsitek portofolio. Pada versi desktop, menu kecil dan tidak mengganggu dan homepage segera membuat jelas apa studio dikenal.
Pada perangkat mobile, menu bergeser ke bagian atas layar, dan karena itu hanya berisi beberapa link, hal ini tidak diperlukan untuk menggunakan ikon hamburger. Gambar pergeseran salah satu di bawah satu, membuat ini website mudah digunakan apapun perangkatnya.
2. Stephen Caver
Stephen Caver adalah seorang desainer dan pengembang, jadi tidak heran situsnya adalah contoh sempurna dari sebuah situs portofolio responsif yang dilakukan dengan benar. Dia hanya menggunakan beberapa contoh portofolio thumbnail skala yang baik pada layar yang lebih kecil.
Dia juga menggunakan tipografi yang indah dan bersih dan banyak ruang putih untuk memberikan desain cukup ruang untuk bernapas.
3. Food Sense
Blog foodie ini menunjukkan dua kolom layout pada komputer laptop dan desktop bahwa transisi menjadi sebuah layout blok pada layar yang lebih kecil.
Logo dan menu yang ada dalam pergeseran sidebar kiri atas layar tanpa membuat link sulit untuk klik atau tersembunyi di belakang sebuah menu hamburger.
4. Made by Hand
Made By Hand adalah contoh sempurna dari memastikan media responsif. Contoh situs ini menampilkan dengan serangkaian film pendek yang merayakan orang-orang yang membuat hal-hal dengan tangan dan dengan demikian menggunakan gambar dan video.
Baik gambar dan video tampak hebat pada desktop dan mobile perangkat dan font serif elegan membuat teks menyenangkan untuk dibaca.
5. Skinny Ties
Ikatan kurus adalah situs e-commerce, sehingga responsif desain sangat penting di sini.
Jika Anda mengubah ukuran website di browser Anda atau jika Anda mengunjungi pada perangkat mobile, Anda akan melihat pandai menggunakan menu mega yang mengembang ketika Anda membawa lebih dari itu dan membuatnya sangat mudah untuk klik masing-masing menu item.
6. White Lotus Aromatics
Halaman web ini responsif adalah contoh lain dari situs e-commerce. Situs memiliki dua menu utama, satu menghubungkan ke halaman lain di situs dan yang lain yang memungkinkan pengunjung mudah akses Katalog Produk dalam PDF format dan keranjang mereka.
Pengunjung pada perangkat mobile dapat dengan mudah mengakses menu kedua, yang reposisi diatas dan dibawah logo.
7. Boston Globe
Jika Anda punya banyak konten untuk berbagi di situs web Anda, mengambil isyarat dari The Boston Globe.
Surat Kabar dan majalah biasanya memiliki banyak kategori situs yang The Boston Globe melipat kaki belakang menu hamburger bahkan pada desktop perangkat, memungkinkan pembaca untuk fokus pada apa yang paling penting untuk koran situs: konten itu sendiri.
8. Starbucks
Starbucks membuat baik menggunakan drop-down menu dan menu ponsel tersembunyi untuk menempatkan fokus pada konten sementara masih memungkinkan pengunjung cara mudah untuk menavigasi situs mereka.
Tombol mereka juga bekerja besar pada layar yang lebih kecil, membuat mereka mudah untuk melihat dan klik.
9. Sasquatch!
Website responsif untuk The Sasquatch Music Festival adalah sebuah contoh bagus dari responsif slider.
Gambar skala anggun ketika Anda melihat mereka pada perangkat mobile dan mudah untuk mengakses informasi yang paling penting.
10. tattly
Toko online Jual tato sementara melakukan pekerjaan yang besar menyederhanakan pengalaman checkout pada perangkat mobile.
Anda dapat dengan mudah klik tombol Amazon membayar atau terus di bawah ini untuk mengisi formulir checkout, yang memiliki bidang besar yang bagus dan tombol mudah diklik.
11. cantina Valpolicella Negrar
Ini koperasi anggur Italia menggunakan video di situs mereka, yang mudah untuk bermain bahkan pada layar yang lebih kecil berkat tombol play mudah terlihat.
Selain responsif media, hal lain yang situs ini kanan adalah penggunaan menu lengket, yang membuatnya mudah untuk mengakses halaman lain.
12. lebih Hazards pahlawan lebih
Minimalis dan cepat loading kali yang terbaik adalah keuntungan utama dari website untuk Nashville's rakyat duo, lebih bahaya More Heroes. Pada desktop, Anda dapat memutar lagu-lagu, membaca lirik, men-download album, dan banyak lagi.
Kunjungi situs pada perangkat seluler dan Anda hanya akan menemukan minimal informasi bersama dengan kemampuan untuk men-download album terakhir mereka.
13. illy kopi
Ketika Anda mengunjungi website Illy's di desktop atau laptop, Anda akan melihat popup newsletter menawarkan diskon 15% kode.
Namun, pada perangkat mobile, popup digantikan oleh sebuah tombol samping halus dan bar bagian atas yang tidak mencegah Anda dari melihat konten utama.
14. Sweet Hat Club
Menu sederhana dan Galeri adalah keuntungan terbesar dua klub Hat manis ketika mengunjungi pada perangkat mobile. Terima kasih kepada warna-warna cerah, tombol mudah dikenali.
Website ini responsif juga menunjukkan bahwa halus animasi pekerjaan besar pada layar yang lebih kecil untuk menarik perhatian ke panggilan untuk bertindak.
15. Alessandro D'agnano
Italian desainer dan art director Alessandro D'agnano mengkhususkan diri dalam desain responsif, sehingga hal ini tidak mengherankan bahwa portofolio dioptimalkan untuk semua ukuran layar.
Grid thumbnail tumpukan di atas masing-masing sebagai blok pada layar yang lebih kecil dan sederhana dan bersih sans serif font tetap terbaca.
16. Authentic Jobs
Authentic Jobs adalah direktori online yang tampak hebat di perangkat desktop dan seluler berkat tata letak daftar tradisional.
Anda akan melihat perubahan sedikit pilihan penyaring yang bergerak dari posisi sidebar ke menu drop-down di atas konten utama ketika Anda mengunjungi situs pada perangkat mobile.
17. The DO Lectures
The DO Lectures menggunakan tata letak tiga kolom yang memungkinkan untuk menampilkan banyak konten di halaman depan.
Pada perangkat seluler, menu diberi label jelas dengan jenis tebal dan video dan konten ditampilkan dalam dua kolom.
18. St. Paul’s School
St. Paul’s School membuat berandanya sederhana dan minimalis - Anda akan melihat gambar latar belakang yang besar digabungkan dengan beberapa tombol yang mempermudah navigasi ke area utama situs web.
Pada perangkat seluler, gambar latar belakang berskala indah dan tombol ditumpuk di atas satu sama lain untuk menjaga kemudahan navigasi.
19. ASU Online
Perguruan tinggi setempat ini membuatnya jelas apa yang harus Anda lakukan ketika Anda mendarat di situs web mereka. Dua tombol ajakan bertindak ditempatkan di bagian atas situs web dan pindah ke bagian bawah layar pada perangkat seluler, membuat mereka tidak mungkin terlewatkan.
Seiring dengan slider responsif, gambar, dan font yang mudah dibaca, situs web ini melintasi semua Ts ketika datang ke desain web responsif kreatif.
20. Rally Interactive
Reli interaktif adalah contoh yang bagus dari desain berbasis tipografi yang membuktikan Anda tidak perlu gambar untuk membuat website secara visual menarik.
Di atas menjadi mudah-ke-menggunakan dan tampak hebat pada perangkat mobile dan desktop, website ini juga interaktif.
21. Brown's Court Bakery
Brown Lapangan Bakery adalah contoh lain dari situs minimalis yang tampak hebat di semua ukuran layar.
Desktop pengunjung akan melihat menu sederhana, sehingga tidak perlu ikon hamburger. Desain dua kolom menjadi ditumpuk ketika Anda melihat situs pada perangkat mobile.
22. LifeSeasons
Penggunaan besar warna dan besar tipografi dipasangkan dengan tombol ajakan untuk bertindak berwarna cerah dan grid cairan adalah karakteristik utama dari LifeSeasons' situs.
Karena ini, Anda dapat dengan mudah toko suplemen atau belajar lebih banyak tentang mereka pun perangkat yang Anda gunakan untuk melihat situs.
23. Open Wear
Tidak hanya adalah situs terbuka memakai responsif, tetapi juga menawarkan mata-permen visual dengan mikro-interaksi yang terjadi ketika Anda membawa lebih dari berbagai item menu.
Mikro-interaksi mereka terlihat bahkan pada layar yang lebih kecil, namun, mereka tersembunyi di belakang sebuah ikon hamburger tradisional sehingga mereka tidak terlalu mengganggu pada layar yang lebih kecil.
24. Philadelphia Criminal Defense Lawyer
Lloyd Long responsif website adalah contoh yang bagus dari penggunaan warna-warna cerah untuk menambahkan visual penekanan pada panggilan untuk bertindak, yang bekerja sangat baik pada perangkat mobile.
Formulir permintaan hanya sebagai baik dengan Field input yang besar dan besar, mudah-untuk-klik tombol.
25. Rival Fitness
Saingan kebugaran membuat homepage minimal dan memilih untuk pola latar belakang yang sederhana bukan gambar latar belakang yang besar pada perangkat mobile.
Anda dengan mudah dapat mengakses daerah-daerah lain website dengan tombol link yang menjadi sedikit lebih besar pada layar yang lebih kecil sementara menu bersembunyi di balik ikon hamburger.
Lebih contoh desain Web responsif
Saya berharap bahwa Anda telah menemukan koleksi ini contoh desain web responsif akan membantu. Untuk contoh desain sangat responsif, periksa posting ini roundup web desain template yang tersedia pada unsur-unsur Envato dan GraphicRiver
WordPress Themes21 + Terbaik responsif WordPress tema (untuk situs pada tahun 2018)
Desain Web responsif20 terbaik responsif HTML5 Website desain bisnis template
Mendapatkan inspirasi dengan contoh-contoh ini responsif Website Bisnis
Contoh di atas adalah hanya puncak gunung es ketika datang ke website responsif contoh, tapi kami berharap mereka telah mengilhami Anda untuk mengambil langkah pertama dan memastikan bahwa website Anda responsif. Mulailah dengan memilih template responsif tepat atau tema untuk situs Anda dan kemudian menggunakan tips desain web responsif kami untuk membuat website baru Anda dengan mudah.
