Reklam 1 Alanı
fff
 
googlede ara Yazar : davut_c20 - Hits : 3709 - Kategori : Özel-konular, Webmaster Seo - Tarih : 29 Ocak 2015 -
 

responsive-tasarım

Responsive tema nedir ve nasil yapilir?

Responsive tema, farklı ekran boyutlarına göre farklı görünüm alabilen temalar için kullanılır. Kısaca iPhone, iPad ve iMac için uyumluluk şeklinde de özetlenebilir. Son günlerde oldukça popüler olan bu kavram internete girmemizi sağlayan araçların çeşitlenmesi sebebiyle ortaya çıkmıştır.

Şimdi 5 soruda responsive (uyumlu) temanın ne olduğunu anlamaya çalışalım.

S1: Neden responsive tema?

Web siteniz masaüstü veya dizüstü bilgisayar üzerinde gayet sorunsuz görünebilir ancak cep telefonu veya tabletten sitenize girildiği zaman da ziyaretçinizi memnun edecek bir görünüm olup olmadığını bilemezsiniz. Responsive yani uyumlu bir temanız olursa farklı cihazlara göre değişebilen ve düzgün bir görünüm yakalamış olursunuz.

S2: Responsive temanın faydaları nelerdir?

Zaman, emek ve para. Şu sıralarda web sitelerinin bazılarında mobil site kavramını görüyoruz. Büyük siteler için çok sorun olmayabilir, belki de özellikle masaüstünden farklı özellikleri olan mobil site yapmak istemiş de olabilirler. Küçük ve orta ölçekli bir sitenin mobil şeklinde ayrı bir site yaptıracak ekonomisi ve buna harcayacak zamanı olmayabilir. Bu durumda temanıza responsive özellik ekleyerek bu dertten kolayca kurtulabilirsiniz.

S3: Responsive tema oluşturmak için ne bilmek gerekir?

HTML ve CSS. CSS bir web sitesinin nasıl göründüğünü belirler. Farklı medya türleri için HTML kodunun nasıl görüneceğini CSS ile belirtmelisiniz. Örneğin masaüstü veya dizüstünde görünen bir sütunu alan darlığından ötürü mobil sitede göstermek istemeyebilirsiniz bu durumda o sütun için görünüm özelliğini aşağıdaki gibi yapmaniz gerekecektir.
Örnek html kodlari:

[html]
<html>
<head>

</head>
<body>

<div id="topLogo">
<a href="/index.php"><img src="http://www.w3schools.com/images/w3logotest2.png" alt="W3Schools.com"></a>
</div>

<p>
Resize the browserwindow. When the width of this document is less than 300 pixels, the
background-color is "lightblue", otherwise it is "lightgreen".
</p>

</body>
</html>
[/html]

Hangi boyutlarda icin gecerli olsun yani hangi boyutta bir ekranda görunsun:
Ben 768px kodu olan dikey tablet kodunu sectim.

[css]

<style>

@media screen and (max-width: 600px) {
body {
background-color: lightblue;
width: auto;
}
#topLogo img{
border: 0;
height: 23px;
width: auto;
}
}
</style>

[/css]

Yukarıdaki kullanacaginiz (max-width: 768px) kodunu açıkalayacak olursak;

  • Bilgisayar Ekranı ve Yatay Tablet Çözünürlüğü: 1024 pixel ve üstü
  • Dikey Tablet Ekran Çöznürlüğü: 768px – 1023 pixel
  • Dikey Telefon Ekran Çözünürlüğü: 479 pixel’den küçük
  • Telefonların Yatay Ekran Çözünürlüğü: 480×767 pixel

 

Iyi temalar 🙂

 


http://www.mumya.net/responsive-tasarim-nedir-nasil-yapilir/
http://www.ozhandonder.net/responsive-tema-ne-demektir

YORUM YAP
Bu yazı için Henüz yorum yapılmamış . Bir yorum da sen ekleyebilirsin !!


YORUMLAR

Henüz yorum yapılmamış






    Son Yorumlar
  • hdfilmsitesi:

    10 numara 5 yıldız detaylı yazı siteme cok faydası oldu...

  • baha:

    yarış tutkunları için en güzel bir film diyebilirim...

  • baha:

    paylaşım için teşekkürler....

  • baha:

    bu paylaşım gerçekten benim için yararlı oldu. Çalışmanız için teşekk...

  • fullfilmizle:

    yazınız hoşuma gitti.İşimi yarıyacak kısımlarda yardımcu olacaktır.Te...

  •