Standart ölçüler siteler: özellikler, gereksinimler ve öneriler

web sitelerinin Teknoloji geliştirme - Çok çok yönlü süreci. fonksiyonel ve bir dış kılıf - Yine tüm aşamaları iki ana bileşenden ayrılabilir. Ya da, orta webmaster sırasıyla Bey sonu ve Ön Uç olduğu gibi. genellikle, web geliştirme stüdyoları kendi web sitelerini satın İnsanlar safça sadece fonksiyonel odaklanmak için gerekli olduğuna inanıyoruz ve bunun doğru bir karar olacaktır. Ama bu genellikle beta testi aşamasında projelerin start-up için, çok, çok nadir durumlarda doğrudur. Grafik tasarım ve kullanıcı arayüzü geri kalanı sadece web geliştirme standartlarına uygun ve rahat olmak zorundadırlar.

arayüz tasarımcısı veya tasarımcı bakan ilk taşı - site düzeni genişliğidir. Sonuçta, onun için arayüzleri çizmek gerekir. Sezgisel iki yaklaşım vardır - ya popüler ekran çözünürlükleri her biri için ayrı düzenleri yapmak, ya da tüm haritalar için sitenin bir sürümünü oluşturabilirsiniz. Her iki seçenek de yanlış olabilir, ama ilk ilk şey olacaktır.

Hiç gerekir site için piksel cinsinden Standart genişlik

adaptif düzen kitle fenomeninin gelişiminden önce geniş piksel binlerce sitenin gelişme olmuştur. Bu rakam basit bir nedenden dolayı seçildi - Site herhangi bir ekranda yerleştirildi söyledi. Ve orada belli bir mantık, ama en bir kişinin hala masaüstünde en az HD monitör olduğunu varsayalım. Bu durumda, sizin düzen her şey tek bir yığın kalıplı ekranın ortasında küçücük şeridi gibi görünüyor ve büyük olmayan alan tarafta olacak. Şimdi bir kişi genişliğinde 800 piksel bir ekran ile bir tablet aracılığıyla web sitesine geldi ve ayarlarında kontrol edilir varsayalım "Web siteyi tam sürümünü göster." basitçe ekrana sığmayan Bu durumda, web sitenizin de, yanlış görüntülenecektir.

Bu hususlardan, biz düzeni için bir sabit genişlikli, sadece sığmayan sonucuna varabiliriz ve başka bir yol bulmak istiyoruz. birbirlerinin ekran genişliği için ayrı bir düzen fikrini analiz edelim.

Her durum için Düzenleri

Eğer tüm ekran piyasada mevcut boyutları için düzenleri oluşturmak için bir strateji olarak seçmiş, sonra sitenizin internette en çok benzersiz olacaktır. Sonuçta, bugün her seçenek için kesin bir ayar yapmak amacıyla cihazların tüm kullanıma basitçe mümkün değildir. En popüler monitör çözünürlüğü ve ekran cihazlara odaklanırken Ama eğer fikrin iyidir. Onun tek dezavantajı - mali maliyetler. tasarımcı arayüz tasarımcısı ve kodlayıcı aynı işi gerçekleştirmek için 5 ya da 6 kez zorunda kalacak ne zaman Sonuçta, proje başlangıçta bütçe fiyatlarla dikilmiş orantısız mal olacak.

tek bir ürün satmak ve iyi yapmak emin olmak için - Dolayısıyla farklı ekranlar için sürümleri bolluğu, amacı siteleri-odnostranichniki dışında olabilir sahiptir. O Landing biri değilsin buysa, bir çok site, daha da makul hale gelmektedir.

sitelerin en popüler boyutları

İki uç arasında bir uzlaşma üç ya da dört için düzen bir şekildir ekran boyutları. Bunlar arasında, bir adet mobil cihazlar için bir düzen olmalıdır. dinlenme, küçük orta ve büyük masaüstü ekran için uyarlanması gerekmektedir. Nasıl sitenin genişliğini seçmek için? bize cihazın çeşitli ekran çözünürlüğü popülaritesi dağılımını, hem de bu göstergenin değişimin dinamiklerini gösteren, Mayıs 2017 için hizmet istatistiklerini HotLog mevcut görebilirsiniz.

