Mükemmel Tek Sayfa Web Sitesi Nasıl Tasarlanır?
Tek sayfa tasarımları, daha küçük web siteleriyle uğraşmak için mükemmel bir teknik olabilir, hatta birden fazla sayfa olmaksızın gerçekleştirilemeyeceğini düşündüğünüz bile olabilir. Tek bir sayfa sitesi kullanmanın kolaylığından, düşük bant genişliği gereksinimlerine kadar, çok büyük nedenler vardır.
Daha kısa bir siteyle uğraşıyorsanız, normalde birkaç sayfadan oluşan bir sayfa varsa, tek bir sayfayı kullanmayı düşünün ve projeyi daha kolay ve daha kullanıcı dostu hale getirip getirmeyeceğini görün. Yararları hakkında daha fazla bilgi için (ve ne zaman kullanılmıyorsa) ve takip etmeniz gereken bazı en iyi uygulamalar için okumaya devam edin.
Tek sayfa tasarımının faydaları
Açıkçası, tek sayfa tasarımları her proje için ideal değildir. Fakat olası bir uyumluluk varsa bunları kullanmanın birçok nedeni vardır.
Kullanımı sezgisel
Varsayılan olarak, tek bir sayfa sitesinde gezinmek için kullanıcının bilmesi gereken şey, nasıl kaydırılacağıdır. Okları veya diğer yön bulma ipuçlarını içerebilir, ancak nadir istisnalar dışında, sadece kaydırma, ziyaretçilerinizi bir bölümden diğerine getirecektir.
Ziyaretçilerinizin, birden fazla gezinme katmanına takılıp kalmaları için ihtiyaç duydukları şeyi sürekli arama konusunda endişelenmenize gerek kalmayacak. Sayfada birden fazla bölüm varsa, bir üstbilgi veya diğer gezinme bağlantılarının kullanılması genellikle yararlıdır, ancak bunlar olmasa bile site kullanılabilir.
Bakımı daha hızlı ve kolay olabilir
Bu bir verilen değil, iyi kodlanmış tek bir sayfa sitesi muhtemelen çok sayfalı bir siteden daha hızlı kod olacak. Tasarım süreci bazen daha az zaman alabilir, ancak bu tek sayfanın ne kadar karmaşık olacağına bağlıdır.
Tek bir sayfa sitesi, temel bir düzeniniz olduğunda, süreci hızlandıran belirli tasarım kısıtlamalarını da uygulayabilir. Çok sayfalı bir site yerine Moreso, tek sayfalık bir sitenin sorunsuz bir şekilde birlikte çalıştığı bölümlere sahip olması gerekiyor. Bu tür bir kısıtlama, neyi yapabileceğinizi ve yapamayacağınızı açıkça tanımladığınızda sayfa geliştirmeyi gerçekten hızlandırabilir.
Bakım da daha kolay olabilir. Başa çıkmak için yalnızca tek bir sayfanız olduğunda, kodunuz baştan başlamak için iyi yazılmış olduğu sürece bakım daha akıcı hale gelir.
Basitleştirmek zorundasın
Bu bir önceki noktadan oluşur. Çalışmak için yalnızca tek bir sayfanız olduğunda, işleri en önemli bileşenlerine göre basitleştirmeniz gerekir. Daha fazla sayfa ve işe yaramaz pazarlama propagandası sayfası yok. Bu noktaya hemen ulaşmak zorundasın.
Daha iyi SEO potansiyeli
Kaliteli gelen bağlantılar, bir web sitesinin arama motorlarında ne kadar iyi performans gösterdiğinin büyük bir parçasıdır. Arama motorları mutlaka bir çok site için en büyük trafik kaynağı olmasa da, genel olarak hala önemlidir.
Sadece bir sayfaya sahip olmanız durumunda, yalnızca bir sayfanın bağlantısı var. Bu, sitenin arama motorları kadar önemini artırabilir.
Öykü anlatma eylemi artırabilir
Tek sayfa siteleri genellikle çok sayfalı sitelerin iyi olmadığı bir hikaye anlatma açısı kullanır. Bu, dönüşümleri artırabilir ve ziyaretçilerin harekete geçmesine ilham verebilir.
İnsanlar hem çevrimiçi hem de kapalı hikayeleri takip etmek için kullanılır, bu nedenle bu kullanıcı deneyimi açısından belirgin avantajlar sunar. Çocukluğumuzdan beri hikayeler okuyor ve duyuyoruz, bu yüzden doğal olarak bize gelen bir şey.
Organize etmek daha kolay
Düzenlenecek daha fazla sayfa ve alt sayfa listesi yok. Artık bu sayfanın veya bu sayfanın bir ebeveyn mi yoksa bir çocuk mu olması gerektiğini merak etme. Daha fazla gezinme menüsü ve alt menü yok. Hepsi bir sayfada. Ayrıca, navigasyon bağlantılarını dahil etmeye karar verdiğinizde veya kullanıcıların sadece kaydırma yapmasına izin verip vermediğiniz ve kullanıcı deneyimine eklenip eklenmeyeceğini düşünüyorsanız. Bu, bir sitenin birden çok sayfası olduğunda bir seçenek değil.
Azaltılmış bant genişliği
Bu, artık barındırma sonundaki bir sorun kadar fazla olmasa da, bugünlerde kaç kullanıcının mobil cihazlarla sitenize eriştiğini düşünün. Sitenizin aldığı bant genişliği miktarını azaltmak, sınırlı veri planları olan kullanıcılar tarafından beğenilmektedir.
Mobil siteleri eleyin
Duyarlı tasarım, elbette, tek sayfa siteleriyle sınırlı değildir. Ancak bir site ne kadar karmaşıksa, daha duyarlı bir tasarıma sahip olsa bile, daha küçük bir ekranda iyi çalışmasını sağlamak o kadar zor olur. Tek sayfalık bir site, zorunlu olarak karmaşık değildir. Tasarımın duyarlı hale getirilmesi genellikle daha kolaydır. Basitleştirilmiş navigasyon ve benzer değişiklikler aynı zamanda küçük ekranlarda iyi çalışan bir tasarımı kolaylaştırır.
Paralaksa mı yoksa paralaksa mı?
Bakış açınıza bağlı olarak, paralaks kaydırma, ya internet için en iyi şey, ya da tarayıcılarımızda aşırı kullanışsız bir beladır. Fakat nerede olursanız olun, yakında herhangi bir zamanda ortadan kaybolacak gibi görünmüyor.
Şahsen, paralaks kaydırma için bir zaman ve bir yer varmış gibi hissediyorum. Bazı tek sayfa siteleri etkiden gerçekten faydalanabilirken, diğerleri dikkat çekicidir, ya da daha kötüsü: kullanımı zor. Buradaki anahtar, kullanmak istediğiniz paralaks kaydırma efektinin, sitenin kullanılabilirliğini artıracak bir şey olup olmadığına veya yalnızca havalı görüneceğinden dolayı kullanmak istediğinize karar vermektir.
Paralaks kaydırmayı kullanmak istediğinize karar verirseniz dikkate almanız gereken bir başka şey de JavaScript'in ya da bunu yapmak için sade bir CSS tekniğinin kullanılmasıdır. Her iki seçenek hakkında daha fazla bilgi için kaynaklar bölümüne bakın.
Tek bir sayfa sitesi ne zaman kullanılmaz
Tek sayfa sitelerine çok fazla fayda olsa da, mükemmel, tek bedenli bir çözüm değildir. Tek sayfalık bir sayfanın çok sayfalı bir sayfadan çok daha anlamlı olduğu birçok zaman varken, bir sayfa tasarımını kullanmamanız için birçok zaman vardır.
Yine de yalnızca birkaç sayfa olacak bir site kuruyorsanız, tek bir sayfa sitesi mükemmel olabilir. Her şeyi bir sayfaya yoğunlaştırmak, genel siteye daha modern bir görünüm verebilir ve yine de içeriğiyle ilgili bir ışık varsa, tek bir sayfa sitesi daha fazla maddeye sahipmiş gibi görünebilir.
Tek sayfalık sitenin bir başka yaygın örneği de lansman öncesi web sitesidir. Bunlar genellikle, çoğu zaman bir bülten kaydı için bir form içeren tek bir sayfadır. Çoğu durumda, lansman sırasında halka sunulan bilgiler, tek bir sayfada kolayca organize edilebilir, bu yüzden bu sayfaları tasarlarken bu stilin dikkate alınması mantıklıdır.
Tek ürünlü e-ticaret siteleri, tek sayfa sitelerinin harika olabileceği başka bir yerdir. Sadece bir ürün satıyorsanız, bu fiziksel bir ürün mü yoksa dijital bir ürün mü, o zaman neden birden çok sayfa ile uğraşmak istiyorsunuz? Basit, tek bir sayfa sitesi çok daha iyi bir satış aracı olabilir.
Daha karmaşık bir e-ticaret sitesinin tek bir sayfa sitesi için uygun olmadığını düşünebilirsiniz, ancak yine de olabilir. Bir düzineden fazla ürüne sahip olan siteler için bunu önleyebilirdim, ancak basit bir çevrimiçi mağaza, tek bir sayfada kolayca saklanabilir, ürün detayları ve ödeme işleminin yüklenmesi için kalıcı pencereler kullanılabilir.
Tek bir sayfa sitesi kullanılmadığında oldukça basittir: Büyük, karmaşık veya varsayılan olarak büyük miktarda bilgiye sahip olan sitelerin tek bir sayfa sitesine uygun olmaması gerekir. Bu durumlarda, daha geleneksel bir site yapısıyla daha iyi durumdasınız.
Karma siteler
Orada bir ton büyük tek sayfa siteleri olsa da, çok fazla karma tip site var. Tek bir sayfa izlenimi veriyorlar, ancak ajax, modal pencereler ve benzerlerini kullanarak aslında çok sayıda içerik sayfası içeriyorlar.
Dang & Blast sitesi bunun harika bir örneğidir.
Her şeyi tek bir sayfaya sığdıramazsanız, bunlar harika bir çözüm olabilir.
Bazı siteler, tek sayfaya geldiğinde “hile” tür. Ana web siteleri için tek bir sayfaya sahipler, ancak başka bir alanda bir blog var (bazen bir Tumblr veya WordPress.com barındırılan site). Bu konuda yanlış bir şey yok ve bir blog sahibi olmanın avantajlarından vazgeçmeden mesajınızı ana sitenize odaklanmanın bir yolu olabilir.
Tek sayfa siteleri için en iyi uygulamalar
İyi tasarım ilkelerinin çoğu, herhangi bir iyi web sitesi tasarımında olduğu gibi tek sayfa sitelerinde de geçerlidir. Ancak akılda tutulması gereken bazı şeyler var, bunların bazıları yukarıda zaten dokundu.
Basit tutmak
Sunmaya çalıştığınız içerik için çok karmaşık bir tasarım yapmaya çalışmak sizi ya da kullanıcılarınızı herhangi bir işe yaramıyor. Bunun yerine, ihtiyacınız olanı sunarken, hem tasarımınızı hem de içeriğinizi mümkün olduğunca basitleştirin.
Gezinme bağlantıları hala yardımcı oluyor
Kullanıcılar web sitenizde gezinmek için gezinebildikleri için, bunun en kullanıcı dostu yolu olduğu anlamına gelmez. Birçok bölümlü uzun bir sayfanız varsa bu özellikle doğrudur. Bunları dahil etmemek için çok iyi bir neden olmadığı sürece, belirli bölümlere gezinme bağlantıları eklemek sitenizi daha kullanıcı dostu yapar.
İçeriğinizi bölün
Tek bir sayfa, her şeyin uzun bir bölüm olması gerektiği anlamına gelmez. Aslında olmamalıydı. İçeriğinizi, kullanıcıların aradıklarını daha iyi bulabilmeleri için mantıksal bölümlere ve bölümlere ayırın.
Tüm bu arka planla bir şeyler yap
Tek sayfa siteleri büyük geçmişlere sahip olma eğilimindedir. Verilen, bazen bu arka planlar düz veya yinelenen bir desen ile bırakılır; ancak diğer bir sayfa siteleri, yaratıcı bir şeyler yapmak için tüm o alandan yararlanır. Bu, daha önce de belirtildiği gibi içeriğinizi bölmenize yardımcı olabilir. Arka planınızın tek bir fotoğraf olması gerekmez. Bu, içeriğinize daha iyi uyuyorsa, bir dizi resim olabilir.
Tek sayfa siteleriniz için kaynaklar
Orada tek sayfa siteleri için şablonlar da dahil olmak üzere yüzlerce kaynak var; ama burada öne çıkanlara odaklanacağız.
Saf CSS Paralaks Kaydırma : Keith Clark'ın bu makalesinde, sadece CSS kullanarak paralaks kaydırma tekniğinin nasıl oluşturulacağı açıklanmaktadır. JavaScript'i kullanmak istemiyorsanız (ya da nasıl olduğunu bilmeden) bu harika bir seçenektir.
Skrollr : “Paralaks geri kalanı için kayar”. Mobil ve masaüstü ile çalışan bağımsız bir kütüphane. Gerekli jQuery yok, sadece eski eski JavaScript.
Stellar.js : Stellar.js paralaks kaydırma kitaplığı kullanmak için başka bir kolaydır. Çok sayıda yapılandırma seçeneği ve iOS desteği sunuyor.
Bir Sayfa Web Sitesi Wireframes : Sitenizi nasıl yapılandıracağınızdan emin değilseniz, tek sayfalık tasarımlar için bu wireframes seti harika bir başlangıç noktası olabilir. İndirmekte özgürler. İndirebileceğiniz ikinci bir set var İşte .
Bir sayfa aşk : One Page Love, 5000'den fazla örnek sitesi bulunan ve her zaman daha fazla ekleyen birinci sınıf bir sayfa web sitesi galerisi. Onlar da tonlarca şablon ve diğer kaynakları barındırıyorlar.
Bootstrap'i başlat : Start Bootstrap geniş bir ücretsiz tek sayfalık Bootstrap temaları seçeneğine sahiptir. Ajanslar, serbest çalışanlar, portföyler, açılış sayfaları ve daha fazlası için temalar vardır.
Bir sayfa aşk şablonları : Geniş galerilerine ek olarak, One Page Love ayrıca ücretsiz ve premium şablonlar sunuyor.
Tek Sayfa Mania : One Page Mania, hem indirebileceğiniz hem de satın alabileceğiniz benzersiz sitelerden ve şablonlardan oluşan bir galeri sunuyor.
Sonuç
Tek sayfa tasarımları, çok çeşitli web siteleri için mükemmel bir seçenek olabilir. Küçük site tasarımının tümü ve sonu değillerse de, birçok projeyi değerlendirmeye değer. Tek bir sayfanın kullanılmasının nedenlerini düşünün ve sonra da yapmama nedenlerini düşünün ve oradan karar verin.