Açıq
Yaxın

Adaptiv layout: bu nədir və necə istifadə olunur. Adaptiv interfeyslər Faydalı xidmətlər və alətlər

Hazırda ən çox ziyarət edilən 100 000 saytın təxminən 11-12%-i həssasdır və yaxın bir neçə ildə bu rəqəmin artacağına şübhə yoxdur.

Daha çox təşkilat çox cihazlı internetin reallıqlarını qəbul etmək üçün qollarını çırmadıqca, nirvanaya nail olmaq üçün istifadə olunan bir neçə strategiyanı nəzərdən keçirməyə dəyər:

Adaptiv modernləşmə

Cavab verən yenidən dizayn mövcud yalnız masa üstü veb saytı götürmək və mahiyyətcə "cavab verən şəkildə yenidən modelləşdirmək" prosesidir.

Hazır saytlara (xüsusilə kommersiya saytlarına) gəldikdə, komandaların həmişə hər şeyi atıb yenidən qurmaq imkanı olmur.
Dan Cederholm

Əksər təşkilatlar üçün sıfırdan yeni dizaynın geniş miqyaslı yaradılması belə nəzərə alınmır. Buna görə də, cavab verən modernləşdirmə mobil cihazlar üçün yaxşı təcrübə yaratmaq üçün məşhur yanaşmadır.

Üstünlüklər
  • Nisbətən sürətli.
    Cavab verən modernləşdirmənin bir neçə yolu var, bu strategiya sayta small-screens.css faylının əlavə edilməsi ola bilər. Bu kifayət qədər kobud nümunəyə baxmayaraq, adaptiv modernləşdirmə çoxlu sayda təşkilatlar üçün cəlbedici seçimdir, çünki hər şeyi sıfırdan yenidən qurmağı tələb etmir.
  • tanış.
    İstifadəçiləri çaşdırmır. İnsanlar interfeysə öyrəşmək üçün illər sərf etdilər və mövcud olanı modernləşdirərək, təşkilatlar mobil cihazlarla insanların həyatını yaxşılaşdırarkən tanış bir yanaşma saxlayırlar.
  • Təşkilati cəhətdən daha sürətli.
    Siyasi baxımdan interfeysin modernləşdirilməsi sıfırdan başlamaqdan daha təhlükəsizdir. Yaşılın hansı kölgəsini seçmək, hansı əhəmiyyətsiz stok fotoşəkillərindən istifadə etmək barədə daha az mübahisə olacaq və rəhbərlik əllərini bükmək məcburiyyətində qalmayacaq. Bu, komandalara cavab verən saytları daha sürətli işə salmağa imkan verir.
Qüsurlar
  • Yalnız kiçik bir hissəyə təsir göstərir.
    Yenə də, təmir etmək üçün bir çox variant var, lakin onların əksəriyyətinin məqsədi "gözəl etmək"dir. Dizaynın yenidən dizaynına diqqət yetirməklə, yenidən dizaynlar tez-tez müxtəlif cihazlar üçün uğurlu dizayn yaratarkən nəzərə alınmalı olan saysız-hesabsız digər amilləri əldən verir.
  • Üç litrlik bir bankada 10 litr su.
    Stolüstü saytlar yalnız masaüstü kompüterlər üçün nəzərdə tutulduğundan (və çox vaxt uzun müddət davam edir), onlar çoxlu qarışıqlıq ehtiva edə bilər. Modernləşdirmə əsasən planın yenidən əriməsindən ibarət olduğundan, məzmunla bağlı problemlərin əksəriyyəti tam nəzərə alınmır.
  • Performans.
    Kiçik cihazları daha yaxşı dəstəkləmək üçün kod yazmaqda qəribə bir şey var. Lazımsız şeyləri silmək çox uzağa gedə bilər, lakin məhsuldarlığa diqqət etmədən, öz-özünə inkişaf etməyəcək.
  • Ən pis dəstək.
    Əvvəlcə masaüstü kompüterlər üçün nəzərdə tutulmuş media sorğuları əksər mobil cihazlarda zəif dəstəklənir.
  • Müvəqqəti düzəlişlər.
    İnsanların məndən nəyisə “cavab verməyi” xahiş etdiklərini eşidəndə, sanki bu, layihə planında sadəcə bir onay qutusu kimi (bəzən də belədir) ölmək kimi hiss edirəm. Bu cür məhdud düşüncə, həssas dizaynın təklif etdiyi real imkanları əldən verir.
