Anda bahkan mungkin tidak menyadari fakta bahwa situs Anda tidak ditampilkan dengan benar di layar dengan resolusi 320x480 dan semua pembaca dengan ponsel cerdas meninggalkan blog Anda tanpa mempelajari informasi di dalamnya.

Semoga menyenangkan di sana informasi menarik(untuk blog), paling banyak harga rendah untuk produk (untuk toko online), super kursus yang bermanfaat, namun jika halamannya bengkok, tombol-tombolnya tidak terlihat, baris-baris teksnya saling tumpang tindih, maka dengan tampilan ini Anda tidak akan melihat halaman penjualan.

Oleh karena itu, penting untuk menganalisis statistik dan mengidentifikasi izin dari mana pengunjung keluar dan mengambil tindakan untuk memperbaiki bug.

Statistik resolusi layar

Semuanya jelas di sana, masukkan URL situs:

Sekarang Anda dapat memilih berbagai pilihan. Apalagi caranya resolusi standar ponsel pintar (tab 3):

Jadi, masukkan resolusi secara acak dalam angka (tab 5):

Saya telah menunjukkan cara menggunakan alat ini, sekarang berimprovisasi untuk situs Anda.

Cara memperbaiki kesalahan

Kesimpulannya, muncul pertanyaan: “Mengapa saya memerlukan semua ini, mempelajari browser, izin, dll?”

Jawabannya sederhana - untuk meningkatkan lalu lintas dan penjualan.

Dalam kasus saya, kerugiannya minimal, kurang dari 2% pengunjung tersisa dalam setahun karena blog saya ditampilkan dengan buruk di perangkat tempat mereka mengakses situs. Ini adalah angka yang kecil, angka Anda mungkin lebih tinggi atau lebih rendah, namun Anda perlu memahami bahwa tetesan seperti itu dapat menambah aliran kerugian yang besar.

Penulis situs mungkin berpikir bahwa situs tersebut memiliki desain yang buruk, kegunaan, tidak tahu cara menulis artikel dengan benar, atau memiliki produk yang buruk, harga tinggi, tapi nyatanya alasannya mungkin berbeda. Jika Anda mengetahuinya, maka masalahnya bisa diselesaikan, ingat ini.

Jika situs Anda memiliki banyak masalah resolusi, kemungkinan besar templatenya tidak responsif atau kualitas rendah dan perlu diganti. Harap dicatat bahwa lalu lintas seluler hanya akan meningkat selama bertahun-tahun, jadi kira-kira templat responsif(atau situs versi seluler) perlu dipikirkan sedini mungkin.

Saya membicarakan topik ini secara rinci di sini:

Saya ingin mendengar tentang hasil analisis situs Anda, resolusi layar mana yang paling banyak mengalami kegagalan?

Jika Anda memiliki pertanyaan, tulis di komentar, saya pasti akan membantu.

Catatan

Pertama, sedikit tentang teorinya. Resolusi layar mungkin berbeda-beda tergantung pada perangkat yang Anda gunakan. Beberapa pengguna secara keliru percaya bahwa ukuran layar dan resolusi layar monitor adalah hal yang sama. Misalnya saja ukuran layar dan nya resolusi maksimal sama dengan 1600 x 1200, dan pengguna dapat mengatur resolusinya, misalnya 800 x 600. Secara alami, gambar di layar akan terbentuk sesuai dengan prinsip yang ditetapkan oleh pengguna sendiri. Alhasil, ukuran dan resolusi layar merupakan konsep yang sedikit berbeda. Untuk mendapatkan gambar yang sempurna, Anda perlu mengatur resolusi maksimum yang didukung monitor Anda dan kemudian gambar akan memiliki kualitas tertinggi.

Berapa resolusi layar yang ada?

