8.1 Mobile-first yanaşması
Cavabverici veb-dizayn saytların müxtəlif ölçüdə ekranlara malik cihazlara uyğunlaşmasını tələb edir. Burada cavabverici layihələrin hazırlanması üçün iki əsas yanaşma mövcuddur: mobile-first və desktop-first. Hər bir yanaşmanın öz üstünlükləri və xüsusiyyətləri var ki, bu da hazırlanma prosesinə və son nəticəyə təsir edir.
Mobile-first prinsipləri
mobile-first yanaşması layihənin mobil cihazlar üçün dizayn ilə başlamasını, daha geniş ekranlara doğru genişlənməsini nəzərdə tutur. Bu metod minimalizm üzərində qurulur və mobil istifadəçilər üçün əsas vacib funksiyalara və məzmuna fokuslanır.
Mobile-first üstünlükləri:
- Performansın optimallaşdırılması: mobil cihazlar tez-tez daha yavaş birləşmələrə və məhdud resurslara malikdirlər, bu səbəbdən minimalist dizayn performansı artırır
- İstifadəçi təcrübəsinin yaxşılaşdırılması: mobile-first dizayn mobil cihazlarda istifadənin rahatlığını təmin edir, xüsusilə mobil istifadəçilərin artımı nəzərə alınsa
- Adaptasiya daha asandır: mobil dizayndan başlayaraq, daha geniş ekranlar üçün əlavə funksiyalar və stillər əlavə etmək daha asandır
Mobile-first tətbiqi nümunəsi:
/* Mobil cihazlar üçün əsas stillər */
body {
font-family: Arial, sans-serif;
padding: 10px;
}
header, main, footer {
margin: 10px 0;
}
header {
text-align: center;
}
/* Daha geniş ekranlar üçün stillər */
@media (min-width: 768px) {
body {
padding: 20px;
}
header, main, footer {
margin: 20px 0;
}
header {
text-align: left;
}
}
@media (min-width: 1024px) {
body {
padding: 30px;
}
header, main, footer {
margin: 30px 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile-first nümunə</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Başlıq</h1>
</header>
<main>
<p>Əsas məzmun</p>
</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Kodun izahı:
- Əsas stillər: mobil cihazlar üçün stilləri təyin edir
- Media queries: plansetlər və desktoplar üçün stilləri genişləndirir
8.2 Desktop-first yanaşması
desktop-first yanaşması o deməkdir ki, inkişaf əvvəlcə desktop cihazlar üçün dizayndan başlayır, sonra isə kiçik ekranlar üçün uyğunlaşdırılır. Bu metod bütün funksiya və interfeys elementlərinin əvvəlcə həyata keçirilməsinə, sonra isə mobil cihazlar üçün sadələşdirilməsinə imkan verir.
Desktop-first üstünlükləri:
- Dolu funksiya: inkişaf tam veb-sayt versiyasından başlayır, bütün funksiyalar və interfeys elementləri daxil olmaqla
- İnkişaf rahatlığı: bir çox dizayner və inkişafçılar üçün daha geniş ekrandan başlamağı daha asan olur, çünki iş üçün daha çox yer var
Desktop-first yanaşması nümunəsi:
/* Desktop cihazlar üçün əsas stillər */
body {
font-family: Arial, sans-serif;
padding: 30px;
}
header, main, footer {
margin: 30px 0;
}
header {
text-align: left;
}
nav ul {
display: flex;
gap: 10px;
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: black;
}
/* Kiçik ekranlar üçün stillər */
@media (max-width: 1024px) {
body {
padding: 20px;
}
header, main, footer {
margin: 20px 0;
}
nav ul {
flex-direction: column;
}
}
@media (max-width: 768px) {
body {
padding: 10px;
}
header, main, footer {
margin: 10px 0;
}
nav ul {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desktop-first nümunə</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Başlıq</h1>
<nav>
<ul>
<li><a href="#">Əsas</a></li>
<li><a href="#">Haqqımızda</a></li>
<li><a href="#">Əlaqə</a></li>
</ul>
</nav>
</header>
<main>
<p>Əsas məzmun</p>
</main>
<footer>
<p>Alt hissə</p>
</footer>
</body>
</html>
Kodun izahı:
- Əsas stillər: desktop cihazlar üçün stilləri müəyyən edir
- Media sorğuları: planşetlər və mobil cihazlar üçün stilləri uyğunlaşdırır, interfeysi sadələşdirir və ekran azalması ilə elementləri gizlədir
8.3 Yanaşmaların müqayisəsi
Mobile-first və Desktop-first yanaşmalarını qısa şəkildə müqayisə edək.
Mobile-first:
- Əsas fokus: mobil cihazlar
- Proses: minimalist dizayndan başlamaq, daha böyük ekranlar üçün əlavə funksiyalar və üslublar əlavə etmək
- Üstünlüklər: performansın optimallaşdırılması, mobil cihazlarda təkmilləşdirilmiş istifadəçi təcrübəsi, daha böyük ekranlara uyğunlaşdırılması daha asandır
Desktop-first
- Əsas fokus: masaüstü cihazlar
- Proses: tam veb-sayt versiyasından başlamaq, mobil cihazlar üçün interfeysi sadələşdirmək
- Üstünlüklər: başlanğıcdan tam funksionallıq və interfeys elementləri, böyük ekranlarda işləmə rahatlığı
Mobile-first və Desktop-first yanaşmaları arasında seçim layihənin məqsədlərindən, hədəf auditoriyasından və inkişaf komandası preferensiyalarından asılıdır. Mobile-first yanaşması mobil cihazlar üçün optimallaşdırma və performans yaxşılaşdırılması təmin edir, Desktop-first isə başlanğıcdan tam funksionallıq və interfeys elementlərini həyata keçirmək imkanı verir. Hər bir yanaşmanın xüsusiyyətlərini anlamaq, hər hansı bir cihazda effektiv işləyən adaptiv və istifadəçi dostu veb-saytlar yaratmağa kömək edir.
GO TO FULL VERSION