Cavab verən Mobil Vebsaytlar Cavab verən mobil vebsaytlar və ya mən onları “cavablı gələcək üçün toxumlar” adlandırdığım kimi, cavab verən dizayn üsullarından istifadə edərək “m.yourdomain.ru” formatında ayrıca veb-sayt yaratmaq təcrübəsidir. The BBC, The Guardian və Entertainment Weekly kimi saytlar (üzerində işlədiyim) bu strategiyadan istifadə edirlər.


Mobil versiya sizə köhnə veb saytınızdan böyüyəcək toxum əkmək imkanı verir.


Vaxt keçdikcə köhnəlmiş sayt silinə bilər və sayt ilk növbədə mobil, həssas və gələcək tendensiyaları nəzərə alaraq inkişaf edəcək.

Üstünlüklər
  • Aşağı risk.
    Əksər təşkilatlar hələ də mobil cihazlardan gələn trafikə azlıq kimi baxırlar. Beləliklə, mobil cavab verən veb-saytın işə salınması bu təşkilatlara əvvəlcə mövzunun başlığına keçmədən suları sınamağa imkan verir.
  • Çevik olmağı öyrənmək üçün bir fürsət.
    Dizaynerlər daha çevik düşünməyi öyrənə bilərlər. Tərtibatçılar Android cihazlarının saysız-hesabsız fəndlərini öyrənəcəklər. Menecerlər piksel mükəmməlliyindən necə uzaqlaşacağını anlaya bilərlər. Cavab verən mobil sayt öyrənmək üçün əla sandbox ola bilər.
  • İnfrastruktur.
    Komandalar şəkillərin yaradılması kimi məzmun idarəetmə problemlərini birdəfəlik həll etməyi öyrənə bilərlər
  • Artıqlığı çıxarın.
    Bu yanaşma komandaların özlərinə “buna həqiqətən ehtiyacımız varmı” sualını vermək və eyni zamanda performansa diqqət yetirmək üçün əla fürsət təqdim edir. Niyə? Çünki onların əsas diqqəti mobil cihazlarda saytlarının istifadəçi təcrübəsini yaxşılaşdırmaqdır.
  • Gələcək mobil ilk vebsaytlardır.
    Başlanğıcda məzmun və ya funksionallıqdan məhrum olsalar da, kifayət qədər vaxt və səylə bu mobil saytlar sonda tam səhifəli əcdadlarını əvəz edə bilər.
Qüsurlar
  • Bu hələ də mobil saytdır.
    Cavab verən olub-olmamasından asılı olmayaraq, bu yanaşma hələ də mobil saytların çoxlu çatışmazlıqlarını saxlayır: URL-nin yönləndirilməsi, məzmunun idarə edilməsi, ardıcıl məzmun, ardıcıllıq, SEO optimallaşdırılması və s. ilə bağlı problemlər.
  • Müvəqqəti düzəlişlər.
    Bir çox mobil saytlar qanaxmanı dayandırmaq üçün Band-Aid kimi yaradılmışdır. Bu cür saytlar mobil cihazlardan gələn artan trafiki boşaltmaq məqsədi ilə yaradılır. Bu həllər hələ də mövcud ehtiyaclara cavab verə bilər, lakin gələcək tendensiyaları nəzərə alsaq, uzun müddətdə sizi xilas edə bilməyəcəklər.
  • Üzümdə solmaq şansı.
    Bəzi təşkilatlar bu cür layihələrə başlaya, yolun yarısını keçə və gələn ilin büdcəsi qəbul olunana qədər hər şeyi tərk edə bilər.
  • Kiçik ekranlar üçün dizayn.
    İlkin diqqət kiçik ekranlara yönəldiyi üçün daha sonra keyfiyyətini itirmədən interfeysi daha böyük ekranlara köçürmək çətin ola bilər.