Hari ini ada jumlah yang sangat besar monitor dan jumlah resolusi yang sama. Perlu diperhatikan bahwa semua perangkat ini memiliki rasio aspek yang berbeda-beda, misalnya: 4:3, 5:4, 16:9, 16:10 dan masih banyak lainnya. Perangkat layar lebar dengan rasio aspek 21:9 banyak diminati. Menggunakan perangkat serupa Ini tidak praktis saat ini, karena paling cocok untuk menonton film yang direkam di CinemaScope. Hal ini terkait langsung dengan fakta bahwa jika Anda menyetel resolusi berbeda pada monitor tersebut, misalnya FullHD (1920 x 1080p), maka bilah hitam lebar akan tetap ada di tepi monitor.

Mengenai resolusi monitor itu sendiri, mereka dibagi satu sama lain, seperti yang Anda duga, berdasarkan rasio aspek. Berikut ini yang disorot: Untuk rasio aspek 4:3 -1024x768, 1280x1024, 1600x1200, 1920x1440, 2048x1536. Untuk rasio aspek 16:9: 1366x768, 1600x900, 1920x1080, 2048x1152, 2560x1440, 3840x2160. Untuk rasio aspek 16:10: 1280x800, 1440x900, 1600x1024, 1680x1050, 1920x1200, 2560x1600, 3840x2400. Resolusi terpopuler saat ini adalah: 1920x1080, 1280x1024, 1366x768.

Perlu dicatat bahwa semakin tinggi resolusi layar, semakin baik gambarnya, tetapi ukurannya bisa sangat kecil dan beberapa pemilik perangkat tersebut harus mengubahnya ke yang lebih kecil agar dapat melihat apa pun di monitor. Akibatnya, tentu saja, setiap orang dapat melihat segera sebelum membeli perangkat di toko, jenis gambar apa yang akan ditampilkan dan apakah cocok untuk mereka.

Saat ini di pasar investasi ada banyak sekali produk dari berbagai bidang. Kami pikir ada baiknya Anda menarik perhatian Anda ke pasar perangkat seluler yang berkembang pesat. Tidak, tidak akan ada ulasan di sini, kami ingin melihat pasar ini melalui prisma karakteristik layar. Ponsel, tablet, laptop sudah tertanam kuat dalam kehidupan kita; nyatanya, kita menghabiskan lebih banyak waktu bersama mereka dibandingkan dengan orang-orang yang hidup di sekitar kita.

Apa yang dikatakan statistik

Kami menghabiskan waktu lama mempelajari laporan statistik berbagai metrik dari situs mitra. Menonton spesifikasi teknis perangkat seluler paling populer. Situasinya adalah perangkat besar mulai mendominasi pasar di antara semua perangkat seluler. ponsel, diagonalnya dimulai dari 5,5" dan berakhir pada 6,2". Mari tambahkan di sini keinginan Apple untuk merilis produk dengan diagonal 6,5" ke pasar pada akhir tahun ini. Dan otak kita mulai kesulitan mencerna kebutuhan akan teknologi tersebut. Anda tidak dapat memasukkannya ke dalam saku Anda lagi, dan itu tidak akan muat di setiap tas. Namun, jika Anda melihat cara penggunaan telepon telepon pintar masa kini. maka menjadi jelas alasannya. Ini adalah fakta yang aneh: telepon tampaknya diciptakan untuk itu komunikasi suara, dan semakin banyak digunakan sebagai perangkat untuk berselancar di Internet. Sederhananya - tren modern- kualitasnya bagus telepon genggam dengan layar, kamera, dan Internet yang luar biasa. Ini adalah “pemanen” yang nyaman, Anda hanya perlu mengisi dayanya sekali sehari.

Sekarang tentang izin. Resolusi paling populer tetap 1366*738 dan 1920*1080. Ini bukan resolusi seluler. Namun resolusi ponsel paling populer telah menjadi 360*640. Faktanya, ini adalah tiga teratas.

Tabel lengkap informasi pasarnya adalah sebagai berikut:

Kesimpulan

