Əvvəlcə mobil. Sadə, Cavab verən Mobil İlk Naviqasiya

20.12.2023

Buraxılış tarixi: 29-03-2013

Müəllifin qeydi: Bu ilin əvvəlində mən şirkətimizin internet saytının yenidən dizaynının başlanğıc mərhələsində idim. Biz artıq birdən çox cihazı dəstəkləmək üçün üstünlük verilən həll olan birbaşa cavab verən veb dizayn yanaşmasını götürməyi planlaşdırmışdıq. Bostonda keçirilən An Event Apart-da cavab verən veb dizaynın məhdudiyyətləri və çətinlikləri haqqında səmimi müzakirələrdən öyrəndikdən sonra mən başa düşdüm ki, həllimizə bir az tənzimləmə lazımdır.

Xoşbəxtlikdən, qarşımızdakı layihə uyğunlaşma iş axınımızı təkmilləşdirmək üçün sınaqdan keçirmək və özümüzə meydan oxumaq üçün mükəmməl fürsət idi. Bu yazıda daha yaxşı cavab verən veb-sayt yaratmaq üçün çalışdığımız müddətdə atdığımız addımları, o cümlədən yol boyu bəzi dəyişiklikləri ətraflı izah edəcəyəm.

Məqsədlərin qoyulması

Layihəmizdə atdığımız ilk addım adaptiv yanaşmamız üçün üstünlüklərin və maneələrin siyahısını yaratmaq oldu. Siyahımız belə görünürdü:

ÜSTÜNLƏRİ

1. Bir veb saytın qurulması, dəstəklənməsi və təşviqi.

2. Yalnız çox böyük masa üstü monitorları və kiçik portativ cihazları deyil, çoxsaylı ekran ölçülərini dəstəkləyir.

3. Gələcəyə davamlıdır, çünki düzən yalnız bugünkü populyar cihazların ölçüsündən deyil, ekran ölçüsündən asılı olaraq dəyişəcəkdir.

MANEƏLƏR

1. Yalnız böyük ekranlı cihazlar üçün nəzərdə tutulmuş məzmun çox vaxt kiçik ekranlara axın edir və sadəcə olaraq CSS media sorğularından istifadə edərək lazımsız yükləmələr yaradaraq “kəsilir”.

2. “Ölçüsü yoxdur” tərtibatı səbəbindən biz cihazdan və ya ekran ölçüsündən asılı olaraq belə tərtibatın orijinal sırasını dəyişə bilmirik (və ya ondan vacib olmayan elementləri tamamilə aradan qaldırırıq).

Yəqin ki, qeyd etdiyimiz adaptiv yanaşmanın çatışmazlıqlarının problemin yalnız mobil həllinin ən yaxşı olduğu sahələr olduğunu görəcəksiniz. Yeni veb-saytımız üçün biz hər iki dünyanın ən yaxşısını istəyirdik - həssas yanaşma və xüsusi mobil həllin təklif edə biləcəyi üstünlüklər.

Məzmundan başlayaraq

Cavab verən və mobil xüsusi və ya yalnız mobil dizayn arasındakı ümumi fərqlərdən biri brauzerə ötürülən məzmun və ya xüsusiyyətlərdir. Xüsusi mobil vebsayt çox vaxt vebsaytın “normal” versiyasında olan məzmunun yalnız bir hissəsini əks etdirir. Bu, iki yanaşma arasında davam edən mübahisələrdən biridir və yalnız mobil internet saytlarının tərəfdarları tez-tez mobil istifadəçilərin yalnız onlar üçün "vacib" olan məzmuna daxil olmaq istədiklərini iddia edirlər.

Bu düşüncə xəttinin problemi ondan ibarətdir ki, istifadəçi üçün “vacib olan” hər hansı bir istifadəçi vəziyyətdən asılı olaraq dəyişir. Məzmuna girişi sadəcə istifadə etdiyiniz cihaza görə məhdudlaşdırmaq mobil veb saytınızdan nəyi saxlamağınıza və nəyi siləcəyinizə qərar verərkən təsəvvür etdiyiniz ideal ssenariyə uyğun gəlməyənləri qəzəbləndirmək və məyus etmək üçün etibarlı yoldur.

Biz həmişə inanmışıq ki, bütün istifadəçilər vebsaytın təklif etdiyi bütün məzmuna çıxış əldə etməlidir, lakin bunun vebsaytımız və istifadəçilərimiz üçün həqiqətən uyğun olduğuna əmin olmaq istəyirik. Düzgün yanaşmanı müəyyən etmək üçün biz analitiklərimizə müraciət etdik və mobil və qeyri-mobil ziyarətçilərin tələb etdiyi məzmun növü arasında nəzərəçarpacaq fərq tapmadıq. mobil cihazlar. Desktop istifadəçiləri arasında populyar olan məzmun mobil ziyarətçilər arasında da populyar idi.

Bundan əlavə, biz veb saytımızın auditoriyasının əksəriyyətini təmsil edən bəzi hazırkı müştərilərimizlə oturub söhbət etdik və onlara bir neçə sual verdik, o cümlədən: “İş masanızda olan zaman vebsaytımıza hansı məzmun üçün gəlirsiniz? ?" və: "Bəs planşet və ya telefon?" Müsahibələr, əlbəttə ki, daha ətraflı idi, amma bizi maraqlandıran şeyləri artıq görə bilərsiniz. Bir daha, istifadə olunan cihazdan asılı olmayaraq, axtarılan məzmunun eyni olduğu aşkar edildi.

Məlumat istiqaməti diktə edir

Araşdırmamız zamanı aşkar etdiyimiz faktlar istənilən cihazda eyni məzmuna girişi təmin edən həssas yanaşmanın veb saytımız üçün düzgün seçim olduğuna inamımızı gücləndirdi. Bu araşdırma həm də veb saytımızdakı hansı məzmunun ümumiyyətlə əldə edilmədiyini müəyyən etməyə imkan verdi. Tamaşaçılarımız tərəfindən istifadə edilməyən səhifələri aşkar etdikdə onları sayt xəritəsindən kəsdik. Eyni şey məzmun iyerarxiyasındakı ən az populyar məzmun və yenidən dizayn planlarımızla edildi.

Məzmuna baxmaq və auditoriyamız üçün nəyin vacib və nəyin olmadığı haqqında məlumat toplamaqla dizayna başlamaqla, vebsayt dizaynımızın dəstəkləməsi üçün hansı məzmunun lazım olduğuna dair sağlam planla dizayn mərhələsinə keçə bildik.

Ekstremal nöqtələrin dizaynının yaradılması

Brauzerdə dizayn üçün arqumentlər eşitdim və bu yanaşmanın təmin etdiyi faydaları qiymətləndirirəm. Bir neçə dəfə brauzerdə dizayn yaratmağa çalışaraq, öz dizayn iş prosesimin Photoshop-da başlamaq üçün ən asan və ən əlverişli olduğunu gördüm. Mən bunun hamı üçün düzgün qərar olduğuna inanmıram, amma bu mənim üçün doğrudur və mən bu layihəyə belə başlamışam.

Cavab verən dizayn üçün mən “kənar dizayn” adlandırdığım üsuldan istifadə edirəm. Veb saytın masaüstü versiyasını yaratmaqla başlayıram. Orada mən dizayn mətnlərinin tipoqrafik tərtibatını, üslubunu və ümumi vizual istiqamətini - həmçinin veb-saytın geniş ekran görünüşünün tərtibatını hazırlayıram. Veb saytın həmin versiyasından razı qaldıqdan sonra mən kiçik ekran və ya "mobil" versiyada işləyirəm, eyni vizual istiqaməti götürürəm, lakin tərtibatı daha kiçik ekrana uyğunlaşdırmaq üçün düzəldirəm. Bu prosesin sonunda məndə artıq iki ən fərqli veb sayt tərtibatının vizual nümunələri var - versiyalar bu layihəən böyük və ən kiçik ekranlar üçün. Bu iki nümunə veb saytın ön hissəsini inkişaf etdirərkən mənim bələdçim olacaq.

Əvvəlcə Mobil

Adaptiv dizayna “” yanaşması yeni fikir deyil. Əvvəlcə veb-saytın mobil tərtibatını qurduğunuz və sonra ekran ölçüsü artdıqca uyğunlaşmaq və ona əlavə etmək üçün media sorğularından istifadə etdiyiniz bu üsul indi bir müddətdir ki, cavab verən veb dizaynında ən yaxşı təcrübə hesab olunur. Bu yanaşma yeni deyil, hələ də çox vacibdir və “məzmundan başla” planımızla birləşdirildikdə, enerjimizi adaptiv layihələrdə aşkar edilən çatışmazlıqlardan birinə - əhəmiyyətsiz məzmunun ünsiyyət probleminə cəmləşdirməyə kömək etdi.

Məzmundan başlayaraq, veb saytımızdakı bütün məzmunun mobil və digər istifadəçilər üçün uyğun və uyğun olmasını təmin etdik. Bu, ötürülmə ilə bağlı narahat olmamağımız demək idi böyük miqdar işarələmədəki məzmun, ancaq CSS istifadə edərək onu vizual olaraq gizlətməlisiniz. Mobil ilk yanaşma o demək idi ki, bu şəkillər yalnız onlar üçün nəzərdə tutulmuş cihazlarla paylaşılacaq. Məsələn, bizim yeni dizayn akvarel teksturası ilə tələb olunan fon qrafikası.

Olduqca böyük olan şəkil yalnız dizaynın bir hissəsi olmaq üçün nəzərdə tutulmuşdu böyük ekranlar(660 pikseldən və daha çox). CSS-imiz mobil dizaynla başladığı üçün bu böyük qrafiklər heç vaxt kiçik ekranlı cihazlara göndərilmir, çünki bu şəkli yükləyən media sorğusu yalnız böyük ekranlar tərəfindən işə salınır. Html elementinə fon tətbiq edən media sorğusu belə görünür:

@media yalnız ekran və (min-en: 660px) ( html ( fon: url(/images/bg-watercolor.jpg) təkrar olunmayan sabit mərkəz üst; ) )

