Responsive Tasarımın Tamamlanması

Bu adımımızda responsive tasarımımızı tamamlayacağız ve projemizi bitireceğiz.

Media Screen Kodları

Size kolaylık olması açısından tasarımlarınızda kullanabileceğiniz media screen kodlarını aşağıda veriyorum.

        /* Smartphones (portrait and landscape) ----------- */  
        @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {  
          /* Styles */  
        }  
  
        /* Smartphones (landscape) ----------- */  
        @media only screen and (min-width : 321px) {  
          /* Styles */  
        }  
  
        /* Smartphones (portrait) ----------- */  
        @media only screen and (max-width : 320px) {  
          /* Styles */  
        }  
  
        /* iPads (portrait and landscape) ----------- */  
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  
          /* Styles */  
        }  
  
        /* iPads (landscape) ----------- */  
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {  
          /* Styles */  
        }  
  
        /* iPads (portrait) ----------- */  
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {  
          /* Styles */  
        }  
  
        /* Desktops and laptops ----------- */  
        @media only screen and (min-width : 1224px) {  
          /* Styles */  
        }  
  
        /* Large screens ----------- */  
        @media only screen and (min-width : 1824px) {  
          /* Styles */  
        }  
  
        /* iPhone 4 ----------- */  
        @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {  
          /* Styles */  
        }  
    

Kaynak: www.hongkiat.com/blog/css-snippets-for-designers/

Eski Tasarımların Responsive Hâle Getirilmesi

Belki daha önceden yaptığınız bir site olabilir ve bu siteyi responsive yapacağınızı düşünmeden tasarlamış olabilirsiniz. Bu gibi durumlarda ilk önce tasarladığınız siteye responsive'in gerekli olup olmadığını sorgulayın. Eğer gerekliyse mümkün olduğunca en basit CSS (media-screen) kodlarını kullanmalısınız.

Örneğin;

Zamanında onlineehliyetsinavlari.com adlı bir site tasarlamıştım. Tasarıma 2012 yılında başladığım için henüz o zamanlar responsive tasarımdan habersizdim. Bir süre sonra tasarımın responsive hâle getirilmesi gerektiğini anladım. Bunun için oldukça basit bir çözüm ürettim. Site 960px çözünürlükten yukarı ve aşağı olmak üzere iki farklı görünümde olacaktı. 960px ve yukarısı masaüstü ile dizüstü platformlar için, aşağısı ise tablet ve akıllı telefonlar için hizmet verecekti. Bu tasarımı bir günde tamamladım. Tasarım için kullandığım CSS media-screen'leri aşağıdaki gibi

        /* Masaüstü ve Dizüstü */
        @media screen and (min-width: 961px) {
            #container {
                display: inherit;
            }

            #mobile-container {
                display: none;
            }
        }

        /* Telefon ve Tablet */
        @media screen and (max-width: 960px) {
            #container {
                display: none;
            }

            #mobile-container {
                display: inherit;
            }
        }
    

Amaç çok basit. Bir sayfada iki adet container var. Biri masaüstü tasarım için. Diğeri mobil cihazlar için. Çözünürlük 960px'den yukarı ise mobil tasarım gözükmüyor; sadece masaüstü tasarım görünüyor. 960px'den aşağı ise masaüstü tasarım gözükmüyor; sadece mobil tasarım görünür oluyor. Bunu da basit container teknikleri ile yapıyoruz.

Sonuç olarak siteyi ziyaret ettiğinizde ne demek istediğimi daha iyi anlayacaksınız.
➤ onlineehliyetsinavlari.com'a git

Mobildeki görünümü ise aşağıdaki gibi

Mobil Görünüm

Gördüğünüz üzere masaüstü ve mobil görünürlükleri bu şekilde. Oldukça basit bir çözüm ile eski tasarım mobil hâle getirilebiliyor.

Ekler

Bu adımda biten çalışmayı aşağıdaki bağlantı ile indirebilirsiniz.

▼ TurkAntiVirus Responsive Biten Projeyi İndir ▼

Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.

Beşinci adımı tamamladınız. Bir sonraki adımda sitemizi webde yayınlayacağız.

Diğer derse geçmek için tıklayınız. >>>
Come to the Dark Site!