Како направити респонзивну веб страницу? Овде можете добити информације о овој адаптивној техници заснованој на данашњим веб моделима, што значи да се под једним дизајном веб порталу може приступити и правилно прегледати са било ког рачунара или електронског уређаја.
¿Како направити респонзивну веб локацију?
Веома је згодно учинити веб локацију прилагодљивом или осетљивом на могуће адаптације. Поред тога што гарантује успех исправног рада на интернету са било које електронске платформе. У наредним редовима је појашњен начин прављења респонзивног веба, који је конципиран из исте природе прилагодљивости веб страница. Због тога, када се дизајнира веб страница под респонзивним моделом, изглед или слика поменутог веба ће моћи да се подеси и види у зависности од електронског уређаја који се користи за навигацију.
Нико није свестан вишеструке количине опреме или електронских уређаја који тренутно постоје за навигацију Интернетом, као што су: рачунари, таблети, паметни телефони, лаптопови, итд. У раним данима интернета, програмери веб локација су се навикли да креирају странице са уобичајеном ширином пиксела. На пример, 90-их година, монитори који су постојали имали су један екран величине 14 инча са фиксном ширином од 640 пиксела. Дизајнери веб страница су прилагодили своје дизајне стандардним димензијама јединих монитора који су постојали.
Близу почетка 2000. и до доласка 2010-их, модели монитора и ширине пиксела су варирали. Веб дизајн је прилагођен свакој од варијација. Од 2010. године догодила се велика технолошка револуција, која је изазвала неравнотежу у сценарију дизајна веб страница. У области интернета уведена је навигација путем мобилне телефоније. Ова нова телефонија користила је претраживаче баш као рачунар. Са овом великом технолошком револуцијом, дошло је време да се напредује ка ономе што је познато као респонзивни дизајн или адаптивни дизајн веб страница.
Важност знања како да направите респонзивни веб
Толико је важно да програмери веб страница знају како да направе респонзивни веб; да чак и компанија Гугл од великог престижа на интернету то указује као нешто крајње неопходно. Зато што веб страница дизајнирана према респонзивном моделу омогућава оптимизацију навигације, избегава дуплирање садржаја и пружа изузетно стабилан квалитет слике. Други аспекти који су важни при креирању респонзивне веб странице су:
- Са једном адаптацијом језика за означавање хипертекста (ХТМЛ) и ЦСС језика, може се постићи да покрије било коју резолуцију екрана. На тај начин избегавате креирање веб странице за сваки тип уређаја који вам омогућава да је посетите или претражујете. Овај аспект такође смањује време дизајна.
- Аутоматски се прилагођава приликом прегледавања, чинећи читање и интеракцију могућим при свакој одређеној посети.
- Успевају да се боље и брже позиционирају у претраживачима. Пошто овај тип дизајна избегава дуплирање и преусмеравања.
- Веб странице креиране према овом дизајну омогућавају да њихов садржај брже постане виралан, због њиховог оригиналног и једноставног начина дељења.
Шта је респонзивни веб дизајн
Респонзивни веб дизајн, такође познат као адаптивни веб дизајн, је начин дизајнирања или развоја веб страница. Овај систем има специфичност што омогућава да се веб локација креирана под једним дизајном посети или приступи са било ког рачунара или електронске платформе. Назив респонсиве је енглески термин који се односи на нешто што је прилагодљиво, прилагодљиво, уочљиво, видљиво итд.
Ова техника добија ово име због способности ове врсте веб странице да се прилагоди сваком мерењу ширине екрана. Омогућавање његовог приказа и исправног рада, без прављења било какве разлике у погледу уређаја који се користи за навигацију.
Ово је могуће захваљујући организацији слика и садржаја, као и једноставности брзог веб менија. Четири главна квалификатора који дефинишу и чине овај тип дизајна веб страница веома популарним су:
- Једноставно
- Економичан
- Брзо
- И изнад свега наведеног, потпуно су функционални
Како направити респонзивни дизајн веб и његова сложеност
Може се рећи да је комплексност у вези са дизајном и развојем веб страница настала од 2010-их, када су мобилни телефони са навигацијом почели да се појављују на интернет сцени. Која је користила претраживаче као што су Гоогле, Фирефок, Екплорер, између осталих, баш као и рачунар. Улазак на овај начин у нове могућности посете различитим веб сајтовима. У то време почињу да се појављују и први електронски таблети са приступом интернету.
Одатле су потребе за дизајном веб страница постале сложеније. Због великог броја величина екрана које су постојале за приказ и рад веб локација. Морали сте пронаћи тип дизајна који би функционисао за било коју врсту уређаја и аутоматски се прилагођавао.
Више нисте могли да дизајнирате за једну, две или три главне резолуције екрана. Требало је схватити да ће резолуције уређаја бити све променљивије, поред тога што ће бити много мање од компјутерског монитора.
Овај тренутак је означио крај ригидности веб дизајна. И не само на велики број уређаја, већ и сваки од њих има специфичне карактеристике, као што су:
- Величина екрана
- Резолуција екрана
- ЦПУ снага
- Оперативни систем
- Капацитет меморије између осталог.
Затим се уводи нови модел веб дизајна, чији је циљ да са једним дизајном буде могућа његова исправна визуелизација без обзира на уређај за прегледање. Међутим, развој ове врсте веб странице има свој степен сложености.
Шта је разлог за сложеност развоја респонзивног веба?
Развој веб-сајта у оквиру прилагодљивог дизајна који се зове респонсиве има свој степен сложености, чак и данас. Због два главна узрока, који су наведени у наставку:
1-То је технологија која није развијена дуго времена и због вишеструких начина примене није било могуће утврдити која би од свих опција могла бити најбоља. Увек се појављују иновације у вези са овом врстом веб дизајна који треба да се развије. Због тога је тешко одредити најбољи оквир или технологију подршке, нити опште правило које обезбеђује решење за највећи број могућих препрека. Да бисмо олакшали развој ове врсте веб странице.
2- Други узрок је тај што систем адаптивног дизајна није заснован само са технолошке тачке гледишта. Што се тиче начина на који ће се сајт разликовати у зависности од екрана или уређаја. Уместо тога, мора бити дизајниран са идејом како ће функционисати у сваком од могућих сценарија навигације. Овај узрок додаје висок ниво сложености моделу респонзивног веб дизајна који треба да разјасне људи који раде као програмери сајтова.
Вежбање и стицање довољно вештина за рад са адаптивним или респонзивним веб дизајном захтева више времена него са било којом другом врстом веб дизајна. Али постоји нада да ће, са напретком у рачунарству, степен сложености бити мањи. У циљу даљег развоја у овом погледу, од особља са знањем о веб сајтовима које је укључено у типове респонзивног дизајна, стручно особље као што су:
- Лаиоутс
- Дизајнери
- Програмери
- Комерцијални и дигитални маркетинг особље
Смањите време дизајна
Ако се два претходна узрока отклоне, можда ће ово смањити период развоја или креирања респонзивног веба. Истовремено, могуће га је учинити доступним за коришћење уобичајених веб локација.
У међувремену, према ономе што имамо данас, можда ће бити брже развијати нови веб дизајн за мобилне уређаје од нуле; трансформисати или редизајнирати веб како би био прилагодљив или прилагодљив. Увек ће постојати нада да ће неко једног дана пронаћи начин да то уради и оствари, надајмо се томе.
У међувремену, шта се може учинити?
Чињеница да је још увек веома сложено редизајнирати цео сајт који имамо на вебу, како бисмо га учинили прилагодљивим. То не значи да престајемо да правимо неке мале измене на сајту. Да бисмо га побољшали и учинили да реагује на прилагођавање на различитим претраживачима, као и на различитим електронским уређајима.
Прва ствар коју треба да урадите је да проверите који тип веб дизајна има навигациони сајт. Углавном проверите:
- Изглед веб странице
- Каква је његова структура у смислу ХТМЛ-а и ЦСС-а
Анализирајући ове две основне тачке, може се установити да се могу направити мале модификације у циљу побољшања веб странице.
Претходна разматрања која треба узети у обзир да бисте знали како да направите респонзивни веб
Ако је случај да већ имате веб портал, одредишну страницу или блог са садржајем, који је развијен по уобичајеном дизајну и желите да га трансформишете у веб локацију са респонзивним или прилагодљивим дизајном. То је само доношење одлуке и први корак да се то постигне, доношење одлуке да се то уради!
Чињеница да се веб локација трансформише из конвенционалног дизајна у прилагодљиви не значи да ће сав оригинални рад бити изгубљен. Пошто неће сав садржај бити одбачен, али ће претрпети мале и мале промене у њему. Садржај као што су слике, текстови и неки други елементи постојећег сајта могу се користити и исправно радити са трансформацијом.
Међутим, суочени са алтернативом прилагођавања и побољшања сајта, згодно је знати нека претходна разматрања која ће фаворизовати посао који треба предузети.
Проверите постојећи веб покрет
Пре него што извршите било какве промене у постојећем вебу, препоручљиво је да проверите саобраћај који има. Односно, статистика о броју људи који посећују веб локацију. На основу ових информација, радићемо на модификацији дизајна, у циљу већег успеха и бољег позиционирања у претраживању. У редизајну и адаптацији веба згодно је знати о СЕО алати, јер су најбољи када је у питању постизање бољег позиционирања у мрежи.
Добра инспирација је неопходна
Такође је препоручљиво погледати и направити а анализа супарника или странице са садржајем сличним веб локацији на коју ће се применити промене ка прилагодљивом веб дизајну. Овај преглед има за циљ да спроведе истраживање за могућа побољшања садржаја. Али и како те сличне странице функционишу на различитим уређајима. Аспекти које треба узети у обзир при избору сајтова који могу бити инспирација или узори за побољшања. Они ће бити лака навигација на тим страницама и онима које захтевају мање зумирања или померања. Овде можете пронаћи најбоље трикове за Побољшајте СЕО да бисте постигли добар садржај Примените их!
Семантички ХТМЛ фаворити
Употреба семантичког Хтмл-а указује на то да је изглед оригиналне веб странице исправно успостављен. Ово иде у прилог или је од велике помоћи, јер су коришћени само битни Хтмл елементи. Имајући на уму у развоју веба, семантику сваке ознаке изнад дизајна истог веба. Остављајући ЦСС-у сопствени рад дизајна, према класама и ИД-овима.
Током процеса како да направите респонзивну веб локацију, елементи као што су:
- ДИВ
- P
- UL
- ЛИ, између осталих
Међутим, ако је потребно да се испоштује корак укидања целокупног дизајна модела. Зато што не можете да користите наметљив ЦСС, то јест, немојте користити ниједан стилски атрибут унутар кода. Пошто је Хтмл префињенији и са мање ДИВ-а, то ће помоћи да се лакше спроведу адаптације или да се веб учини осетљивијим. Зато што ће ЦСС бити побољшан у добијеном резултату.
Правилно подесите зумирање како да направите веб локацију која одговара
Препоручује се правилан избор зумирања у мобилним претраживачима како би се постигао пун приказ веб локација. Прегледачи на мобилним уређајима већ су постојали пре него што је почео да се развија респонзивни веб дизајн. За потпуни преглед веб локација на овим уређајима, претраживачи морају да прибегну алатима за зумирање. Дакле, када приступате традиционално дизајнираној веб локацији са мобилног уређаја. Природна резолуција мобилног телефона неће бити видљива, али ће се приказивати прилагођавање извршено помоћу алата за зумирање док се не подеси на ширину од 960 пиксела.
Пошто није било другог начина да се то уради, програмери су креирали Хтмл који је вршио промену или прилагођавање зума. Овако, када се врши прилагођавање резолуције на уређајима, тиму се мора рећи да користи другу врсту скалирања. Погодан тип за употребу је мета ознака позната као оквир за приказ, која се уноси у заглавље веб странице. Помоћу ове мета ознаке можете детаљно описати процедуру коју ће прегледач извршити у трансформисаном вебу. Погледајте следећу синтаксу, написану дословно:
Овај симболички изглед мета ознаке области приказа је онај који се најчешће користи у респонзивном веб дизајну. Међутим, постоје многе друге конфигурације које се могу користити за ову сврху. Само што представљена синтакса садржи две варијабле које чине да се мобилни претраживач прилагођава вебу, а не обрнуто. Ове варијабле су:
Ширина или ширина уређаја
Променљива ширина=девице-видтх је укључена у конфигурацију тако да ширина у пикселима екрана одговара ширини мобилног уређаја. На овај начин се приказује сопствена резолуција мобилног телефона.
Да би обезбедили најбољу могућу употребу, мобилни претраживачи приказују страницу сличну ширини екрана десктопа. Ова ширина може да варира у зависности од мобилног уређаја. Али често је то обично један од приближно 980 пиксела. Након тога, настоји да оптимизује изглед садржаја повећањем величине фонта, као и променом скале садржаја тако да одговара екрану уређаја.
Ово би могло да доведе до тога да корисници сматрају да је то помало некохерентно или збуњујуће, а затим морају двапут да додирну да зумирају да би се укључили у садржај. Коришћење променљиве мета ознаке прозора за приказ: видтх=девице-видтх захтева радњу на изгледу за подешавање ширине. На такав начин да страница може да прилагоди садржај како би се уклопио у различите димензије екрана, било да се приказује на малом мобилном телефону или на монитору рачунара.
Инитиал-Сцале или Инитиал Сцале
Променљива инитиал-сцале= укључена је у конфигурацију да би се одредила релација између ЦСС пиксела и мобилних пиксела у зависности од уређаја. У горе приказаној конфигурацији је назначено за почетну скалу: иницијална скала=1.0. Овде синтакса показује да је однос између пиксела 1:1, ЦСС пиксел се чита у пиксел уређаја. Затим се мобилном претраживачу даје налог да усвоји ову вредност за зумирање и то ће бити она коју користи уређај. Међутим, хајде да погледамо следеће две опције:
- Када је променљива почетне скале једнака 1.0, то се односи на екран без зумирања, јер је један према један.
- Док ако је почетна скала=2.0, променљива се односи на зум увећан на дупло већу величину целе странице.
Стога би одговарајућа опција за коришћење на веб локацији дизајнираној да одговара ширини мобилног телефона била прва. Ово говори уређају да не примењује никакво зумирање. Али такође, могу постојати случајеви у којима ће најбоља опција бити не укључити или применити ову променљиву. Остављајући на тај начин да је исти мобилни онај који сам прилагођава зум, на ширину која је назначена у дизајну.
Основне конфигурације видног поља – Примери апликација:
Без обзира да ли имате ширину од 500 пиксела и да ли је дата команда почетне скале, веб добија изглед ширине екрана од 500 пиксела. Међутим, на мобилном уређају, његова оригинална конфигурација ће бити приказана са приближним еквивалентним односом од 320 пиксела од укупних 500 пиксела веба.
Међутим, ако, с друге стране, није дат редослед почетне скале, цео веб се приказује, односно 500 пиксела, под прилагођеним зумом. Синтакса ове две типичне конфигурације ознаке прозора за приказ би била текстуално следећа:
Претходна конфигурација би била за веб локацију са респонзивним дизајном који је правилно прилагођен мобилној резолуцији. Док за веб локацију која није у потпуности прилагођена резолуцији за мобилне уређаје, конфигурација би била следећа:
Поред типичних, постоје и неке друге конфигурације. Један од њих је да дизајнирате веб страницу ширине мобилног телефона, уз примену зумирања. Али овакав дизајн би био веома чудан и збуњујући за корисника.
Како направити респонзивну веб локацију – упити за медије
Када желите да знате како да направите респонзивну веб локацију или прилагодљиву страницу, требало би да знате да морате да примените систем познат као медијски упити. Ова техника вам омогућава да успоставите, помоћу услова, различите облике или стилове у зависности од резолуције екрана. Али шта су медијски упити?
Тхе Медиа Куериес
Медијски упити су техника која се састоји од успостављања ЦСС реченица. Са којима можете дати изјаве применљиве на веб дизајн, све док су испуњени одређени услови који су већ дати или успостављени. Ове изјаве о медијском упиту се у основи могу применити на две тачке на вебу:
- Прво, у позиву ЦСС датотеке, наводећи у сваком који су услови за његово учитавање. Пример:
- Друго, у истој ЦСС датотеци, успостављање посебног простора где су укључене ЦСС фракције које ће се користити. Пример:
@медиа екран и (мин-видтх:320пк) и (мак-видтх:480пк){
/*Декларације стила за овај опсег ширине */
У ствари, медијски упити су моћан алат који омогућава могућност напуштања респонзивног веб дизајна, ради предузимања других различитих питања у оквиру веба. Вреди документовати касније, мало више о овој техници медијских упита.
У међувремену, за сада је довољно знати две тачке о систему медијских упита:
- Начин израде декларација медијских упита у ЦСС датотеци
- Како да ажурирате старомодне интернет претраживаче помоћу технике медијских упита
Декларација медијског упита
У претходним пасусима било је могуће посматрати два начина извршавања медијских упита. Прво на спољној страници са стилом и други начин да пишете директно на страницу са стилом.
У контексту како направити респонзивни веб дизајн, треба разумети да је медијски упит ЦСС декларација која се користи као индикатор да се зна када треба да се направи друга декларација стила на основу мерења или вредности мобилног уређаја. или други уређај на коме ће се веб приказивати.
Пример, начин да се декларише ЦСС разломак, који је унутар условног дефинисаног медијским упитом, има следећу конфигурацију синтаксе:
@медијски екран и ([УСЛОВИ]) {
/* Наша нова правила са овом ширином екрана или мање */
}
Исто тако, у зависности од ширине екрана, могу се генерисати три врсте изјава за медијски упит. На овај начин можете бити сигурни у своју апликацију у сваком случају
-Прва декларација се примењује само у оним резолуцијама које су мање од ширине пиксела = Кс:
@медијски екран и (мак-видтх:[ВИДТХ]пк) {
/* Наша нова правила са овом ширином екрана или мање */
}
-Друга декларација се примењује само у оним резолуцијама које су веће од ширине пиксела = Кс:
@медиа екран и (мин-видтх:[ВИДТХ]пк) {
/* Наша нова правила са овом ширином екрана или више */
}
-Трећа декларација треба да се примени у оним резолуцијама које имају ширину између опсега пиксела дефинисаних између Кс и И:
@медијски екран и (минимална ширина:[ВИДТХ Кс]пк) и (максимална ширина:[ВИДТХ И]пк) {
/* Наша нова правила са овом ширином екрана или више */
}
Који од три?
Одлука ће бити заснована на укусу програмера. Међутим, више је уобичајено да се примени прва изјава медијског упита приказана изнад. Само се препоручује да се примењује кумулативно. На тај начин да се сваки пут када се ширина смањи, елементи дизајна се модификују.
Учините медијске упите компатибилним са Интернет Екплорер-ом
Интернет Екплорер је био један од првих претраживача који је постојао на вебу. Стога је врло могуће да овај претраживач не подржава или је компатибилан са многим системима, параметрима или техникама које често користе корисници Интернета. Али постоји много техничког особља у веб развоју, потпуно укључено у потрагу за иновацијама. Које су створиле низ библиотека које омогућавају и чине ове старе претраживаче компатибилним.
Да бисте направили компатибилне верзије мање од девет (9) Интернет Екплорер-а. Само примењује следећу јавасцрипт библиотеку: цсс3-медиакуериес-јс.
Постављањем следеће скрипте у главу веб странице, моћи ћете да радите са медијским упитима без икаквих непријатности.
Добијени резултат можда није најсавршенији, али генерално омогућава добар степен компатибилности.
Како направити респонзивну веб локацију – основни дизајн
Могу постојати различити начини да се веб страница прилагоди и трансформише, али респонзивна веб локација тренутно има три основе или облика концепције дизајна. Раније су прегледи програмера били приказани са неким новим детаљима за примену у овим дизајнима. Долази из навике развијања веб локација које се карактеришу као круте или фиксне. Да пређете на веб странице дизајниране у реаговању, мењајући ту карактеристику ригидности.
Данас можете пронаћи бескрајне електронске уређаје помоћу којих можете да претражујете веб. А с временом ће износ бити све већи. Програмери веб локација захтевају да ове веб странице буду у стању да се правилно прилагоде овом широком спектру уређаја.
Основни дизајн за поједностављење рада
Један од начина да се поједностави задатак респонзивног дизајна је да их поделите или класификујете у три основне групе да бисте знали како да се позабавите њима. Ове три велике квалификационе групе су:
- Велики екрани: на којима веб локација има довољно простора, па чак и више да се може прегледати у потпуности без икаквих непријатности.
- Стари или мали екрани: Код којих веб не налази адекватну ширину за своју потпуну визуелизацију, односно не уклапа се у оквир екрана. Чак показује и неудобну доњу траку, без икакве употребе која вам омогућава да видите још мање садржаја.
- Екрани мобилних уређаја: Веб проналази тако мали простор на овим уређајима да је само уз општи дизајн могуће прочитати информације о његовом садржају.
Дакле, ако желите да трансформишете оригинални дизајн и изглед веб странице у ажурирани који се може користити и који је одржив. Оно што је потребно је решавање ове три основне групе. Степен потешкоћа у добијању решења ће генерално зависити од тога како је модел формулисан. Али, генерално, са данашњом технологијом, неке промене се могу постићи на вебу.
Како направити респонзивни веб за велике екране – решење
У овој базној тачки то обично не представља никакву већу потешкоћу. Зато што је веб дизајниран да се гледа на овим великим форматима екрана. Тренутни стандард је да се веб сајтови заснивају на централном оквиру ширине екрана у пикселима од 960. На тај начин да када се учита на мобилне телефоне са прилагођеним зумом, он се у већину њих правилно уклапа. Али у случају старијих веб локација, тај централни оквир ширине пиксела је вероватно дизајниран за екране ширине 1024 пиксела. У било ком од случајева, за ову основну групу разумно је користити контејнере као што је назначено следећом синтаксом:
#маин { видтх:960пк; маргин:0 ауто; }
Ова конфигурација подржава постављање „главног“ контејнера који му омогућава да буде усредсређен на веб. Уз овај контејнер, могу се додати различите позадине како би се обогатио спољашњи изглед веба. Мало развија свој дизајн како би се што више избегла црно-бела страница.
Укратко, на овом нивоу великих екрана не ради се много на трансформацији веба. Иако је могуће да постоје корисници веба који желе да га гледају са телевизора са великим екраном и такође на краткој удаљености.
Ови случајеви захтевају велике промене као у групи мобилне базе. Али пошто обично нема много оних који користе ТВ за навигацију, програмери обично не улажу много времена у ове адаптације. Ако и даље желите да радите на овој врсти адаптације, препоручљиво је да успоставите прописе сличне онима који се примењују у мобилној групи, који су наведени у наставку.
Како направити респонзивни веб за мале екране – решење
Од ове основне групе дизајна почиње сложеност трансформације веба који се прилагођава. Сценарио је следећи за страницу креирану да ради на датој ширини екрана. У ствари, један број људи га посећује са компјутера прилагођених тој ширини. Али постоји и велики проценат људи које треба узети у обзир, а који имају уређаје са резолуцијама нижим од оних у дизајну да посете веб.
У овој класификационој групи, уређаји са резолуцијом екрана нижом од дизајна морају бити одвојени од мобилних уређаја. Па, ови случајеви су анализирани у трећем случају дизајна. Стога је неопходно поћи од јасне дефиниције тачке где се завршава уређај са малим екраном и тачке где почиње мобилни уређај.
За мале екране на исти начин, резолуција оригиналне веб странице мора бити смањена да би се прилагодила тим уређајима. Само да мора бити јасно у којој мери ће се ово смањење спроводити, без преласка. Тако да велики број елемената није конгломериран на малим екранима, смањујући изглед веба.
Информације потребне за постављање ограничења
Информације са мобилних уређаја се деле испод. Што ће бити од велике важности када је у питању успостављање граница када то престане да буде мали екран, да постане мобилни уређај. Ово ће олакшати одлуку.
мобилни подаци:
- Мобилни уређаји који се користе вертикално, што је најчешће коришћени облик. Обично усваја резолуцију од 320 пиксела ширине.
- У хоризонталном положају, резолуција мобилног уређаја је прилагођена правој величини екрана уређаја. Ова резолуција је генерално широка између 400 и 600 пиксела.
- С друге стране, код таблета, резолуција ће зависити од уређаја. Генерално, узимајући у обзир статистику најпродаванијих модела, резолуција је широка око 600 пиксела. Могућност достизања ширине чак 1024 пиксела.
Ограничења ширине екрана
Највећа стандардна граница ширине која се усваја у респонзивном веб дизајну у овој класификацији, према претходним информацијама, је до ширине од 400 пиксела. Од овог мерења ширине, промена у визуелизацији мреже мора да почне драстично, као и да ће њен основни рад доживети одређене промене.
Више, међутим, неки програмери постављају ово ограничење на ширину од 600 пиксела. Креирање од ове резолуције, посредне адаптације између малих екрана и мобилних уређаја.
На страни доње границе, постављено је да усвоји минималну ширину екрана до 320 пиксела. У сваком случају, на веб програмеру је да успостави опсег већи од ових датих ограничења. Али није препоручљиво покушавати да покријете све уређаје са малим екраном.
Главни стилови навигације у решењу за мали екран
Снимање најмање ова три главна стила навигације може бити довољно у адаптивном решењу за мали екран. Који су наведени у наставку:
- Мобилни уређаји који се користе вертикално: У овом случају, екран уређаја дозвољава само читање и веома поједностављену навигацију успостављену у опсегу резолуције између 320 и 400 пиксела.
- Мобилни уређаји који се користе хоризонтално и таблети: У овом случају се већ може постићи традиционални хоризонтални приказ. Међутим, потребно је напоменути да се навигација генерише додиром, а не кликом. Према овоме треба избегавати радње: онМоусеОвер у 400, 600 или 800 пиксела.
- столни уређаји: У овим случајевима, нормалан веб дизајн ради без икаквих проблема са ширинама екрана преко 800 пиксела.
Узимајући у обзир све горе наведено, под малим екраном се подразумева низ рачунара, пејзажних мобилних уређаја и таблета. Ова разноликост покрива ову групу са меком сложеношћу за прилагођавање веба прилагодљивом дизајну. У овом случају, то је од велике важности за поједностављење рада, распоред радова који се изводе блоковима. Да би се три врсте уређаја објединиле у једну акцију.
Ако је јасно дефинисано од које ширине се сматра мобилни екран. Појашњен је средњи формат екрана који ће се приказати. Да би се блокови тренутног распореда трансформисали тако да мењају величину у складу са екраном и да могу да функционишу и да се правилно приказују.
Контејнери глобалне ширине
Глобални контејнери унутар веб странице испуњавају функцију упућивања или означавања глобалних ширина. То значи да са овим елементима можете да центрирате и одредите одређену ширину за веб локацију. Они дају конфигурацији одређену флексибилност променом са фиксне ширине на максималну или ширину капе. Установљава се у почетној декларацији за веб оквир, мења се од ширина a максимална ширина. На исти начин, минимална ширина се утврђује према претходно утврђеним опсезима, уз декларацију мин-видтх. Тако ће бити могуће контролисати ширине оних уређаја за које се мислило да нису у контроли. Узимајући горе наведени опсег ограничења ширине екрана; Синтакса декларације би била следећа:
#маин {мак-видтх:960пк; мин-видтх:320пк; маргин:0 ауто;}
За велике екране решење је исто. Више, међутим, када се мрежа постепено смањује у величини истовремено, централни оквир ће то учинити по ширини.
Практични пример
Испод је практичан пример подешавања за трансформацију оквира ширине. У овом примеру постоји веб локација ширине 1080 пиксела, која се примењује на елементе заглавља, главног садржаја и подножја. Прва ствар коју треба да урадите је да наведете ту ширину у различитим глобалним блоковима контејнера, не као фиксну ширину, већ као максималну ширину странице. Што се тиче реченица, оне ће зависити од броја блокова ове врсте који ће се користити. Дакле, погледајмо следећу синтаксу:
#хеадер #топ {поситион:релативе; мак-видтх:1074пк; мин-видтх:320пк; висина:115пк; маргин:0 ауто; […]}
[...]
#хеадер ул.мену {поситион:релативе; мак-видтх:1008пк; мин-видтх:320пк; висина:95пк; […]}
[...]
#аук-маин{поситион:релативе; мак-видтх:1008пк; мин-видтх:320пк; маргин:0 ауто; […]}
[...]
#фоотер ул {мак-видтх:768пк; мин-видтх:320пк; маргин:10пк ауто;}
Унутрашњи контејнери
Од ове тачке, ми ћемо се позабавити мало више у томе како направити респонзивну веб локацију тако што ћемо је трансформисати. Готово је сигурно да је страница која се трансформише састоји од дизајна или изгледа, подељених на различите елементе, на пример, они могу бити:
- Заглавље са стопостотном ширином
- Садржај који заузима знатан део ширине
- У делу бочне стране једна или више бочних или бочних шипки
- Заузима сто посто ширине, подножје
Дакле, имаћете неколико контејнера који можда имају фиксну ширину који дефинишу колоне на страници. Ови контејнери су можда трансформисани у колоне применом различитих техника, као што су:
- Плута у највећој количини
- Дисплаи:инлине у неким случајевима
- Дисплаи:бок у другим од њих
Следећи корак који треба предузети биће да будете у могућности да трансформишете те елементе у не баш прецизне изјаве. Тако да родитељски контејнер не калибрише тачно оригиналну изјаву на коју је указао. Или што је исто, морате да промените из пиксела у процентуалне вредности у свим оним елементима који се односе на размак у ширини веб странице, као што су следеће:
- Ширине
- максималне ширине
- Маргине и
- паддинг
Са претходно обављеним радом на распореду, овај корак постаје заиста једноставан. Пошто се ради само о дељењу, да би се могло одредити шта одговара мери у пикселима елемента контејнера у процентуалним вредностима. Стога ће проценат бити израчунат применом следеће математичке једначине:
[Пк ширине унутрашњег елемента] / [Пк ширине родитељског елемента] * 100
Добар је метод да се веб програмери навикну да раде на веб моделу са мерењима у процентима, јер би овај корак већ био решен.
Израчунавање процената
Следећи корак је израчунавање процената. У овом делу може се представити нешто досадно у смислу колумни. Зато што је претходно колонирање изграђено са плутајућим елементима, а када смањите оквир, бочна трака се помера испод садржаја. Међутим, примењује се поменута једначина. И на овај начин се врше прорачуни процента сваког елемента унутар глобалног контејнера ДИВ. Који је, као што је горе поменуто, имао ширину од 1080 пиксела. Претварањем тих мерења у процентуалне вредности добија се следећа синтакса:
#маин #цонтент { флоат:лефт; ширина:63.9880952%; маргин:30пк 0 0 1.98412698%; }
[...]
#маин #сидебар { флоат:лефт; маргин:20пк 0 0 3.47222222%; ширина:28.7698413%; }
Као што се може видети, трансформисане су и ширине и хоризонталне маргине. На овај начин ће веб локација задржати квадратни изглед. Још једна важна ствар коју треба напоменути је број децимала назначених у процентима. Чија је сврха да прорачун буде што прецизнији до оригиналне вредности у пикселима.
Решење за лабаве унутрашње елементе који се повећавају
У процесу трансформације веб странице могуће је пронаћи одређене лабаве елементе у моделу који због своје типологије могу порасти изнад максималног глобалног контејнера, мак-видтх. Ови елементи се могу открити играјући се са величином претраживача, пошто се открију исправљају се. Још један брз начин да исправите или избегнете ове елементе је да изаберете контејнере и дате налог да ниједан унутрашњи елемент не расте изнад величине самог контејнера.
У примеру који се развија, овај последњи облик исправке је примењен у оквиру главног садржаја и бочне траке. Дакле, одређени проблеми који могу настати из виџета могу се сами решити. Према овоме, конфигурација за решавање лабавих унутрашњих елемената била би следећа:
#маин #цонтент { флоат:лефт; ширина:63.9880952%; маргин:30пк 0 0 1.98412698%; }
#маин #цонтент * {мак-видтх:100%}
[...]
#маин #сидебар { флоат:лефт; маргин:20пк 0 0 3.47222222%; ширина:28.7698413%; }
#маин #сидебар * {мак-видтх:100%}
Елементи позиционирани у апсолуту
За све оне елементе који су уопште позиционирани на веб страници да се трансформишу. Исти претходни поступак се мора применити на њих са ширинама, прилагођавајући их вредностима у процентима на оси апсцисе да би се променила њихова ширина. Под претпоставком да у примеру који се развија, неки елементи су уопште позиционирани у заглављу. Њихови положаји морају бити прилагођени овим елементима, тако да не остану да лебде у ваздуху када се смањују димензије мреже. За ово, конфигурација би била следећа:
[...]
#хеадер #топ п.бреадцрумб {поситион:абсолуте; топ:90пк; лево:3.72439479%; боја:бела;}
[...]
#хеадер #топ п.лике { поситион:абсолуте; топ:10пк; лево:54.0037244%; }
[...]
#хеадер #топ див.вцард{поситион:абсолуте; топ:11пк; десно:5.49348231%; ширина:27.9329609%;}
Примена медијских упита у елементима ентеријера
Приликом прилагођавања ширина странице могуће је да постоје елементи који због свог садржаја не налазе простор у редизајну. Они могу стати на пут, чинећи да адаптације изгледају лоше. Да би се избегла ова незгодна ситуација, користе се једноставни медијски упити који омогућавају драстичну модификацију ЦСС-а, када се појаве неке специфичне димензије.
Медијски упити су веома моћан алат са којим се могу направити многе вештине. Овог пута они ће бити примењени да дефинишу одређене услове у вези са ширином екрана и одакле ће се променити ЦСС. За ово ћемо имати на уму следећу синтаксу:
@медијски екран и (мак-видтх:[ВИДТХ]пк) {
/* Наша нова правила са овом ширином екрана или мање */
}
Ова изјава медијског упита посебно настоји да прилагоди изглед различитим резолуцијама. Дакле, може се користити више од свега за сакривање одређених секундарних елемената, који, с обзиром на специфичне ширине екрана, могу више да изнервирају него да помогну кориснику. Осим што служи за израду малих спојница, тако да се неки елементи могу уклопити у редизајн у различитим сценаријима.
Да бисмо илустрирали оно што је речено, неки елементи резолуција испод 800 и 600 пиксела биће сакривени. Да у једном случају ометају исправан приказ садржаја главне странице веб странице која се прилагођава. Према следећој синтакси:
@медијски екран и (макс. ширина: 800 пиксела) {
#хеадер #топ п.лике,
#хеадер #топ п.бреадцрумб,
#хеадер #топ див.вцард п.твиттер,
#хеадер #топ див.вцард п.линкедин,
#хеадер #топ див.вцард п.делициоус,
#хеадер #топ див.вцард п.гоогле,
.вцард х2{ дисплаи:ноне;}
}
@медијски екран и (макс. ширина: 600 пиксела) {
#сидебар .твиттер {дисплаи:ноне;}
}
Као што се може видети, они су скривени у резолуцијама мањим од 800 пиксела:
-Свиђа ми се
-Хлебна мрвица
- Дугмад за друштвене мреже, између осталог
Од 600 пиксела ниже, последњи твитови се уклањају са бочне траке
Медијски упити вам такође омогућавају да измените неке стилове
Као што већ видите, медијски упити вам омогућавају да сакријете неке унутрашње елементе. Али такође вам омогућавају да промените неке стилове. Ова посебност се може користити ако елемент, поред тога што није прилагођен у смислу ширине, није пожељан или не жели да се учини да нестане или сакрије. Ако се ова ситуација појави на вебу, желите да се трансформишете. Затим ће се, коришћењем медијских упита, тражити да се суптилно промени стил, како би се прилагодио.
Под претпоставком да на вебу на коме се ради, дугмад друштвених мрежа изазивају ову врсту проблема. И одлучује да суптилно промени своје форматирање, уклањањем икона и смањењем величине фонта, када страница падне испод 960 пиксела ширине. Конфигурација би тада била следећа:
@медијски екран и (мак-видтх:960пк) {
#хеадер #топ див.вцард п {фонт-сизе:9пк;}
#хеадер #топ див.вцард п.твиттер а,
#хеадер #топ див.вцард п.линкедин а ,
#хеадер #топ див.вцард п.делициоус а,
#хеадер #топ див.вцард п.гоогле а {бацкгроунд:ноне; паддинг:0;видтх:50%; флоат:лево;}
}
Шта радити са менијима
Шта је са менијима, у оквиру процеса како направити респонзивну веб локацију на малим екранима? Одговор на ово питање је да је то донекле сложен проблем за решавање. Пошто је то скуп елемената који су обично донекле дугачки, а такође и сам мени, он није главни садржај веба. Стога се не може дозволити да када се страница отвори на малим екранима, мени заузима много простора.
Код уређаја са додиром може бити неугодно за корисника да се појави листа сићушних линкова, тако да смањење веза не би било најизводљивије решење. Алтернатива која може бити повољна је замена менија са одабраним елементом. Што представља контролу која приказује мени опција, где корисник може удобно да бира. Елемент Селецт смањује дугачке листе менија у мали блок, тако да је његова употреба идеална за уређаје као што су таблети и мобилни телефони.
Када радите ову замену у новом респонзивном дизајну, препоручује се да користите додатак тининав јкуери. Што је једноставно и веома компатибилно, овај додатак се односи на све УЛ ставке у менију. А ово заузврат додаје одабрани елемент на почетак листе са назначеним карактеристикама. Након тога, корак који остаје да се уради је сакривање УЛ-а или одабира са медијским упитима, све док се не постигне повољно решење.
Процедура са елементом селецт
Процедура замене менија са селектованим елементом биће обављена преко горе поменутог додатка. Које треба ставити у заглавље на листи веза. Дакле, када страница почне да се спушта на резолуцију мању од 800 пиксела ширине, везе ће бити замењене избором. Затим следи следеће кораке:
- Додајте скрипту и у јкуери додатку реади подесите позив на нови елемент. према следећем:
$(«.мену ул»).тиниНав();
Ова конфигурација додаје избор у сваки од линкова у горњем менију
- Реците основном ЦСС-у да сакрије нове елементе за одабир, уз следећу декларацију:
.тининав { дисплаи: ноне }
- Искористите одговарајући медијски упит и унутар њега додајте формат одабира и редослед да бисте сакрили саму листу. Оставите конфигурацију на следећи начин:
@медијски екран и (макс. ширина: 800 пиксела) {
#хеадер ул.мену ли ул {дисплаи:ноне}
.тининав { дисплаи: блоцк; позиција:апсолутна; боттом:5пк; ширина:79%; маргин-лефт:15%}
}
На овај начин ће веб мени бити замењен селектованим елементом, спуштањем резолуције екрана на мање од 800 пиксела ширине.
Блокирајте позадине у томе како да направите респонзивни веб
У овом тренутку прилагођавања веба, у зависности од тога какав је модел, биће степен тежине. Када дизајнирате веб, на ЦСС тачки, блокови су обично украшени позадином слика. У процесу декорације користи се велики број техника. Неки од њих су лакши од других када је у питању промена величине.
Нека решења
Због тога, у зависности од технике која се користи, поступак може бити мање или више једноставан. Може се чак догодити да позадина коју веб има губи свој циљ када се ивице сакрију. Као резултат у овим случајевима, велики проблем који треба превазићи. Ево неких решења за ово:
- Измените што је могуће више позадина у ЦСС3 стилове. Који ће се веома добро прилагодити променама. Сада је једноставно постићи компатибилност већине претраживача када користите заобљене ивице, сенке или градијенте. Са три ЦСС ситуације, тешко је да дизајн захтева велики број слика за успостављање блокова.
- Радите без позадинских слика, да бисте их што је више могуће заменили ЦСС3 који је најближи томе како медијски упити и прилагодљиве ширине раде свој посао
- Ако се ради о средствима која већ доминирају ситуацијом блока. Препоручљиво је дуплирати овај стил у блоку и тражити да се оригинална позадина мало разликује
Друга решења за три врсте позадинских слика која могу бити досадна су:
- Слике са ивицама у оквиру странице, да чак и ако остану изван дела који се приказује, коначни резултат не смета, па се оставља
- Иконе у одређеним насловима, што се поправља тако што их сакријете медијским упитима када почну да нервирају
- Глобална позадина заглавља укључује бело поље где иде име аутора веба. За ово, исти стил се може поновити у пољу за ауторе, тако да се једна позадина сакрива са другом смањењем димензије странице.
Како направити респонзивни веб за мобилни екран – решење
Неколико аспеката како направити респонзивну веб страницу на малим екранима већ је виђено раније. Са овим знањем можете прећи од крутог веб дизајна са фиксном ширином од 1080 пиксела до дизајна који је прилично прилагодљив малим екранима, са великог броја уређаја. Али недостаје респонзивно решење за дизајн мобилних екрана.
Уз примену онога што је виђено за мале екране у дизајну за мобилне уређаје, промене чине да изгледа прихватљиво. Још треба да се усаврши, пошто је распоред у две колоне са елементима аглутинираним у заглављу веома непрактичан за мобилне уређаје
Због тога је прикладно започети процес како би се постигао исправан приказ на мобилним уређајима. Важно је напоменути да употреба навигације на мобилном уређају није иста као на нормалној веб страници. Тада бисте можда желели да одете даље од једноставних промена прилагодљивости ширине екрана или сакривања елемената.
Ознака Виевпорт у овом случају
Елемент приказа је добар алат за прилагођавање веба мобилним уређајима. Прво, зато што оквир за приказ служи да мобилном телефону укаже на начин на који желите да његово зумирање функционише, када уређај приказује веб локацију. Међутим, у основи се могу представити две опције, наведене у наставку:
КСНУМКС опција: За веб локације са респонзивним дизајном који је адекватно повезан са резолуцијама за мобилне уређаје, доступно је следеће:
Ова опција је најидеалнија, али и најзахтевнија. Јер када смањите ширину колона испод 500 или 400 пиксела, ширинама постаје потпуно неуправљиво. Због тога се морају направити радикалне промене у визуелизацији веба.
КСНУМКС опција: Ако се ради о веб локацијама које још увек нису савршено прилагођене резолуцији мобилног телефона, имамо следеће:
Ова друга опција може бити експедитивнија. Зато што је само у дизајну назначено да мобилни може бити приказан у жељеној резолуцији. Другим речима, веб ће и даље бити нормална страница, само у смањеној или прилагођенијој верзији.
Могуће последице
Ако се одлучите за другу опцију, могу се појавити два проблема са веб локацијом која треба да буде прилагођена или дизајнирана тако да одговара.
-Прво: Област приказа у овом случају би функционисала глобално у свим мобилним претраживачима. С обзиром на случај, на пример, да је означена ознака оквира за приказ ширине 500 пиксела, то ће резултирати да иПад уређаји са ширином од око 800 пиксела приказују страницу ширине само 500 пиксела. Неуспех да се искористи сто посто расположивог простора.
-Други: Настављамо са случајем означавања прозора за приказ ширине 500 пиксела. У овом случају, резолуције од 320 пиксела ширине, садржај веба на коме се ради биће приказан у веома смањеном режиму. Стога, ако се нека подешавања не изврше, биће нефункционална. С друге стране, ако се изврше одређена подешавања ради прилагођавања менија или извора, веб верзија ће бити модификована на исти начин да се приказује на таблету, у случају малог екрана. У закључку, решење за означавање фиксне ширине помоћу ознаке прозора за приказ може бити најбрже, али више није ефикасно.
Видећи последице избора опције 2 ознаке прозора за приказ, чини опцију 1 најпрепоручљивијом. На овај начин, самом мобилном телефону је дозвољено да покаже резолуцију за коју је способан, када користи прозор за приказ који је горе назначен као опција 1 у заглављу странице.
Са овом одлуком о визуелизацији, касније се ради на медијском упиту, за мобилну верзију. Ово захтева прелазак са колона на блокове са сто посто ширине. Такође избришите, компресујте одређене елементе, прилагодите фонтове тако да буду пријатни за читање на ширини од 320 пиксела.
уклањање колона
Као што је горе поменуто, за прилагођавање мобилног одзива, неопходно је усавршити дизајн у изгледу две колоне како би се избегло згрушавање елемената у заглављу. За овај процес, колона ће бити елиминисана постављањем једне на другу, али постоје два сценарија која се могу десити:
-Да су колоне већ поређане у Хтмл-у: Ако је то случај, они се већ представљају на жељени начин за мобилне уређаје. Биће потребно само да се Флоатс нестане или измени дисплаи:инлине-блоцк или дисплаи:бок, да би се заменио нормалним дисплаи:блоцк. Применом следеће синтаксе:
@медијски екран и (макс. ширина: 400 пиксела) {
#цонтент {дисплаи:блоцк; флоат:ноне; }
}
-Ако колоне нису поређане: У овом сценарију морате радити са апсолутним позицијама тако да доњи блокови заузимају врх странице. Као и коришћење маргина за померање горњих блокова у доњи, тако да се не преклапају. Пример, под претпоставком следеће дистрибуције:
У овом структурирању, пожељно је да се на мобилном уређају елементи бочних трака налазе испред садржаја. Затим је ЦСС представљен на следећи начин:
@медијски екран и (макс. ширина: 400 пиксела) {
#маин {поситион:релативе; ширина:100%; }
#цонтент{маргин-топ:80пк; ширина:100%; флоат:ноне;}
#сидебар{хеигхт:80пк; позиција:апсолутна; топ:0; ширина:100%; флоат:ноне; }
}
Да бисмо визуелизовали други сценарио, у којем се апсолутне позиције морају користити у мобилној верзији, представљен је следећи пример структуре
@медијски екран и (макс. ширина: 450 пиксела) {
#маин #сидебар {дисплаи:блоцк; флоат:ноне !импортант; ширина:100%; позиција:апсолутна; топ:-80пк; маргин:0 !импортант; бордер-боттом:1пк солид #ааа; паддинг:0 0 20пк 0;}
#маин #цонтент { флоат: ноне; видтх:ауто; маргин:100пк 0 0 0; }
}
У овом случају постоји и промена на ширину од 450 пиксела у мобилној верзији.
Подешавање фонтова
Још један аспект који се мора позабавити адаптивном адаптацијом у мобилној верзији је прилагођавање фонтова. Јер, када је веб дизајниран, направљен је са великим мониторима на уму. Када прелазите на мобилне верзије које имају мале вертикалне екране, веб странице често нису угодне за читање или гледање. Наслови веба заузимају доста простора, текст садржаја, због величине фонта, отежава читање. Према овоме, потребно је прегледати све изворе, доводећи их у одрживу конфигурацију за приказ на екрану мобилног телефона.
Испод су подешавања у вези са овим аспектом, где су фонтови менија измењени, величина фонта наслова је смањена, а они садржаја повећани. Обратите пажњу на следећу конфигурацију:
#хеадер ул.мену ли,
#хеадер ул.мену ли.аналитицс,
#хеадер ул.мену ли.девелопмент {бацкгроунд:ноне;}
#хеадер ул.мену ли х4 {маргин:30пк 0 0 0пк; фонт-сизе:12пк; увлака текста:10%;}
#маин #цонтент .хневс х3 а,
#маин #цонтент .хневс х1 а{ фонт-сизе:22пк; }
#маин #цонтент .хневс .ентри-цонтент {фонт-сизе:16пк;}
Остала прилагођавања у погледу естетике и стилова
Урадио сам сав претходни процес како да направим респонзивну веб локацију у дизајну за мобилну верзију. Оно што остаје је да довршите изглед и стил веба. У овом случају можете поново дизајнирати оне стилове који се не прилагођавају новој верзији и одбацити оне којима је место у њој. На исти начин, можете да померите неке елементе као што су бочне траке, на пример, да бисте их поставили на другу локацију, или такође да промените маргине, између осталих подешавања. Да бисте коначно постигли прелеп мобилни веб спреман за рад.
Како направити респонзивну веб страницу? – Тестови и тестови
Када дизајнирате не само у смислу веб развоја, већ у било ком стварању или структурирању нечег новог. Постоји фаза тестирања или тестирања, где можете проверити резултате, да ли су оптимални или захтевају побољшања.
Ипак, згодно је извршити проверу или тест након што сте извршили све претходне процедуре. Ове тестове треба спроводити како се кораци извршавају и како би могли да верификују промене које се постижу у сваком од њих. На исти начин, потребно је извршити следеће две провере у раду мреже
Идите на тестирање у претраживачу
Док радите на респонзивном дизајну, морате подесити ширину екрана. У циљу провере нових адаптација које попримају нове облике. На исти начин, мале грешке се могу открити и тако бити у могућности да се изврше прилагођавања у коришћеним медијским упитима. За проверу ширине екрана, постоје два начина да то урадите:
- Делујте уживо уклањањем максимизације претраживача да бисте тестирали његову ширину.
- Искористите ствари као што је ИСХ као корисна алатка за извршавање ових подешавања теста једноставним командама.
Заобиђите мобилни кеш меморију
Мобилни уређаји по својој природи кеширају податке изван онога што је неопходно, чак и више него што би то урадио обичан претраживач. У уобичајеним, обично је довољно да извршите ЦТРЛ+Ф5 да бисте изазвали оптерећења без кеша. Иако је ова врста радње тешка на мобилним телефонима, чак и одређени претраживачи имају опцију да онемогуће кеш меморију. Да би се олакшао бољи рад без кеша, препоручује се следеће:
- Радите са променљивим у Цсс позиву, као што су:
"/стилес.цсс?версион=кккк"
Измена у сваком конкретном случају број верзије. Да би УРЛ био другачији тако да не користи кеш.
- Радите директно у претраживачу. Лагано повећавајући минималну мобилну резолуцију, између 420 и 450 пиксела. На овај начин можете довести до тога да се прикаже у претраживачу тако што ћете бити довољно смањени. Други начин је коришћење алата који мењају величину веб страница.
Овим радњама, без сумње, добиће се практичнији и удобнији резултат приликом извођења тестова.
Како направити респонзивну веб локацију? - Закључак
У свему наведеном било је могуће познавати неке технике, технолошке алате и процедуре које се често примењују у дизајну респонзивног веба. Сва ова знања се такође могу применити на постојећу веб локацију коју желите да доведете до адаптивног дизајна. Без потребе да радите на изградњи нове веб странице.
Стога, на следеће питање: Урадите све што сте научили, да ли је могуће направити веб страницу са респонзивним дизајном? Очигледно је одговор гласно не. Зашто? Зато што је било могуће само направити веб локацију осетљиву на адаптације, што првобитно није било. Пошто је замишљен под крутом или фиксном природом.
Могуће последице или грешке
Током процеса прилагођавања традиционалног веб-сајта или неког осетљивијег на промене, може доћи до неких грешака и због тога ће настати одређене последице, да видимо:
-Морају се елиминисати одређени елементи који су били од виталног значаја приликом креирања странице. С друге стране, акција њиховог елиминисања рађена је на основу изгледа, а не због важности садржаја који се преноси посетиоцу веба.
-Можда није постигла савршенство у укупном визуелном аспекту. Бити у стању да само побољшате постојеће. Потпуно другачији случај да је веб креиран од почетка.
-У зависности од модела оригиналног веб-сајта, може, али и не мора да дође до краја прилагођавања променама. Уз неке моделе, програмери у овом покушају ће моћи да направе само средња решења.
Коначно о респонзивном дизајну
Коначно, оно што је спроведено били су само једноставни детаљи. Истичући важност рада на добијању модела прилагодљивог дизајну који није био првобитно. Када читате Респонзивни дизајн, разумете да говорите о дизајну, а не о раду са изгледом. Стога, како направити респонзивну веб страницу мора потицати из контекста оригиналног новог дизајна.
Међутим, могућност приказивања веб странице која се може мењати и прилагођавати резолуцији мобилног телефона, почевши од оне која је била крута, прилично је велико и корисно достигнуће. Оно што је овде објашњено не значи да сте већ обучени за респонзивни дизајн. За ово је потребно много више истраживања.
Зато што би било потребно много више основа, знања и учења о различитим општијим, више техничких процеса.
Како направити респонзивну веб локацију – завршни савети
Да закључимо, важно је знати да је респонзивни дизајн оно што је актуелно на вебу. Ова врста веб дизајна захтева нови начин размишљања. Развој ових веб локација може бити лакши ако пратите следеће савете:
- Размишљајте прво о мобилном уређају: Приликом пројектовања, згодно је прво почети прилагођавањем малој величини мобилног екрана. Дакле, након прилагођавања садржаја екранима већих величина. Јер, када дизајнирате имајући на уму мобилни телефон, можете бити објективнији са садржајем који треба да буде приказан на страници, остављајући само оно што је заиста важно за презентовање.
- НЕМОЈТЕ оптимизовати дизајн за одређени мобилни или таблет
- Придржавајте се стандарда и добрих пракси: На пример, не користите ЦСС стилове дефинисане у самој датотеци, унутар ХТМЛ ознака.
- Избегавајте да будете роб пикселу у дизајну: Имајте на уму да елементи проналазе позицију која им одговара. То је зато што воде рачуна о флуидности контејнера и димензионисању. Када се деси да није приказан по жељи, само поправите распоред елемената применом упита за медије.