@media yalnız ekran və (min - eni: 660px) (

html (

fon: url (/şəkillər/bg - akvarel. jpg) yox - sabit mərkəz üst hissəsini təkrarlayın;

Bu fon şəklini tətbiq etməklə yanaşı, 660px-də işləyən media sorğusu həmçinin veb-saytın tərtibatında bir sıra digər dəyişiklikləri təmsil edir, kiçik ekran tərtibatı hesab ediləndən müxtəlif geniş ekranlı versiyalara çevriləcək.

Cihazlar üçün deyil, dizayn üçün yaratmaq

Veb layihələrimizdə cavab verən dizayndan istifadə etməyə başlayanda diqqətimizi məlum cihazlara və ekran ölçülərinə yönəldirdik və media sorğularımız tez-tez onları əks etdirirdi (iPhone, iPad-lər - həm portret, həm də landşaft - noutbuklar, geniş ekranlı masaüstləri və s. .d.). Zamanla məlum oldu ki, bu, ən yaxşı yanaşma deyildi, çünki o, gələcəkdə görünə biləcəkləri deyil, yalnız bu gün populyar olan cihazlar və ekran ölçülərini əhatə edirdi. Cavab verən veb dizaynın güclü üstünlüklərindən biri onun gələcəyə baxan təbiətidir. Buna görə də bunu tam şəkildə həyata keçirmək güclü tərəflər dizaynın media sorğularının kəsilmə nöqtələrini diktə etməsinə icazə vermək əvəzinə, cihazlar üçün tikintidən uzaqlaşdıq.

Mobil birinci üsul veb saytımızın CSS əsasını qoydu. Bunu yerinə yetirməklə, biz veb-saytı brauzerdə işə saldıq və onu tərtibatımızın ən kiçik ölçüsünə qədər genişləndirdik (CSS-ni minimum eni 320px olaraq təyin etdik). Tədricən, işarələmənin necə cavab verdiyini görmək üçün brauzer pəncərəsinin ölçüsü artdı. Pəncərə böyüdükcə, işarələrin deformasiyaya başladığını gördük. Məhz bu nöqtələrdə işarələməni tənzimləmək üçün yeni media sorğuları təyin etməli olduq.

Bu üsulu başa düşmək üçün bir qrafik yaratdıq və onu iş masası fonu kimi təyin etdik. Şaquli xətlər eni 320 px (ən kiçik ölçüyümüz) göstərdi, sonra 400-dən başlayaraq hər yüz pikselə bölündü və dizaynın harada pozulmağa başladığını müəyyən etmək üçün brauzer pəncərəsi miqyaslı olaraq bələdçi kimi istifadə edildi və sonra biz bu təxmini dəyərləri piksellərdə istifadə etdik. CSS-ə əlavə edilmiş son media sorğuları.

Məlum cihaz ölçülərindən daha çox dizayn tələblərinə əsaslanan media sorğularının əlavə edilməsi yanaşması vebsayta geniş ekran ölçülərinə daha yaxşı cavab verməyə imkan verir. Bununla belə, nəticə onu doldurur CSS faylı cihaza xas kəsilmə nöqtələrindən istifadə etdiyinizdən daha çox media sorğusu. Bununla belə, media sorğularının sayı daha çox olsa da, sorğuların özləri çox kiçik olur, çünki cihaz əsaslı media sorğularının adətən tələb etdiyi kəskin dəyişikliklərin əvəzinə onların hər birinə çox az dəyişiklik edilir.

Veb saytımızın media sorğularında aşkar artımın müşahidə olunduğu sahələrdən biri naviqasiyadır.

Adaptiv naviqasiya

Naviqasiya həssas dizaynın ən çətin aspektlərindən biridir. Veb saytımız əsasən dörd əsas naviqasiya sahəsinə malikdir.

1. Əsas naviqasiya;

2. Müştərilərimizin istifadə etdiyi müxtəlif portallara və xidmətlərə keçid verən “köməkçi naviqasiya” dediyimiz şey;

3. Footer naviqasiyası;

4. Sol sütunda veb-saytın alt səhifələrində (böyük ekranlı tərtibatlar üçün) təqdim olunan ayrı-ayrı bölmələrin naviqasiyası.

CSS-imiz ilk növbədə mobil olduğundan, ilk narahatlıqlardan biri kiçik ekran tərtibatı üçün naviqasiya qurmaq idi. Bu, əsas naviqasiyadan başqa bütün naviqasiya bölmələrinin ekranını söndürmək deməkdir.

#helpNav, .subNav, altbilgi naviqasiyası (ekran: heç biri; )

#helpNav, .subNav, altbilgi naviqasiyası (

ekran: heç biri;

Bundan əlavə, artıq qeyd etdim ki, məqsədimiz məzmunu cihazlara çatdırmaq deyil, yalnız bundan sonra onu "söndürmək"dir. Əslində, məqsəd bu idi, amma naviqasiyamızda bunu necə edəcəyimizlə barışmalı idik. Başqa, sadə, lakin dəstəklənən həll tapa bilmədik. Xoşbəxtlikdən, təqdim etdiyimiz və təqdim etmədiyimiz məzmun yalnız bir neçə siyahı kimi görünür, ona görə də onun ziyarətçilərin endirilməsinə təsiri minimaldır.

Köməkçi naviqasiya veb saytın istifadəçilərin əksəriyyətinə uyğun olmadığını müəyyən etdiyimiz yeganə sahədir, çünki bu bağlantılar və portallar yalnız masaüstü istifadəçilər üçün nəzərdə tutulmuşdur. Bu, güclü bir fərziyyə və cəsarətli bəyanatdır. Bunun əsas səbəbi portalların özləri idi, bizim nəzarətimizdən kənar üçüncü tərəf proqramları idi və kiçik ekranlı mobil cihazlar üçün optimallaşdırılmamış və onların təklif etdiyi xidmətlər dəstək üçün uyğunlaşdırılmışdı. korporativ müştərilər böyük masa üstü ekranları ilə.

Bu vəziyyət bizi bu bölməni kiçik ekran versiyasından silmək qərarına gəlməyə ruhlandırdı və saytın canlı olduğu aylar ərzində bu qərarla bağlı istifadəçi bazamızdan heç bir şərh və ya şikayət almadıq. Digər iki naviqasiya sahəsinə, alt səhifə naviqasiyası bölməsinə və altbilgi bölməsinə gəldikdə, bu məzmun kiçik ekranlı cihazlarda əsas naviqasiyanın bir hissəsi kimi təqdim olunur. Buna görə də bu üç sahəni standart olaraq söndürürük.

Daha sonra, ekran ölçüsü artdıqca və daha geniş ekran dizaynının görünməyə başladığı 660px nöqtəsini keçdikcə, bu naviqasiya sahələrinə tələb olunan üslubları verəcəyik.

İkinci dərəcəli naviqasiyamız üçün CSS budur:

#helpNav ( displey: blok; mövqe: mütləq; yuxarı: 1px; sağ: 0px; eni: 100%; mətni hizalayın: sağa; ) #helpNav ul (doldurma-sol: 10px; ) #helpNav li ( ekran: inline; padding-sağ: 6px; fon rəngi: #2f6a98; :hover (fon rəngi: #f66606; )

#helpNav (

ekran: blok;

mövqe: mütləq;

yuxarı: 1px;

sağ: 0px;

eni: 100%;

mətni hizalayın: sağa;

#helpNavul (

doldurma - sol: 10px;

#helpNavli (

ekran: inline;

doldurma - sağ: 6px;

doldurma - sol: 6px;

fon - rəng : #2f6a98;

#helpNav a (

şrift ölçüsü: 12px;

doldurma: 0 6px;

rəng: #FFF;

sərhəd - radius: 20px;

#helpNav a:hover (

Və alt səhifə naviqasiya sahələri:

SubNav ( displey: blok; en: 25%; float: sol; ) .subNav h4 ( doldurma-alt: 8px ) .subNav ul (siyahı üslubu: disk; rəng: #c65204; doldurma: 0 0 20px 20px; ) . subNav li ( padding-alt: 14px; ) .subNav a (rəng: #186483; şrift ölçüsü: 21px; şrift ailəsi: "RokkittRegular", Times, "Times New Roman", serif; sətir hündürlüyü: 1; )

SubNav(

ekran: blok;

eni: 25%;

float: sol;

SubNav h4 (

doldurma - alt: 8px

SubNavul(

list-style: disk;

rəng : #c65204;

doldurma: 0 0 20px 20px;

SubNavli (

padding - alt: 14px;

SubNav a (

rəng : #186483;

şrift ölçüsü: 21px;

xəttin hündürlüyü: 1;

Nəhayət, altbilgi naviqasiyası:

altbilgi naviqasiyası (ekran: blok; kənar-yuxarı: 40px; ) altbilgi nav ul (siyahı üslubu: heç biri; ) altbilgi nav li ( padding-alt: 24px; en: 19%; doldurma: 0 5% 20px 0; float: sol; ) .innerNav li (en: 100%; float: heç biri; padding-alt: 4px; ) altbilgi nav a (rəng: #575454; şrift ölçüsü: 12px; ) .innerNav a ( şrift çəkisi: normal; )

altbilgi naviqasiyası (

ekran: blok;

kənar - yuxarı: 40px;

altbilgi nav ul (

list-style: none;

altbilgi navli (

dolgu - alt: 24px;

eni: 19%;

doldurma: 0 5% 20px 0;

float: sol;

InnerNavli (

eni: 100%;

float: heç biri;

dolgu - alt: 4px;

altbilgi nav a (

rəng : #575454;

şrift ölçüsü: 12px;

InnerNav a (

şrift çəkisi: normal;
Piksel və ya ems

Media sorğularımız üçün piksel dəyərlərindən istifadə etdiyimizi görəcəksiniz. Piksel media sorğularından istifadə, digər qabaqcıl tərtibatçılar kimi, cavab verən dizayn etməyə başladıq və bu təcrübəni iş prosesimizin bir hissəsi kimi qəbul etdik. Bununla belə, “daha ​​yaxşı cavab verən veb-sayt yaratmaq” ruhunda bu bölməni redaktə edərkən diqqətimizə çatdırılan ems-dən istifadə edən ölçülü media sorğularına dair məqaləni qeyd edəcəyəm. Əslində, böyüdərkən saytın görünüşünü yaxşılaşdırmaq üçün px media sorğularını bütün piksel dəyərlərini bədən şrift ölçüsünə bölmək yolu ilə em media sorğularına çevirmək tövsiyə olunur.

Bu möhtəşəm məqalə bizi piksel əsaslı media sorğuları haqqında düşüncələrimizi yenidən düşünməyə ruhlandırdı və bu, cavab verən yanaşmanı necə təkmilləşdirməyə davam etdiyimizin başqa bir nümunəsidir. Bu xüsusi layihədə media sorğularımızda ems-dən istifadə etməsək də, hazırda onlarla təcrübə aparırıq və yanaşmanı burada qeyd etməyə dəyər.

Əsas naviqasiya

Əsas naviqasiyamız geniş ekranlarda planın yuxarı hissəsində üfüqi sıra kimi təqdim olunur. Kiçik ekranlarda əsas naviqasiyanın strukturu elə dəyişir ki, hər səhifənin yuxarısında səhifənin altındakı naviqasiya ilə əlaqə saxlayan böyük Menyu düyməsi var. Buna nail olmaq üçün başlığa demək olar ki, işarələmənin başlanğıcı olan ID menuLink və oftabButtonr sinfi ilə keçid əlavə etdik. Sonra işarələmənin ən sonunda ID mainNav olan bir bölmə yerləşdirdik. Bu bölmənin içərisində bizim əsas naviqasiyamız var, o, sadəcə olaraq daxilindəki alt səhifə bölməsi menyusu üçün bir neçə digər sıralanmamış siyahıdan ibarət sıralanmamış siyahıdır. Həmçinin səhifənin yuxarı hissəsinə keçid rolunu oynayan toTop ID-li lövbərimiz var.

Mobil-ilk prinsipinin davamı olaraq, kiçik ekran düzeninin yuxarı hissəsindəki menyu linkini düyməyə bənzətmək üçün tərtib etdik.

#menuLink a ( float: sağ; kənar: -56px 8px 0 0; ) .tabButton a ( rəng: #FFF; şrift ailəsi: "RokkittRegular", Times, "Times New Roman", serif; şrift ölçüsü: 20px; fon rəngi: #45829b; padding: 10px 12px;

#menuLink a (

üzmək: sağa;

haşiyə: - 56px 8px 0 0;

Tab düyməsi a (

rəng: #FFF;

şrift ailəsi : "RokkittRegular" , Times , "Times New Roman" , serif ;

şrift ölçüsü: 20px;

fon - rəng : #45829b;

doldurma: 10px 12px;

sərhəd - radius: 10px;

Tab düyməsi a: siçanın üzərinə sürün (

fon - rəng : #f66606;

Əsas naviqasiya menyumuz kiçik ekran görüntüsünə uyğunlaşdırılıb:

#mainNav ( yuxarı kənar: 30px; en: 100%; ) #mainNav #toTop a ( float: sağ; kənar: 0 8px 0 0; şrift ölçüsü: 20px; ) #mainNav naviqasiyası ( padding-top: 80px; ) #mainNav ul ( siyahı üslubu: heç biri; ) #mainNav li ( fon: #45829b; haşiyə-alt: 1px bərk #abc7d2; doldurma: 4px 10px 4px 15px; ) #mainNav li: hover ( fon rəngi: #f66606; ) #mainNav a ( şrift ölçüsü: 24px; rəng: #FFF; şrift ailəsi: "RokkittRegular", Times, "Times New Roman", serif; )

#mainNav (

kənar - yuxarı: 30px;

eni: 100%;

#mainNav #toTop a (

üzmək: sağa;

kənar: 0 8px 0 0;

şrift ölçüsü: 20px;

#mainNav naviqasiyası (

padding - üst: 80px;

#mainNavul (

list-style: none;

#əsasNavli (

fon: #45829b;

haşiyə - alt: 1px bərk #abc7d2;

doldurma: 4px 10px 4px 15px;

#mainNav li:hover (

fon - rəng : #f66606;

#mainNav a (

şrift ölçüsü: 24px;

rəng: #FFF;

şrift ailəsi : "RokkittRegular" , Times , "Times New Roman" , serif ;

İlkin vəziyyətdə göstərilməyən alt menyularımız artıq səhifənin tələb etdiyi kimi göstərilə bilər. Bu alt menyuların hər birinin servicesTab kimi unikal identifikatoru var və veb-saytın hər bölməsində bədən etiketinə tətbiq olunan sinif var. “Şirkət” bölmə sinfi companyPage-dir. Biz bu sinifdən veb-saytın bütün bölməsini tərtib etmək üçün istifadə edirik. Alt menyunu aktivləşdirmək üçün bölmə aktivləşdirildikdə tələb olunduğu kimi alt menyu bölmə sinfindən istifadə edirik.

CompanyPage #companyTab ul, .newsPage #newsTab ul, .contactPage #əlaqəTab ul, .servicesPage #servicesTab ul ( display: block; )

CompanyPage #companyTab ul,

NewsPage #newsTab ul,

Əlaqə Səhifəsi #əlaqəTab ul,

Xidmətlər Səhifəsi #xidmətlərTab ul (

ekran: blok;

Biz artırırıq

Daha böyük ekran tərtibatları daxil olduqca - yenə 660px və daha yuxarı media sorğuları ilə - biz əsas naviqasiyanın tərtibatını kəskin şəkildə dəyişirik. Əvvəlcə menuLink və toTop düymələrinin ekranını söndürürük, çünki onlar artıq tələb olunmur:

#menuLink a, #toTop a (ekran: heç biri; )

#menuLink a, #totop a (

ekran: heç biri;

#mainNav (mövqe: mütləq; yuxarı: 92px; kənar: 18px 2% 0 2%; en: 96%; mətn hizalanması: mərkəz; ) #mainNav naviqasiya (doldurma: 5px 0; sərhəd-yuxarı: 1px bərk #bacfd7; sərhəd-alt: 1px bərk #bacfd7; ) #mainNav li (fon: heç biri; displey: daxili; sərhəd-alt: 0; sərhəd-sağ: 1px bərk #bebebe; doldurma: 0 6px 0 8px; kənar: 4px 0; ) #mainNav a ( şrift ölçüsü: 16px; rəng: #45829b; ) #mainNav a:hover (rəng: #f66606; )

#mainNav (

mövqe: mütləq;

yuxarı: 92px;

kənar: 18px 2% 0 2%;

eni: 96%;

mətni hizalayın: mərkəzə;

}

#mainNav naviqasiyası (

doldurma: 5px 0;

haşiyə - yuxarı : 1px bərk #bacfd7;

haşiyə - alt: 1px bərk #bacfd7;

}

#əsasNavli (

fon: heç biri;

ekran: inline;

sərhəd - alt: 0;

ölçüsü: 16px;

rəng : #45829b;

}

#mainNav a:hover (

rəng : #f66606;

}

Bu üslublar əsas naviqasiyanın görünüşünü təyin edir. Ancaq onu cihaz əvəzinə dizayna uyğunlaşdırmaq üçün ekran ölçüsü artdıqca kiçik düzəlişlər etməliyik. Ümumilikdə, əsas naviqasiya şriftimiz ekran genişləndikcə və iş sahəsi artdıqca dəyişən səkkiz müxtəlif geniş ekran tərtibat ölçüsünə malikdir. Bu naviqasiyanı istifadəni asanlaşdıracaq və vizual olaraq cəlbedici edəcək şəkildə ən yaxşı şəkildə necə nümayiş etdirəcəyini tapmaq, cavab verən dizaynla işləyərkən qarşılaşdığımız maneələrdən biri idi.

Bu nümunəyə bir neçə dəfə əməl edirik, nəhayət vebsayt ən böyük ölçüsünə çatdıqda şriftin ölçüsünü 27px-ə qədər artırırıq. Beləliklə, veb-sayt naviqasiyası onu ən yaxşı şəkildə görmək üçün istifadə olunan dizayn və ekrana uyğun gəlir.

CMS-dən kömək almaq

Tercih etdiyimiz CMS ExpressionEngine-dir və məqalənin növbəti bölməsinin xüsusiyyətləri həmin platformaya xasdır, lakin ExpressionEngine ilə əldə etdiyimiz əsas ideya, şübhəsiz ki, digər məşhur CMS platformalarına da tətbiq oluna bilər.

Adaptiv yanaşmanın qarşısındakı ən böyük maneələrdən biri, fərqli işarələmə və ya fərqli mənbə kodunu təmin edə bilməməyinizdir. müxtəlif cihazlar. Bu, CMS-imizin köməyi ilə aradan qaldırmaq istədiyimiz maneədir. Təcrübə və araşdırma zamanı qarşımıza ExpressionEngine ilə Həqiqətən Adaptive Going adlı məqalə çıxdı. Bu məqalədə ətraflı təsvir olunan metodologiyadan istifadə edərək, mobil və ya masaüstü sistemdə dəyişən təyin etmək üçün cihaz aşkarlama skriptindən istifadə edə bildik. Daha sonra bu dəyişənlərdən hansı ilə qarşılaşdığımıza əsasən saytımıza işarələmə yükləyə bildik.

İrəliləyərək və cihaz aşkarlanmasını tətbiq etməklə, mobil təcrübəni daha da təkmilləşdirmək üçün digər çox kiçik dəyişikliklər edə bildik. Bizim üçün bu, bir növ mütərəqqi təkmilləşdirməyə bənzəyirdi, burada keyfiyyətli bir həll yaratdıq və sonra bir az optimallaşdırılmış təcrübə təqdim etmək üçün onu irəli çəkməyə çalışdıq. Chris Coyier-in RWD və mobil şablonların birləşdirilməsi ilə bağlı oxşar fikrini oxumağınızdan əmin olun, burada o, mobil strategiyasında müxtəlif texnikaları qarışdırmaq və uyğunlaşdırmaq haqqında mübahisə edir.

Kiçik başlayaq

Siz, əlbəttə ki, bu dəyişənlərdən fərqli cihazlara tamamilə fərqli işarələmə və mənbə kodu çatdırmaq üçün istifadə edə bilərsiniz, lakin bizim ilkin yanaşmamız bir az daha az ekstremal idi. Veb saytımızın hər hansı bir versiyasının bütün məzmuna çıxışı olması artıq qərara alındığından, biz ilkin olaraq müraciət etdik bu üsulçatdırılan məzmunun miqdarını bir qədər tənzimləmək üçün dəyişənlər. Məsələn, veb saytımızın ana səhifəsində biz saytda tapılan bir çox məzmunun tizerlərini göstəririk. “Mədəniyyət” və “Layihə diqqət mərkəzində” bölmələrində hər yazı bir şəkil ilə müşayiət olunur.

Şəkillər gözəl əlavədir, lakin qətiliklə vacib deyil, buna görə də bu şəkilləri mobil istifadəçilərimizə ümumiyyətlə göstərmirik. Yenə də demək istəmirəm ki, biz CSS-dən onları söndürmək üçün istifadə edirik, bu isə hər halda məlumatları brauzerə yükləyəcək; Bunun əvəzinə, təsvirlər göstərilməməlidirsə, onları işarələmədən çıxarmaq üçün set dəyişənlərindən istifadə edirik.

Sintaksis olduqca sadədir. Dəyişənləri təyin etdikdən sonra - və yuxarıdakı məqalə sistem config.php faylınıza kiçik bir skript əlavə etməklə bunu etməyin nə qədər asan olduğunu izah edir - siz həmin dəyişənlərdən if ifadəsi kimi istifadə edə bilərsiniz.

img src = "(teaser-şəkil)" alt = "(başlıq)" / > { / if } { if global : site_version == "mobile" } { title } { / if } !}

Bu, ExpressionEngine sintaksisidir, lakin siz onu oxuya və nə baş verdiyini asanlıqla görə bilərsiniz. Əgər tam dəyişənə rast gəlinirsə, o zaman məqalənin verilənlər bazasına girişindən tizer-şəklin təqdim edirik. Əvəzində mobil dəyişənə rast gəlinərsə, məqalənin başlığını çatdırırıq.

Eyni yanaşma ana səhifənin “Xəbərlər” və “Bloq” bölmələrinə də tətbiq edilir, tam dəyişənlə rastlaşdıqda üç, mobil olduqda isə yalnız bir qısa tizer təqdim edir. Sintaksis belə görünür:( exp : channel : entries channel = "news" (əgər qlobal : site_version == "full" ) limit = "3" ( / if ) (əgər qlobal : site_version == "mobil" ) limit = "1" ( / əgər ) )

Burada xəbərlər adlı ExpressionEngine kanalına daxil olduğumuzu görə bilərsiniz. Limit parametrindən istifadə edərək bu kanaldan neçə cari elementin göstəriləcəyini müəyyən etmək üçün dəyişənimizdən istifadə edirik.

Gəlin bunu bir addım da irəli aparaq

Saytın Mədəniyyət bölməsində biz tez-tez çoxlu şəkillərlə müşayiət olunan məqalələr dərc edirik. Veb saytın ana səhifəsindəki tizer şəkillərindən fərqli olaraq, məqalələrdəki şəkillərin özləri bu məzmun üçün çox vacibdir, çünki onlar məqalənin vurğusunu saxlamağa və ya artırmağa kömək edir. Bu şəkillər vacib olsa da, onlar həm də kifayət qədər böyükdürlər - hər biri 650px enindədir, əksər məqalələr ən azı üç şəkil, bəzən isə ona qədərdir. Mobil cihazlar şəkilləri orijinal ölçüsünün təxminən yarısı ilə göstərəcəyindən, tam ölçülü şəkillərin yüklənməsi olduqca vacib olacaq. Bununla məşğul olmaq üçün cihazın tərifinə və dəyişənlərinə yenidən baxaq.

Hər məqalə üçün iki şəkil dəsti yaradırıq: biri tam ölçülü 650px enində, ikincisi isə demək olar ki, yarısı bu ölçüdə. Sonra məqaləmizdə dəyişənlərdən istifadə edirik (lakin əvvəlcə səhifə şablonumuzda ExpressionEngine kodunu aktivləşdirməliyik) və hər iki şəkil dəsti üçün işarələmə əlavə edirik - lakin onlardan yalnız biri brauzerə çatdırılır. Mobil cihazlar kiçik şəkilləri qəbul edir, digərləri isə tam ölçülü şəkillər alır.
Eyni yanaşma ana səhifənin geniş reklam sahəsinə də aiddir. Bu fırlanan bannerlər və şəkillər qarşıdan gələn hadisələr, yeni xidmətlər, elanlar kimi vacib şeyləri əsas səhifənin qalan sahələrindən daha yaxşı reklam edir. Reklam lövhəsi yalnız böyük ekranlar üçün nəzərdə tutulmuş başqa bir gözəl elementdir. Yenə də biz dəyişənlərdən istifadə edərək əsas reklam lövhəsi bölməsini, eləcə də onu işlədən JavaScript-i müvafiq cihaza çatdırırıq - bu, müxtəlif cihazlara müxtəlif işarələmələri effektiv şəkildə göndərməyə imkan verir və layihənin əvvəlində müəyyən etdiyimiz digər maneəni aradan qaldırırıq.

Mobil ilk yanaşmadan və CMS-imizdən istifadə edərək, biz ana səhifəmizi masaüstü istifadəçilərə 738,3 KB həcmində çatdıra və onu yalnız 174,4 KB-a qədər əhəmiyyətli dərəcədə azalda bilirik. mobil istifadəçilər.

Alternativ planlar

Yalnız mobil yanaşma və cihazın aşkarlanması ilə bağlı məni həmişə narahat edən suallardan biri budur: “Aşkarlama uğursuz olarsa nə baş verir? Veb saytın “normal” versiyası mobil cihaza çatdırılır və bununla da sizin diqqətlə hazırlanmış mobil dizaynı etibarsız edirsiniz? Bu xüsusiyyət, cihazın aşkarlanması üçün keçmişdə istifadə edilən yalnız mobil həlldən qaçmağımın əsas səbəblərindən biridir.

Biz adaptiv iş axınımız üçün cihazın aşkarlanmasından istifadə edirik və nədənsə cihazın aşkarlanması işləmədiyi halda o, bizi əla alternativlərlə silahlandırıb. Uyğunlaşan bir yanaşmadan istifadə etdiyimiz üçün, hətta mobil brauzer tam versiya çatdırılacaq, işarələmə bu cihaza uyğun olacaq, çünki bizim CSS ona uyğun olacaq.

Üstəlik, hər şey mobil olduğundan, kiçik ekranlar üçün nəzərdə tutulmayan elementlər, məsələn, yuxarıda qeyd olunan nəhəng fon qrafikləri, ümumiyyətlə əks olunmur. Bizi məyus edəcək yeganə şey, cihazı müəyyən etmək üçün yaradılan dəyişənlərimizlə etdiyimiz şeydir. Ən pis ssenari baş verərsə və cihazın aşkarlanması uğursuz olarsa, mobil versiya sadəcə olaraq bir neçə əlavə şəkil və ya kiçik işarələmə və ya JavaScript alacaq. Ümumi təəssürat hələ də mobil cihaz üçün uyğun olacaq. “Ən pis vəziyyət ssenarisi” üçün pis deyil.

Tərəqqi, ideal deyil

Bir neçə il əvvəl bir müştəri mənə bu günə qədər xatırladığım bir şey söylədi. O, saytı haqqında danışarkən deyib:

« Veb saytımı mükəmməl etmək üçün narahat olmayın. Sadəcə onu təkmilləşdirmək üzərində çalışın. Onun davamlı təkmilləşdirilməsi düzgün istiqamətdə bir hərəkət olacaqdır».

Bu fikir illərdir məni ruhlandırdı və mükəmməl olmadığı üçün ən yaxşısını rədd etməməyi xatırlatdı.

Mən bilirəm ki, bu həll mükəmməl deyil və bu, əvvəlki adaptiv iş prosesimizdə təkmilləşdirmə olduğu üçün yaxşıdır. Bu, müəyyən etdiyimiz bəzi maneələri aradan qaldırmağa kömək etdi və indi biz bu təkmilləşdirmələri üzərində işlədiyimiz layihələrə gətirə bilərik. Bəli, hələ də effektiv şəkildə təsir edə bilmədiyimiz bir çox mürəkkəbliklər var, məsələn, HD displeylərə yüksək keyfiyyətli şəkillərin çatdırılması, həmçinin əvvəllər haqqında yazdığımız em-əsaslı media sorğularından istifadə, lakin bu və digər layihələrlə bağlı biz düzgün istiqamətdə hərəkət edirlər.

Kim bilir... Bəlkə bir gün kimsə “mükəmməl vebsayt” quracaq. Hazırda biz mükəmməlliyə deyil, tərəqqiyə fokuslanırıq, bu yolda kiçik təkmilləşdirmələr edirik, daha həssas vebsayt yaratmaq üçün çalışırıq.

Siz nə düşünürsünüz?

Cavab verən veb saytları necə qurursunuz? Siz xarakterik tərifdən və ya cihaz tərifindən istifadə edirsiniz? Bu və ya digərindən nə vaxt istifadə etməyi məsləhət görürsünüz? Şərhlərinizi gözləyirik!

Adaptiv veb sayt tərtibatı veb-səhifələrin planşet və smartfonların ekranlarına avtomatik uyğunlaşmasına imkan verir. Mobil İnternet trafiki hər il artır və bu trafiki effektiv şəkildə emal etmək üçün istifadəçilərə istifadəçi dostu interfeysi ilə cavab verən veb-saytlar təklif etməlisiniz.

Axtarış motorları mobil cihazlarda baxıldıqda saytın cavab reaksiyasını qiymətləndirmək üçün bir sıra meyarlardan istifadə edir. Google mobil cihazlar üçün uyğunlaşdırılmış saytları mobil axtarış nəticələrində mobil dostluq xüsusi işarəsi ilə qeyd etməklə smartfon və planşet sahibləri üçün internetdən istifadəni sadələşdirməyə çalışır. Yandex həmçinin mobil axtarışda istifadəçilər üçün mobil/responsive versiyası olan saytlara üstünlük verən bir alqoritmə malikdir.

Xidmətlərdə və mobil cihazlarda səhifənin göstərilməsini yoxlaya bilərsiniz.


düyü. 1. Saytın mobil cihazlara uyğunluğu haqqında qeyd ilə Yandex və Google-dan mobil axtarış nəticələri.

Adaptiv tərtibat hər hansı bir cihazda baxıldıqda üfüqi sürüşdürmə çubuğunun və genişlənə bilən sahələrin, oxuna bilən mətnin və kliklənən elementlər üçün geniş sahələrin olmamasını nəzərdə tutur. Media sorğularından istifadə edərək, siz şablonu müxtəlif cihaz ekran ölçülərinə uyğunlaşdırmaq üçün yenidən təşkil edərək səhifədə blokların düzülüşünə və yerləşdirilməsinə nəzarət edə bilərsiniz.

Həssas veb sayt yaratmaq üçün əsas üsullar məqalədə verilmişdir. Cavab verən dizayn üçün əsas sayt konteynerinin eni % ilə müəyyən edilir və o, brauzer pəncərəsinin eninin 100%-nə bərabər və ya daha az ola bilər. Şəbəkə sütunlarının eni də % ilə müəyyən edilir. Cavab verən dizaynda əsas konteynerin və şəbəkə sütunlarının eni px dəyərlərindən istifadə etməklə müəyyən edilir.

Bu dərsdə müzakirə olunan adaptiv maye tərtibatı texnikası iki sütunlu şablonda mükəmməl işləyərək saytı uyğunlaşdırıcı və mobil cihazlarda baxmaq üçün rahat edəcək. Şablon səhifələrin əsas məzmununun fərqli tərtibatını nəzərdə tutur, bu dərsdə əsas səhifənin tərtibatı müzakirə olunacaq.

Əsas səhifənin tərtibatı

Səhifə üç əsas blokdan ibarətdir: başlıq (başlıq), əsas məzmun və yan panel üçün sarğı konteyneri və altbilgi (altbilgi). Dizayn dönüş nöqtələri kimi 768px və 480px götürək.

Birinci nöqtədə, üst menyunu gizlədəcəyik və yan paneli postlarla konteynerin altına köçürəcəyik. İkinci nöqtədə başlıq elementlərinin yerini dəyişəcəyik və düymələrin yerləşdirilməsini ləğv edəcəyik sosial şəbəkələr yazılarda və səhifənin altbilgi sütunlarının sarılmasını ləğv edin.


düyü. 2. Adaptiv tərtibat nümunəsi 1. Meta teqlər və bölmə

1) Bölməyə lazımi faylları əlavə edin - istifadə olunan şriftlərə, jQuery kitabxanasına, həmçinin prefikssiz plaginə keçid (xassələr üçün brauzer prefikslərini yazmamaq üçün):

Adaptiv veb sayt tərtibatı

2. Səhifənin başlığı

Səhifənin başlığına aşağıdakı konteyner elementlərini yerləşdirəcəyik:
loqo

Növlər
  • Wi-fi quraşdırma
  • Windows
  • Viruslar
  • İnternet
  • Proqramlar
  • Təmir
Populyar məqalələr
Yeni məqalələr