Veb saytınızı tərtib edərkən, ekran ölçüsündən və formasından asılı olmayaraq hər hansı bir cihazda əla göründüyündən əmin olmaq vacibdir. Cavab verən veb saytlar, kompüterlər, telefonlar, planşetlər, televizorlar, geyilə bilən əşyalar və hətta avtomobil ekranları kimi hər cür müasir cihazda yaxşı görünmək üçün hazırlanmışdır. Veb saytın cavab verməsini təmin etmək üçün, CSS və HTML kodunuzu müəyyən şərtlərdən asılı olaraq elementlərinin ölçüsünü avtomatik olaraq dəyişmək üçün dəyişdirməlisiniz. Bu wikiHow sizə əsas cavab verən veb dizaynını necə planlaşdırmağı və tətbiq etməyi öyrədir.
Addımlar
Metod 1 /3: Həssas Dizayn Planlaşdırma
Addım 1. İzləyicilərinizin veb saytınızı necə istifadə etdiyini öyrənin
Bu günlərdə internetdə gəzən insanların əksəriyyəti bunu cib telefonlarından və planşetlərdən edirlər. Bir saytın cavab verməsi üçün, harada baxılmasından asılı olmayaraq düzgün göstərilməsini təmin etməlisiniz. Vaxt və pul əsasdırsa, istifadəçiləriniz arasında ən populyar olan cihaz növlərinə (bu məlumat varsa) və saytınızı necə istifadə etdiklərinə diqqət yetirin. Analitik proqramınızdan və ya başqa bir araşdırma formasından istifadə edərək bunları öyrənin:
- Cib telefonu/tablet/kompüter markalarına və ekran/qətnamə ölçülərinə xüsusi diqqət yetirərək veb saytı görmək üçün ən çox hansı cihazlardan istifadə edirlər.
- İstifadəçiləriniz arasında ən çox sevilən brauzerlər. Qlobal statistikaya gəldikdə, Google Chrome dünyanın ən populyar veb brauzeridir, lakin Safari saniyəyə yaxındır.
- Ziyarətçilərinizin veb saytınızı necə istifadə etdikləri, buna baxmağa nə qədər vaxt sərf etdikləri, harada baxdıqları və hansı məzmunun ən populyar olduğu. Bu, hansı məzmunun daxil edilməsinin vacib olduğunu və hansının buraxıla biləcəyini təyin etməyə kömək edə bilər.
Addım 2. Fərqli qurğular üçün fərqli planlar tərtib edin
İstifadəçinin cihazını, habelə onun imkanlarını (Java, Flash və s. Dəstəkləyir olsun) aşkar etmək və buna uyğun olaraq saytınızın müəyyən bir versiyasını göstərmək üçün CSS və JavaScript kombinasiyasından istifadə edə bilərsiniz. CSS Media Sorğuları cihazın ölçüsünü/qətnaməsini təyin etmək üçün xüsusilə faydalıdır.
Addım 3. Müxtəlif növ qarşılıqlı əlaqələri hesablayın
Ziyarətçiniz, görmə qüsurlu insanlar üçün siçan, klaviatura, toxunma ekranı və ya hətta ekran oxuyucusu istifadə edərək veb saytınızla əlaqə qura bilər. Bunu nəzərə alaraq veb saytınız siçan kliklərinə, klaviatura düymələrinə (Tab, Enter, Return və s.) Və ekran barmaq toxunuşlarına cavab verməlidir.
Hover-over effektləri siçandan başqa heç bir şeylə işləmir. Bu effektləri istifadə etmək əvəzinə, ziyarətçinin əvvəllər siçan üzərində göstərilmiş hər şeyi göstərmək üçün bir düyməni və ya nişanı vurmasını tələb edə bilərsiniz
Addım 4. Məzmun İdarəetmə Sistemindən (CMS) istifadə etməyi düşünün
Sayt dizaynınızın həssas olmasını təmin etmək üçün asan bir yol, əvvəlcədən hazırlanmış bir cavab mövzusu olan bir CMS istifadə etməkdir. Joomla, Drupal və ya Wordpress kimi bir CMS istifadə edərək, cavab verən elementləri özünüz kodlamadan veb saytınızın bütün cihazlarda əla görünməsini təmin edə bilərsiniz. Xidmətinizdə hansı CMS vasitələrinin mövcud olduğunu görmək üçün veb hostinq provayderinizlə əlaqə saxlayın.
Addım 5. Veb saytınızı sınamaq üçün onlayn vasitələrdən istifadə edin
Həssas veb dizaynının populyarlığı artdıqca, veb saytınızı sınamaq üçün istifadə edə biləcəyiniz bir çox pulsuz vasitə var. Veb saytınızı kodlamısınızsa, müxtəlif şəraitdə necə göründüyünü yoxlamaq üçün bu vasitələrdən istifadə edin, beləliklə cavab vermə qabiliyyətini artırmaq üçün harada ehtiyacınız olduğunu biləcəksiniz:
- Google-dan Mobil Dostluq Testi: Saytınızın kompüter ekranlarında olduğu kimi mobil cihazlarda da yaxşı işlədiyini bilmək imkanı verir.
- resizeMyBrowser: Saytınızı fərqli qətnamələrdə görmək imkanı verir.
- Responsiator: Saytınızı fərqli qurğular ekranlarında fərqli planlarda (yan və ya sağa yuxarı) göstərir.
Metod 2 /3: Səhifə Layihəsini Həssas Edin
Addım 1. Pulsuz cavab verən stil hesabatı çərçivəsini nəzərdən keçirin
Çərçivə, saytınız üçün skelet kimi istifadə edə biləcəyiniz əvvəlcədən yazılmış HTML, CSS və/və ya JavaScript dəstidir. Çərçivələr bütün tarayıcılarla işləmək üçün sınaqdan keçirilmiş və optimallaşdırılmışdır, buna görə məzmununuzu daxil etmək, media və rəng seçimlərinizi əlavə etmək və saytınızı dərc etmək kifayətdir. Bəzi məşhur çərçivələr:
- Bootstrap
- Skeleton
- Vəqf
Addım 2. Görünüş sahəsini meta etiketlə təyin edin
Bir çərçivə istifadə etmirsinizsə, cavab verən bir veb saytının kodlaşdırılmasının ən vacib tərəfi ilə başlamaq istəyəcəksiniz: Viewport. Görünüş portalı, istifadəçinin görə biləcəyi veb saytın bir hissəsidir. Saytınızın ekran ölçüsündən asılı olmayaraq düzgün bir şəkildə göstərilməsinin açarı, META etiketindəki görüntü sahəsinin ölçüsünü ölçməkdir. Bunu etmək üçün bu etiketi saytdakı hər səhifənin yuxarısına daxil edin:
Addım 3. Görünüş sahəsinə görə mətn ölçüsünü göstərin
Görünüş sahəniz qurulduqdan sonra səhifənizdəki mətn ekrana uyğun ölçüyə gələcək. Bununla birlikdə, ölçüləri görüntü sahəsinə görə təyin edilmədikdə şriftlər çox böyük və ya çox kiçik göstərilə bilər. Şrift ölçüsünü vw vahidi ilə görüntü sahəsinin müəyyən bir faizi olaraq təyin edərək bunu edə bilərsiniz. Bu nümunə, H1 başlıqlarının ölçüsündən asılı olmayaraq görüntü sahəsinin eninin 10% -də göstərilməsini bildirir:
wikiHow
Addım 4. Fərqli ekran ölçüləri üçün fərqli üslublar göstərmək üçün media sorğularından istifadə edin
Media sorğuları, ekran ölçüsündən asılı olaraq müəyyən CSS elementlərinin göstərilməsini seçməyə imkan verir. CSS sənədinizdə media sorğunuzun xüsusiyyətlərini təyin edə bilərsiniz. Bu nümunədə, istifadəçinin ekran ölçüsü 480 piksel və ya daha böyük olarsa bədənin arxa planı qırmızıya çevriləcək:
wikiHow
@media ekranı və (min eni: 480px) {gövdə {fon rəngi: aqua; }}
Metod 3 /3: Şəkilləri Həssas Edin
Addım 1. Şəkilləri miqyaslandırmaq üçün CSS eni xüsusiyyətindən istifadə edin
Şəklin genişliyini müəyyən bir piksel (məsələn, 500 piksel) olaraq təyin etmək əvəzinə, bir faiz istifadə edin (məsələn, 100%), belə ki, şəkil üst hissəsinin genişliyinə baxır və buna uyğun olaraq tənzimlənir. Bir görüntünün genişliyini 100% olaraq təyin etmək, görüntünün tamaşaçı ekranının ölçüsündən asılı olaraq yuxarı və aşağı miqyas almağa məcbur edir. Bunu onlayn etmək üçün:
Addım 2. Görünüşün həqiqi ölçüsünü məhdudlaşdırmaq üçün max-width xüsusiyyətindən istifadə edin
Bir görüntünü 100% miqyaslandırmaq üçün əvvəlki addımda genişlik xüsusiyyətindən istifadə etsəniz, şəkil ölçüsündən asılı olmayaraq konteynerinin 100% -ni tutacaq şəkildə böyüyəcək və ya kiçiləcək. Bu o deməkdir ki, görüntü daha kiçik tərəfdə olarsa, orijinal ölçüsündən daha böyük ölçüdə böyüyəcək və keyfiyyəti daha aşağı olacaq. Bunun baş verməməsi üçün görüntünün maksimum ölçeklendirme ölçüsünü 100% (həqiqi ölçüsü) olaraq təyin etmək üçün max-width istifadə edin. İşdə:
Addım 3. Fərqli şəkilləri fərqli ekran ölçülərində göstərmək üçün HTML şəkil elementindən istifadə edin
Fərqli ölçülü ekranlarda göstərmək üçün xüsusi ölçülü şəkillər yaratmaq istəyirsinizsə, HTML kodunuzda hansı şəkillərin göstəriləcəyini təyin edə bilərsiniz. Fərqli ölçülü şəkillər yaradın və sonra 600px və 1500px genişlikli ekranlarda hansı görüntünün istifadə olunacağını təyin etmək üçün bu kodu nümunə olaraq istifadə edin:
