Адаптивдүү веб-сайт дизайны – бул бир эле веб-сайтты ар кандай типтеги түзмөктөрдө онлайн көрсөтүү үчүн ыңгайлуу система. Жөнөкөй сөз менен айтканда, бул ноутбукта, смартфондо жана башка гаджеттерде бир веб-баракчаны көрүү мүмкүнчүлүгү.
Адамдар ар кандай форматтагы интернет иштетилген гаджеттерге ээ болгондон бери веб-сайттын жооп берүүсү зарыл болуп калды. Компаниялар, интернет-дүкөндөр, жада калса жөн гана маалыматтык сайттар ага ар тараптан ыңгайлашып, өз аудиториясына жагууга умтулушат. Жооптуу дизайн ыңгайлуулук маселесин чечет, андыктан бул алмаштырылгыс жумуш элементи.
Responsive веб-дизайндын өзгөчөлүктөрү
Дизайндын ыңгайлуулугу бир нече негизги критерийлер менен мүнөздөлөт.
- Өлчөмү. Веб-сайттын дизайнында бетти ар кандай түзмөктөрдө көрсөтүүдө анча-мынча айырмачылыктар болушу керек, андыктан сүрөттөрдүн, тексттин жана башка көрүлгөн элементтердин өлчөмдөрү аппараттардын өздөрүнүн өлчөмдөрүнө дал келиши керек. Бул үчүн веб-иштеп чыгуучулар дизайнды анын бир нече көрүү версиясы болушу үчүн ылайыкташтырышат.
- Мазмунду ыңгайлаштыруу. Сайтты толтурган материал (сүрөттөр, видеолоржана башка мультимедиялык элементтер) дисплейдин сапатын жоготпостон талап кылынган экрандын чечилиштерине дал келиши керек.
- Дизайн ийкемдүүлүгү. Сиз көрүп жаткан веб-баракчаны өзгөртүүдө сайттын дизайнын тез жөнгө салууга мүмкүндүк берүүчү элементтерди иштеп чыгууга кошуу. Мисалы, колдонуучу баракты өйдө жана ылдый сыдырат, ар кандай бөлүмдөрдү кыдырат же экрандын абалын вертикальдан горизонтальга жана тескерисинче өзгөртөт.
- Жакшыраак колдонуу үчүн нерселерди түзмөк боюнча жөнөкөйлөтүңүз.
- Маанисиз блокторду кичине экрандарда жашыруу.
Негиздер
Веб-сайт куруу, албетте, программалоо тилдерине байланыштуу, анткени аларсыз сиз жөн эле кыла албайсыз. HTML жана CSS жардамы менен браузер объекттердин (тексттердин, иллюстрациялардын, видеолордун) курамын жана тартибин тааныйт - сайт ушундайча түзүлөт.
CSS түскө, стилдерге, өлчөмдөргө, шрифттерге, тегиздөөлөргө, толтурууга, фон элементтерине, формаларга жана башкаларга жооп берет. HTML сайттын жалпы мазмунуна жана структурасына жооптуу. Ошентип, веб-ресурс эки эң маанилүү сүрөттөө ыкмасынын жыйындысында түзүлөт.
CSS, экинчи жагынан, ажырагыс дизайн куралы болуп саналат. HTMLден жогору турган көптөгөн функцияларга ээ:
- Бир нече барактарда дизайндын ырааттуулугун, сайттын көрүнүшүн камсыздайт жана HTML документтеринин көрүнүшүн көзөмөлдөйт.
- Сизге дизайн менен мазмунду бир эле учурда жасоо мүмкүнчүлүгүн берет.
- Бир нече стилдерди жана мүмкүнчүлүктөрдү колдонотар кандай түзмөктөрдө көрүү.
- Татаал дизайн чечимдерин чыгарат.
- Жогорку ылдамдык менен мүнөздөлөт.
Веб-сайтты иштеп чыгуу үчүн сиз кээ бир негизги түшүнүктөрдү билишиңиз керек.
CSS селектор касиеттерин жана форматтоо параметрлерин аныктаган стилдин аты менен белгиленет. Ал серепчиге касиеттер кайсы элементке тиешелүү экенин айтып берет.
Менчик структуралык бирдик болуп саналат. Ал тышкы параметрлерди (өлчөм, жайгашкан жер, түс, форма ж.б.) аныктайт жана белгилүү бир код менен туюнтулган.
Бир объектти сырткы көрүнүшү жана жайгашкан жери боюнча сүрөттөгөн аныкталган CSS касиеттеринин жыйындысы бар.
Бул элементтер чогуу төмөнкү схеманы түзөт:
Selector { property1: value; мулк2; маани }.
Макетин өлчөмдөрү жана чечилиши
Дизайн иштеп чыгуу Photoshop же башка графикалык программаларда макетти даярдоодон башталат. Ыңгайлуулук үчүн кенепке модулдук тордун атайын белгилери киргизилет, атайын чегинүүлөр байкалат. Ошентип, веб-дизайнер макет дизайнерине келечектеги сайтты структуралаштыруу принциптерин жана веб элементтерин туура жайгаштырууну көрсөтөт.
Түзмөктүн негизги түрлөрү үчүн жооп берүүчү веб-дизайн токтомдору жана өлчөмдөрү:
- Бул дизайн мобилдик уруксат менен ишти баштоо принцибине туура келет. Смартфондун макети 460 × 960 пиксель өлчөмүндө түзүлгөн.
- Планшеттин өлчөмү 768 × 1024.
- Блокноттун өлчөмү 1280 × 802.
- PC өлчөмү 1600 × 992.
Сайттын мобилдик версиясындабардык негизги функцияларын сактап калуу менен, мүмкүн болушунча жөнөкөйлөтүлгөн болушу керек. Эгерде макет интернет-дүкөн үчүн даярдалып жаткан болсо, колдонуудагы бардык жөнөкөйлөтүүлөр менен, анда анын негизги сыпаттамасы, продукт каталогу, заказ варианты, соода корзинасы жана башкалар болушу керек - толук кандуу иштеши үчүн бардык керектүү элементтер, компьютерде толук форматта көрүү сыяктуу. Мобилдик версиянын ыңгайлуулугу – жүктөөдө убакытты үнөмдөө үчүн бул жерде кошумча барактардан качсаңыз болот.
Адаптивдүү мазмунда html кодун колдонуп, кээ бир керексиз элементтерди жашыра аласыз. Мисалы, жогорку чечилиште сайт анын сүрөттөлүшү, баасы, жеткирүү маалыматы жана "Корзинага" кошуу мүмкүнчүлүгү бар продукт картасын көрсөтөт. Мобилдик дааналыкта процесс сүрөткө, баага жана сатып алуу баскычына чейин жөнөкөйлөштүрүлгөн.
Жайгамдуу дизайн үчүн орточо жана минималдуу резолюциялар колдонуучунун окуу жана көрүү оңойлугун эске алышы керек.
Макеты
Адаптивдүү дизайн макетинин максаты ийкемдүү макетти түзүү, же адаттагыдай эле: "резина шаблон". Жыйынтык бир орундуу барак өлчөмдөрүндө эмес, бардык түзмөктөрдө оңой көрүү үчүн шаблондун пропорционалдуу кысылышында.
Ал негизинен CSS'те курулган. Иштеп чыгуу учурунда экрандын өлчөмдөрүн башкаруу пункттары аныкталат. Ошентип, калган объектилердин туурасы аныкталат. Бул үчүн барактын туурасы css max-width касиети менен белгиленет, бул критерийлерге жараша башка элементтердин өлчөмү пайыз катары тандалат. Мисалы, негизги боюнча блок өлчөмүбет 600px, ал эми каптал панелинин блогунун (сайттын каптал тилкеси) туурасы 400px, тиешелүүлүгүнө жараша мазмундун туурасы 60%, каптал тилкесинин туурасы 40% болот.
Жауап берүүчү макеттердин бир нече түрлөрү бар. Ар бири өзгөчөлүктөргө жана түзүлүшкө жараша өзүнчө тандалат.
Көрүүлөр:
- Экрандын дааналыгы азайганда блокторду ороп коюуга мүмкүндүк берген макет түрү. Көп тилкелүү сайттарда кошумча блоктор экрандын ылдый жагына жылдырылат.
- Ар бир уруксат үчүн өзүнчө үлгү иштелип чыкканда. Жооптуу дизайндын бул түрү көбүрөөк убакытты талап кылат, бирок эң окулуу.
- Бардык элементтерди масштабдоону максат кылган дизайндын жөнөкөй түрү. Бул ийкемдүү эмес.
- Панель түрү экрандын ордун өзгөртүүдө кошумча функциялар пайда болгондо мобилдик тиркемелерде колдонууга ыңгайлуу.
Жауаптуу катмарларды түзүү жумуштун бир гана бөлүгү. Адаптивдүү сүрөттөр - өзүнчө жагдай, анын өз көйгөйлөрү жана аларды чечүү ыкмалары бар.
Бир сүрөт ар кандай экран токтомдорунда даана көрсөтүлүшү керек. Бул жерде бир көйгөй бар - токтомдун өзгөрүшүнө карабастан, сүрөт ар дайым ошол бойдон кала берээрине кантип ынануу керек. Бул учурда жөнөкөй CSS кодун киргизүү жетишсиз.
Мисалы: img {макс-туурасы: 250px;} - бул жерде сиз сүрөттүн өзүн эмес, сүрөттү камтыган контейнердин өлчөмү чектелген ыкманы колдонушуңуз керек. Ал төмөнкүдөй көрүнөт: div img {максималдуу туурасы: 250px;}. Бул ыкма көйгөйдү чечеткичинекей сүрөттөрдүн макети, бирок чоң иллюстрациялар үчүн ылайыктуу эмес.
Ошондуктан, көптөгөн иштеп чыгуучулар серверди ашыкча жүктөбөй каалаган сүрөттү ыңгайлаштырууга мүмкүндүк берген JavaScript тилдерин колдонууну артык көрүшөт. Javascript көптөгөн альтернативдүү скрипттерди сунуштайт.
Жайгамдуу макеттин жакшы жана жаман жактары
Позитивдүү жактары:
- Бардык элементтердин жайгашкан жерин сактаңыз. Бул колдонуучу сайттын толук версиясына көнүп калганда ыңгайлуу.
- Домендерди жана даректерди сакта.
- Башка уруксат форматтары үчүн толук ыңгайлаштыруу.
Терс жактары:
- Функционалдык ийкемдүүлүк жоголду
- Маалыматтык ашыкча жүктөөлөр веб-ресурстун узакка созулушу менен коштолот, бул көптөгөн колдонуучуларды тезирээк опцияларга өтүүгө мажбурлайт.
Веб-сайт түзүү
Сайттын түзүмү бир нече бөлүмгө жана блокторго бөлүнгөн. Салт боюнча, макет сайттын жогорку бөлүгүнөн (баш), логотиптен, менюдан, мазмун блогунан жана сайттын акыркы бөлүгүнөн (мисалы, деталдуу байланыш маалыматынан) турат. Жөнөкөй шаблондон кантип жооп берүүчү вебсайт дизайнын жасоону карап көрөлү.
Жазуу үчүн жардамчы тэгдер:
- wrapper - бардык шаблон элементтерин бириктирген тег;
- башкы h1 - логотип;
- баш - меню жана башка маанилүү элементтердин баш аты;
- мазмун - бөгөттөө;
- colLeft - мазмундун өлчөмү;
- colOng - каптал тилкеси (каптал тилкеси);
- колонтитул - сайттын акыркы бөлүгү;
- медиа экран - топтомдорукаалаган чечим.
Сайт жазууда бул элементтер муктаждыкка жараша башка тартипте жылышы мүмкүн. Мисалы, жогорку токтомдордо меню вертикалдуу түрдө көрсөтүлүшү мүмкүн. Мобилдик версияда макет меню горизонталдуу абалда жылып чыга тургандай кылып түзсө болот.
- viewport - дизайндын кичине версиясында тексттин өлчөмүн сактоого мүмкүндүк берген тег. Ал тегдердин ортосунда жайгашкан.
- макстык кеңдик - 1000 пикселден ашкан токтомдордо созулбашы үчүн сайтты оптималдаштыруу.
Макетин ишке ашырууда, блоктордун стилин жана структурасын өзгөртүү керек болгондо jQuery китепканасы көп жардам берет.
Жайгамдуу дизайн менен мобилдик дизайндын ортосунда кандай айырма бар
Толук түшүнүү үчүн бир нече иллюстративдик мисалдарды карап көрүңүз, анткени бул эки түшүнүктүн ортосундагы чаташуу сейрек эмес.
Сиз мобилдик версия субдомени бар негизги сайттын аналогу экенин түшүнүшүңүз керек. Сайттын тышкы бет ачары стилди жана функционалдуулукту толугу менен кайталайт, ал эми анын түзүмү жана мазмуну негизги версиядан айырмаланышы мүмкүн, анткени версия керектүү элементтерге чейин кыскартылган.
Түзмөктүн бардык токтомдору үчүн жооп берүүчү дизайн оптималдуу. Ал масштабдуу жана көрүү шарттарына карабастан туура көрсөтөт.
Бул сайттын эки башка презентациялары, алардын тегерегинде талаш-тартыштар кайсынысы жакшыраак деген талаш-тартыштарды жаратууда. Белгилей кетсек, азырынча так чечим чыга элек. Кимдир бирөө мода багытын жана көптөгөн артыкчылыктарды көрсөтүп, бул дизайнды мактайт. Мобилдик версия да жооп берүүчү дизайнда жок бир нече артыкчылыктарга ээ. Ошондуктан, баштоо үчүн, сиз негизги керектөөлөрдү түшүнүшүңүз керек.
Артыкчылыктар
Кантип жооп берүүчү дизайн мобилдик телефонго караганда жакшыраак?
Ар тараптуулук. Биздин убакта, рыноктун мындай курч өсүшү менен, жөн гана керектөөчүлөрдүн каалоолорун канааттандырган башка жол менен маалымат берүү зарыл. Жооптуу дизайн бул көйгөйдү чечет.
Издөө системаларында эффективдүү жылдыруу. Адаптациялоочу аппараттын негизги артыкчылыктарына эмнелерди кошууга болбойт. Издөө системалары колдонуучуларга жооп берген вебсайттарды берүүнү артык көрүшөт.
Колдонуу мүмкүнчүлүгү. Жооптуу дизайн адатта эң мыкты дизайн чечимдеринде иштелип чыккан, бул колдонуучулардын визуалдык кабылдоосу үчүн жагымдуу белек.
Долбоорду ишке ашырууда да, аны колдонууда да жеңилдик жана жөнөкөйлүк.
Жакшы конверсия курстары. Ыңгайлаштырылган дизайнда көрсөтүү үчүн көбүрөөк мүмкүнчүлүктөр бар болгондуктан, конверсиянын өзү көбөйөт.
Экономика. Бул өзүнчө мобилдик версияны түзүп, жайылтууга караганда салыштырмалуу арзаныраак.
Мобилдик версиянын жакшы жана жаман жактары
Жакшы мобилдик дизайнды түзүү ар тараптуулукту жана ырааттуулукту талап кылат. Биринчиден, техникалык тапшырманы майда-чүйдөсүнө чейин жазуу сунушталат, бул, албетте, ашыкча иштен качууга жана убакытты үнөмдөөгө жардам берет, ошондой эле сайт жайгаша турган сервердин өзгөчөлүктөрүн эске алат..
Мобилдик мобилдик дизайндын кээ бир артыкчылыктары жана кемчиликтери бар.
Простары:
- Эгер сизде даяр сайт болсо, мобилдик версиянын дизайнын нөлдөн баштап иштеп чыгуунун кереги жок. Бул калыпты талап кылынбаган функциялардан бошотуп, бир нече гана өзгөртүү киргизсе болот.
- Жөнөкөйлөштүрүлгөн бардык түрлөрүнөн улам, мобилдик версия жүктөөдө ылдамыраак деп эсептелет.
- Колдонуучу бардык мазмундагы эң маанилүү маалыматты көрөт.
- Тез ишке ашыруу. Тегдерди жана коддорду билбесеңиз да, мобилдик адаптацияны ишке ашыра турган плагиндер бар.
- Издөө каражатынын тандоолору адаптацияланган версияларды жактырат, анткени аларды талдоо азыраак убакытты талап кылат.
Терсиз жактары:
- Баардык мобилдик версиялар мобилдик түзмөктүн чечилиштерине дал келе бербейт. Сайт, албетте, ачылат, бирок экрандын чечими дайыма эле макетке дал келе бербейт. Кээде жакшы иштелип чыккан смартфондун дизайны планшет катары ачылганда башкача көрүнүшү мүмкүн.
- Мобилдик версиялар өзүнчө акы төлөнүүчү домендерди талап кылат.
- Мазмунду жарыялоодо анча-мынча көйгөйлөр бар. Эгерде бир эле учурда бир нече версия бар болсо, анда мазмун бир эле учурда бардык форматтарга туураланышы керек. Негизги сайтка жаңы материалды тапшыруу жана аны мобилдик версияга көчүрүү уурдоо катары каралышы мүмкүн. Бул көйгөйдү болтурбоо үчүн ресурстардын байланышын далилдешиңиз керек болот.
Ишке ашыруу ыкмалары
Негизги ишке ашыруу ыкмалары:
- Макетин жана макеттин дизайнын түзгөндөн кийин, ал керектүү өлчөмдөргө чейин жүктөлөт.оператордун сайты жана негизги коду. Бул классикалык ыкма орто жана кичине версияларды түзүүдө колдонулат (планшет, смартфондор ж.б.).
- BootStrap бул адаптациялоо куралдарынын жөнөкөй жана түшүнүктүү топтому. Landing Page жана башка өтө татаал эмес веб-долбоорлор үчүн версияларды түзүү үчүн ылайыктуу. Бул интерфейс функцияларында ар кандай стилдерди колдонууга жакшы мүмкүнчүлүк берет.
- Responsive Grid System – бул ар тараптуу куралдардын популярдуу топтому. Колдонуу оңой жана терең билимди талап кылбайт. Ар кандай инфографикаларды камтыйт.
- GUMBY - ийкемдүү жооп берүү жөндөмдүүлүгү жана мыкты шаймандары менен мактанган CSS алкагы.
- Cookies - сизге жооп берүүчү сүрөттөрдү ишке ашырууга мүмкүндүк берет. Браузер сураган файлдарды автоматтык түрдө коштойт.
- ExpressionEngine - жооп берүүчү сүрөттөрдү түзүүнүн дагы бир жолу. Түзмөк сүрөттөрдү талап кылынган дааналыкка өзгөртүүгө жөндөмдүү мобилдик экенин аныктайт.
- ProtoFluid - Тез прототипти камсыз кылат. Бардык түзмөктөр үчүн ылайыктуу.