Mobil cihazlar üçün yerli olaraq cavab verən dizayn
Qüsurlar
  • Qüsursuzluğun 50 çaları.
    Bu yanaşma uğursuz ola bilər, çünki istifadəçilər həm köhnə, həm də yeni olan Frankenstein interfeysi ilə məşğul olmalı olacaqlar.
  • Üzümdə solmaq ehtimalı.
    Bu tip layihələr aydın son məqsədlərə ehtiyac duyur, yoxsa onlar əbədi olaraq təmizlikdə ilişib qala bilərlər.
  • Texniki birgəyaşayış.
    Ən son texnologiya və texnikalardan istifadə edən bir modul köhnəlmiş modulla baş-başa toqquşanda nə baş verir? Bu yanaşmanın bir çox memarlıq problemləri var.
“Mən Chevy Chase, siz deyilsiniz.” Əlbəttə, hər bir təşkilat fərqlidir, ona görə də hansı yolu seçmək müxtəlif amillərdən asılıdır. Vaxt, büdcə, əhatə dairəsi, təşkilati struktur, bacarıq dəsti və bir çox digər amillər hansı strategiyanın həyata keçirilməsinin ən yaxşı olduğuna təsir göstərir. Lakin zaman keçdikcə daha aydın oldu ki, təşkilatlar İnternetə daxil ola bilən cihazların getdikcə daha çox çeşidi üzərində işləməli olurlar.

Bu, Bred Frostun "Responsive Strategy" adlı məqaləsinin tərcüməsidir. Müəllifin təsdiqi ilə UXDepot tərəfindən tərcümə edilmişdir.

Tərcüməçilərdən PS: Ümid edirəm məqalədən zövq aldınız. Tərcümədə hər hansı səhvləri qeyd etsəniz, biz şad olarıq ki, onları tez bir zamanda düzəldə bilək. Bizə yazın [email protected], zəhmət olmasa :)

Adaptiv tərtibat istifadəçi davranışından, platformadan, ekran ölçüsündən və cihaz oriyentasiyasından asılı olaraq səhifə dizaynını dəyişir və müasir veb inkişafının tərkib hissəsidir. Bu, əhəmiyyətli dərəcədə qənaət etməyə imkan verir və hər bir qətnamə üçün yeni bir dizayn çəkmək məcburiyyətində deyil, fərdi elementlərin ölçüsünü və yerini dəyişdirir.

Bu məqalədə saytın əsas elementlərinə və onların uyğunlaşdırılmasına baxılacaq.

Ekran qətnaməsinin tənzimlənməsi

Prinsipcə, siz cihazları müxtəlif kateqoriyalara ayıra və hər biri üçün ayrıca dizayn edə bilərsiniz, lakin bu, çox vaxt aparacaq və beş ildən sonra hansı standartların olacağını kim bilir? Üstəlik, statistik məlumatlara görə, bir çox fərqli qətnaməmiz var:

Aydın olur ki, biz hər bir cihaz üçün ayrıca dizayn etməyə davam edə bilməyəcəyik. Bəs onda nə etməli?

Qismən həll: hər şeyi çevik edin

Əlbəttə ki, bu mükəmməl bir üsul deyil, lakin problemlərin əksəriyyətini aradan qaldırır.

Ethan Marcotte cavab verən tərtibatın istifadəsini nümayiş etdirən sadə bir şablon yaratdı:

İlk baxışdan hər şeyin asan olduğu görünə bilər, amma elə deyil. Loqoya nəzər salın:

Bütün təsviri azaltsanız, yazılar oxunmaz olacaq. Buna görə də loqonu saxlamaq üçün şəkil iki hissəyə bölünür: birinci hissə (illüstrasiya) fon kimi istifadə olunur, ikinci (loqo) ölçüsünü mütənasib şəkildə dəyişir.

h1 elementi fon kimi təsviri ehtiva edir və şəkil konteynerin (başlıq) fonuna uyğunlaşdırılır.

Çevik şəkillər

Şəkillərlə işləmək həssas dizaynla işləyərkən ən vacib problemlərdən biridir. Şəkillərin ölçüsünü dəyişməyin bir çox yolu var və onların əksəriyyətini həyata keçirmək olduqca sadədir. Bir həll CSS-də maksimum genişlikdən istifadə etməkdir:

Şəkil (maksimum genişlik: 100%;)

Şəklin maksimum eni ekranın və ya brauzer pəncərəsinin eninin 100%-ni təşkil edir, ona görə də eni nə qədər kiçik olsa, şəkil də o qədər kiçik olar. Qeyd edək ki, maksimum genişlik IE-də dəstəklənmir, ona görə də eni istifadə edin: 100% .

Təqdim olunan üsul adaptiv şəkillər yaratmaq üçün yaxşı seçimdir, lakin yalnız ölçüsünü dəyişdirməklə, biz şəklin çəkisini eyni qalacağıq ki, bu da mobil cihazlarda yükləmə müddətini artıracaq.

Başqa bir yol: cavab verən şəkillər

Filament Group tərəfindən təqdim edilən texnika şəkillərin ölçüsünü dəyişdirməklə yanaşı, yüklənməni sürətləndirmək üçün kiçik ekranlarda təsvirlərin ayırdetmə qabiliyyətini sıxışdırır.

Bu texnika Github-da mövcud olan bir neçə fayl tələb edir. Əvvəlcə JavaScript faylını götürürük ( rwd-images.js), fayl .htaccessrwd.gif(şəkil faylı). Sonra böyük və kiçik qətnamələri əlaqələndirmək üçün bəzi HTML istifadə edirik: əvvəlcə prefiksli kiçik bir şəkil .r(şəklin cavab verməli olduğunu göstərmək üçün), sonra data-fullsrc istifadə edərək böyük şəkilə keçid edin:

480 pikseldən daha geniş istənilən ekran üçün daha yüksək ayırdetmə təsviri yüklənəcək ( largeRes.jpg) və kiçik ekranlarda yüklənəcək ( smallRes.jpg).

iPhone və iPod Touch-ın bir xüsusiyyəti var: böyük ekranlar üçün yaradılmış dizayn sürüşmə və ya əlavə mobil tərtibat olmadan aşağı rezolyusiyaya malik brauzerdə sadəcə kiçiləcək. Bununla belə, şəkillər və mətn görünməyəcək:

Bu problemi həll etmək üçün meta etiketindən istifadə edin:

İlkin miqyas birə bərabər olarsa, şəkillərin eni ekranın eninə bərabər olur.

Fərdiləşdirilə bilən səhifə tərtibatı strukturu

Səhifə ölçüsündə əhəmiyyətli dəyişikliklər üçün elementlərin ümumi düzülməsini dəyişdirməlisiniz. Bu, ayrı bir üslub faylı və ya daha səmərəli şəkildə CSS media sorğusu vasitəsilə rahat şəkildə edilə bilər. Heç bir problem olmamalıdır, çünki üslubların əksəriyyəti eyni qalacaq və yalnız bir neçəsi dəyişəcək.

Məsələn, rənglər, fon və şriftlərlə birlikdə #wrapper , #content , #sidebar , #nav müəyyən edən əsas üslub faylınız var. Usta üslublarınız planınızı çox dar, qısa, geniş və ya hündür edirsə, siz bunu müəyyən edib yeni üslublar əlavə edə bilərsiniz.

style.css (əsas):