Pasar perangkat seluler tidak tinggal diam. Saat ini kita perlu mencari opsi untuk berinvestasi di pasar ini.

Sebuah proses yang sangat beragam. Namun tetap saja, semua tahapannya dapat dibagi menjadi dua komponen utama - fungsionalitas dan kulit terluar. Atau, seperti kebiasaan di kalangan webmaster, masing-masing back end dan front end. Orang-orang yang memesan situs web mereka dari studio pengembangan web sering kali secara naif percaya bahwa mereka harus fokus hanya pada fungsionalitas, dan memang begitu keputusan yang tepat. Namun hal ini berlaku dalam kasus yang sangat, sangat jarang terjadi, biasanya untuk proyek startup pada tahap pengujian beta. Jika tidak desain Grafis dan antarmuka pengguna harus nyaman, namun kita tidak boleh melupakan masa depan situs, dengan mempertimbangkannya.

Landasan pertama yang dihadapi oleh desainer front-end, atau desainer, adalah lebar tata letak situs. Bagaimanapun, perlu untuk menggambar antarmuka untuk itu. Secara intuitif, ada dua pendekatan yang muncul - membuat tata letak terpisah untuk setiap resolusi layar populer, atau membuat satu versi situs untuk semua tampilan. Dan kedua opsi tersebut salah, tetapi yang terpenting adalah yang utama.

Lebar situs web standar dalam piksel untuk Runet

Sebelum berkembangnya tata letak adaptif, perkembangan website dengan lebar seribu piksel merupakan fenomena yang tersebar luas. Angka ini dipilih karena satu alasan sederhana - agar situs tersebut muat di layar mana pun. Dan ini memiliki logikanya sendiri, tetapi anggap saja seseorang masih memiliki setidaknya satu monitor HD di desktopnya. Dalam hal ini, tata letak Anda akan tampak sebagai garis kecil di tengah layar, di mana semuanya menempel dalam satu tumpukan, dan di sisinya terdapat ruang besar yang tidak terpakai. Sekarang anggaplah seseorang mengunjungi situs Anda dari tablet dengan lebar layar 800 piksel, dan di pengaturan ada tanda centang "Tampilkan versi lengkap situs web". Dalam hal ini, situs Anda juga tidak akan ditampilkan dengan benar, karena tidak muat di layar.

Dari pertimbangan ini, kita dapat menyimpulkan bahwa lebar tetap untuk tata letak jelas tidak cocok untuk kita dan kita perlu mencari metode lain. Mari kita jelajahi gagasan tata letak terpisah untuk setiap lebar layar.

Tata letak untuk semua kesempatan

Jika Anda memilih strategi untuk membuat tata letak untuk semua ukuran layar yang ada di pasar, maka situs Anda akan menjadi yang paling unik di seluruh Internet. Lagi pula, saat ini mustahil untuk mencakup seluruh rangkaian perangkat, mencoba menyempurnakan setiap opsi. Namun jika Anda fokus pada resolusi monitor dan layar perangkat yang paling populer, maka idenya tidak buruk. Satu-satunya kelemahannya adalah biaya finansial. Lagi pula, ketika perancang antarmuka, perancang, dan perancang tata letak dipaksa untuk melakukan pekerjaan yang sama sebanyak 5 atau 6 kali, biaya proyek akan jauh lebih besar daripada harga yang dianggarkan semula.

Oleh karena itu, ia menawarkan banyak sekali versi di bawah ini layar yang berbeda Mungkin hanya situs satu halaman yang tujuannya menjual satu produk dan memastikan melakukannya dengan baik. Nah, jika Anda tidak memiliki salah satu halaman arahan ini, tetapi situs multi-halaman, ada baiknya berdiskusi lebih lanjut.

Ukuran situs web paling populer

