1.1 Mobil yanaşma (Mobile-First)
Responsive design — bu, veb-saytların müxtəlif ekran ölçülərinə və cihazlara uyğunlaşmasına imkan verən veb-inkişaf yanaşmasıdır, istifadə rahatlığını ən yaxşı səviyyədə təmin edir. Responsiv layout-un əsas məqsədi saytı bütün istifadəçilər üçün rahat və əlçatan etməkdir, fərqi yoxdur hansı cihazdan istifadə edirlər.
Mobil yanaşma o deməkdir ki, dizayn kiçik ekranları olan mobil cihazlar üçün hazırlanmağa başlanır və daha böyük ekranlara genişləndirilir. Bu metod saytda ən vacib elementlərə və funksiyalara fokuslanmağa kömək edir.
Mobil yanaşmanın üstünlükləri:
- Kontentin mobil istifadəçilər üçün optimallaşdırılması
- Kiçik ekranlar üçün dizaynın və funksionallığın sadələşdirilməsi
- Kontentin miqdarını azaltmaqla performansın artırılması
Nümunə:
/* Mobil cihazlar üçün əsas stillər */
body {
font-size: 16px;
margin: 0;
padding: 0;
}
/* Daha böyük ekranlar üçün stillər */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
1.2 Proqressiv Təkmilləşdirmə (Progressive Enhancement)
Proqressiv təkmilləşdirmə bütün istifadəçilər üçün əsas funksionallıq təqdim etməyə diqqət yetirir, daha sonra daha güclü brauzerlər və cihazlar üçün təkmilləşdirmələr əlavə edir. Bu yanaşma kontentin mövcudluğunu təmin edir, hətta istifadəçinin cihazı bəzi funksiyaları və ya stilləri dəstəkləmirsə də.
Proqressiv təkmilləşdirmənin üstünlükləri:
- Bütün istifadəçilər üçün əsas funksionallıq təmin etmək
- Daha müasir cihazlara malik olanlar üçün istifadəçi təcrübəsini yaxşılaşdırmaq
- Kontentin və ya funksionallığın itkisi riskini azaltmaq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proqressiv Təkmilləşdirmə</title>
<style>
/* Bütün brauzerlər üçün əsas stillər */
body {
font-family: Arial, sans-serif;
}
/* Müasir brauzerlər üçün təkmilləşdirilmiş stillər */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div>Kontent 1</div>
<div>Kontent 2</div>
</div>
</body>
</html>
1.3 Layoutların elastikliyi (Fluid Layouts)
Layoutların elastikliyi müxtəlif ekran ölçülərinə uyğunlaşa bilən elastik elementlərdən istifadə deməkdir. Bu, ekran ölçüsündən asılı olaraq avtomatik olaraq ölçüsünü dəyişdirən elastik konteynerlərin istifadəsini əhatə edə bilər.
Layout elastikliyinin üstünlükləri:
- Müxtəlif cihazlarda kontentin göstərişinin yaxşılaşdırılması
- Ekran ölçüsü dəyişikliklərinə daha yaxşı uyğunlaşma
- Kontentin istifadəsini və əlçatanlığını artırmaq
Nümunə:
<div class="container">
<div class="item-1">Kontentin elementi 1</div>
<div class="item-2">
Etiam scelerisque lectus nulla, eget convallis orci convallis vel. Etiam sed interdum sem. Nunc vestibulum lectus nibh, in volutpat velit fermentum eget. Mauris in risus tincidunt, sodales odio et, rutrum ligula. In iaculis congue ex in laoreet. Sed id eros porttitor, finibus diam ultrices, consectetur leo. Fusce aliquam, nibh ac sollicitudin viverra, felis libero fringilla orci, nec auctor elit sapien non arcu. Proin dolor mi, iaculis ut velit id, vestibulum consectetur metus. Duis venenatis felis a diam elementum, eget ullamcorper leo scelerisque. Sed tempus euismod urna et tristique. Duis at odio quis libero commodo ullamcorper id vel odio. Maecenas volutpat rhoncus sodales. Mauris eget nunc accumsan, rhoncus massa at, placerat lorem.
Etiam ullamcorper elementum tellus non euismod. Mauris euismod mi nisi, sed egestas ligula varius sed. Nunc tortor elit, hendrerit sed gravida in, tempus nec augue. Aliquam vitae condimentum velit. Sed id massa ac felis tempor elementum. Aenean at nulla ipsum. Fusce sed cursus tortor. Duis sodales rhoncus eros, non aliquam ante ultricies ut. Pellentesque auctor ultricies aliquet. In laoreet enim dolor, vel consectetur sapien laoreet eu.
In efficitur pharetra ex convallis egestas. Praesent egestas, sapien fermentum consectetur vestibulum, quam dui pharetra urna, vitae finibus arcu lacus quis mauris. Quisque consectetur lorem sapien, nec pulvinar elit varius vitae. Cras elementum risus lacus, a interdum tellus euismod ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas pharetra, odio vel facilisis venenatis, ipsum leo viverra ligula, ut venenatis enim ipsum ut lectus. Fusce cursus mollis congue.
</div>
</div>
.container {
width: 100%;
padding: 20px;
box-sizing: border-box;
color: white;
}
.item-1 {
min-height: 50px;
width: calc(100% / 3);
float: left;
background: purple;
}
.item-2 {
background: gray;
}
1.4 Kontent İyerarxiyası (Content Hierarchy)
Kontent iyerarxiyası responsive layout üçün önəmlidir, çünki o, məlumatları hər hansı bir cihazda əlçatan və başa düşülən şəkildə təşkil etməyə kömək edir. Buraya başlıqların, paraqrafların, siyahıların və digər elementlərin düzgün istifadəsi ilə aydın və məntiqli strukturun yaradılması daxildir.
Kontent iyerarxiyasının üstünlükləri:
- Mətni oxumağın və məlumatı qəbul etməyin asanlaşdırılması
- Bütün istifadəçilər üçün kontentin əlçatımlılığının artırılması
- Saytda asanlıqla naviqasiya və qarşılıqlı təsir
Misal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontent iyerarxiyası</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
p {
font-size: 1em;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Əsas başlıq</h1>
<h2>Alt başlıq</h2>
<p>
Bu, alt başlıqdan sonra gələn mətn paraqrafının nümunəsidir.
Mətn hamı üçün asan oxunan və başa düşülən olmalıdır.
</p>
</body>
</html>
GO TO FULL VERSION