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