Kompromi antara kedua ekstrem tersebut adalah dengan merender tata letak untuk tiga atau empat. Di antaranya, salah satunya harus berupa tata letak untuk perangkat seluler. Selebihnya harus disesuaikan untuk layar desktop kecil, sedang, dan besar. Bagaimana cara memilih lebar situs? Di bawah ini adalah statistik dari layanan HotLog untuk Mei 2017, yang menunjukkan distribusi popularitas berbagai resolusi layar perangkat, serta dinamika perubahan indikator ini.

Dari tabel tersebut Anda dapat mempelajari cara menentukan ukuran situs yang akan digunakan. Selain itu, kita dapat menyimpulkan bahwa format yang paling umum saat ini adalah layar 1366 x 768 piksel. Layar seperti itu dipasang di laptop murah, jadi popularitas mereka wajar saja. Yang paling populer berikutnya adalah Monitor HD penuh, yang merupakan standar emas untuk video, game, dan juga untuk membuat tata letak situs web. Lebih lanjut dalam tabel kita melihat resolusi perangkat seluler 360 x 640 piksel, serta berbagai opsi untuk desktop dan layar ponsel setelah dia.

Merancang tata letak

Jadi, setelah menganalisis statistiknya, kita dapat menyimpulkan bahwa lebar website yang optimal memiliki 4 variasi:

1. Versi laptop dengan lebar 1366 piksel.
2. Versi HD penuh.
3. Tata letaknya memiliki lebar 800 piksel untuk ditampilkan pada monitor desktop kecil.
4. Versi seluler situs ini memiliki lebar 360 piksel.

Katakanlah kita telah memutuskan ukuran apa yang akan digunakan untuk membuat sumber situs. Namun proyek seperti itu masih mahal. Jadi mari kita lihat beberapa opsi lainnya, kali ini tanpa menggunakan lebar tetap.

Membuat tata letaknya fleksibel

Ada pendekatan alternatif ketika Anda hanya perlu beradaptasi ukuran minimum layar, dan ukuran situs itu sendiri akan ditetapkan sebagai persentase. Pada saat yang sama, menu, tombol, dan logo dapat ditentukan dalam nilai absolut, dengan fokus pada ukuran minimum lebar layar dalam piksel. Blok dengan konten, sebaliknya, akan diregangkan sesuai dengan persentase lebar area layar yang ditentukan. Pendekatan ini memungkinkan Anda untuk berhenti menganggap ukuran situs web sebagai batasan bagi perancang dan dengan terampil bermain-main dengan nuansa ini.

Apa yang dimaksud dengan rasio emas, dan bagaimana penerapannya pada tata letak halaman web?

Bahkan pada masa Renaisans, banyak arsitek dan seniman mencoba memberikan karyanya bentuk sempurna dan proporsi. Untuk jawaban atas pertanyaan tentang arti proporsi ini, mereka beralih ke ratu segala ilmu - matematika.

Sejak zaman kuno, telah ditemukan suatu proporsi yang dianggap paling alami dan anggun oleh mata kita, karena dapat ditemukan di mana-mana di alam. Penemu rumus rasio seperti itu adalah seorang arsitek Yunani kuno berbakat bernama Phidias. Dia menghitung bahwa jika bagian yang lebih besar dari suatu proporsi berhubungan dengan yang lebih kecil sebagaimana keseluruhannya berhubungan dengan yang lebih besar, maka proporsi tersebut akan terlihat dengan cara terbaik. Namun hal ini berlaku jika Anda ingin membagi objek secara asimetris. Proporsi ini kemudian disebut rasio emas, yang tetap tidak melebih-lebihkan pentingnya bagi sejarah kebudayaan dunia.

Mari kembali ke desain web

Ini sangat sederhana - dengan menggunakan rasio emas, Anda dapat mendesain halaman yang semenarik mungkin bagi mata manusia. Setelah dihitung menurut definisi rumus rasio emas, kita memperoleh bilangan irasional 1,6180339887..., namun untuk memudahkan Anda dapat menggunakan nilai yang dibulatkan yaitu 1,62. Ini berarti bahwa blok halaman kami harus 62% dan 38% dari keseluruhan, berapa pun ukuran sumber situs yang Anda gunakan. Anda dapat melihat contohnya pada diagram berikut:

