Вебсайтыңыздын дизайнын иштеп чыгууда, анын экрандын өлчөмүнө жана формасына карабастан, каалаган түзмөктө сонун көрүнөрүнө ынануу маанилүү. Жооптуу вебсайттар компьютерлер, телефондор, планшеттер, сыналгылар, кийилүүчү буюмдар жана ал тургай унаанын экрандары сыяктуу заманбап бардык түзмөктөрдө жакшы көрүнүү үчүн иштелип чыккан. Вебсайтты жооптуу кылуу үчүн, CSS жана HTML кодуңузду өзгөртүү керек, анын шарттарына жараша анын элементтерин автоматтык түрдө өзгөртүү. Бул wikiHow сизге жооп берүүчү веб дизайнын кантип пландаштырууну жана ишке ашырууну үйрөтөт.
Кадамдар
3 методу 1: Responsive дизайнын пландаштыруу
Кадам 1. Аудиторияңыз веб -сайтыңызды кантип колдоноорун билип алыңыз
Бул күндөрү, интернетти карап жаткан адамдардын көпчүлүгү муну уюлдук телефондордон жана планшеттерден жасашат. Сайт жооп бериши үчүн, ал кайсы жерде каралбасын, анын туура көрсөтүлүшүн камсыз кылышыңыз керек. Убакыт жана акча маанилүү болсо, колдонуучуларыңыз менен эң популярдуу болгон түзүлүштөрдүн түрлөрүнө (эгер бул маалымат бар болсо) жана алар сиздин сайтыңызды кантип колдонушуна көңүл буруңуз. Аналитикалык программаңызды же башка изилдөө түрүн колдонуп, билип алыңыз:
- Вебсайтты көрүү үчүн көбүнчө кандай түзмөктөрдү колдонушат, уюлдук телефонго/планшетке/компьютердин бренддерине жана экран/чечим өлчөмдөрүнө өзгөчө көңүл бурушат.
- Колдонуучуларыңыз менен кайсы браузерлер эң популярдуу. Глобалдык статистикага келсек, Google Chrome дүйнө жүзү боюнча эң популярдуу веб -браузер, бирок Safari жакын экинчи.
- Конокторуңуз веб -сайтыңызды кантип колдонот, мисалы, аны көрүүгө канча убакыт коротот, кайда көрүп жатышат жана кайсы мазмун эң популярдуу. Бул мазмундун кайсы түрүн кошуу маанилүү экенин жана кайсынысын алып салууга болорун аныктоого жардам берет.
Кадам 2. Дизайн ар кандай түзүлүштөр үчүн
Колдонуучунун түзмөгүн, ошондой эле анын мүмкүнчүлүктөрүн (Java, Flash ж. CSS Media Queries түзмөктүн өлчөмүн/чечимин аныктоо үчүн өзгөчө пайдалуу.
Кадам 3. Өз ара аракеттенүүнүн ар кандай түрлөрүн эсепке алуу
Сиздин зыяратчыңыз веб-сайтыңыз менен чычканды, клавиатураны, сенсордук экранды, ал тургай көрүүсү начар адамдар үчүн экранды окууну колдонушу мүмкүн. Муну эске алганда, сиздин веб-сайтыңыз чычкан басууларына, клавиатура баскычтарына (Tab, Enter, Return ж. Б.) Жана экранды манжаларга тийгизүүгө жооп бериши керек.
Эстен кетүү эффекттери чычкандан башка эч нерсе менен иштебейт. Бул эффекттерди колдонуунун ордуна, зыяратчынын мурда чычканды жылдырууда көрсөтүлгөн нерсени көрсөтүү үчүн баскычты же сөлөкөттү басуусун талап кылсаңыз болот
4 -кадам. Мазмунду башкаруу системасын (CMS) колдонууну карап көрүңүз
Сайтыңыздын дизайнына жооп берүүнү камсыз кылуунун оңой жолу-бул алдын ала курулган жооптуу темасы бар CMSти колдонуу. Joomla, Drupal же Wordpress сыяктуу CMSти колдонуп, жооп берүүчү элементтерди өзүңүз коддобостон, веб -сайтыңыз бардык түзмөктөрдө сонун көрүнүшүн камсыздайт. Кызматыңызда кайсы CMS куралдары бар экенин билүү үчүн веб хостинг провайдериңизден текшериңиз.
Кадам 5. Веб -сайтыңызды текшерүү үчүн онлайн куралдарды колдонуңуз
Эми жооптуу веб -дизайн популярдуулукка ээ болуп, веб -сайтыңызды текшерүү үчүн колдоно турган ар кандай акысыз куралдар бар. Эгер сиз веб -сайтыңызды коддоп койгон болсоңуз, анда бул куралдарды колдонуп, анын ар кандай шарттарда кантип көрүнөөрүн текшерип көрүңүз, ошондо сиз жооп кайтарууну жакшыртуу керектигин билесиз:
- Google тарабынан мобилдик достук тест: Сиздин сайтыңыз компьютер экрандарындагыдай эле мобилдик түзмөктөрдө да иштээрин билүүгө мүмкүнчүлүк берет.
- resizeMyBrowser: Сайтыңызды ар кандай токтомдордо көрүүгө мүмкүндүк берет.
- Жооп берүүчү: Сиздин сайтыңызды ар кандай түзүлүштөгү ар кандай түзмөктөрдүн экранында (капталында же оң жагында) көрсөтөт.
Метод 2 3: Барактын жайгашуусун жооптуу кылуу
Кадам 1. Акысыз жооп берүүчү стиль жадыбалы алкагын карап көрөлү
Framework-бул сиздин сайтыңыздын скелети катары колдоно турган HTML, CSS жана/же JavaScriptтин алдын ала жазылган жыйындысы. Frameworks бардык браузерлер менен иштөө үчүн сыналган жана оптималдаштырылган, андыктан сизге мазмунду киргизүү, медиаңызды жана түстөрдүн тандоолорун кошуу жана сайтыңызды жарыялоо гана керек. Кээ бир популярдуу алкактар:
- Bootstrap
- Skeleton
- Foundation
Кадам 2. Көрүнүштү мета тег менен коюңуз
Эгерде сиз алкакты колдонбосоңуз, анда жооп берүүчү веб -сайтты коддоонун эң маанилүү аспектинен баштоону каалайсыз: Viewport. Көрүү порту - бул веб -сайттын колдонуучуга көрүнгөн бөлүгү. Экрандын чоңдугуна карабастан, сиздин сайтыңызды туура көрсөтүү үчүн ачкыч - META тегиндеги көрүү портунун өлчөмүн масштабдоо. Бул үчүн, сайттагы ар бир беттин жогору жагына бул тегди киргизиңиз:
Кадам 3. Көрүү аянтына карата тексттин өлчөмүн көрсөтүңүз
Көрүү портуңуз орнотулгандан кийин, баракчаңыздагы текст экранга туура келгидей масштабга ээ болот. Бирок, шрифттер өтө чоң же өтө кичине көрүнүшү мүмкүн, эгерде алардын өлчөмдөрү көрүү аянтына карата көрсөтүлбөсө. Сиз муну vw бирдиги менен көрүү аянтчасынын белгилүү бир пайызы катары шрифт өлчөмүн аныктоо менен жасай аласыз. Бул мисал H1 аталыштарына анын өлчөмүнө карабай, көрүү портунун туурасынын 10% ын көрсөтүү керектигин айтат:
wikiHow
Кадам 4. Ар кандай экран өлчөмдөрү үчүн ар кандай стилдерди көрсөтүү үчүн медиа сурамдарды колдонуңуз
Медиа сурамдары экран өлчөмүнө жараша CSSтин айрым элементтерин көрсөтүүнү тандап алууга мүмкүндүк берет. Сиз медиа сурооңуздун өзгөчөлүгүн CSS файлыңызда көрсөтө аласыз. Бул мисалда, колдонуучунун экранынын өлчөмү 480 пиксель же андан чоңураак болсо, дененин фонун түсү кызыл болуп калат:
wikiHow
@media экраны жана (min-width: 480px) {body {background-color: aqua; }}
3 методу 3: Сүрөттөрдү жооптуу кылуу
Кадам 1. Сүрөттөрдү масштабдоо үчүн CSS туурасын колдонуңуз
Сүрөттүн туурасын пикселдин белгилүү бир өлчөмүнө коюунун ордуна (мис., 500 пиксель), пайызды (мис., 100%) колдонуңуз, ошондо сүрөт ата -энесинин туурасына карайт жана ошого жараша тууралаңыз. Сүрөттүн туурасын 100% га коюу көрүүчүнүн экранынын өлчөмүнө жараша сүрөттү өйдө -ылдый кылууга мажбурлайт. Муну онлайн режиминде аткаруу үчүн:
Кадам 2. Сүрөттүн чыныгы өлчөмүн масштабдатууну чектөө үчүн max-width өзгөчөлүгүн колдонуңуз
Эгерде сиз мурунку этапта туураны колдонсоңуз, анда сүрөттү 100% га чейин масштабдоо үчүн, сүрөт чоңдугуна карабай контейнеринин 100% ылайыкташтырылат. Бул сүрөт кичинекей тарапта болсо, анда анын баштапкы өлчөмүнөн чоңураак жана сапаты начарыраак болот дегенди билдирет. Мунун алдын алуу үчүн, max-width колдонуп, сүрөттүн максималдуу масштабдык өлчөмүн 100% га (анын чыныгы өлчөмүнө) коюңуз. Бул жерде:
Кадам 3. Ар кандай экран өлчөмдөрүндө ар кандай сүрөттөрдү көрсөтүү үчүн HTML сүрөт элементин колдонуңуз
Эгерде сиз ар кандай өлчөмдөгү экрандарда көрсөтүү үчүн ыңгайлаштырылган өлчөмдөгү сүрөттөрдү түзгүңүз келсе, HTML кодуңузда кайсы сүрөттөрдү көрсөтүүнү көрсөтө аласыз. Ар түрдүү өлчөмдөгү сүрөттөрдү түзүп, анан 600px жана 1500px туурасындагы экрандарда кайсы сүрөттү колдонууну көрсөтүү үчүн бул кодду мисал катары колдонуңуз:
