Responsive dizayn – media sorğularının gücündən istifadə

Çərşənbə axşamı, 01 May 2012

Biz məlumatları sevirik və vebsaytlarımızdakı analitikaları izləməyə çox vaxt sərf edirik. Eyni şeyi edən hər hansı bir veb tərtibatçısı son vaxtlar mobil cihazlardan gələn trafikin artdığını müşahidə etmiş olacaq. Ötən il ərzində biz bir çox əsas saytların smartfon və planşetlərdən əhəmiyyətli dərəcədə səhifə baxışı topladığını gördük. Bunlar ən son HTML, CSS və JavaScript-i dəstəkləyən, lakin eyni zamanda 320 pikselə qədər dar ekran sahəsinə malik mürəkkəb brauzerləri olan çoxsaylı ziyarətçiləri təmsil edir.

Bizim
əlçatanlıq öhdəliyimiz o deməkdir ki, biz bütün istifadəçilərimiz üçün yaxşı baxış təcrübəsi təqdim etməyə çalışırıq. Biz mobil cihazlar üçün xüsusi vebsaytlar yaratmaq və ya mövcud saytları və yeni istifadəyə verilənləri həm masaüstü, həm də mobil cihazlarda yaxşı görünəcək şəkildə uyğunlaşdırmaq arasında çətin bir seçim qarşısında qaldıq. İki sayt yaratmaq bizə xüsusi avadanlıqları daha yaxşı hədəfləməyə imkan verərdi, lakin vahid bir saytı saxlamaq kanonik URL-i qoruyur, mürəkkəb yönləndirmələrin qarşısını alır və veb ünvanların paylaşılmasını sadələşdirir. Baxım rahatlığını nəzərə alaraq, hər ikisi üçün eyni səhifələrdən istifadə etməyə üstünlük verdik və aşağıdakı təlimatları necə yerinə yetirə biləcəyimizi düşünməyə başladıq:

1. Səhifələrimiz istənilən ekran icazəsində oxunaqlı şəkildə göstərilməlidir
2. Biz bir dəst məzmunu işarələyirik və onu istənilən cihazda baxıla bilən edirik
3. Pəncərənin ölçüsündən asılı olmayaraq, heç vaxt üfüqi sürüşdürmə çubuğunu göstərməməliyik

İmplementasiya

Başlanğıc nöqtəsi olaraq, sadə, semantik işarələmə bizə daha çevik və tərtibat dəyişdirilməli olduqda yenidən axması daha asan olan səhifələr verir. Üslub vərəqinin
maye tərtibatıaktivləşdirdiyinə əmin olaraq, biz artıq mobil dostluq yolundayıq. Konteyner elementləri üçün genişlik göstərmək əvəzinə, biz maksimum genişlik istifadə etməyə başladıq. Hündürlük yerinə
min-hündürlük istifadə etdik, beləliklə daha böyük şriftlər və ya çox sətirli mətn konteynerin sərhədlərini pozmur. Sabit genişlikli şəkillərin maye sütunları “açıq saxlamasının” qarşısını almaq üçün biz aşağıdakı CSS qaydasını tətbiq edirik: Maye tərtibatı yaxşı başlanğıcdır, lakin müəyyən incəlikdən məhrum ola bilər. Xoşbəxtlikdənmedia sorğuları

artıq
müasir brauzerlərdə yaxşı dəstəklənir o cümlədən IE9+ və əksər mobil cihazlar. Bunlar mobil brauzerdə yaxşı işləyən sayt ilə sadələşdirilmiş UI-dən istifadə etmək üçün təkmilləşdirilmiş sayt arasındakı fərqi yarada bilər. Lakin əvvəlcə smartfonların özlərini veb serverlərə necə təqdim etdiyini nəzərə almalıyıq.
Görünüş sahələri
Piksel nə vaxt piksel deyil? Smartfonda olanda. Defolt olaraq, smartfon brauzerləri yüksək ayırdetməli masaüstü brauzerlər kimi davranır və səhifəni sanki masaüstü monitorunda baxırmışsınız kimi tərtib edir. Buna görə də siz yaxınlaşdırmadan əvvəl oxunması mümkün olmayan kiçik mətnli “ümumi baxış rejimi” alırsınız. Defolt Android brauzeri üçün

defolt görünüş sahəsinin genişliyi

ekrandakı
faktiki fiziki piksellərin
sayından asılı olmayaraq 800px, iOS üçün isə 980px-dir.
Brauzeri səhifənizi daha oxunaqlı miqyasda göstərməyə məcbur etmək üçün görünüş sahəsi meta elementindən istifadə etməlisiniz:
Mobil ekran icazələri çox dəyişir, lakin əksər müasir smartfon brauzerləri hazırda 320px bölgəsində standart