Gunakan teknologi baru

Teknologi tata letak situs web modern memungkinkan penyampaian ide perancang seakurat mungkin, jadi sekarang Anda mampu menerapkan ide yang lebih berani daripada di awal teknologi Internet. Anda tidak perlu lagi memikirkan ukuran situs yang seharusnya. Dengan munculnya hal-hal seperti blok tata letak adaptif, pemuatan konten dan font yang dinamis, pengembangan situs web menjadi jauh lebih menyenangkan. Bagaimanapun, teknologi semacam itu memiliki batasan yang lebih sedikit, meskipun masih ada. Tapi seperti kita tahu, tanpa batasan tidak akan ada seni. Kami menyarankan Anda benar-benar menggunakannya kreativitas untuk desain - bagian emas. Dengan bantuannya, Anda dapat secara efektif dan indah mengisi ukuran situs apa pun yang Anda tentukan di templat Anda.

Cara menambah ruang kerja situs

Ada kemungkinan besar Anda tidak memiliki cukup ruang untuk memasukkan semua elemen UI ke dalam tata letak kecil. Dalam hal ini, Anda harus mulai berpikir kreatif atau bahkan lebih kreatif dari sebelumnya.

Anda dapat mengosongkan ruang sebanyak mungkin di situs web Anda dengan menyembunyikan navigasi di menu pop-up. Pendekatan ini logis untuk digunakan tidak hanya perangkat seluler, tetapi juga di desktop. Lagi pula, pengguna tidak perlu terus-menerus melihat kategori apa yang ada di situs Anda - dia datang untuk mencari konten. Dan keinginan pengguna harus dihormati.

Contoh cara yang baik menu sembunyikan adalah tata letak berikut (foto di bawah).

DI DALAM sudut atas di area merah Anda dapat melihat tanda silang, mengkliknya akan menyembunyikan menu menjadi ikon kecil, meninggalkan pengguna sendirian dengan konten situs web.

Namun, ini tidak perlu; Anda dapat membiarkan navigasinya, yang akan selalu terlihat. Namun Anda bisa menjadikannya elemen desain yang indah, dan bukan sekadar daftar tautan populer di situs. Gunakan ikon intuitif sebagai tambahan atau bahkan sebagai pengganti tautan teks. Ini juga akan memungkinkan situs Anda memanfaatkan ruang layar pada perangkat pengguna dengan lebih efisien.

Situs web terbaik adalah responsif

Jika Anda tidak tahu tata letak mana yang harus dipilih untuk situs web Anda, semuanya sederhana untuk Anda. Untuk menghemat biaya pengembangan tanpa kehilangan audiens karena tata letak perangkat tertentu yang buruk, gunakan desain responsif.

Desain adaptif adalah desain yang terlihat seperti perangkat yang berbeda sama baiknya. Pendekatan ini akan membuat situs Anda dapat dimengerti dan nyaman bahkan di laptop, bahkan di tablet, bahkan di smartphone. Efek ini dicapai karena perubahan otomatis lebar ruang kerja layar. Dengan menggunakan style sheet responsif untuk situs Anda, Anda menerima hasil maksimal keputusan yang tepat dari kemungkinan.

Apa perbedaan antara desain adaptif dan memiliki versi situs web yang berbeda?

Desain responsif berbeda dengan versi seluler situs yang masuk kasus terakhir pengguna menerima kode html yang berbeda dari desktop. Ini juga merupakan kelemahan dalam hal mengoptimalkan kinerja server optimasi mesin pencari. Selain itu, penghitungan statistik menjadi lebih sulit versi yang berbeda lokasi. Pendekatan adaptif tidak mempunyai kelemahan seperti itu.

