Uyarlanabilir web sitesi tasarımı, aynı web sitesini farklı türde cihazlarda çevrimiçi olarak görüntülemek için uygun bir sistemdir. Basit bir ifadeyle bu, bir web sayfasını bir dizüstü bilgisayarda, akıllı telefonda ve diğer gadget'larda görüntüleme yeteneğidir.
Web duyarlılığı, insanlar çeşitli biçimlerde internet özellikli gadget'lar edindiğinden beri bir zorunluluk haline geldi. Şirketler, çevrimiçi mağazalar ve hatta yalnızca bilgilendirici siteler, mümkün olan her şekilde ona uyum sağlayarak izleyicilerini memnun etmeye çalışır. Duyarlı tasarım, kolaylık sorununu çözer, bu nedenle vazgeçilmez bir iş öğesidir.
Duyarlı Web Tasarımının Özellikleri
Tasarımın rahatlığı birkaç ana kriterle karakterize edilir.
- Boyut. Duyarlı web sitesi tasarımı, sayfayı farklı cihazlarda görüntülerken küçük farklılıklara sahip olmalıdır, bu nedenle görüntülenen resimlerin, metinlerin ve diğer öğelerin boyutları, cihazların boyutlarına karşılık gelmelidir. Bunu yapmak için web geliştiricileri tasarımı, birden çok görünüm sürümüne sahip olacak şekilde uyarlar.
- İçerik uyarlaması. Siteyi dolduran malzeme (resimler, videolarve diğer multimedya öğeleri) ayrıca, ekranın kalitesini kaybetmeden gerekli ekran çözünürlükleriyle eşleşmelidir.
- Tasarım esnekliği. Görüntülemekte olduğunuz web sayfasını değiştirdiğinizde sitenin tasarımını hızlı bir şekilde ayarlamanıza olanak tanıyan öğelerin geliştirilmesine dahil edilmesi. Örneğin, kullanıcı sayfayı yukarı ve aşağı kaydırır, farklı bölümlerde gezinir veya ekran konumunu dikeyden yataya veya tam tersi şekilde değiştirir.
- Daha iyi kullanılabilirlik için öğeleri cihaza göre basitleştirin.
- Küçük ekranlarda önemsiz blokları gizleyin.
Temel Bilgiler
Web sitesi oluşturma kesinlikle programlama dilleriyle ilgilidir çünkü onlarsız yapamazsınız. Tarayıcı, HTML ve CSS kullanarak nesnelerin (metinler, çizimler, videolar) bileşimini ve sırasını tanır - site bu şekilde oluşturulur.
CSS renk, stil, boyut, yazı tipi, hizalama, dolgu, arka plan öğeleri, formlar vb.'den sorumludur. Sitenin genel içeriğinden ve yapısından HTML sorumludur. Böylece, en önemli iki açıklama yönteminin toplamında bir web kaynağı oluşturulur.
CSS ise vazgeçilmez bir tasarım aracıdır. HTML'den üstün olan çok sayıda özelliğe sahiptir:
- Birden çok sayfada tasarım tutarlılığı, site görünümü sağlar ve HTML belgelerinin görüntüsünü kontrol eder.
- Size aynı anda tasarım ve içerik yapma fırsatı verir.
- Birden çok stil ve yeteneği uygularfarklı cihazlarda görüntüleme.
- Karmaşık tasarım kararları verir.
- Yüksek hız ile karakterize edilir.
Bir web sitesi geliştirmek için bazı temel kavramları bilmeniz gerekir.
Bir CSS seçici, özellikleri ve biçimlendirme seçeneklerini tanımlayan bir stilin adıyla gösterilir. Tarayıcıya, özelliklerin hangi belirli öğeye uygulandığını söyler.
Bir özellik yapısal bir birimdir. Harici parametreleri (boyut, konum, renk, şekil vb.) tanımlar ve belirli bir kodla ifade edilir.
Görünüm ve konum olarak tek bir nesneyi tanımlayan bir dizi tanımlanmış CSS özelliği vardır.
Birlikte, bu öğeler aşağıdaki şemayı oluşturur:
Selector { property1: değer; mülk2; değer }.
Düzen boyutları ve çözünürlükleri
Tasarım geliştirme, Photoshop veya diğer grafik programlarında mizanpajın hazırlanmasıyla başlar. Kolaylık sağlamak için, tuvale modüler ızgaranın özel işaretleri eklenir, özel girintiler gözlenir. Böylece web tasarımcısı, düzen tasarımcısına gelecekteki siteyi yapılandırmanın ilkelerini ve web öğelerinin doğru düzenlenmesini gösterir.
Ana cihaz türleri için duyarlı web tasarımı çözünürlükleri ve boyutları:
- Bu tasarım, mobil izinle çalışmaya başlama ilkesine bağlıdır. Akıllı telefonun düzeni 460 × 960 piksel boyutunda oluşturulmuştur.
- Tablet düzeni boyutu 768 × 1024'tür.
- Dizüstü bilgisayar boyutu 1280 × 802'dir.
- PC boyutu 1600 × 992'dir.
Sitenin mobil versiyonundatüm ana işlevleri korurken, mümkün olduğunca basitleştirilmelidir. Düzen, kullanımdaki tüm basitleştirmelerle birlikte bir çevrimiçi mağaza için hazırlanıyorsa, bir ana açıklamaya, ürün kataloğuna, sipariş seçeneğine, alışveriş sepetine vb. PC'de tam format görüntülemede olduğu gibi. Mobil sürümün rahatlığı, burada yükleme sırasında zamandan tasarruf etmek için fazladan sayfalardan kaçınabilmenizdir.
Uyarlanabilir içerikte, html kodunu kullanarak gerçekten ihtiyaç duyulmayan bazı öğeleri gizleyebilirsiniz. Örneğin, site yüksek çözünürlükte açıklamasını, fiyatını, teslimat bilgilerini ve "Sepete" ekleme özelliğini içeren bir ürün kartı görüntüler. Mobil çözünürlükte süreç bir fotoğraf, fiyat ve satın alma düğmesiyle basitleştirilmiştir.
Duyarlı tasarım için orta ve minimum çözünürlükler, kullanıcının okuma ve görüntüleme kolaylığını dikkate almalıdır.
Düzen
Uyarlanabilir tasarım düzeninin amacı, esnek bir düzen oluşturmaktır, ya da geleneksel olarak "kauçuk şablon" demesidir. Sonuç olarak, tek basamaklı sayfa boyutlarında değil, tüm cihazlarda kolay görüntüleme için şablonun orantılı sıkıştırılabilirliğindedir.
Genel olarak CSS üzerine inşa edilmiştir. Geliştirme sırasında ekran boyutlarının kontrol noktaları belirlenir. Böylece kalan nesnelerin genişliği belirlenir. Bunun için sayfanın genişliği css max-width özelliği ile belirlenir, bu kriterlere bağlı olarak diğer elemanların boyutu yüzde olarak seçilir. Örneğin, ana sayfadaki blok boyutusayfa 600 pikseldir ve kenar çubuğu bloğunun (site kenar çubuğu) genişliği sırasıyla 400 pikseldir, içerik genişliği %60 ve kenar çubuğu genişliği %40 olacaktır.
Duyarlı düzenlerin birkaç türü vardır. Her biri, özelliklerine ve yapısına bağlı olarak ayrı ayrı seçilir.
Görüntülemeler:
- Ekran çözünürlüğü düşürüldüğünde blokların kaydırılmasına izin veren bir düzen türü. Çok sütunlu sitelerde, ek bloklar ekranın altına taşınır.
- Her izin için ayrı bir desen oluşturulduğunda. Bu tür duyarlı tasarım daha uzun sürer ancak en okunaklı olanıdır.
- Tüm öğeleri ölçeklendirmeyi amaçlayan basit bir tasarım türü. Esnek değil.
- Ekranın konumu değiştirilirken ek işlevler göründüğünde, panel türü mobil uygulamalarda kullanım için uygundur.
Duyarlı katmanlar oluşturmak işin yalnızca bir parçasıdır. Uyarlanabilir görüntüler, kendi sorunları ve bunları çözmek için yöntemleri olan ayrı bir durumdur.
Tek görüntü, farklı ekran çözünürlüklerinde net bir şekilde görüntülenmelidir. Burada bir sorun var - çözünürlükteki değişiklikten bağımsız olarak resmin her zaman aynı kalmasını sağlamak. Bu durumda basit bir CSS kodu girmek yeterli olmayacaktır.
Örnek: img {max-width: 250px;} - burada görüntünün kendisini değil, görüntüyü içeren kapsayıcının boyutunun sınırlı olduğu bir yöntem uygulamalısınız. Şuna benzer: div img {max-width: 250px;}. Bu yöntem sorunu çözerküçük resimlerin düzeni, ancak büyük resimler için uygun değil.
Bu nedenle birçok geliştirici, sunucuyu aşırı yüklemeden herhangi bir görüntüyü uyarlamanıza izin veren javascript dillerini kullanmayı tercih eder. Javascript çok sayıda alternatif komut dosyası sunar.
Duyarlı düzenin artıları ve eksileri
Olumlu:
- Tüm öğelerin konumunu kaydedin. Bu, kullanıcı sitenin tam sürümüne alıştığında kullanışlıdır.
- Alanları ve adresleri kaydedin.
- Diğer izin biçimleri için tam özelleştirme.
Olumsuz:
- İşlevsel esneklik kaybolur
- Her türlü bilgi yüklemesi, birçok kullanıcıyı daha hızlı seçeneklere geçmeye zorlayan bir web kaynağının uzun süre başlatılmasıyla doludur.
Web sitesi oluşturma
Site yapısı birkaç bölüme ve bloğa bölünmüştür. Geleneksel olarak düzen, sitenin üst kısmı (başlık), logo, menü, içerik bloğu ve sitenin son bölümünden (örneğin ayrıntılı iletişim bilgileri) oluşur. Basit bir şablondan responsive web sitesi tasarımının nasıl yapıldığını görelim.
Yazmak için yardımcı etiketler:
- wrapper - tüm şablon öğelerini birleştiren etiket;
- başlık h1 - logo;
- başlık - menü ve diğer önemli öğeler için başlık;
- içerik - engelle;
- colLeft - içerik boyutu;
- colRight - kenar çubuğu (yan sütun);
- footer - sitenin son kısmı;
- medya ekranı - ayarlaristenen çözünürlük.
Site yazarken, bu öğeler ihtiyaca göre farklı bir sırayla hareket edebilir. Örneğin, yüksek çözünürlüklerde menü dikey olarak görüntülenebilir. Mobil versiyonda, düzen, menü yatay konumda kayacak şekilde oluşturulabilir.
- viewport - metnin boyutunu tasarımın daha küçük bir versiyonunda kaydetmenize izin veren bir etiket.. etiketleri arasında yer alır.
- max-width - 1000 pikselin üzerindeki çözünürlüklerde esnemeyi önlemek için siteyi optimize etmek için.
Yerleşimi uygularken, blokların stilini ve yapısını değiştirmeniz gerektiğinde jQuery kitaplığı çok yardımcı olur.
Duyarlı tasarım ile mobil tasarım arasındaki fark nedir
Tam bir anlayış için birkaç açıklayıcı örnek düşünün, çünkü bu iki kavram arasındaki karışıklık nadir değildir.
Mobil sürümün, alt alan adına sahip birincil sitenin bir analogu olduğunu anlamanız gerekir. Sitenin dış sunumu, stil ve işlevselliği tamamen tekrarlarken, yapı ve içeriği, sürüm gerekli öğelere indirildiği için ana sürümden farklı olabilir.
Duyarlı tasarım, tüm cihaz çözünürlükleri için idealdir. Ölçeklenebilir ve görüntüleme koşullarından bağımsız olarak doğru şekilde oluşturulur.
Bunlar, hangisinin daha iyi olduğu konusunda bıkmadan usanmadan tartışılan sitenin iki farklı sunumu. Henüz kesin bir karara varılmadığını belirtmek gerekir. Birisi moda trendine ve birçok avantaja işaret ederek bu tasarımı övüyor. Mobil sürümün, duyarlı tasarımın sahip olmadığı çeşitli avantajları da vardır. Bu nedenle, başlangıç olarak temel ihtiyaçları anlamalısınız.
Faydalar
Duyarlı tasarım mobilden nasıl daha iyidir?
Çok yönlülük. Zamanımızda, pazarın böylesine çılgın bir büyümesiyle, tüketicilerin isteklerini tatmin ederek bilgiyi farklı bir şekilde sunmak basitçe gereklidir. Duyarlı tasarım bu sorunu çözer.
Arama motorlarında etkili tanıtım. Uyarlanabilir bir cihazın ana avantajlarına atfedilemez. Arama motorları, kullanıcılara duyarlı web siteleri vermeyi tercih eder.
Kullanılabilirlik. Responsive tasarım genellikle en iyi tasarım çözümlerinde tasarlanır, bu da kullanıcıların görsel algısı için güzel bir hediyedir.
Hem projenin uygulanmasında hem de kullanımında kolaylık ve basitlik.
İyi dönüşüm oranları. Uyarlanabilir tasarımla, görüntüleme için daha fazla fırsat olduğundan, dönüşümün kendisi artar.
Ekonomi. Ayrı bir mobil sürüm oluşturup tanıtmaktan nispeten daha ucuzdur.
Mobil sürümün artıları ve eksileri
Duyarlı bir mobil tasarım oluşturmak, çok yönlülük ve tutarlılık gerektirir. Her şeyden önce, elbette, gereksiz işlerden kaçınmaya ve zamandan tasarruf etmeye yardımcı olacak ve ayrıca sitenin barındırılacağı sunucunun özelliklerini dikkate alacak olan referans şartlarının ayrıntılı olarak yazılması önerilir..
Mobil duyarlı tasarımın belirli avantajları ve dezavantajları vardır.
Artıları:
- Hazır bir siteniz varsa, mobil sürüm için sıfırdan bir tasarım geliştirmenize gerek yoktur. Bu düzeni gereksiz işlevsellikten kurtararak yalnızca birkaç değişiklik yapılabilir.
- Her türlü sadeleştirme nedeniyle, mobil sürüm indirirken daha hızlı kabul edilir.
- Kullanıcı tüm içerikteki en önemli bilgiyi görür.
- Hızlı uygulama. Etiketleri ve kodları bilmeseniz bile mobil uyarlamayı uygulayabileceğiniz eklentiler var.
- Arama motoru seçenekleri, analiz edilmesi daha az zaman aldığından uyarlanabilir sürümleri tercih eder.
Eksileri:
- Tüm mobil sürümler, mobil cihaz çözünürlükleriyle eşleşmeyebilir. Site elbette açılacaktır, ancak ekran çözünürlüğü her zaman düzene uymuyor. Bazen iyi tasarlanmış bir akıllı telefon tasarımı, tablet olarak açıldığında farklı görünebilir.
- Mobil sürümler ayrı ücretli alan adları gerektirir.
- İçerik yayınlamayla ilgili bazı küçük sorunlar var. Aynı anda birkaç sürüm varsa, içerik tüm biçimler için bir kerede ayarlanmalıdır. Ana siteye yeni materyal göndermek ve mobil versiyona kopyalamak hırsızlık olarak değerlendirilebilir. Bu sorunu önlemek için kaynakların bağlantısını kanıtlamanız gerekebilir.
Uygulama yöntemleri
Ana uygulama yöntemleri:
- Paket ve layout tasarımı oluşturulduktan sonra istenilen ölçülerde yüklenir.operatör sitesi ve ana kod. Bu, orta ve küçük sürümleri (tabletler, akıllı telefonlar vb.) oluştururken kullanılan klasik bir yöntemdir.
- BootStrap, basit ve anlaşılır bir uyarlama araçları setidir. Açılış Sayfası ve diğer çok karmaşık olmayan web projeleri için sürümler oluşturmak için uygundur. Arayüz işlevlerinde birçok farklı stil uygulamak için iyi bir fırsat verir.
- Duyarlı Izgara Sistemi, popüler bir çok yönlü araçlar setidir. Uygulaması kolaydır ve derin bilgi gerektirmez. Çok çeşitli bilgi grafikleri içerir.
- GUMBY - Esnek yanıt verme ve harika araçlarla övünen bir CSS çerçevesi.
- Çerezler - duyarlı resimler uygulamanıza olanak tanır. Tarayıcı tarafından istenen dosyalara otomatik olarak eşlik eder.
- ExpressionEngine, duyarlı görüntüler oluşturmanın başka bir yoludur. Cihazın mobil olup olmadığını, görüntüleri gerekli çözünürlüğe değiştirip değiştiremeyeceğini belirler.
- ProtoFluid - Hızlı prototipleme sağlar. Her türlü cihaz için uygundur.