tablosundan o Kullanmak istediğiniz sitenin boyutunu belirlemek öğrenmek mümkündür. Buna ek olarak, en yaygın biçimi bugün 768 puan 1366 yılında ekran olduğu sonucuna varılabilir. Bu ekranlar bir bütçe laptop yüklenir, böylece onların popülerlik doğaldır. Bir sonraki en popüler sitesi düzenleri oluşturmak için, bu nedenle, film, oyun için altın standarttır ve bir Full HD monitör vardır. Bundan başka gördüğümüz tabloda daha sonra mobil cihazları 360 x 640 piksel ve aynı zamanda masaüstü çeşitli düzenlemelerini ve mobil ekranlar izin verir.

tasarım düzeni

Bu nedenle, istatistiksel analiz ettikten sonra, sitenin uygun genişliği 4 varyasyonları vardır olduğu sonucuna varabiliriz:

1. genişliğinde 1366 piksel Sürüm dizüstü bilgisayarlar.
2. Tam HD-versiyonu.
3. küçük masaüstü monitörlerde ekran için genişlik boyutu düzeninde 800 piksel.
4. genişliğinde 360 piksel - Sitenin Mobil versiyonu.

Size site için oluşturulan kaynak kodunun boyutunu kullanmak istediğiniz karar varsayalım. Ama böyle bir proje hala masraflı olacaktır. Yani daha fazla seçenek, sabit genişlikte kullanılmadan bu kez düşünün.

Esnek bir düzen yapın

Orada biz ekranın minimum boyut ayarlamak için yeterlidir alternatif bir yaklaşımdır ve sitelerin büyüklüğü yüzde istenecektir. Bu durumda, bu tür menüler, düğmeler ve logolar olarak arayüz elemanları, piksel olarak ekranın genişliğinin asgari boyutta odaklanarak, mutlak terimlerle tanımlanabilir. içeriğine sahip bloklar, tam tersine, ekran alanının genişliğinin yüzde belirtilen uygun gerilir. Bu yaklaşım tasarımcı ve bu nüans yenmek için yetenek için kısıtlamaları olarak sitenin boyutunu algılayamaz verir.

Ne altın oran nedir ve nasıl düzene web sayfalarını kullanmak?

Hatta Rönesans birçok mimar ve sanatçılar onun kreasyonlar mükemmel bir şekil ve oranda vermeye çalıştım. Böyle oranlarda etkileri hakkında soruların yanıtları için, hepsi bilimlerin kraliçesi döndü - matematik.

Hiç antik gün doğada her yerde olduğu için bizim göz, en doğal ve zarif olarak algıladığı oranda tarafından icat edilmiştir beri. Bu oranın formülün Discoverer Phidias adlı yetenekli bir Yunan mimar oldu. Bir bütün olarak daha büyük bir sağladığı gibi oranlarda en düşük ile ilgili ise, o zaman bu oran da görünecek hesaplanır. Ancak bu durumda, eğer asimetrik nesneyi bölmek istiyorum. Bu oran daha sonra yine dünya kültür tarihi için önemini olduğundan fazla değil altın oranı denilen hale geldi.

web tasarım geri dönelim

Çok basit -, insan göze en hoş olacak sayfaları tasarlayabilirsiniz altın oranı kullanarak. Altın bölümün formüle göre hesaplanan, bulduğumuz irrasyonel sayı 1,6180339887 ... ama kolaylık sen 1.62 yuvarlatılmış değerini kullanabilirsiniz. Bu bizim sayfa blokları olursa olsun, kullandığınız site için kaynak kodunu oluşturulan boyutu ne% 62 ve bütünün% 38, olması gerektiği anlamına gelecektir. Eğer aşağıdaki şemada görebilirsiniz Örnek:

Yeni teknolojilerin kullanımı

