Responsive Tema Tasarlamak İçin Ne Bilmem Gerekiyor?

Merhabalar,

HTML/CSS, Php+MySQL bilgim mevcut. Yazılım kısmı güzel ancak tasarım aşamasında sıkıntı yaşıyorum. Bir işe başlıyorum tasarım basamağında tıkanıyorum, işi iptal ediyorum. Nereye ağırlık vermem gerekiyor, tasarım için. Responsive tasarım yapmak istiyorum. Bootstrap öğrenmek istedim ancak kaynak bulamadım. Yardımcı olursanız sevinirim.

Hocam etiket yapıyorum kusura bakmayın ama yol göstermeniz mümkün müdür? GokhanKara

Ben tasarım ve wordpress konusu ile ilgilenip kendimi geliştiriyorum. HTML CSS segmentinde alanında uzman arkadaşlar ile çalışıyorum yani ilgi alanım değil kusuruma bakmayın @Gucluyazar ..

Fakat kendiside forumda sanıyorum html css eğitimini beğendiğim bir eğitim serisine gözatabilirsiniz.

https://www.youtube.com/watch?v=Qo3Uzem0Jv4&list=PL-Hkw4CrSVq-xwLUQ0-OIA46mKwYeaxXR

Tasarımınız mı kötü yoksa Responsive tasarım mı yapmak istiyorsunuz ?

FerdiŞahin Tasarımlar pek kötü değil ancak işlev olarak Responsive olmasını istiyorum. Bunu proje başlangıcında mı yoksa proje ortasında mı yapacağım bilmiyorum. Responsive tema konusunda eksiğim mevcut hocam.

https://www.youtube.com/watch?v=Ok4THlJ2Kdk&list=PLMWle8GL4qfJCZyvSpeF-2xiYuTg8fbQd

Ben size kısaca şöyle anlatayım bu yolda ilerlerseniz sorun çıkmaz.

İlk olarak HTML&CSS kısmını yaptığınızı varsayıyorum ki bu şekilde yapıyorsunuz zaten. Mesela anasayfayı HTML hale getirdiniz yani anasayfayı bitirdiniz diyelim diğer HTML sayfalarına geçmeden önce ilk önce bu sayfayı responsive'e uyarlayın.

Responsive konusu için çok geniş kapsamlı bir şey olduğu için detaya giremeyeceğim ancak CSS bilginiz varsa kolay bir şekilde yaparsınız.

Şimdi ben şu şekilde yapıyorum.

İlk başta 768px tasarımdan başlıyorum buna başlamamın sebebi kod fazlalığından kurtulmak.

CSS'de en alt satıra bunu ekleyin:

@media only screen and (max-width: 768px) {
.ortala {
width: 480px; // ÖRNEK
}
}

Burada yaptığınız şey en basitinden max-width değeri size o kodların maksimum 768px'de çalışacağını söyler. 768px'den yüksek ekranda çalışmaz.

Siz bu kodlar arasında kendinize göre mobile uyarlayacaksınız.

768px genişlik bir tasarımda container kısmı için kullanacağız değer %'lik olabilir ama % ile başa çıkmak zordur o yüzden px olarak değerleri girmeye çalışın.

Bunu yaptınız diyelim şimdi 320px ve 480px arasındaki değerler var.

Ben genel olarak 320px yapmıyorum 480px altına %'lik değer tanımlıyorum bu sayede 320px'de de sorunsuz çalışmış oluyor.

Bunu da şu şekilde yapacaksınız

@media only screen and (max-width: 480px) {
.ortala {
width: 95% !important; // ÖRNEK (important kullanmamızın sebebi 768px'de değer tanımlamış olmamız)
}
}

Bunun haricinde birde şu şekilde yapacaksınız tasarımın genişliği 980px diyelim 768px ile 980px arasına media etiketi tanımlamanız gerekiyor.

@media only screen and (min-width: 768px) and (max-width: 980px) {
.ortala {
width: 768px; // ÖRNEK
}
}

Sizin öğrenmeniz gereken şey media etiketleri. 2 gün gibi bir sürede öğrendim ben.

1 yıl önceki videoma da bakıp bir şeyleri kavrayabilirsiniz.

FerdiŞahin Videonuzun tamamını izledim oldukça fazla aydınlandım hocam, çok teşekkür ederim. O halde ben ilk önce HTML tasarımı yapıp, daha sonra sizin yaptığınız gibi media etiketleri ile responsive hale getireceğim siteyi. Media etiketlerini hangi kaynaktan bakmamı önerirsiniz?

Saygılar tekrardan. :)

Bootstrap öğrenin. Hazır class'lar ile çok basit bir şekilde responsive tema yapabilirsiniz.

Örneğin yan yana 3 tane div etiketiniz var bootsrapta col-md-4 class'ı verirseniz bilgisayarda 3'ü yanyana direk gelir. Aynı 3 div içerisine birde col-xs-12 verirseniz bu sefer o divler telefon ekranında alt alta bilgisayar ekranında yan yana görünür. Basit bir örnek ;



Bootstrap classlarına hakim olursanız çoğu yerleşimi kendi yapıyor zaten. Umarım anlatabilmişimdir.

Css ile kolayca yapabilirsiniz