Responsive Design/Duyarlı Tasarım

Çoğalan mobil teknoloji cihazlarıyla birlikte her tip ekran çözünürlüklerine göre(akıllı telefonlar, tabletler, notebook, netbook ve desktoplara göre) tasarım geliştirmek bizim gibi tasarımcıların korkulu rüyası olmasın diye responsive design yani duyarlı tasarım artık olmazsa olmaz bir trend oldu. Responsive design/duyarlı tasarım ekran çözünürlüklerine göre özel gösterilen tasarımlar yapmak yerine bu ekran çözünürlüklerine duyarlı olarak görünen tasarımlardır.



Bu sitelere örnek olarak aşağıdaki siteleri inceleyebilirsiniz. Tarayıcınızın kenarından tutup küçültüp büyütürseniz değişen tasarımları görebilirsiniz:

320 and Up Stuff & Nonsense

https://kippt.com/

Flite · The Leading Cloud-based Advertising Platform

All-in-one online business solution - Swizzle

NI Archive - Plantation, Rewriting the Story

Design in the browser with web fonts and real content - Typecast

Monotype Acquires Design By Front LTD - Typecast

Columnal | A responsive CSS grid system helping desktop and mobile browsers play nicely together.

Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit


Eğer siz de duyarlı tasarım geliştirmek isterseniz kaynak olarak aşağıdaki frameworkleri inceleyebilirsiniz:

960 Grid System

Bootstrap

Responsive Grid System

Ingrid ‒ a fluid CSS layout system

Gumby - A Flexible, Responsive CSS Framework - Powered by Sass

Susy

Responsive Web Design just got Easier with the Responsive Grid System

http://www.angrycreative.se/wordpress/pl...framework/

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development

Amazium - The responsive web framework..!

The Semantic Grid System

1140px CSS Grid Retired — Andy Taylor

Foundation | The Most Advanced Responsive Front-end Framework from ZURB

Responsive Design/Duyarlı Tasarım | Veysel Özdemir

Css3 ile Responsive Tasarım Nasıl Yapılır? Videolu İzle

Bu çalışmamızda CSS3 ile Responsive Site Tasarımlarda kullanılan divlerin düzenlenmesini anlatacağım. Bu ders yeni düzen web site tasarımlarında sizin önünüzü açacaktır. Bundan emin olabilirsiniz. Aslında bu çalışma ile tüm ekran tiplerinde yani çözünürlüğü farklı olan tüm monitörlerde sitenizi tam anlamıyla görebileceksiniz. Böylece sitenizi cep telefonlarında, tabletlerde ve bilgisayarlarda eksiksiz görme imkanı olacaktır.


Tüm çözünürlüklerde sitenizi görüntülemek istiyorsanız bu çalışmayı kesin sonuna kadar izleyin. Şimdiden hepiniz hayırlı seyirler diliyorum. Yorumlarınızı eksik etmezseniz sevinirim. Kolay gelsin.

Responsive Web Sayfası Yapıyoruz 1

Responsive Tasarım Nedir ? Nasıl Yapılır ?

Günümüzün populerleşen en iyi sistemlerinden biri olaran responsive tasarım konusunda internet ortamında pek bilgiye rastlayamadım.Bunun üzerinde responsive konusunda açık ve aydınlatıcı bir makale yazmaya karar verdim.

Öncelikle responsive akışkan (fluid) manasını taşıdığını bilmemiz gerekir.Buradan suyun kabın şeklini aldığı gibi web sitelerinin de ekran boyutuna göre şekil alması anlamını çıkarabiliriz.

Responsive tasarımın pek çok yararı mevcuttur.Bunlardan bazılar ;

Mobil siteler için ayrıca içerik girişine gerek kalmaz.
Tablet,Mobil,Pc vs. platformlarına otomatik uygulanabilir bir sistemdir.
Tek style dosyasında tüm tanımlamalar yapılabilir.
Vs. vs.
Responsive tasarımı yaparken css 'nin @media screen özelliğini kullanıyoruz. Kullanımı ise aynen aşağıdaki gibidir.

/*——————————[ 996 ]—————————*/
@media screen and (max-width:996px){
/* Buraya yazacağınız css kodu maksimum 996px genişliği olan cihazlarda çalışacaktır. Tabletler için kullanabiliriz.*/
}
/*——————————[ 480 ]—————————*/
@media screen and (max-width:480px){
/* Buraya yazacağınız css kodu maksimum 480px genişliği olan cihazlarda çalışacaktır. */
}
/*——————————[ 320 ]—————————*/
@media screen and (max-width:320px){
/* Buraya yazacağınız css kodu maksimum 320px genişliği olan cihazlarda çalışacaktır. */
}

Yukarıdaki formatlara ek olarak sizde çeşitli atamalarda bulunabilirsiniz.

Responsive tasarımda px yerine % , width yerine de max-width kullanmaya dikkat etmeniz daha kaliteli sonuçların ortaya çıkmasını sağlayacaktır.Bu noktaya da dikkat etmenizi tavsiye ederiz.

ankaakademi.com/responsive-tasarim-nedir-nasil-yapilir