cihaz genişliyi

bildirir. Əgər mobil cihazınızın faktiki genişliyi 640 fiziki pikseldirsə, o zaman 320px genişliyində olan şəkil prosesdə piksellərin sayını ikiqat artıraraq ekranın tam genişliyinə qədər ölçüləcək. Mətnin kiçik ekranda daha aydın görünməsinin səbəbi də budur – standart masaüstü monitorla müqayisədə ikiqat piksel sıxlığı. Görünüş sahəsi meta

teqində genişliyi cihaz genişliyinə tənzimləməyin faydalı tərəfi odur ki, istifadəçi smartfon və ya planşetinin oriyentasiyasını dəyişdikdə o yenilənir. Bunu media sorğuları ilə birləşdirmək istifadəçi cihazını çevirdikcə tərtibatı tənzimləməyə imkan verir: Reallıqda saytınızın müxtəlif cihazlarda necə axdığına və göründüyünə görə fərqli kəsilmə nöqtələrindən istifadə etməli olduğunuzu görə bilərsiniz. Siz həmçinin piksel ölçülərinə istinad etmədən xüsusi oriyentasiyaları hədəfləmək üçün
oriyentasiya media sorğusundan istifadə edə bilərsiniz,

dəstəkləndiyi yerdə Media sorğuları nümunəsi Biz bu yaxınlarda
Google haqqında.

səhifəsini yenidən istifadəyə verdik. Maye tərtibatını qurmaqdan əlavə, planşet və ya smartfon kimi kiçik ekranlarda təkmilləşdirilmiş təcrübə təmin etmək üçün bir neçə media sorğusu əlavə etdik.

Xüsusi cihaz icazələrini hədəfləmək əvəzinə, biz nisbətən geniş kəsilmə nöqtələri dəsti ilə getdik. 1024 pikseldən geniş ekran icazəsi üçün biz səhifəni 12 sütunlu torumuza uyğun olaraq orijinal dizayn edildiyi kimi göstəririk. 801px və 1024px arasında, maye tərtibatı sayəsində bir qədər sıxılmış versiyanı görürsünüz.
Yalnız ekran icazəsi 800 pikselə düşərsə, əsas məzmun hesab olunmayan məzmun səhifənin altına göndəriləcək: Sonuncu media sorğusu ilə biz smartfon ərazisinə daxil oluruq:

Bu nöqtədə, biz artıq böyük şəkli yükləmirik və məzmun bloklarını yığırıq. Biz həmçinin məzmun elementləri arasında əlavə boşluq əlavə etdik ki, onlar müxtəlif bölmələr kimi daha asan müəyyən edilsin.

Bu sadə tədbirlərlə biz saytın geniş çeşidli cihazlarda istifadə edilə biləcəyinə əmin olduq.

Nəticə

Nəzərə almaq lazımdır ki, saytları mobil cihazlarda və dar görünüş sahələrində əlçatan etmək üçün sadə bir həll yolu yoxdur. Maye tərtibatları əla başlanğıc nöqtəsidir, lakin bəzi dizayn güzəştləri edilməli ola bilər. Media sorğuları bir çox cihaz üçün cilalama əlavə etməyin faydalı yoludur, lakin unutmayın ki, ziyarətlərin

25%-i

hazırda bu texnikanı dəstəkləməyən masaüstü brauzerlərdən edilir və bəzi

performans təsirləri
var. Əgər saytınızda dəbli vidcet varsa, o siçanla mükəmməl işləyə bilər, lakin incə idarəetmənin daha çətin olduğu toxunma cihazında o qədər də yaxşı işləməyə bilər. Əsas odur ki, erkən və tez-tez test edəsiniz. Öz saytlarınızı smartfon və ya planşetlə gəzməyə sərf olunan hər hansı vaxt əvəzsiz olacaq. Real cihazlarda test edə bilmədikdə,
Android SDKvə ya

iOS Simulator
istifadə edin. Dostlarınızdan və həmkarlarınızdan saytlarınıza öz cihazlarında baxmalarını xahiş edin və onların necə qarşılıqlı əlaqədə olduqlarını da izləyin. Mobil brauzerlər yeni trafikin əla mənbəyidir və onları necə ən yaxşı şəkildə dəstəkləməyi öyrənmək peşəkar inkişafın maraqlı yeni sahəsidir.
Google-da responsive dizaynın daha çox nümunələri:www.google.com/about/

www.google.com/goodtoknow

www.google.com/culturalinstitute

• www.google.com/events/sciencefair
• www.google.com/intl/en/chrome/devices
• picasa.google.com
• Yazı müəllifləri:
• Rupert Breheny
• Edward Jung

, və Matt Zürrer,
dees
fr, Google Webmaster Team