Responsive web dizayn nədir?
Responsive web dizayn, dizayn edilmiş səhifənin bütün ekranlarda yaxşı görünməsini təmin edən bir texnikadır.
Responsive veb dizaynı səhifənin bütün cihazlarda yaxşı görünməsi deməkdir.
Responsive veb dizayn səhifənin ölçüsünü dəyişdirərkən, kiçildərkən və ya böyüdərkən səhifənin bütün cihazlarda yaxşı görünməsini təmin etməkdən ibarətdir.
Bunu necə etmək olar?
Responsive web dizayn HTML və CSS istifadə edərək həyata keçirilir.
Responsive veb dizayn üçün heç bir proqrama və ya proqrama ehtiyac yoxdur.
Nə üçün responsive veb dizayn etməliyik?
Veb səhifələr müxtəlif ekran ölçüləri olan kompüterlərdə, planşetlərdə və ya telefonlarda ziyarət edilir.
Responsive veb dizayn hazırlanmasa, bu, mobil telefon və ya planşetdən saytımıza daxil olan ziyarətçilərə pis görünəcək və onların saytı dərhal tərk etməsinə səbəb olacaq.
Dizayn etdiyiniz veb səhifələr istənilən ekran ölçüsündə yaxşı görünməli və istifadəsi asan olmalıdır.
Veb səhifələr yalnız kompüter istifadəçiləri üçün nəzərdə tutulmamalı, veb-səhifə hər ekran ölçüsündə yaxşı görünməlidir.
Responsive veb dizayn, HTML elementlərinin ekran ölçüsünə uyğun olaraq CSS ilə ölçüsünü dəyişmək, gizlətmək, kiçilmək, böyütmək və ya başqa sahəyə daşımaqdır.
meta viewport nədir?
Viewport internet səhifəsinin istifadəçiyə görünən sahəsidir.
Veb səhifənin görünüşü istifadə olunan cihazdan asılı olaraq dəyişir.
Misal üçün; Mobil telefonun və planşetin baxış pəncərəsi masaüstü kompüterin baxış pəncərəsindən kiçikdir.
HTML meta viewport xüsusiyyəti veb səhifənin mobil cihazda necə göstəriləcəyini müəyyən edir.
Viewport istifadə edilmədikdə, mobil qurğular səhifəni iş masası ekranı qədər geniş, ekrana uyğun miqyaslı şəkildə göstərəcək.
Aşağıdakı misalda o, sol tərəfdə deyil, sağ tərəfdə istifadə olunur.
Viewport istifadəsi
Görünüş pəncərəsini təyin etmək üçün istifadə edilən viewport xüsusiyyəti <head> </head> teqi arasında yazılmış <meta /> teqi ilə istifadə olunur.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Ümumiyyətlə, viewport xüsusiyyəti cihaz width və initial-scale xassələrinə 1.0 dəyərləri verməklə istifadə olunur.
width=device-width – Görünüş sahəsinin enini piksellərlə müəyyən edir. device-width dəyəri göstərir ki, görüntü sahəsi eni cihazdan asılı olaraq dəyişəcək.
initial-scale=1.0 – Veb səhifə açıldıqda böyütmə nisbətini təyin etmək üçün istifadə olunur. 0 ilə 10.0 arasındakı dəyərləri qəbul edir.
Responsive veb dizayn üçün viewport xüsusiyyətindən istifadə edilməlidir.
Responsive veb dizaynı necə etmək olar?
Veb saytlar ümumiyyətlə yuxarıdan aşağı dizaynla hazırlanır.
Çünki istifadəçilər üçün veb-saytlarda yuxarıdan aşağıya doğru hərəkət etmək daha asandır.
Əgər istifadəçilər dizayn etdiyimiz saytı gəzmək üçün üfüqi istiqamətdə sürüşməyə, böyütməyə və ya kiçiltməyə məcbur olsalar, bu, istifadəçilər üçün yaxşı sayt olmayacaq və dərhal saytı tərk edəcəklər.
Səhifə daşmasının qarşısını almaq və Responsive Veb Dizaynı üçün edilməli olanlar;
Sayt bölmələri sabit eni və ya çox geniş olmamalıdır
Veb saytımızda istifadə etdiyimiz hər hansı şəkil ekran ölçüsündən böyükdürsə, istifadəçi şəkli görmək üçün səhifəni üfüqi olaraq sola və sağa sürüşdürməli olacaq. Unutmayın ki, saytda istifadə olunan şəkillərin və ya bölmələrin eni ekran ölçüsünə bərabər və ya ondan kiçik olmalıdır.
Saytın genişliyinin istənilən cihazda yaxşı görünməsinə aldanmayın
İstifadə etdiyimiz genişlik kompüterlərdə və telefonlarda yaxşı görünə bilər, lakin planşetlərdə yaxşı görünməyə bilər. Bunun üçün cihazda yaxşı görünən genişlik dəyərini və ölçü vahidini istifadə etməyin.
Müxtəlif ekran ölçüləri üçün müxtəlif üslubları müəyyənləşdirin
Ekran ölçüsünə xas olan genişlik və ölçü vahidi üçün CSS media sorğularından istifadə edin.
Mütləq genişlik əvəzinə nisbi genişlik dəyərindən istifadə edin
Böyük ekranlı cihazlar üçün hazırlanmış saytı responsive sayta çevirərkən və ya yeni responsive sayt dizayn edərkən “width: 960px” əvəzinə “width: 90%” kimi nisbi genişlik dəyərindən istifadə etməyə diqqət edin.
Genişlik həddi vermək üçün CSS min- və max- prefikslərindən istifadə edin
Genişlik limiti vermək üçün CSS min- və max- prefikslərindən istifadə edin. Genişlik həddi verildikdə təhriflər minimuma enəcək.
Responsive veb dizayn grid sistemi
Veb səhifənin dizaynı zamanı grid sistemi tez-tez istifadə olunur.
grid sistemi səhifəni sütunlara bölmək üsuludur.
Veb səhifəni tərtib edərkən grid sistemindən istifadə səhifədə bölmələrin yerləşdirilməsini asanlaşdırır.
Responsive veb dizaynı edərkən, ümumi eni 100% olan və 12 sütuna bölünmüş bir grid sistemi ümumiyyətlə istifadə olunur.
Nisbi genişlikdən istifadə edildiyi üçün genişlik müxtəlif ekran ölçülərində kiçilir və ya genişlənir.
Responsive grid sisteminin yaradılması
Grid sistemini yaratmağa başlamazdan əvvəl biz bütün brauzerlərdə genişliyə sərhəd (border) və doldurma (padding) dəyərlərini də əlavə etməklə hesablamaq üçün box-sizing xüsusiyyətinə border-box dəyəri veririk.
* {
box-sizing: border-box;
}
Responsive veb dizayn edərkən, bölmələri səhifədə daha yaxşı yerləşdirmək üçün 12 sütunlu grid sistemindən istifadə olunur.
Grid sistemində sütunun eni aşağıdakı kimi hesablanır: 100% / Sütunların ümumi sayı = 1 sütun eni
Grid sistemində istifadə edəcəyimiz Sütunların ümumi sayı = 12 olduğundan, bir sütunun eni: 100% / 12 = 8,33%
Sonra, sütun genişliyini göstərən prefiks col- və ya seçdiyimiz bir ləqəb əlavə edərək, Sütunların Ümumi Sayı qədər sinifləri müəyyənləşdiririk.
.col-1 {width: 8.33%; }
.col-2 {width: 16.66%; }
.col-3 {width: 25%; }
.col-4 {width: 33.33%; }
.col-5 {width: 41.66%; }
.col-6 {width: 50%; }
.col-7 {width: 58.33%; }
.col-8 {width: 66.66%; }
.col-9 {width: 75%; }
.col-10 {width: 83.33%; }
.col-11 {width: 91.66%; }
.col-12 {width: 100%; }
Sütunların yan-yana görünməsi üçün biz bütün sütunları float xüsusiyyəti ilə sola uyğunlaşdırırıq.
[class*="col-"] {
float: left;
}
Sütunlara float tətbiq edildiyi üçün əlavə etdiyimiz hər sütun sol tərəfdən davam edəcək.
Bunun qarşısını almaq üçün cərgə daşıyıcısının içinə sütunları əlavə etməli və sətir daşıyıcısından kənarda əlavə olunan elementlərin yeni sətirdə başlaması üçün float əməliyyatını clear xassə ilə silməliyik.
.row::after {
content: "";
clear: both;
display: table;
}
Lazımi CSS təriflərini etdik.
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Sıra daşıyıcısı ilə göstərilən sütunların cəmi Ümumi Sütun Sayından çox olmamalıdır.
12 sütunlu bir grid sistemi hazırladığımız üçün col-3 + col-9 = col-12.
Lazım olan grid sistemini təyin etdikdən sonra artıq saytımızı asanlıqla bölmələrə ayıra bilərik.
Grid sistemi nümunəsi
* {
box-sizing: border-box;
}
.col-1 {width: 8.33%; }
.col-2 {width: 16.66%; }
.col-3 {width: 25%; }
.col-4 {width: 33.33%; }
.col-5 {width: 41.66%; }
.col-6 {width: 50%; }
.col-7 {width: 58.33%; }
.col-8 {width: 66.66%; }
.col-9 {width: 75%; }
.col-10 {width: 83.33%; }
.col-11 {width: 91.66%; }
.col-12 {width: 100%; }
[class*="col-"] {
float: left;
border: 1px solid red;
}
.row::after {
content: "";
clear: both;
display: table;
}
<header class="row">
<div class="col-12"><h1>Sayt başlığı</h1></div>
</header>
<main class="row">
<div class="col-3">Menyu</div>
<div class="col-9">Məzmun</div>
</main>
<footer class="row">
<div class="col-12">Aşağı hissə</div>
</footer>
Nümunədə göründüyü kimi, grid sistemindən istifadə bölmələri veb-səhifədə yerləşdirməyi asanlaşdırır.
Səhifədəki nümunədəki menyu və məzmun bölmələrinin yerini dəyişdirmək üçün sadəcə HTML kodlarında onların yerini dəyişmək kifayətdir.
Brauzeri minimuma endirdiyimiz zaman dizayn etdiyimiz grid sistemi yaxşı görünməyə bilər.
Responsive veb dizayn CSS media sorğuları
CSS media sorğuları ekran ölçüsünə əsasən üslubları müəyyən etməyə imkan verir.
CSS @media tərəfindən müəyyən edilmiş şərt doğrudursa, @media blokları arasındakı üslub tərifləri etibarlıdır.
Aşağıdakı misalda, əgər brauzerin eni 600px və yuxarı olarsa, fon rəngi açıq yaşıl, brauzerin eni 599px və daha aşağı olarsa, fon rəngi açıq mavi olacaq.
body {
background-color: lightblue;
}
@media screen and (min-width: 600px) {
body {
background-color: lightgreen;
}
}
Responsive Web Dizayn Grid adlı sistem yaratdıq.
Ancaq brauzeri minimuma endirdiyimiz zaman yaxşı görünmədi.
CSS media sorğuları ilə ekran ölçüsünə görə üslub təriflərini tətbiq etməklə, saytın mobil telefonlar və planşetlər kimi cihazlarda daha yaxşı görünməsini təmin edə bilərik.
Grid sistemi nümunəsinə aşağıdakı CSS kodları əlavə edildikdə, brauzer eni 768px və daha aşağı olduqda hər bir sütun eni 100% olacaq.
@media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
float: left;
}
}
Brauzer pəncərəsini minimuma endirdikdə və ya kiçik ekran ölçüləri olan cihazlardan veb səhifəyə baxdıqda səhifə daha yaxşı görünəcək.
Kiçik ekranlara üstünlük vermək
Responsive web dizayn edərkən kiçik ekran ölçülərinə malik cihazlara üstünlük versək, kiçik ekran ölçülərinə malik cihazlarda səhifənin daha sürətli açılmasını təmin edəcəyik.
Kiçik ekran ölçüləri olan cihazlara üstünlük vermək üçün CSS kodlarımızda müxtəlif dəyişikliklər etməliyik.
/* Kiçik ekran ölçüsü olan cihazlar */
[class*="col-"] {
float: left;
width: 100%;
}
@media only screen and (min-width: 768px) {
/* Böyük ekran ölçüsü olan cihazlar */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Ekran ölçüsünə xas olan sütun eni
Hər bir ekran ölçüsü üçün fərqli sütun genişliyini təyin edə bilərik.
/* Kiçik ekran ölçüsü olan cihazlar */
[class*="col-"] {
float: left;
width: 100%;
}
@media only screen and (min-width: 600px) {
/* Tablet cihazları */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* Böyük ekran ölçüsü olan cihazlar */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Ekran ölçüsünə görə xüsusi sütun genişliyindən istifadə səhifənin hissələrini müxtəlif ekran ölçülərində daha yaxşı göstərir.
Aşağıdakı HTML kodları yuxarıdakı CSS kodları ilə veb səhifəyə əlavə edildikdə, ekran ölçüsünə xas olan sütun eninin istifadəsi daha yaxşı başa düşüləcəkdir.
<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>
Brauzerin enini azaltmaq və ya böyütməklə yuxarıdakı nümunəni sınadığımız zaman;
Ekran eni 768px və yuxarı olan səhifə bölmələri 3 sütuna bölünəcək - 6 sütun - 3 sütun,
Ekran eni 600px və 768px arasında, səhifə bölmələri 3 sütuna bölünəcək - 9 sütun - 12 sütun,
Ekranın eni 600px və ya daha azdırsa, hər bir sütun səhifə geniş olacaq.
Şəkillər
Responsive veb dizayn edərkən, şəkillərə nisbi qiymət verməklə şəkilləri həssas edə bilərik (width: 100%).
img {
width: 100%;
height: auto;
}
<img src="https://unsplash.it/500" alt="Grrr" />
Brauzerin eni təsvirin enindən daha geniş olarsa, şəkil böyüyəcək və təhrif baş verəcək.
max-width xüsusiyyəti təsvirin çox böyük və təhrif edilməsinin qarşısını almaq üçün istifadə olunur.
img {
max-width: 100%;
height: auto;
}
Ekran ölçüsünə görə xüsusi şəkil
Böyük bir şəkil ekranı böyük bir cihazda gözəl görünür.
Lakin kiçik ekranlı cihazlarda görüntü çox kiçik olduğu üçün yaxşı görünməyə bilər.
Ekran ölçüsünə uyğun bir şəkil istifadə edərək daha yaxşı görünüş əldə edilir.
HTML5 <picture> teqi
HTML5 <picture> teqi ekran ölçüsünə uyğun təsvirlərdən istifadə etməyə imkan verir.
HTML5 <picture> teqinin istifadəsi <video> və <audio> teqlərinə bənzəyir.
<picture>
<source srcset="https://unsplash.it/500?image=1" media="(max-width: 700px)">
<source srcset="https://unsplash.it/1000?image=0">
<img src="https://unsplash.it/1000?image=0" alt="Grr" />
</picture>
HTML5 <picture> teqini dəstəkləməyən brauzerlər üçün <img> teqindən istifadə etməyi unutmayın.
Videolar
Responsive web dizayn edərkən biz videolara nisbi dəyər (width: 100%) verməklə videoları həssas edə bilərik.
video {
width: 100%;
height: auto;
}
<video width="360" height="320" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
Tarayıcınız video etiketini desteklemiyor.
</video>
Brauzerin eni videonun enindən daha geniş olarsa, video böyüyəcək və videoda təhriflər olacaq.
max-width funksiyası videonun çox böyük və təhrif edilməsinin qarşısını almaq üçün istifadə olunur.
video {
max-width: 100%;
height: auto;
}
Responsive Web Dizayn Framework istifadə
Responsive veb dizaynı edərkən, hazır üslub təriflərinin toplusu olan CSS çərçivələrindən istifadə edə bilərsiniz.
Grid System, Menu System, Slide System kimi üslublar daha çox CSS çərçivələrində müəyyən edilir.
Dizayn edəcəyiniz sayta və ehtiyaclarınıza uyğun olaraq CSS çərçivələrindən birini seçə bilərsiniz.
CSS çərçivəsinin seçimində; Brauzer dəstəyi, həssas dəstək, istifadəçi dəstəyi və komponent dəstəyi kimi tələblər nəzərə alınmalıdır.
CSS çərçivələri hazır üslub tərifləri ilə yanaşı, hazır rəng tərifləri ilə də gəlir.
CSS çərçivələri pulsuz olduğundan, əksər veb-saytlar oxşar rəng təriflərindən istifadə edir, CSS çərçivəsində müxtəlif üslub və rəng təriflərini dəyişdirmək faydalı olacaq.
Tez-tez istifadə olunan CSS çərçivələri; Bootstrap, Foundation, Bulma, Semantik UI, Materialize
Framework istifadəsi
<!DOCTYPE html>
<html lang="az">
<head>
<title>Framework istifadəsi</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<main class="container">
<section class="jumbotron">
<h1>Bootstrap Framework istifadəsi</h1>
<p>Təsiri görmək üçün brauzerin ölçüsünü dəyişdirin!</p>
</section>
<div class="row">
<article class="col-sm-4">
<h3>Sütun 1</h3>
<p>Lorem Ipsum sadəcə çap və çap sənayesinin mətnidir.</p>
<p>Məlumdur ki, təkrarlanan səhifə məzmunu oxucunun diqqətini yayındırır.</p>
</article>
<article class="col-sm-4">
<h3>Sütun 2</h3>
<p>Lorem Ipsum sadəcə çap və çap sənayesinin mətnidir.</p>
<p>Məlumdur ki, təkrarlanan səhifə məzmunu oxucunun diqqətini yayındırır.</p>
</article>
<article class="col-sm-4">
<h3>Sütun 3</h3>
<p>Lorem Ipsum sadəcə çap və çap sənayesinin mətnidir.</p>
<p>Məlumdur ki, təkrarlanan səhifə məzmunu oxucunun diqqətini yayındırır.</p>
</article>
</div>
</main>
</body>
</html>
Nümunədə göründüyü kimi, CSS çərçivəsini istifadə etmək çox asandır.
Əvvəlcə səhifəmizə lazım olan faylları daxil etdik, sonra səhifədəki faylda olan hazır üslub təriflərindən istifadə etdik.
Çərçivə daxilində digər üslub tərifləri və istifadəsi haqqında məlumat əldə etmək üçün framework saytında sənədlərə baxa bilərsiniz.