Kemampuan beradaptasi untuk berbagai perangkat dicapai melalui tata letak dengan pengaturan persentase lebar, baik dengan memindahkan blok ke ruang yang tersedia (dalam bidang vertikal di ponsel cerdas, bukan secara horizontal di desktop), atau dengan membuat tata letak individual untuk layar berbeda.

Pelajari lebih lanjut tentang desain responsif dan pengembangannya Anda dapat dari buku teks.

Berdasarkan materi dari situs Deviceatlas

Mengetahui resolusi layar ponsel cerdas mana yang paling populer saat ini akan membantu Anda mengoptimalkan situs web dengan mempertimbangkan perbedaan di antara keduanya berbagai perangkat. DeviceAtlas dikumpulkan statistik penggunaan perangkat terbaru terkait masalah ini.

Resolusi layar baru di pasaran

DI DALAM beberapa tahun terakhir semua perangkat OS Android andalan memilikinya Resolusi penuh HD (1080x1920) dan QHD (1440x2560). Pada tahun 2017, beberapa perangkat dengan resolusi non-standar muncul di pasaran, terutama karena tren baru untuk layar edge-to-edge (seluruh lebar perangkat). Termasuk:

• Samsung Catatan Galaksi 8: 1440x2960 ​​piksel
• Samsung Galaxy S8: 1440 x 2960 piksel
• LG V30: 1440 x 2880 piksel
• LG G6: 1440 x 2880 piksel
• Sony Xperia XZ Premium: 3840 x 2160 piksel
• iPhone X: 1125 x 2436 piksel (baru saja diumumkan)

Tentu saja, resolusi non-standar ini belum dimasukkan dalam statistik kami. Namun, dengan satu atau lain cara, kita dapat berharap bahwa standar S8 dapat menjadi salah satu yang paling populer dalam daftar karena popularitas besar keluarga Galaxy S: misalnya, unggulan sebelumnya - S7 - menjadi perangkat Android yang paling umum. di dunia.

Resolusi layar smartphone yang paling banyak digunakan adalah 720x1280

Menurut statistik lalu lintas untuk Juli-Agustus 2017, resolusi layar paling populer pada ponsel cerdas adalah rasio 720x1280 piksel, yang digunakan pada sebagian besar ponsel kelas menengah dan kelas anggaran. Resolusi ini merupakan resolusi yang paling banyak digunakan di 11 dari 20 negara yang dianalisis, termasuk India, Italia, dan Spanyol. Diikuti oleh rasio 750x1334, yang digunakan pada rasio populer di AS, Inggris, dan Australia. model iPhone. Di Perancis dan Jerman, resolusi yang paling umum adalah Full HD pada smartphone kelas menengah dan anggaran.

Tabel tersebut menunjukkan resolusi layar ponsel cerdas terpopuler di 20 negara yang berpartisipasi dalam penelitian ini.

Grafik di bawah menunjukkan pangsa lalu lintas yang berasal dari ponsel cerdas dengan resolusi layar 720x1280 pada bulan Juli-Agustus 2017 di negara-negara yang berpartisipasi dalam penelitian ini.

Full HD mengambil alih pasar, adopsi QHD melambat

Kami juga menganalisis seberapa cepat pertumbuhan penggunaan beberapa resolusi populer sepanjang tahun - dari Q4 2016 hingga Q3 2017. Meskipun sebelumnya ada pertumbuhan aktif, penyebaran resolusi QHD (1440×2560) kini telah melambat.

Di Perancis, India, Nigeria, dan AS, perangkat QHD bahkan kehilangan pangsa pasar (-4% di negara terakhir). Selama 4 kuartal terakhir, perangkat FHD (1080x1920) telah tumbuh lebih cepat, bertambah 5-10% di Brasil, Prancis, Jepang, Polandia, Spanyol, dan AS.

Pangsa lalu lintas perangkat Full HD (1080x1920) selama 4 kuartal terakhir:

Pangsa lalu lintas perangkat QHD (1440x2560) selama 4 kuartal terakhir: