Bootstrap HTML Responsive Templates(Klinik&Sağlık) V 0.10 | Ebubekir Bastama
Bu makalemizde sizlere yeni bir çalışmam olan Responsive html tema projesinin 9. temasından bahsetmek istiyorum. Web Tasarımcılara yararlı olması için tek sayfalık Html Responsive tasarımlar yayınlayacağımı söylemiştim 9.Tasarım sizlerle. Bu tasarımda kullanılabilir tasarımlar olması için Sağlık&Klinik tanıtım tasarımı yapılmıştır.Bu tür tasarımları beğendiyseniz lütfen sosyal medya hesaplarınızda bu sayfa linkini paylaşmayı unutmayınız.
Tasarımlara ek eklenmesini istiyorsanız iletişime geçerek makul bir ücrete değiştirmeler yapabilirim.İlk başta Responsive ve Boostrap terimlerini açıklayalım.
Tasarımlara ek eklenmesini istiyorsanız iletişime geçerek makul bir ücrete değiştirmeler yapabilirim.İlk başta Responsive ve Boostrap terimlerini açıklayalım.
Boostrap detaylı öğrenmek için buradan ulaşabilirsiniz.
Responsive tasarım nedir?
Son zamanlarda birçok kişi web sitelerinin mobil versiyonunu istiyor. Artık hemen hemen her insanın kullandığı mobil cihazlara uygun web projeleri hazırlamanın en uygun yollarından biri olan Responsive tasarım hakkında sizi bilgilendirmeye çalışacağımız bu yazıda; responsive tasarım nedir, iyi mi kullanılır, nelere dikkat etmek gerekir, web projesi için avantajları/dezavantajları nelerdir vb. şeklinde mevzuların üzerinde duracağız.
Temel olarak responsive tasarım; Bir tasarımın farklı ekran çözünürlüklerin'de uyum sağlamasıdır. Bir örnek vermek gerekirse responsive olarak yapılmış bir web sitesinin tasarımı masaüstü bir bilgisayarda farklı görünürken ekran boyutu daha ufak olan mobil bir cihazda farklı görünecektir. Burada css3 ile gelen yenilikler sayesinde aynı sayfa, farklı çözünürlüklere bakılırsa yeniden şekillenmektedir. Gözünüzde daha iyi canlanması için web sitemizin bulunduğu tarayıcının boyutlarıyla oynayarak iyi mi tepkiler verdiğini gözlemleyebilirsiniz. Tarayıcıyı küçülttükçe önce tabletlere daha sonra akıllı telefonlara uyumlu bir tasarımın aynı sayfada gerçekleştiğini görmüş olacaksınız.
Responsive tasarım sayesinde masaüstü, tablet ve akıllı telefonlarda platform bağımsız bir halde uygun tasarımlar yapılabilir. Siteye mobilden girildiğinde tasarım değişiklaşır, menüler telefonlara uyum sağlayacak şekilde küçülerek üzerine dokunulduğunda açılacak hale gelir, fontlar ekranı büyütmeden okunacak hale gelirken, resimler de ekran çözünürlüğüne gore esneyerek uygun şekilde görüntülenir. Frame ve diğer elementlerin de çözünürlüğe göre değişmesi sağlanır. Gerekirse gerçek tasarımda bulunan bazı modüller gizlenir.
Burada farklı cihazların ekran çözünürlüklerini bilinmesi önem taşır. Genellikle;
Masaüstü, Notebook için 1024px ve üzeri
Tabletler için 768px – 1023px
Akıllı telefonların yatay tasarımları ve bazı tabletler için. 480px – 767px
Akıllı telefonlar için: 479px ve altı
Bu çözünürlüklere gore css dosyasında örneğin 480px ve daha düşük ekranlar için;
@media screen and (max-width: 480px)
Kodu yazılarak css dosyası bu çözünürlük için düzenlenir.
Ayrıca Sayfanın responsive olması için
kodunun ne olursa olsun head tagları arasında olması gereklidir.
Responsive tasarım sayesinde ayrı bir subdomain yahut sanal dizinde mobil site meydana getirmeye gerek kalmaz. Herhangi bir izleyeceği yolu göstermeye gerek kalmaz. Ayrı bir url’ye gerek kalmaması arama motoru performansı açısından avantaj sağlar. Url yapısı ve sitenin indexlenmesi mobil site oluşturmaya nazaran daha da kolaylaşır.
Reponsive tasarımda farklı platformalar için farklı web siteleri yapamaya gerek kalmaz. Maliyeti daha düşük, yapılması daha kolaydır. Bakım , güncelleme ve geliştirme bakımından daha azca zaman harcanır.
Temamıza buradan ulaşabilirsiniz.
Hiç yorum yok
Yorum Gönder