Бүгүн көпчүлүк адамдар мобилдик гаджеттер – планшеттер, телефондор аркылуу интернетке өтүшөт, буга байланыштуу веб-сайтты оптималдаштыруу дагы жаңы деңгээлге чыгууда. Эгер колдонуучу кирип, сайт мобилдик түзмөктөр үчүн оптималдаштырылбаганын көрсө: сүрөттү көрүү мүмкүн эмес, баскычтар жылып кеткен, шрифттер кичинекей жана окулбайт, дизайн кыйшайган - 100% дын 99у чыгып кетет. жана башка ыңгайлуураак издей баштаңыз. Ал эми издөө роботу бул ресурстун тиешеси жок, башкача айтканда, издөө сурамына дал келбеген кутучаны белгилейт. Ошондуктан, баракчанын дизайны ар кандай мобилдик түзмөктөргө ылайыкташтырылышы керек. Сайттын мобилдик версиясы деген эмне, аны кантип жасоо керек жана аны колдонуунун эң жакшы жолу кайсы? Кененирээк бул макаладан окуңуз.
Ошондуктан сайтыңызды мобилдик колдонууга ыңгайлуу кылуунун төрт негизги жолу бар.
Биринчи метод - жооп берүүчү дизайн
Жауаптуу шаблондор экрандын өлчөмүнө жараша сайттын сүрөтүн өзгөртөт. Эреже катары, алар стандарттуу 1600, 1500, 1280, 1100, 1024 жана 980 пикселге коюлат. Ишке ашыруу үчүн CSS3 медиа сурамдары колдонулат. Сайттын дизайны өзгөрбөйт.
Бул ыкманын артыкчылыктары төмөнкүлөрдү камтыйт:
- ыңгайлуу иштеп чыгуу,структуранын өзү экрандын параметрлерине ыңгайлашкандыктан жана ар кандай жаңыртуу дизайнды нөлдөн баштап иштеп чыгууну талап кылбагандыктан, CSS жана HTMLди чыңдоо жетиштүү;
- бир URL – колдонуучу бир нече ысымды эстеп калбайт, кайра багыттоонун (бир даректен экинчи дарекке багыттоо) кереги жок, бул вебмастердин ишин татаалдаштырат жана издөө үчүн жеңилирээк бир дареги бар ресурсту сорттоо жана даражалоо үчүн кыймылдаткыч.
Албетте, адаптацияланган шаблондордун кемчиликтери бар, демек, алар артыкчылыктарга караганда көбүрөөк. Ошентсе да, көптөгөн иштеп чыгуучулар бул концепцияны карманышат, мисалы, сайттын мобилдик версиясы адаптацияланган дизайнга ээ Google корпорациясы. Демек, кемчиликтери:
- Жуаптуу дизайн мобилдик түзмөктө компьютердегидей тапшырмаларды колдоого албайт. Эгерде бул, мисалы, банктын веб-сайтынын мобилдик версиясы болсо, анда алмашуу курсу же жакынкы банкоматтар тууралуу маалымат колдонуучу үчүн көбүрөөк мааниге ээ болсо, анда бул дизайн жетиштүү. Бирок бул көптөгөн бөлүмдөрү жана бөлүмчөлөрү бар татаал структураланган ресурс болсо, конокторго адаптацияланган жайгашуу жакпайт.
- Жай жүктөө сүйүктүү сайтты жек көргөн сайтка айлантат. Бул өзгөчө анимациялар, видеолор, калкыма терезелер жана башка активдүү элементтер көп болгон ресурстарга тиешелүү. Салмагы жогору болгондуктан, баракча жөн эле "жайлайт", колдонуучу ачууланып кетип калат жана сайттын издөө позициялары төмөндөйт.
- Мобилдик версияны өчүрүү мүмкүн эместиги дагы бир олуттуу кемчилик. Эгер кандайдыр бир элемент мындай макет менен жашырылган болсо, анда сизаны өчүрүп, кадимки доменге которула турган сайттардан айырмаланып, аны ачуу үчүн эч нерсе кыла албайсыз.
Бирок сайттын мындай мобилдик версиясы тез, атайын көндүмдөр жана чыгымдарсыз ресурсту каалаган гаджеттерге ыңгайлаштырууга мүмкүндүк берет. Бирок, саналып өткөн кемчиликтерди эске алуу менен, ал татаал навигациясыз жана анимациясыз, минималдуу маалымат жана мультимедиа менен чакан, жөнөкөй ресурстарга туура келет. Татаал сайт үчүн башка 2 ыкма ылайыктуу.
Экинчи ыкма - сайттын өзүнчө версиясы
Бул ыкма абдан кеңири таралган жана көбүнчө мобилдик түзмөктө сайтты окууга ыңгайлуу кылууда ийгиликтүү. Анын маңызы - тиркеме үчүн тартылган жана өзүнчө URL же субдоменде жайгашкан, мисалы, m.vk.com барактын өзүнчө версиясын түзүү. Ошол эле учурда, негизги функционалдуулугу сакталып, сайттын дизайны жөн гана башкача көрүнөт. Бул ыкманын артыкчылыктары көрүнүп турат:
- колдонуучуга ыңгайлуу интерфейс;
- өзгөртүү жана түзөтүү оңой, анткени версия негизги булактан өзүнчө бар;
- салмагы аз болгондуктан, сайттын өзүнчө версиясы адаптацияланган шаблонго караганда тезирээк иштейт;
- көбүнчө мобилдик телефондон барактын негизги версиясына өтүүгө болот.
Бирок бул жерде дагы кээ бир кемчиликтер болду:
- Бир нече даректер - сайттын рабочий жана мобилдик версиясы. Колдонуучуга эки вариантты кантип эстетсе болот? Веб мастерлери көбүнчө рабочий версиясынан мобилдик версияга багыттоону (багыттоо) белгилешет, бирок ошол эле учурда, эгерде бул барак мобилдик телефондо болсо.версия жок, колдонуучу ката алат. Бул жерде издөө системаларында кыйынчылыктар пайда болуп, 2 окшош ресурсту баалоо кыйынга турат жана бул жарнамага түздөн-түз таасирин тийгизет.
- Компьютерден сайттын мобилдик версиясы, эгер колдонуучу ага жаңылып кирсе, күлкүлүү көрүнөт, бул трафикке да таасирин тийгизиши мүмкүн.
- Бул версия көбүнчө катуу кыскартылган, иш тактасы, ошондуктан колдонуучу өтө чектелген функцияга ээ болот. Бирок ошол эле учурда бир нерсе жетишпей калса, конок барактын толук версиясына өтө алат.
Жалпысынан өзүнчө мобилдик сайт өзүн актайт жана бул ресурсту мобилдик түзүлүштөр үчүн ыңгайлаштыруунун эң кеңири таралган жолу. Ал Amazon сыяктуу ири онлайн дүкөндөрүндө популярдуу.
Үчүнчү жол - RESS дизайны
Google издөө системасы мобилдик дизайндын бул багытын активдүү колдойт. Бул сайтты телефонго же планшетке ылайыкташтыруунун эң татаал, кымбат, бирок эффективдүү ыкмасы. Бул RESS деп аталат. Бул ар бир түзмөк үчүн өзүнчө жүктөлүп алынуучу мобилдик тиркемеге ресурсту багытталган. Android үчүн - GooglePlay менен, ал эми Apple үчүн - iTunes менен.
Мындай тиркемелер тез, бекер, ыңгайлуу, ар кандай маалыматтарды жайгаштыруу мүмкүнчүлүгүнө ээ, ошол эле учурда телефондун эс тутуму жана интернет трафиги браузер аркылуу сайтка киргендегидей жеп калбайт. Аларга кирүү оңой, анткени шилтеме дайыма экранда болот жана серепчинин дарек тилкесине татаал атты киргизүүнүн кереги жок.
Албетте, бул жерде жанаанын кемчиликтери, мисалы, иштеп чыгуунун татаалдыгы, көп сандагы программисттердин эмгегинин кымбаттыгы, бир нече макет варианттарын жасоо зарылдыгы. Кээде мобилдик аппарат колдонмо тарабынан таанылбайт. Дайыма техникалык жактан колдоо көрсөтүү, кемчиликтерди оңдоо зарыл. Ошого карабастан, бул параметр үзгүлтүксүз иштөөсүнөн улам сунушталган үчөөнүн эң жакшысы болуп эсептелет.
Мобилдик вебсайт жасоонун эң арзан жолу
Жогоруда айтылган бардык ыкмалар дайыма эле узак жана оор болбосо да, вебмастердин акы төлөнүүчү ишин камтыйт. Эгер сиз мындай иштеп чыгуунун шашылыш зарылдыгын көрбөсөңүз, сизге сайттын жөнөкөй жана акысыз мобилдик версиясы ылайыктуу болот. Аны жасоонун эң оңой жолу кайсы?
Жакшы дизайн үчүн атайын шаблондорду (плагиндер) жүктөп алыңыз. Мисалы, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile жана башкалар. Алар сайтты телефондо туурараак көрсөтүүгө жардам берет, ошол эле учурда сиз баракчаны мобилдик версияга жакшыраак ыңгайлаштыруу үчүн эмнелерди оңдоо керектиги боюнча бир нече кеңештерди аласыз.
Албетте, бул ыкма олуттуу ресурстар үчүн ылайыктуу эмес. Тескерисинче, бул акысыз функция кичинекей жана жөнөкөй сайттарга, блогдорго, жаңылыктар ленталарына арналган. Google издөө системасы, ошондой эле Яндекс, бүгүнкү күндө мобилдик версияларга олуттуу талаптарды коюп жатканын унутпаңыз, андыктан бул ыкманы колдонуу менен позицияңызды төмөндөтүүгө чоң мүмкүнчүлүк бар.
Бул ыкма менен, кыязы, жарнамалар жана калкыма терезелер өчүрүлөтбаннерлер, бирок барак тез жана "артталууларсыз" жүктөлөт.
Мобилдик версияларды түзүүнүн принциптери
Сайттын мобилдик версиясы бекерби же веб-мастерлердин кызматкерлеринин жардамы менен түзүлгөнбү, айырмасы жок, ал RESS тутумунда жасалганбы же адаптацияланган шаблон аркылуу жасалган. Баарынан маанилүүсү, анын натыйжалуу иштеши үчүн, бир нече өтө маанилүү принциптерди кармануу талап кылынат. Демек, сайттын мобилдик версиясы кандай болушу керек? Аны кантип жемиштүү, эффективдүү жана жемиштүү кылуу керек?
Керексиз баарын алып салыңыз
Мимализм сайттын мобилдик версиясын иштеп чыгуучу умтулушу керек. Түстөр, баскычтар, баннерлер менен толгон маалыматты кабыл алуу канчалык кыйын экенин элестетип көрүңүз, керектүү материалды издөө үчүн чексиз сыдырууга туура келет. Мобилдик дизайн жөнөкөй жана таза болушу керек. Мейкиндикти бөлүү үчүн 2-3 түстү тандаңыз (мисалы, фирмалык). Алардын бири ак болсо жакшы. Кичинекей экрандын мейкиндигин түшүнүктүү жана окула турган аймактарга бөлүңүз. Виртуалдык ачкычтар көрүнүп турушу керек, ошондо колдонуучу кайда басууну жана көрүүнү так билиши керек - бул жерде продукт, бул жерде маалыматтарды толтуруу формасы, бул жерде жеткирүү жана төлөө боюнча маалымат.
Иш такта версиясында пайдалуу жана колдонуучунун жашоосун жеңилдеткен бардык кошумча параметрлер бул жерде кыйынчылыктарды гана алып келет. Эң маанилүү элементтерди гана калтырыңыз. Анимация, жарнак баннерлери, мультимедиа, кыязы, сайттын же тиркеменин ишин жайлатып, алагды кылат.негизги.
Тегиздөө
Тегиздөө маселеси дагы курч эмес, анткени туура эмес аткарылса, колдонуучу маанилүү сөздөрдүн аяктоолорун гана алат. Солго тегиздөө жана вертикалдуу тегиздөө жалпысынан кабыл алынат. Телефонуңуздагы жаңылыктар лентасын сыдырып жатканыңызды элестетиңиз. Сиз муну солго же оңго эмес, өйдөдөн ылдый карай жасайсыз.
Биригүү
Өткөөлдөрдүн узун тизмеги жок болгондо, бир нече кадамдарды бир кадамга бириктирүүгө аракет кылыңыз. Мисалы, сайт бир нече этап менен маалыматтарды киргизүүнү талап кылат - аты, андан кийин дареги, ар бир жеке уячасында өзүнчө үй, көчө, батир, ж.б., андан 2 гана жазууну сураныңыз - аты-жөнү жана дареги.
Жана ажыратуу
Кээде, тескерисинче, өтө көп маалыматты бөлүү талап кылынат. Мисалы, ачылуучу менюда сиз жеткирүү ишке ашырылган 80ден ашык шаарлардын тизмеси бар. Колдонуучу бул чоң тизмени сыдыруунун кереги жок болушу үчүн аларды аймак боюнча топтоңуз. Ал аймактын борборунун же аймактын үстүнө келгенде, башка шаарлардын тизмеси чыгып калат.
Тизмелер
Баса, тизмелер жөнүндө. Алардын экөөсү бар - алфавиттик же башка тартипте жана алмаштыруу менен белгиленген. Алардын тандоосу тизмеде турган нерсеге жараша болот.
Оңдолгон колдонуучу эмне издеп жатканын так билсе, пайдалуу. Мисалы, шаар, номер же дата. Экинчи вариант узун татаал аттарга же бир эле вариация көп болгон учурларда ылайыктууошол эле аталыш жана ар бир ачылуучу тизме колдонуучуну максатка бир кадам жакындатат. Автоматтык алмаштыруу опциясы конок жардамга муктаж болгондо көбүрөөк колдонулат. Мисалы, токуу сайты токуу ийнелерин сатып алууну сунуш кылат. Колдонуучу "Металл токуу ийнелери" издөө сурамына кирет, ал эми инструменттин кеңешинде ал "Трикотаж ийнелери 5 мм", "Трикотаж ийнелери 4,5 мм" ж.б. көрөт.
Автотолтуру
Бул нерсе өзгөчө интернетте бир нерсе саткан сайттарга тиешелүү жана сиз төлөм, жеткирүү ж.б. үчүн стандарттык формаларды толтурушуңуз керек. Эгер адам телефондон сатып алса, анда анын убактысы жок болсо керек. компьютерге жетүү үчүн, бул сатып алуу процесси мүмкүн болушунча тез жана ыңгайлуу болушу керек дегенди билдирет.
Бул үчүн формалар мурунтан эле толтурулган маалыматтарды камтышы мүмкүн, сиз эң популярдуу жоопторго кайрылсаңыз болот. Мисалы, бир аймакта иштесеңиз, бүгүнкү күндү, накталай төлөм ыкмасын, шаарды киргизиңиз. Аларды өзгөртүүгө болот, бирок максатка жетсеңиз, колдонуучунун убактысы үнөмдөлөт.
Баары окулат, баары каралат
Сайттын мобилдик версиясын иштеп чыгууда, ар кимдин телефону ар кандай экенин, көзүнүн көрүүсү да ар кандай экенин унутпаңыз. Балким, сиздин сайтыңыз кичинекей экрандан каралат, андыктан ариптер жөнөкөй жана окула турган болушу керек, баскычтар башка бетке өтпөстөн басылгыдай чоң болушу керек жана сүрөттөр өзүнчө, чоң, айрыкча, ал Интернетке келет. дүкөн.
Кээ бир статистика
Сайттын мобилдик түзмөктөргө ыңгайлашуусу жөнүндө айтсак, бул процесстин канчалык маанилүү экенин түшүнүү үчүн статистикага кайрылбай коюуга болбойт.онлайн жарнама.
Сандар төмөнкүдөй. Бүгүнкү күндө гаджеттерди калктын 87% колдонушат, сыягы, кичинекей балдарды жана кээ бир улгайган адамдарды кошпогондо. Экономисттер жакынкы 5 жылда мобилдик коммерция 100 эсе өсөт деп болжолдошууда. Ошол эле учурда сайттардын 21% гана мобилдик түзүлүштөр менен иштөөгө ыңгайлаштырылган. Бул интернет трафигинин жана электрондук коммерция рыногунун кичинекей 5-бөлүгүн гана ээлегенин билдирет.
Бул сандар жөнүндө ойлонуп көрүңүз. Бул ресурсту ылайыкташтыруу үчүн мааниси барбы? Албетте Ооба. Анын үстүнө, бул базарда мейкиндик көп болсо да, анда өз сегментиңизди оюп алсаңыз болот.
Сизге мобилдик версия керек болгон жерде
Мобилдик версияны колдонуу жогорку рейтингди алууну максат кылган бардык платформалар үчүн мааниси бар. Анткени, бул колдонуучуга түз таасир этип, анын сиздин сайтта калуусу үчүн ыңгайлуу шарттарды түзөт.
Мобилдик версиясыз болушу мүмкүн эмес:
- жаңылык порталдары, анткени алардын көбү жумушка же мектепке баратканда телефондон каралат;
- социалдык тармактар - ошол эле себептен, плюс онлайн байланыш фактору бар, бул үчүн ыңгайлуу, түшүнүктүү чат түзүлүшү керек;
- маалымдама, навигациялык сайттар ж.б., адамдар бир нерсе издеп жүргөндө кайда барышат;
- онлайн дүкөндөр - сатып алуу үчүн убакытты текке кетирбей, баарын мобилдик Интернет аркылуу сатып алган кардарларды тартуу мүмкүнчүлүгү.
Корутундунун ордуна
Бүгүнкү күндө мобилдик технологиялар дүйнөдөжигердүү өсүү жана өнүгүү, демек, рынокто лидерликке умтулуу, ар бир компания өзүнүн интернет-ресурсу талаптарга жооп бериши керек. Колдонуучунун өсүп жаткан талаптарынан улам сайттар дайыма жаңыланып, ар кандай түзүлүштөргө ыңгайлаштырылууга туура келет. Эгерде адам белгилүү бир ресурста болуу ыңгайсыз болсо, ал жерде товар же баа жөнүндө маалымат ала албаса, буйрутма берип, жеткирүү жөнүндө биле албаса, анда мунун баары мүмкүн боло турган сайтты таба турганы түшүнүктүү. Андыктан, сынакта жеңүү үчүн ийкемдүү, ыңгайлуу, функционалдык жана кызыктуу ресурска ээ болуу маанилүү.
Бул үчүн Android же Ios веб-сайтынын мобилдик версиясы жардам берет. Бул үчүн, сиз жогорудагы кайра дизайн ыкмаларынын бирин тандап алышыңыз керек - адаптацияланган шаблон, субдоменде жаңы сайт түзүү жана ага кайра багыттоо, бекер шаблондорду колдонуу же колдонуучуга кирүү мүмкүнчүлүгүн жеңилдете турган мобилдик тиркемени түзүү жана баракта болуңуз.
Бул ыкма учурдагы кардарлардын лоялдуулугун сактоого гана жардам бербестен, жаңы конокторду тартууга мүмкүнчүлүк берет.
