Gösterilen Sonuçlar: 1 ile 6 ve 6

Konu: Responsive Tasarım Nedir?

  1. #1
    Söz Ola Beri Gele donanma44 - ait Kullanıcı Resmi (Avatar)
    Üyelik Tarihi
    06-12-2007
    Bulunduğu Yer
    Şırnak
    Mesajlar
    9.745
    Ettiği Teşekkür
    117
    202 mesaja 250 teşekkür aldı
    Tecrübe Puanı
    30

    Standart Responsive Tasarım Nedir?

    Responsive web tasarım, duyarlı, uyumlu web tasarım anlamına da gelir. Son yıllarda adını sıkça duyduğumuz bu web tasarım şekli ilk olarak 2010 yılında ortaya çıktı ve son bir kaç yıldır dünyada ve ülkemizde popüler oldu.

    Responsive tasarım, web sitesinin mobil ve tablet cihazlardan girildiğinde site içindeki resim, yazı gibi elementlerin ekran genişliğine göre yeniden şekillenip ekrana tam oturması ile oluşur. Genellikle desktop, tablet ve mobil versiyon olarak 3 kademeli şekilde tasarlanır.

    Bilindiği gibi web sitelerine mobil cihazlardan girildiğinde ziyaretçiler siteyi görüntülemekte ve gezmekte güçlük yaşarlar. Eğer girdikleri site responsive yada mobil site değilse, okumak istedikleri alanı ancak zoom yaparak, kısıtlı bir alanı görüntüleyebilirler ve kulanım zorluğu çekerler. Site menülerini gezmekte oldukça zordur ve menüler mobil uyumlu olmadığı için genellikle gitmek istedikleri linki bulamayabilirler.



    Responsive sitelere mobil cihazlardan girildiğinde menüler şekil değiştirip genellikle üstten açılacak şekilde kullanımı kolay bir versiyona dönüşür. Fontlar ve imajlar alt alta gelerek ekranda zoom yapmadan kolayca okunacak şekilde sıralanır. Hatta mobil versiyonda önem derecesi düşük elementler gizlenir, sadece ziyaretçiye sayfayla ilgili en yalın halde bilgi gösterilir.

    Arama motorlarıda responsive siteleri ciddi şekilde destekliyor. Bir sayfanın arama motorlarında hem kendi alan adı hem de m.alanadi.com gibi farklı subdomain altında bir mobil versiyonunun olmasındansa tek url ile sayfanın responsive yapılması daha uygun buluyor. Çünkü mobilden yapılan aramalarda genellikle arama motorları sayfanın mobil uyumluluğuna dikkat etmeksizin sonuçları sıralıyor.

    Mobilden web site ziyaretleri dünyada %25 seviyelerine yükseldi ve kısa sürede daha da artacak. Bu sebeple responsive özellikli web sitelerinde ciddi bir artış öngörülüyor.

    Kaynak: mediaclick.com.tr/blog/responsive-tasarim-nedir

    Tüm forumdan rastgele konular:

    • » 27 Mart'ta 1 saat karanlıkta kalacağız
    • » İngiliz Cocker Spaniel ırkı
    • » Cemevlerine yok, camiye, havraya,...
    • » Hz. Ali çorba içerken öldürülseydi...
    • » Nâzım Hikmet Akademisi açılıyor
    • » Güney Afrika halkı sandık başında
    • » "Silahlar sussun, Öcalan ve DTP muhatap...
    • » Alevileri bundan sonra 10 kere baş tacı...
    • » Müsadenizle
    • » Edip Yüksel (T) Yaşar Nuri Öztürk ile...

    Aynı kategoriden rastgele konular:

    • » Tasarımcının Renk Kutusu
    • » Web Tasarımı Nedir? Kaç Tür Web Sitesi...
    • » Web Tasarımı İçin Kullanabileceğiniz...
    • » 2015 Web Tasarım Trendleri
    • » cPanel üzerinde Addon Domain / Eklenti...
    • » GoDaddy, Web Siteleri + Pazarlama...
    • » Tarayıcı Kullanım Oranları
    • » On numara tasarımlar
    • » İşin mi Yok? İşin Var!
    • » Lightbox Fotoğraf Galerisi
    [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] - [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] -[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] - [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

    [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

  2. #2
    Söz Ola Beri Gele donanma44 - ait Kullanıcı Resmi (Avatar)
    Üyelik Tarihi
    06-12-2007
    Bulunduğu Yer
    Şırnak
    Mesajlar
    9.745
    Ettiği Teşekkür
    117
    202 mesaja 250 teşekkür aldı
    Tecrübe Puanı
    30

    Standart Responsive Web Design (Duyarlı Web Tasarım) Nedir ?

    Responsive Web Design (Duyarlı Web Tasarım) Nedir ?

    Son zamanlarda çok sık duymaya alışık olduğumuz bu akım, web 3.0 yolunda daha hızlı adımlar atmamıza sebep olan bir keşiftir. Ülkemizde yeni yeni yaygınlaşmaya başlayan Responsive Web Design, Türkçede “Duyarlı Web Tasarım”, “Uyumlu Web Tasarım” gibi farklı şekillerde tercüme edilir.

    Peki nedir bu Responsive Web Design (Duyarlı Web Tasarım) akımı ?

    Web arayüzlerinin, CSS3 media queryler ile optimize edilip farklı cihazların farklı ekran çözünürlükleriyle, kullanıcı deneyimi tarafında herhangi bir kayıp yaşanmadan mobile teknolojisine uyum sağlamasını amaçlayan akımdır. Bu tekniği sadece mobile ile kısıtlamamak gerekir. Araştırma firmalarının verilerini ve internet verilerini göz önünde bulundururak, günümüzde en çok kullanılan ekran çözünürlüğü 1366x768px diyebiliriz. Responsive Web Design tekniğinin “Responsive” kavramı bize web sitemizi bu çözünürlükten daha yüksek çözünürlüklü bir ekranda (Ör. 1920x1080px), pixel kaybı yaşamadan uyumlu bir şekilde çalıştırmamızı sağlar. Aynı şekilde düşük çözünürlüğe sahip bir ekranda sayfamızı orantılı bir şekilde küçültür ve kullanıcı deneyimini arttırabiliriz.

    Responsive Web Design tanımı ilk olarak 2010 yılında, A List Apart web sitesinde Ethan Marcotte isimli yazar tarafından bir makalede geçmiştir. Yazarın 2011 yılında piyasaya sürdüğü kitabında, Responsvie Web Design (Duyarlı Web Tasarım) kavramıyla ilgili teoriler ve açıklamalar bulunmaktadır.

    2011 sonu ile 2012 yıllarını kasıp kavuran bu trend, ileriki yıllarda web standartlarında yerini alacağa benziyor.

    Kaynaklar
    alistapart.com (Ethan Marcotte Makalesi 25.Mayıs.2010)
    abookapart.com (Ethan [email protected] Web Design Kitabı)
    en.wikipedia.org
    designmodo.com (Örnekler)
    html5.gen.tr
    eksisozluk.com
    [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] - [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] -[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] - [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

    [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

  3. #3
    Söz Ola Beri Gele donanma44 - ait Kullanıcı Resmi (Avatar)
    Üyelik Tarihi
    06-12-2007
    Bulunduğu Yer
    Şırnak
    Mesajlar
    9.745
    Ettiği Teşekkür
    117
    202 mesaja 250 teşekkür aldı
    Tecrübe Puanı
    30

    Standart Responsive Web Design-Mobil Cihazlara Duyarli Web Tasarimi Nedir?

    Responsive Web Design-Mobil Cihazlara Duyarli Web Tasarimi Nedir?

    Responsive tasarımın, web tasarimi dunyasında bu aralar en popular konu olmasinin iyi bir sebebi var. Gectigimiz son 3 yilda internetin mobil cihazlar uzerinden kullanimi azimsanamayacak sekilde artmistir.

    Bu da demek oluyor ki siradan bir is icin bile web sitenizi(online markanizi) mobil cihazlardan tuketilmeye degecek sekilde sunmaniz gerekiyor. “Responsive Web Design”in ustune titredigi konu da tam olarak bu. Her yenilik ve degisimde oldugu gibi iyi haberler ve bazi kotu haberler de var.

    Iyi haber mobil islem gucu, internet hizi ve tarayicilarin yazilimlari oldukca gelisti; fakat ekran buyuklugu ayni oranda buyumedi. Bu yuzden ya mobil cihazlarin bir gun web sitelerini bilgisayarlarla ayni hassasiyette goruntuleyecek kadar buyumesini bekleyebilirsiniz ya da bu firsattan yararlanip musterilerinize karsi daha duyarli olabilirsiniz. Bunun tam olarak karsiligi da web sitesi tasariminizla duyarli olabilmek.

    Hangi Secenekler Mevcut?
    Mobil cihazlardan kacamayacaginizi anladiginiz ilk anda asagidaki yer alan en cok tercih edilenden az maliyetliye dogru siralanan seceneklerden en az biriyle basbasa kalacaksiniz:

    1. Web siteniz veya web uygulamaniz icin mobil uygulama yapmak(masrafli, zaman alici ve her web sitesi icin onerilmez.)
    2. Web sitenizi istediginiz gibi yapin ve cep telefonlari icin ayrica bir web sitesi tasarlayin(Daha az masrafli, idare etmesi biraz daha can sikici ve web standarlari acisindan yorucu.)
    3. Her boyuttaki ekrana uyum saglayabilen duyarli bir web sitesi yapin( cok daha ucuz, pazara daha hizli suruluyor; fakat diger secenekler kadar guclu degil.)

    Farkettiginiz gibi secenekler en cok tercih edilenden en az maliyetliye dogru siralanmis durumda. Responsive web sitesi tasarimi gunumuz teknolojisinde her isletmenin web sitesi icin sahip olmasi gereken bir ozellik ve eski web sitenizin cep telefonunda tuhaf görüntüsü artık mobil cihaz kullanan musterileriniz icin yeterli degil. Web calisanlarinin dedigi gibi yuksek kalite yuksek fiyatla saglaniyor ve herkes bir uygulamaya sahip olamayabilir.

    Ayrica bir uygulamanin olusturulmasi zaman aldigi gibi maliyeti de yuksek olabiliyor. Web sitesine ek olarak mobil web sitesi olusturabilmek icin de her boyuttaki mobil cihazi bilmek ve web sitenizi mevcut olan her bir ekran boyutuna gore kodlamaniz gereklidir. Fakat SEO yani arama motoru optimazyonu bile RWD’ye olan sempatisini acikca belli ederken(yani sizi aramalarda ust siralara cikartabilirken) tek yapmaniz gereken mobil cihazlara duyarli bicimde tasarlanmis bir web sitesine sahip olmak.

    Kaynak: full-group.com/*******/responsive-web-design-mobil-cihazlara-duyarli-web-tasarimi-nedir
    [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] - [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] -[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] - [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

    [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

  4. #4
    Söz Ola Beri Gele donanma44 - ait Kullanıcı Resmi (Avatar)
    Üyelik Tarihi
    06-12-2007
    Bulunduğu Yer
    Şırnak
    Mesajlar
    9.745
    Ettiği Teşekkür
    117
    202 mesaja 250 teşekkür aldı
    Tecrübe Puanı
    30

    Standart Responsive Site Nasıl Yapılır?

    Responsive Site Nasıl Yapılır?

    Gelişen internet dünyası nedeni ile web tasarımı kavramı değişti. Web tasarımcılar şu an piyasada kullanılan tüm ekran çözünürlükleri ve boyutları için sorunsuz çalışan tasarımlar yapıyor.Peki bu tasarımları nasıl yapıyorlar?

    Css bu anda hızır gibi yetişiyor.Ben de yaptığım temayı responsive hale getirme ile ilgili internette doğru düzgün bir kaynak bulamadığım için bu yazıyı yazıyorum.

    Öncelikle Responsive web design nedir özetleyelim:

    Bilgisayar, tablet, telefon ve benzeri tüm ekranlarda; yatay scrollbar’sız ve sorunsuz bir şekilde çalışan aktif tasarımlardır.



    Tüm ekran boyutlarına uygun site yaparken öncelikle en fazla kullanılan ekran boyutlarını bilmemizde fayda olacaktır.

    Tabletlerin en geniş çözünürlüğü 960px’dir.
    Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.
    Dikey telefonların en geniş çözünürlüğü 479px’dir.
    Bu boyutlara dikkate aldığımızda bizim en az 4 seçeneğimiz oluyor; tabletler için tasarım,yatay telefonlar için,dikey telefonlar için ve gerçek (bilgisayar üzerindeki) tasarım.

    İşte Css bu konuda hızır gibi yetişiyor ve her çözünürlüğe uygun kodlama yapmamıza yardımcı oluyor.

    Responsive Web Site Nasıl Yapılır?

    Anlayabilmeniz için öncelikle genel mantığı anlatıp sonra kısaca kodları verip nerede kullanıldığını yazacağım

    Genel Mantık
    @media only screen and (max-width: 960px) { }
    Bu seçenek en geniş ekran çözünürlüğünün 960px olduğu yerden itibaren geçerlidir. {} parantezlerinin arasına yazdığınız her css kodu 960px ‘den küçük tüm çözünürlüklerde geçerli olacaktır.Bir örnekle daha iyi kavrayabiliriz.

    Class adı “hibestil” olan bir div’imiz olsun (<div class=”hibestil”></div>) ve biz bu div’i 960px‘den düşük çözünürlüğe sahip ekranlarda görmek istemeyelim.Böyle olduğu zaman yukarıda verdiğim CSS kodlarının arasına aşağıdaki gibi değer verirsek hibestil div’i 960px’den küçük çözünürlüklerde görünmeyecektir.

    @media only screen and (max-width: 960px) {
    .hibestil{display:none;}
    }
    Bu şekilde herhangi bir Div’in arkaplan rengini, boyutunu ve bir çok özelliğini değiştirebiliriz.

    @media only screen and (max-width: 960px) {
    .hibestil{background:#fff;color:#000;width:100%;}
    }
    Çözünürlükler için kodlar
    960px den düşük çözünürlüklerde:

    @media only screen and (max-width: 960px) { }
    801px ve 959px arasındaki çözünürlüklerde:

    @media only screen and (min-width: 801px) and (max-width: 959px) { }
    800px den düşük tüm çözünürlüklerde:

    @media only screen and (max-width: 800px) { }
    480px ve 759px arasındaki çözünürlüklerde:

    @media only screen and (min-width: 480px) and (max-width: 759px) {}
    479px den düşük tüm çözünürlüklerde:

    @media only screen and (max-width: 479px) { }
    Son Olarak
    Kodların her çözünürlükte çalışması için Head etiketlerinin arasına şu kodları eklememiz gerekiyor:

    <**** name="viewport" *******="width=device-width, initial-scale=1.0">
    Sitenizin Css kodlarında bu şekilde ekleme ve düzelmeler yaptığınızda tüm çözünürlüklere uygun hale gelecektir.Umarım yararım dokunmuştur.

    Kaynak: hibestil.com/responsive-tasarim-nasil-yapilir/
    [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] - [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] -[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] - [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

    [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

  5. #5
    Yeni Üye
    Üyelik Tarihi
    12-10-2018
    Yaş
    34
    Mesajlar
    2
    Ettiği Teşekkür
    0
    0 mesaja 0 teşekkür aldı
    Tecrübe Puanı
    0

    Standart

    Paylaşım için teşekkürler. Konuyla ilgili bir başka kaynak da ben bırakayım, okumak isteyenler faydalansın. recelinteractive.com/blog/responsive-web-tasarim-nedir bağlantısından ulaşabilirsiniz. İyi çalışmalar.

  6. #6
    Üyemiz
    Üyelik Tarihi
    17-11-2016
    Yaş
    29
    Mesajlar
    48
    Ettiği Teşekkür
    0
    0 mesaja 0 teşekkür aldı
    Tecrübe Puanı
    4

    Standart

    Emeğinize sağlık bilgiler için teşekkürler.

Konu Bilgileri

Bu konuyu görüntüleyenler

Şu an 1 kullanıcı var. (0 üye ve 1 konuk)

Bu Konudaki Etiketler

Yetkileriniz

  • Konu Acma Yetkiniz Yok
  • Cevap Yazma Yetkiniz Yok
  • Eklenti Yükleme Yetkiniz Yok
  • Mesajınızı Değiştirme Yetkiniz Yok
  •  

HAK SAHİPLERİNE ve YASAL MAKAMLARA Sitemiz, hukuka, yasalara, telif haklarına ve kişilik haklarına saygılı olmayı amaç edinmiştir. Sitemiz, 5651 sayılı yasada tanımlanan "Yer Sağlayıcı" olarak hizmet vermektedir. İlgili yasaya göre, site yönetiminin hukuka aykırı içerikleri kontrol etme yükümlülüğü yoktur. Bu sebeple, sitemiz uyar ve kaldır prensibini benimsemiştir. Telif hakkına konu olan eserlerin yasal olmayan bir biçimde paylaşıldığını ve yasal haklarının çiğnendiğini düşünen hak sahipleri veya meslek birlikleri, [email protected] mail adresinden bize ulaşabilirler. Buraya ulaşan talep ve şikayetler Hukuk Müşavirimiz tarafından incelenecek, şikayet yerinde görüldüğü takdirde ihlal olduğu düşünülen içerikler sitemizden kaldırılacaktır. Ayrıca, mahkemelerden talep gelmesi halinde hukuka aykırı içerik üreten ve hukuka aykırı paylaşımda bulunan üyelerin tespiti için gerekli teknik veriler sağlanacaktır.