Veb saytının hazırlanması texnologiyası çoxşaxəli prosesdir. Ancaq yenə də onun bütün mərhələlərini iki əsas komponentə bölmək olar - funksional və xarici qabıq. Və ya veb ustaları arasında adət olduğu kimi, müvafiq olaraq, back-end və front-end. Veb-saytlarını veb inkişaf studiyalarından sifariş edən insanlar çox vaxt sadəlövhcəsinə bunun yalnız funksionallığa diqqət yetirməyə dəyər olduğuna inanırlar və bu, düzgün qərar olacaq. Lakin bu, çox, çox nadir hallarda, adətən beta sınaq mərhələsində olan startap layihələri üçün doğrudur. Əks halda, qrafik dizayn və istifadəçi interfeysi sadəcə veb inkişaf standartlarına uyğun olmalıdır və rahat olmalıdır.
İnterfeys dizaynerinin və ya dizaynerin üzləşdiyi ilk təməl daşı sayt tərtibatının enidir. Axı, bunun üçün interfeyslər çəkmək lazımdır. Sırf intuitiv olaraq iki yanaşma ortaya çıxır - ya hər bir məşhur ekran qətnaməsi üçün ayrıca tərtibatlar hazırlayın, ya da bütün displeylər üçün saytın bir versiyasını yaradın. Həm də hər iki seçim səhv olacaq, lakin ilk növbədə.
Standart veb sayt eni piksellərləRunet üçün
Adaptiv tərtibatın hazırlanmasından əvvəl min piksel eni olan saytın inkişafı kütləvi bir hadisə idi. Bu rəqəm bir sadə səbəbə görə seçildi - sayt istənilən ekrana uyğun olsun. Bunun da öz məntiqi var, amma tutaq ki, bir insanın hələ də masaüstündə ən azı HD monitoru var. Bu vəziyyətdə, düzəniniz ekranın ortasında hər şeyin bir yığında bir-birinə yapışdığı və yan tərəflərdə böyük istifadə olunmamış yer olan kiçik bir zolaq kimi görünəcəkdir. İndi fərz edək ki, bir şəxs 800px geniş ekrana malik planşetdə vebsaytınıza daxil olur və parametrlərdə "Tam veb-saytı göstər" işarəsi yoxlanılır. Bu halda, saytınız da səhv göstəriləcək, çünki o, sadəcə olaraq ekrana sığmayacaq.
Bu mülahizələrdən belə nəticəyə gələ bilərik ki, düzən üçün sabit eni qətiliklə bizim üçün uyğun deyil və biz başqa yol axtarmalıyıq. Gəlin hər ekran eni üçün ayrıca tərtibat ideyasını təhlil edək.
Bütün hallar üçün tərtibatlar
Bazarda bütün ekran ölçüləri üçün tərtibatlar yaratmaq strategiyası seçmisinizsə, o zaman saytınız bütün İnternetdə ən unikal olacaq. Axı, bu gün hər bir seçim üçün dəqiq tənzimləməyə çalışaraq bütün cihazları əhatə etmək sadəcə mümkün deyil. Ancaq monitorların və cihaz ekranlarının ən populyar qətnamələrinə diqqət yetirsəniz, fikir pis deyil. Onun yeganə dezavantajı maliyyə xərcləridir. Axı, bir interfeys dizayneri, bir dizayner və bir kodlayıcı eyni işi 5 və ya 6 dəfə görməyə məcbur olduqda, layihə baha başa gələcək.ilkin büdcədə nəzərdə tutulan qiymətdən qeyri-mütənasib şəkildə yüksəkdir.
Ona görə də, yalnız bir səhifəlik saytlar müxtəlif ekranlar üçün çoxlu versiyalarla öyünə bilər, onların məqsədi bir məhsul satmaq və bunu yaxşı etməkdən əmin olmaqdır. Yaxşı, əgər sizdə bu açılışlardan biri yox, çox səhifəli saytınız varsa, o zaman daha çox düşünməlisiniz.
Ən Populyar Sayt Ölçüləri
İki ekstremal arasında uzlaşma üç və ya dörd ekran ölçüsü üçün tərtibatı təqdim edir. Onların arasında mobil cihazlar üçün tərtibat olmalıdır. Qalanları kiçik, orta və böyük masaüstü ekranlar üçün uyğunlaşdırılmalıdır. Saytın genişliyini necə seçmək olar? Aşağıda 2017-ci ilin may ayı üçün HotLog xidmətinin statistikasını təqdim edirik ki, bu da bizə müxtəlif cihaz ekran təsvirlərinin populyarlığının paylanmasını, həmçinin bu göstəricinin dinamikasını göstərir.
Cədvəldən istifadə etmək istədiyiniz saytın ölçüsünü necə təyin edəcəyinizi öyrənə bilərsiniz. Bundan əlavə, belə nəticəyə gələ bilərik ki, bu gün ən çox yayılmış format 1366x768 piksel ekrandır. Belə ekranlar büdcə noutbuklarında quraşdırılır, buna görə də onların populyarlığı təbiidir. Növbəti ən populyar olan Full HD monitordur, bu, videolar, oyunlar və buna görə də veb-sayt tərtibatlarının yaradılması üçün qızıl standartdır. Sonrakı cədvəldə biz mobil cihazların 360x640 piksel təsvir ölçüsünü, həmçinin ondan sonra masa üstü və mobil ekranlar üçün müxtəlif seçimləri görürük.
Dizayn tərtibatı
BeləlikləStatistikanı təhlil etdikdən sonra belə nəticəyə gələ bilərik ki, optimal sayt eni 4 variasiyaya malikdir:
- 1366px enli noutbuk versiyası.
- Full HD versiya.
- Kiçik masaüstü monitorlarda göstərmək üçün 800 piksel genişlikdə tərtibat.
- Saytın mobil versiyası - 360 piksel eni.
Deyək ki, sayt üçün yaradılan mənbə üçün hansı ölçüdən istifadə edəcəyimizə qərar verdik. Ancaq belə bir layihə hələ də baha başa gələcək. Beləliklə, bu dəfə sabit eni istifadə etmədən daha çox seçimə baxaq.
Davamı çevik edir
Alternativ yanaşma var, o zaman yalnız minimum ekran ölçüsünə uyğunlaşmağa dəyər və sayt ölçüləri özləri faizlərlə təyin olunacaq. Eyni zamanda, menyular, düymələr və loqo kimi interfeys elementləri piksellərdə ekran eninin minimum ölçüsünə diqqət yetirərək mütləq dəyərlərdə təyin edilə bilər. Məzmunu olan bloklar, əksinə, ekran sahəsinin eninin müəyyən edilmiş faizinə uyğun olaraq uzanacaq. Bu yanaşma sizə saytların ölçüsünü dizayner üçün məhdudiyyət kimi qəbul etməyi dayandırmağa və bu nüansı məharətlə dəf etməyə imkan verir.
Qızıl nisbət nədir və onu veb səhifə tərtibatına necə tətbiq etmək olar?
Hətta İntibah dövründə bir çox memar və rəssamlar öz yaradıcılıqlarına mükəmməl forma və nisbət verməyə çalışırdılar. Belə bir nisbətin dəyərləri ilə bağlı suallara cavab almaq üçün bütün elmlərin kraliçasına - riyaziyyata müraciət etdilər.
Qədim dövrlərdən bəri gözümüzün ən təbii və zərif kimi qəbul etdiyi bir nisbət icad edilmişdir.çünki təbiətdə hər yerdə mövcuddur. Belə nisbətin düsturunu kəşf edən Phidias adlı istedadlı qədim yunan memarı olmuşdur. O hesablamışdır ki, əgər nisbətin böyük hissəsi bütövlükdə böyük olanla əlaqəli olduğu kimi, daha kiçik olanla əlaqəlidirsə, belə bir nisbət ən yaxşı görünəcəkdir. Ancaq obyekti asimmetrik olaraq bölmək istəyirsinizsə, bu belədir. Bu nisbət sonralar qızıl bölmə adlandırıldı və bu, hələ də dünya mədəniyyət tarixi üçün əhəmiyyətini çox qiymətləndirmir.
Veb dizayna qayıt
Bu, çox sadədir - qızıl nisbətdən istifadə edərək, insan gözünü mümkün qədər sevindirəcək səhifələr tərtib edə bilərsiniz. Qızıl nisbət düsturunun tərifinə uyğun olaraq hesablayaraq, irrasional 1 nömrəsini alırıq, 6180339887 …, lakin rahatlıq üçün yuvarlaqlaşdırılmış 1, 62 dəyərindən istifadə edə bilərik. Bu, səhifəmizin bloklarının 62 olması deməkdir. % və bütövlükdə 38%, istifadə etdiyiniz sayt üçün yaradılan mənbənin ölçüsündən asılı olmayaraq. Bu diaqramda bir nümunə görə bilərsiniz:
Yeni texnologiyalardan istifadə edin
Müasir veb-sayt tərtibatı texnologiyaları planlayıcı və dizayner ideyasını dəqiq çatdırmağa imkan verir, beləliklə, indi İnternet texnologiyalarının başlanğıcından daha cəsarətli ideyaları həyata keçirə bilərsiniz. Artıq saytın ölçüsünün nə qədər olması barədə çox düşünməyə ehtiyac yoxdur. Blokların adaptiv tərtibatı, məzmunun və şriftlərin dinamik yüklənməsi kimi şeylərin meydana çıxması ilə veb saytın inkişafı daha xoş hala gəldi. Axı, bu texnologiyalardırdaha az məhdudiyyətlər, baxmayaraq ki, onlar hələ də mövcuddur. Ancaq bildiyiniz kimi, hüdudsuz sənət olmazdı. Biz sizə həqiqətən yaradıcı dizayn yanaşmasından - qızıl nisbətdən istifadə etməyi təklif edirik. Onunla, şablonlarınızda hansı sayt ölçülərini təyin etdiyinizdən asılı olmayaraq, iş yerini effektiv və gözəl şəkildə doldura bilərsiniz.
Saytın iş yerini necə artırmaq olar
Bütün UI elementlərini kiçik tərtibata uyğunlaşdırmaq üçün kifayət qədər yeriniz olmamaq şansınız var. Bu halda, əvvəllər etdiyinizdən daha yaradıcı və ya daha yaradıcı düşünməyə başlamalı olacaqsınız.
Açılan menyuda naviqasiyanı gizlətməklə saytda maksimum yer boşaldın. Bu yanaşmanı təkcə mobil cihazlarda deyil, həm də masaüstü kompüterlərdə istifadə etmək məntiqlidir. Axı, istifadəçinin saytınızdakı başlıqlara hər zaman baxmasına ehtiyac yoxdur - o, məzmun üçün gəldi. İstifadəçinin istəklərinə hörmət edilməlidir.
Menyunu gizlətməyin yaxşı üsuluna aşağıdakı tərtibat nümunəsidir (aşağıdakı şəkil).
Qırmızı sahənin yuxarı küncündə xaç işarəsini görə bilərsiniz, üzərinə klikləsəniz, menyu kiçik ikonada gizlənəcək və istifadəçi veb-saytın məzmunu ilə tək qalacaq.
Lakin bu isteğe bağlıdır, siz həmişə göz önündə olacaq naviqasiyadan çıxa bilərsiniz. Ancaq onu saytdakı məşhur bağlantıların siyahısı deyil, gözəl bir dizayn elementi edə bilərsiniz. Mətn keçidlərinə əlavə olaraq və ya onların əvəzinə intuitiv nişanlardan istifadə edin. eynidirsaytınıza istifadəçinin cihazında ekran sahəsindən daha səmərəli istifadə etməyə imkan verəcək.
Ən yaxşı veb sayt həssasdır
Sayt üçün hansı tərtibatı seçəcəyinizi bilmirsinizsə, onda sizin üçün hər şey sadədir. İnkişaf xərclərinə qənaət etmək və eyni zamanda bəzi cihazlarda zəif tərtibata görə auditoriyanızı itirməmək üçün cavab verən dizayndan istifadə edin.
Responsive dizayn müxtəlif cihazlarda eyni dərəcədə yaxşı görünən dizayndır. Bu yanaşma saytınızın hətta noutbukda, hətta planşetdə, hətta smartfonda da başa düşülən və rahat olmasına imkan verəcək. Bu effekt ekranın iş sahəsinin enini avtomatik dəyişdirməklə əldə edilir. Saytınız üçün cavab verən üslub cədvəllərindən istifadə etməklə siz mümkün olan ən yaxşı qərarı verirsiniz.
Responsive dizayn və vebsayt versiyaları arasında nə fərq var
Responsive dizayn saytın mobil versiyasından onunla fərqlənir ki, sonuncu halda istifadəçi masaüstündən fərqli html kodu alır. Bu, server performansının optimallaşdırılması, eləcə də axtarış sisteminin optimallaşdırılması baxımından dezavantajdır. Bundan əlavə, saytın müxtəlif versiyaları üçün statistikanı hesablamaq çətinləşir. Adaptiv yanaşmanın bu çatışmazlıqları yoxdur.
Müxtəlif cihazlar üçün cavabdehlik müəyyən edilmiş enin faizi ilə tərtibat vasitəsilə və ya blokları mövcud boş yerə (smartfonda şaquli müstəvidə) köçürməklə əldə edilir.iş masasında üfüqi) və ya müxtəlif ekranlar üçün fərdi tərtibatlar yaradın.
Dərsliklərimizdə həssas dizayn və inkişaf haqqında ətraflı məlumat əldə edin.
