Web sitesi geliştirme teknolojisi çok yönlü bir süreçtir. Ancak yine de, tüm aşamaları iki ana bileşene ayrılabilir - işlevsel ve dış kabuk. Veya, web yöneticileri arasında geleneksel olduğu gibi, sırasıyla arka uç ve ön uç. Web sitelerini web geliştirme stüdyolarından sipariş eden insanlar genellikle saf bir şekilde yalnızca işlevselliğe odaklanmaya değer olduğuna inanırlar ve bu doğru karar olacaktır. Ancak bu, çok, çok nadir durumlarda, genellikle beta testi aşamasındaki başlangıç projeleri için geçerlidir. Aksi takdirde, grafik tasarımın ve kullanıcı arayüzünün web geliştirme standartlarına uyması ve kullanışlı olması yeterlidir.
Arayüz tasarımcısının veya tasarımcısının karşılaştığı ilk köşe taşı, site düzeninin genişliğidir. Sonuçta, bunun için arayüzler çizmek gerekiyor. Tamamen sezgisel olarak, iki yaklaşım ortaya çıkar - ya her popüler ekran çözünürlüğü için ayrı düzenler yapın ya da tüm ekranlar için sitenin bir sürümünü oluşturun. Ve her iki seçenek de yanlış olacak, ama önce ilk şeyler.
Piksel cinsinden standart web sitesi genişliğiRunet için
Uyarlanabilir mizanpajın geliştirilmesinden önce, bin piksel genişliğinde bir sitenin geliştirilmesi kitlesel bir fenomendi. Bu rakam basit bir nedenden dolayı seçildi - site herhangi bir ekrana sığacak şekilde. Ve bunun kendi mantığı var, ancak bir kişinin masaüstünde hala en az bir HD monitör olduğunu varsayalım. Bu durumda, düzeniniz ekranın ortasında her şeyin bir yığın halinde birbirine yapışmış olduğu küçük bir şerit gibi görünecek ve yanlarda kullanılmayan devasa bir alan var. Şimdi bir kişinin 800px geniş ekranlı bir tabletten web sitenize eriştiğini ve ayarlarda "Tüm web sitesini göster" seçeneğinin işaretli olduğunu varsayalım. Bu durumda siteniz de ekrana sığmayacağı için yanlış görüntülenecektir.
Bu düşüncelerden yola çıkarak, yerleşim için sabit bir genişliğin kesinlikle bizim için uygun olmadığı ve başka bir yol aramamız gerektiği sonucuna varabiliriz. Her ekran genişliği için ayrı bir düzen fikrini inceleyelim.
Tüm durumlar için düzenler
Piyasadaki tüm ekran boyutları için düzenler oluşturmayı bir strateji olarak seçtiyseniz, siteniz tüm İnternet'teki en benzersiz site olacaktır. Ne de olsa, bugün her seçenek için ince ayar yapmaya çalışarak tüm cihaz yelpazesini kapsamak imkansız. Ancak monitörlerin ve cihaz ekranlarının en popüler çözünürlüklerine odaklanırsanız, fikir fena değil. Tek dezavantajı finansal maliyetlerdir. Sonuçta, bir arayüz tasarımcısı, bir tasarımcı ve bir kodlayıcı aynı işi 5-6 kez yapmaya zorlanırsa, proje maliyeti olacaktır.başlangıçta bütçelenen fiyattan orantısız şekilde yüksek.
Bu nedenle, yalnızca tek sayfalık siteler, amacı tek bir ürün satmak ve bunu iyi yapmak olan farklı ekranlar için çok sayıda sürümle övünebilir. Peki, bu açılışlardan birine değil de çok sayfalı bir siteye sahipseniz, daha fazlasını düşünmelisiniz.
En Popüler Site Boyutları
İki uç nokta arasındaki bir uzlaşma, düzeni üç veya dört ekran boyutu için oluşturuyor. Bunların arasında, mobil cihazlar için bir düzen olmalıdır. Gerisi küçük, orta ve büyük masaüstü ekranlarına uyarlanmalıdır. Sitenin genişliği nasıl seçilir? Aşağıda, çeşitli cihaz ekran çözünürlüklerinin popülerlik dağılımını ve bu göstergenin dinamiklerini gösteren Mayıs 2017 için HotLog hizmet istatistiklerini sunuyoruz.
Tablodan kullanmak istediğiniz sitenin boyutunu nasıl belirleyeceğinizi öğrenebilirsiniz. Ek olarak, günümüzde en yaygın formatın 1366 x 768 piksellik bir ekran olduğu sonucuna varabiliriz. Bu tür ekranlar bütçe dizüstü bilgisayarlarına kurulur, bu nedenle popülerlikleri doğaldır. Bir sonraki en popüler monitör, videolar, oyunlar ve dolayısıyla web sitesi düzenleri oluşturmak için altın standart olan Full HD monitördür. Tabloda ayrıca, mobil cihazların 360 x 640 piksel çözünürlüğünü ve bundan sonra masaüstü ve mobil ekranlar için çeşitli seçenekleri görüyoruz.
Tasarım düzeni
Yaniİstatistikleri analiz ettikten sonra, optimum site genişliğinin 4 varyasyonu olduğu sonucuna varabiliriz:
- 1366 piksel genişliğinde dizüstü bilgisayar sürümü.
- Tam HD sürüm.
- Küçük masaüstü monitörlerinde görüntülemek için 800 piksel genişliğinde bir düzen.
- Sitenin mobil versiyonu - 360 piksel genişliğinde.
Site için oluşturulan kaynak için hangi boyutu kullanacağımıza karar verdiğimizi varsayalım. Ancak böyle bir proje yine de maliyetli olacaktır. Öyleyse, bu sefer sabit bir genişlik kullanmadan daha fazla seçeneğe bakalım.
Düzeni esnek hale getirme
Yalnızca minimum ekran boyutuna uyum sağlamaya değer olduğunda alternatif bir yaklaşım vardır ve site boyutlarının kendisi yüzdelere göre belirlenir. Aynı zamanda menüler, düğmeler ve logo gibi arayüz öğeleri, piksel cinsinden ekran genişliğinin minimum boyutuna odaklanarak mutlak değerlerde ayarlanabilir. Aksine içerikli bloklar, ekran alanının genişliğinin belirtilen yüzdesine göre gerilecektir. Bu yaklaşım, sitelerin boyutunu tasarımcı için bir sınırlama olarak algılamayı bırakmanıza ve bu nüansı ustaca aşmanıza olanak tanır.
Altın oran nedir ve web sayfası düzenine nasıl uygulanabilir?
Rönesans'ta bile birçok mimar ve sanatçı, eserlerine mükemmel şekil ve orantı kazandırmaya çalıştı. Böyle bir oranın değerleriyle ilgili soruların cevapları için tüm bilimlerin kraliçesine döndüler - matematik.
Antik çağlardan beri gözümüzün en doğal ve zarif olarak algıladığı bir oran icat edildi,çünkü doğada her yerde bulunur. Böyle bir oranın formülünü keşfeden, Phidias adında yetenekli bir antik Yunan mimarıydı. Oranın büyük kısmı küçük olanla ilgiliyse, bütün daha büyük olanla ilgiliyse, o zaman böyle bir oranın en iyi görüneceğini hesapladı. Ancak nesneyi asimetrik olarak bölmek istiyorsanız durum budur. Bu orana daha sonra altın bölüm adı verildi, bu da dünya kültür tarihi için önemini hala abartmıyor.
Web tasarımına geri dön
Çok basit - altın oranı kullanarak insan gözünü mümkün olduğunca memnun edecek sayfalar tasarlayabilirsiniz. Altın oran formülünün tanımına göre hesaplayarak 1, 6180339887 … irrasyonel sayısını elde ederiz, ancak kolaylık olması için 1, 62 yuvarlatılmış bir değer kullanabiliriz. Bu, sayfamızın bloklarının 62 olması gerektiği anlamına gelecektir. Kullanmakta olduğunuz site için oluşturulan kaynağın boyutu ne olursa olsun, toplamın % ve % 38'i. Bu şemada bir örnek görebilirsiniz:
Yeni teknolojileri kullanın
Modern web sitesi düzeni teknolojileri, bir planlayıcı ve tasarımcı fikrini doğru bir şekilde iletmeyi mümkün kılar, böylece artık İnternet teknolojilerinin başlangıcında olduğundan daha cesur fikirleri uygulamaya paranız yetebilir. Artık sitenin boyutunun ne olması gerektiği konusunda çok düşünmenize gerek yok. Blok uyarlamalı düzen, içerik ve yazı tiplerinin dinamik olarak yüklenmesi gibi şeylerin ortaya çıkmasıyla, web sitesi geliştirme çok daha keyifli hale geldi. Sonuçta, bu teknolojilerhala orada olmalarına rağmen daha az kısıtlama. Ama bildiğiniz gibi, sınırlar olmadan sanat da olmazdı. Gerçekten yaratıcı bir tasarım yaklaşımı kullanmanızı öneririz - altın oran. Bununla, şablonlarınızda hangi site boyutlarını ayarlarsanız ayarlayın, çalışma alanını etkili ve güzel bir şekilde doldurabilirsiniz.
Sitenin çalışma alanı nasıl artırılır
Tüm kullanıcı arayüzü öğelerini küçük bir düzene sığdırmak için yeterli alana sahip olmama ihtimaliniz yüksek. Bu durumda, daha önce olduğundan daha yaratıcı, hatta daha yaratıcı düşünmeye başlamanız gerekecek.
Açılır menüde gezinmeyi gizleyerek sitede maksimum boş alan. Bu yaklaşımı sadece mobil cihazlarda değil masaüstlerinde de kullanmak mantıklı. Sonuçta, kullanıcının her zaman sitenizde hangi başlıkların olduğuna bakmasına gerek yok - içerik için geldi. Ve kullanıcının isteklerine saygı duyulmalıdır.
Menüyü gizlemenin iyi bir yolu aşağıdaki düzendir (fotoğraf aşağıdadır).
Kırmızı alanın üst köşesinde, tıklandığında menüyü küçük bir simgeye gizleyecek ve kullanıcıyı web sitesinin içeriğiyle baş başa bırakacak bir çarpı işareti görebilirsiniz.
Ancak, bu isteğe bağlıdır, her zaman görünür olacak olan navigasyonu bırakabilirsiniz. Ancak onu sadece sitedeki popüler bağlantıların bir listesini değil, güzel bir tasarım öğesi yapabilirsiniz. Metin bağlantılarına ek olarak ve hatta metin bağlantılarının yerine sezgisel simgeler kullanın. aynısısitenizin kullanıcının cihazındaki ekran alanını daha verimli kullanmasına olanak tanır.
En iyi web sitesi duyarlıdır
Site için hangi düzeni seçeceğinizi bilmiyorsanız, o zaman her şey sizin için basit. Geliştirme maliyetlerinden tasarruf etmek ve aynı zamanda bazı cihazların zayıf yerleşimi nedeniyle hedef kitlenizi kaybetmemek için duyarlı tasarım kullanın.
Duyarlı tasarım, farklı cihazlarda eşit derecede iyi görünen bir tasarımdır. Bu yaklaşım, sitenizin bir dizüstü bilgisayarda, hatta bir tablette, hatta bir akıllı telefonda bile anlaşılır ve kullanışlı olmasını sağlayacaktır. Bu efekt, ekranın çalışma alanının genişliğini otomatik olarak değiştirerek elde edilir. Siteniz için duyarlı stil sayfaları kullanarak mümkün olan en iyi kararı vermiş olursunuz.
Duyarlı tasarım ile web sitesi sürümleri arasındaki fark nedir
Duyarlı tasarım, sitenin mobil sürümünden farklıdır, çünkü ikinci durumda kullanıcı masaüstünden farklı bir html kodu alır. Bu hem sunucu performans optimizasyonu hem de arama motoru optimizasyonu açısından bir dezavantajdır. Ayrıca, sitenin farklı sürümleri için istatistikleri hesaplamak daha da zorlaşıyor. Uyarlanabilir yaklaşımın bu dezavantajları yoktur.
Çeşitli cihazlar için duyarlılık, belirtilen genişliğin belirli bir yüzdesine sahip bir düzen aracılığıyla veya blokları kullanılabilir alana aktararak (akıllı telefonda dikey düzlemde) elde edilir.masaüstünde yatay olarak) veya farklı ekranlar için ayrı düzenler oluşturma.
Eğiticilerimizde duyarlı tasarım ve geliştirme hakkında daha fazla bilgi edinin.