Modern teknoloji düzeni web siteleri artık internet teknolojisinin şafak vakti daha cesur fikirlerin uygulanmasını göze böylece doğru, tasarımcı ve tasarımcı fikirlerini iletmek için izin verir. Artık bir sitenin boyutu ne olması gerektiğini üzerinde bulmaca fazlasına gerek. Blok gibi şeylerin çıkışıyla adaptif düzeni, içerik ve yazı tiplerinin dinamik yükleme, web sitesi geliştirme birçok kez daha zevkli hale geldi. Sonuçta, bu teknolojiler olmasına rağmen, daha az kısıtlamalar vardır. Ama bildiğiniz gibi, sınırlama olmaksızın, hiçbir sanat olmazdı. altın bölüm - Size tasarımı için gerçekten yaratıcı bir yaklaşım kullanmanızı öneririz. Bununla beraber, verimli ve güzel olursa olsun şablonlarınızda sorulan hangi boyutta veya siteler, çalışma alanını doldurmak mümkün olacak.

Çalışma alanı sitesini nasıl arttırılır

Muhtemelen küçük boyutu düzeninde tüm arayüz elemanlarının yerleştirilmesi için yeterli alan olmayacağını bulunmaktadır. Bu durumda, yaratıcı düşünmeye başlamak, ya da daha önce mi daha daha yaratıcı gerekecektir.

Açılır menüde navigasyon gizleme mümkün olduğunca sitede Maksimum yukarı boş alan. Bu yaklaşım, sadece mobil değil, aynı zamanda masaüstünde kullanmak mantıklı. Sonuçta, kullanıcı sitenizde başlıkları neler bakmak için her zaman ihtiyacı yoktur - bu içerik için geldi. Bir kullanıcı saygı istemektedir.

menüsünü gizlemek için iyi bir yol örneği aşağıdaki düzen (aşağıda gösterilmiştir) 'dir.

Üst yılında kırmızı köşesinde alanı, web sitesi içeriği ile yalnız kullanıcıyı bırakarak küçük bir simge içinde gizler menüsünü tıklayın çapraz görebilirsiniz.

Ancak, bu isteğe bağlıdır, sen görünürde her zaman navigasyon bırakabilir. Ama bunun güzel bir tasarım öğesi, popüler sitesindeki bağlantıların sadece bir liste yapabilirsiniz. bağlantıları metin veya hatta bunların yerine ek olarak sezgisel simgeleri kullanın. Aynı zamanda cihazlarda ekran alanı daha verimli kullanmak için sitenizi sağlayacaktır.

En iyi Web sitesi - adaptif

Tüm sadece sizin için, site için bir düzen seçmek için hangisinin bilmiyorsanız. geliştirme maliyetlerinden tasarruf ve aynı zamanda çünkü bazı cihaz için kötü düzen seyirci kaybetmemek için, esnek web tasarımı.

Adaptif eşit derecede iyi farklı cihazlarda görünen bir tasarıma çağırdı. Bu yaklaşım sitenizin hatta bir akıllı telefon üzerinde en az tablette, hatta bir dizüstü bilgisayar için açık ve kolay olmasını sağlayacaktır. Bu etki, ekran genişliğinin çalışma alanına otomatik değişiklikler nedeniyle elde. site için adaptif stil sayfaları kullanarak, mümkün doğru kararı alıyor.

Ne web sitenizin farklı sürümleri mevcudiyeti adaptif tasarımını ayırır

Duyarlı tasarım masaüstünden farklıdır ikinci durumda, kullanıcı html-kodu alır böylece mobil sitesine farklıdır. Bu sunucunun performansını, hem de arama motoru optimizasyonu optimize açısından bir dezavantajdır. Buna ek olarak, daha zor sitenin farklı versiyonlarına göre istatistiklerini dikkate olur. Bir uyarlanabilir yaklaşım eksiklikleri yoksundur.

Farklı cihazlar için Adaptasyon bağlı düzeni genişliği veya yüzdeler kullanılabilir alan taşıma blokları ile (düşey düzlemde yerine bir masaüstü yatay akıllı telefon) ya da çeşitli ekranlarda, tek tek düzenleri için elde edilir.

Sen Duyarlı tasarımla ilgili daha fazla bilgi edinmek ve kitaplardan yapabilirsiniz gelişebilir.