/* Uşaq üslub cədvəlinə miras qalacaq əsas üslublar */ html,body( fon... şrift... rəng... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Struktur elementlər */ #wrapper( en: 80%; kənar: 0 avtomatik; fon: #fff; doldurma: 20px; ) #content( en: 54%; float: sol; kənar-sağ: 3%; ) # sidebar-left( en: 20%; float: sol; kənar-sağ: 3%; ) #sidebar-right( en: 20%; float: sol; )

mobile.css (uşaq):

#wrapper( en: 90%; ) #content( en: 100%; ) #sidebar-left( en: 100%; aydın: hər ikisi; /* Yeni dizayn üçün əlavə üslublar */ haşiyə-üst: 1px bərk #ccc ; margin-top: 20px; ) #sidebar-right( en: 100%; aydın: hər ikisi; /* Yeni tərtibatımız üçün əlavə üslub */ border-top: 1px solid #ccc; margin-top: 20px; )

Geniş ekranda sol və sağ yan panellər yan tərəfə gözəl uyğunlaşır. Daha dar ekranlarda bu bloklar daha çox rahatlıq üçün bir-birinin altında yerləşir.

CSS3 media sorğuları

Cavab verən dizaynlar yaratmaq üçün CSS3 media sorğularından necə istifadə edə biləcəyinizi nəzərdən keçirək. min-width müəyyən üslubların tətbiq ediləcəyi brauzer pəncərəsinin və ya ekranın minimum enini təyin edir. Hər hansı bir dəyər min-enindən aşağı olarsa, üslublar nəzərə alınmayacaq. maksimum genişlik bunun əksini edir.

@media ekranı və (min-en: 600px) ( .hereIsMyClass ( en: 30%; float: sağ; ) )

Media sorğusu yalnız minimum eni 600 pikseldən çox və ya ona bərabər olduqda işləyəcək.

@media ekranı və (maksimum eni: 600px) ( .aClassforSmallScreens ( aydın: hər ikisi; şrift ölçüsü: 1.3em; ) )

Bu halda sinif ( aClassforSmallscreens) ekran eni 600 pikseldən az və ya ona bərabər olduqda işləyəcək.

Minimum eni və maksimum eni həm ekran eninə, həm də brauzer pəncərəsinin eninə tətbiq oluna bilsə də, bizə yalnız cihazın eni ilə işləmək lazım ola bilər. Məsələn, kiçik bir pəncərədə açılan brauzerlərə məhəl qoymamaq. Bunun üçün min-device-width və max-device-width istifadə edə bilərsiniz:

@media ekranı və (maksimum cihaz eni: 480px) ( .classForiPhoneDisplay ( şrift ölçüsü: 1.2em; ) ) @media ekranı və (min-cihaz eni: 768px) ( .minimumiPadWidth ( aydın: hər ikisi; kənar-alt) : 2px bərk #ccc ) )

Xüsusilə iPad üçün media sorğuları xüsusiyyətə malikdir oriyentasiya, kimin dəyərləri ola bilər mənzərə(üfüqi) və ya portret(şaquli):

@media ekranı və (oriyentasiya: landşaft) ( .iPadLandscape (en: 30%; float: sağ; ) ) @media ekranı və (oriyentasiya: portret) ( .iPadPortrait ( aydın: hər ikisi; ) )

Siz həmçinin media sorğu dəyərlərini birləşdirə bilərsiniz:

@media ekranı və (min-en: 800px) və (maksimum en: 1200px) ( .classForaMediumScreen (fon: #cc0000; en: 30%; float: sağ; ) )

Bu kod yalnız eni 800 və 1200 piksel arasında olan ekranlar və ya brauzer pəncərələri üçün icra ediləcək.

Bu kimi müxtəlif media sorğu dəyərləri üçün üslublarla xüsusi vərəq yükləyə bilərsiniz:

JavaScript

Brauzeriniz CSS3 media sorğularını dəstəkləmirsə, jQuery istifadə edərək üslubun dəyişdirilməsi həyata keçirilə bilər:

$(sənəd).ready(funksiya())( $(pəncərə).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Genişlik 600 pikseldən az, mobil üslub cədvəli əgər (newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Əgər eni 600 px-dən böyükdürsə, masa üstü üslub cədvəli istifadə olunur $("link").attr((href: "style.css")); ) ) ));

Könüllü məzmun ekranı

Elementləri kiçik ekranlara sığdırmaq üçün kiçilmək və yenidən təşkil etmək bacarığı əladır. Ancaq bu ən yaxşı seçim deyil. Mobil cihazlar adətən daha geniş dəyişikliklər toplusuna malikdir: sadələşdirilmiş naviqasiya, daha çox diqqət mərkəzində olan məzmun, sütunlar əvəzinə siyahılar və ya sıralar.

Xoşbəxtlikdən, CSS bizə inanılmaz asanlıqla məzmunu göstərmək və gizlətmək imkanı verir.

Ekran: heç biri;

ekran: heç biri gizlədilməli olan obyektlər üçün istifadə edilmir.

İşarələməmiz budur:

Əsas Məzmun A Sol Kenar Paneli Sağ Yan Panel

style.css (əsas):

#content( en: 54%; float: sol; kənar-sağ: 3%; ) #sidebar-left( en: 20%; float: sol; kənar-sağ: 3%; ) #sidebar-right( en: 20) %; float: sol ) .sidebar-nav( display: none; )

mobile.css (sadələşdirilmiş):

#content( en: 100%; ) #sidebar-left( displey: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

Ekran ölçüsü kiçildilirsə, məsələn, ağ boşluğu artırmaq və ya daha rahatlıq üçün naviqasiyanı əvəz etmək üçün skript və ya alternativ üslub faylından istifadə edə bilərsiniz. Beləliklə, elementləri gizlətmək və göstərmək, şəkillərin, elementlərin ölçüsünü və daha çoxunu dəyişdirmək qabiliyyətinə malik olmaqla, dizaynı istənilən cihaz və ekrana uyğunlaşdıra bilərsiniz.

Yandex xidmətləri fərdiləşdirmək üçün məlumatlarınızdan və maşın öyrənməsindən necə istifadə edir -.

Bilik bazasında yaxşı işinizi göndərin sadədir. Aşağıdakı formadan istifadə edin

Tədris və işlərində bilik bazasından istifadə edən tələbələr, aspirantlar, gənc alimlər Sizə çox minnətdar olacaqlar.

haqqında yerləşdirilib http://allbest.ru

1. Adaptiv modernləşmə

2. Cavab verən mobil saytlar

3. Mobil cihazlar üçün yerli olaraq cavab verən dizayn

4. Mərhələli strategiya

1. Adaptiv modernləşmə

Cavab verən yenidən dizayn mövcud yalnız iş masası veb-saytını götürmək və mahiyyətcə cavab verən etmək prosesidir.

Hazırda ən çox ziyarət edilən 100 000 saytın təxminən 11-12%-i cavab verir və yaxın bir neçə ildə bu rəqəmin artacağı şübhəsizdir. Daha çox təşkilat çoxlu cihaz şəbəkəsinin reallıqlarını qəbul etmək üçün qollarını çırmalayır, nirvanaya nail olmaq üçün istifadə olunan bir neçə strategiyanı nəzərdən keçirməyə dəyər:

Hazır saytlara (xüsusilə kommersiya saytlarına) gəldikdə, komandaların həmişə hər şeyi atıb yenidən qurmaq imkanı olmur. Əksər təşkilatlar üçün sıfırdan yeni dizaynın geniş miqyaslı yaradılması belə nəzərə alınmır. Buna görə də, cavab verən modernləşdirmə mobil cihazlar üçün yaxşı təcrübə yaratmaq üçün məşhur yanaşmadır.

Üstünlüklər:

· Nisbətən sürətli. Çünki hər şeyi sıfırdan yenidən qurmağı tələb etmir.

· Tanış. İstifadəçiləri çaşdırmır. İnsanlar interfeysə öyrəşmək üçün illər sərf etdilər və mövcud olanı modernləşdirərək, təşkilatlar mobil cihazlarla insanların həyatını yaxşılaşdırarkən tanış bir yanaşma saxlayırlar.

· Təşkilati cəhətdən daha sürətli. İnterfeysi təkmilləşdirmək sıfırdan başlamaqdan daha təhlükəsiz və asandır.

Qüsurlar:

· Yalnız kiçik bir hissəyə təsir edir. Üç litrlik bir bankada 10 litr su. Çoxlu məzmun

· Məhsuldarlıq.

· Ən pis dəstək. Əvvəlcə masaüstü kompüterlər üçün nəzərdə tutulmuş media sorğuları əksər mobil cihazlarda zəif dəstəklənir.

2. Cavab verən mobil saytlar

Cavab verən mobil veb-saytlar cavab verən dizayn üsullarından istifadə edərək “m.yourdomain.ru” formatında ayrıca veb-sayt yaratmaq təcrübəsidir.

Mobil versiya sizə köhnə veb saytınızdan böyüyəcək toxum əkmək imkanı verir. Vaxt keçdikcə köhnəlmiş sayt silinə bilər və sayt ilk növbədə mobil, həssas və gələcək tendensiyaları nəzərə alaraq inkişaf edəcək.

Üstünlüklər:

· Aşağı risk. Mobil cihazlardan gələn trafik azlıq təşkil edir.

· Cavab verən mobil sayt öyrənmək üçün əla sandbox ola bilər.

· Lazımsız şeyləri çıxarın. Bu yanaşma komandaların özlərinə “buna həqiqətən ehtiyacımız varmı” sualını vermək və eyni zamanda performansa diqqət yetirmək üçün əla fürsət təqdim edir.

· Gələcək mobil ilk vebsaytlardır. Başlanğıcda məzmun və ya funksionallıqdan məhrum olsalar da, kifayət qədər vaxt və səylə bu mobil saytlar sonda tam səhifəli əcdadlarını əvəz edə bilər.

Qüsurlar:

· Bu hələ də mobil saytdır. Cavab verən olub-olmamasından asılı olmayaraq, bu yanaşma hələ də mobil saytların çoxlu çatışmazlıqlarını saxlayır: URL yönləndirməsi, məzmunun idarə edilməsi, ardıcıl məzmun, ardıcıllıq, SEO optimallaşdırılması və s. ilə bağlı problemlər.

· Müvəqqəti düzəlişlər. Bir çox mobil saytlar qanaxmanı dayandırmaq üçün Band-Aid kimi yaradılmışdır. Bu cür saytlar mobil cihazlardan gələn artan trafiki boşaltmaq məqsədi ilə yaradılır. Bu həllər hələ də mövcud ehtiyaclara cavab verə bilər, lakin gələcək tendensiyaları nəzərə alsaq, uzun müddətdə sizi xilas edə bilməyəcəklər.

· Üzümdə solmaq şansı.

· Kiçik ekranlar üçün dizayn. İlkin diqqət kiçik ekranlara yönəldiyi üçün daha sonra keyfiyyətini itirmədən interfeysi daha böyük ekranlara köçürmək çətin ola bilər.

3. Mobil cihazlar üçün yerli olaraq cavab verən dizayn

smartfon interfeysi dizaynı

“Əvvəlcə mobil” mobil mühitin məhdudiyyətlərini (kiçik ekran, aşağı bant genişliyi və s.) nəzərə alan, lakin böyük ekranlardan tam istifadə edən interfeysin dizaynını nəzərdə tutan prinsipdir.

Üstünlüklər:

· Yeni güclə başlayın. Əvvəlcə mobil - yeni bir başlanğıc.

· Ən yaxşı dəstək. Daha çox mobil cihazlara, xüsusən də media sorğularını dəstəkləməyən köhnə cihazlara dəstək.

· Məhsuldarlıq. Saytın performansı ilk növbədə onun həyata keçirilməsi funksiyası olsa da, mobil cavab verən dizaynlar komandalara başlanğıcdan performansa diqqət yetirmək imkanı verir.

· Hər şeyi nəzərə alaraq və bir anda. Mobil ilk dizayn (adına baxmayaraq) yalnız bir cihaz sinfini hədəfləməkdənsə, geniş çeşidli qətnamələri özündə cəmləşdirə bilər.

· Gələcəyə davamlı dizayn.

Qüsurlar:

· Çox vaxt ayırın

Şüurda dəyişiklik

· Təşkilati cəhətdən çətin

· Tanış olmayan

4. Mərhələli strategiya

Addım-addım cavab verən dizayn strategiyası genişmiqyaslı kampaniyanı bir neçə addıma bölür. Modernləşmədə olduğu kimi (bu strategiyalar bir-birini istisna etmir), genişmiqyaslı yenidən dizaynı həyata keçirmək mümkün olmaya bilər, buna görə də bəzi təşkilatlar bunu addım-addım edir. Adaptiv interfeysin addım-addım yaradılmasının bir neçə növü var: Səhifə-səhifə.

Üstünlüklər:

· Gözə çarpan

· Çevik olmağı öyrənmək imkanı. Siz cavab verən interfeyslərin yaradılması ilə bağlı hər şeyi öyrənə və sonra bu biliyi saytın qalan hissəsi üçün istifadə edə bilərsiniz.

· Başlamaq üçün daha yüksək şans

Qüsurlar:

Dürüstlüyün olmaması

Üzümdə solma ehtimalı

Allbest.ru saytında yerləşdirilib

Oxşar sənədlər

    İstifadəçi interfeyslərinin işlənib hazırlanması prinsipləri və üsulları, onların dizayn qaydaları. Microsoft Expression Blend-də istifadəçi interfeyslərini prototip etməyin klassik yolları. Expression Blend proqramında mətn və qrafiklərlə işləmək.

    kurs işi, 03/19/2012 əlavə edildi

    İnternetin yaranma tarixi və onun əsas prinsipləri: protokollar, xidmətlər, xidmətlər. İnternet asılılığı, trolling, kiberpank və senzura anlayışlarının tərifi. Veb-saytların təsnifatı və yerləşdirilməsi, onların dizaynının hazırlanması. Brauzerlər Mozilla Firefox və Opera.

    mücərrəd, 11/10/2011 əlavə edildi

    Veb saytların yaradılması və dizaynı üçün üsul və vasitələrin nəzərdən keçirilməsi. Veb saytların yaradılması üçün proqramlaşdırma dilləri. CMS məzmun idarəetmə sistemlərinin üstünlükləri və çatışmazlıqlarının təhlili. Veb sayt dizaynının və tərtibatının hazırlanması. Məhsulun hazırlanması xərclərinin hesablanması.

    dissertasiya, 06/02/2016 əlavə edildi

    Müasir proqram optimallaşdırma sistemlərinin qrafik istifadəçi interfeyslərinin təhlili. SBkZ_PP idarəetmə sisteminin riyazi modelinin və alqoritminin, onun memarlıq-kontekstual diaqramının yaradılması. Proqram təminatının texniki sənədləri.

    dissertasiya, 04/18/2012 əlavə edildi

    İstifadə olunan texnologiyaların, universitet saytlarının məzmununun və dizaynının, o cümlədən CMS əsasında yaradılanların nəzərdən keçirilməsi və təhlili. PRIPIT veb-saytının məzmununun və onun potensial ziyarətçilərinin müxtəlif qruplarının məlumat ehtiyaclarının tədqiqi. Veb sayt dizaynının inkişafı.

    dissertasiya, 03/11/2010 əlavə edildi

    Ekran qrafik komponentləri, sistem obyektləri və funksiyaları. İstifadəçinin cihazla qarşılıqlı əlaqəsi üçün vasitələr sistemi. Fərdi kompüterlərin qrafik istifadəçi interfeyslərinin tarixi, onların təsnifatı. X Pəncərə Sistemi.

    təqdimat, 22/05/2012 əlavə edildi

    Ticarət müəssisəsi üçün veb-sayt hazırlamaq üçün İnternet səhifəsinin qurulması və dizaynı üsullarının seçilməsi. Veb dizayn elementləri ilə işləmək xüsusiyyətləri: şrift, başlıqlar, qrafika. İnternet saytlarının yaradılması və istifadəsinin hüquqi tənzimlənməsi.

    dissertasiya, 11/11/2010 əlavə edildi

    Kompüter iyerarxik sistemlərinin informasiya qarşılıqlı interfeyslərinin xüsusiyyətləri. “Əks əlaqə” prinsipi. Aparat-proqram interfeyslərinin yaradılmasının xüsusiyyətləri, sadəliyi və qaydaları. Kompüter sistemlərinin layihələndirilməsində yeni istiqamətlər.

    kurs işi, 01/05/2017 əlavə edildi

    Konsaltinq biznesinin mediasının təhlili: konsaltinq firmalarının veb-saytları, informasiya sistemləri və veb-saytları yaratmaq üçün proqramlaşdırma dilləri və proqram təminatının nəzərdən keçirilməsi. Biznes prosesinin modelləşdirilməsi. İnternet mövcudluğunun inkişafı.

    dissertasiya, 04/11/2012 əlavə edildi

    Hostinq şirkətinin sistem xidmətləri üçün vizual interfeys yaratmaq üçün İnternet xidmətinin hazırlanması. İnterfeys və inkişaf istiqamətlərinin qiymətləndirilməsi meyarları. GlideOS masa üstü. Xidmət arxitekturasının, proqramlaşdırma dilinin və ünsiyyət üsullarının seçilməsi.