Имате ли " одговорна веб-страница "? Ова е страница со изглед кој се менува врз основа на уредот на посетителот и големината на екранот. Отворениот веб-дизајн сега е најдобрата практика во индустријата. Се препорачува од Google и се наоѓа на милиони веб-сајтови преку Интернет. Постои, сепак, голема разлика помеѓу има веб-сајт кој едноставно "одговара" на различни големини на екранот и има сајт кој е навистина одговорен.
Јас рутински ги гледам компаниите да го редизајнираат својот веб-сајт и да го отпуштат соопштението за печатот, во кое се величаат доблестите на нивниот нов мобилен-пријателски дизајн. Кога ги посетувам тие локации, она што често го наоѓам е распоред кој навистина се менува и се менува за да одговара на различни екрани, но тоа е колку што тие ја прифаќаат идејата за реакција. Ова не е доволно. А реално одговора веб-сајт не повеќе од само скала да одговара на помали или поголеми екран. На овие сајтови, исто така, ќе ги најдете следниве важни особини.
1. Оптимизирана изведба
Никој не сака да чека да се вчита веб-страница, и кога некој користи мобилен уред со врска што може да биде помалку од идеална, потребата за брзо вчитување на веб-страница е уште поважна.
Па, како го оптимизирате перформансот на вашиот сајт? Ако почнувате со нова страница како дел од редизајн, тогаш треба да ја направите поентата да креирате буџет за изведба како дел од тој проект. Ако работите со постоечка страница и не почнувате од нула, првиот чекор е да ги тестирате перформансите на вашиот сајт за да видите каде стоите денес.
Откако ќе имате основно место каде што вашата веб-страница стои на перформансите, можете да почнете да ги направите потребните подобрувања за да ја зголемите брзината на преземање. Одлично место за почеток е веројатно со сликите на вашиот сајт. Премногу големи слики се виновникот # 1 кога станува збор за бавни станици за вчитување, така што оптимизирањето на сликите за испорака на веб-страници навистина може да им помогне на вашиот сајт од гледна точка на перформансите.
Реалноста е дека подобрените перформанси на веб-страниците и брзите брзини на преземање се корист што ќе го ценат сите посетители. На крајот на краиштата, никој досега не се пожалил дека веб-страницата е натоварена "пребрзо", но ако некое место трае премногу долго за да се вчита, тоа апсолутно ќе ги одврати луѓето од тоа дали одговорот "одговара" на нивниот екран или не.
2. Хиерархија на паметни содржини
Кога веб-страницата е прикажана на голем екран, вие сте во состојба да ја поставите содржината на различни начини, бидејќи на значителен екран на недвижен имот на располагање. Често може да се вклопат важни пораки и слики, новости, информации за настанот и навигација на страницата одеднаш. Ова му овозможува на посетителот лесно и брзо да ја скенира содржината на целата страница и да одлучи што е важно за нив.
Ова сценарио драматично се менува кога го земате дизајнот на овој сајт и го трансформирате за уреди со мал екран, како мобилен телефон. Одеднаш работите со дел од недвижниот имот на екранот што сте го имале порано. Ова значи дека треба да одлучите што ќе се појави прво на страницата, што ќе следи, итн. Наместо да се види одеднаш, веројатно имате само простор да покажете една или две работи (од кои едната е најверојатно навигација). Ова значи дека треба да се направат одлуки за хиерархија. За жал, она што често го одредува она што прво се појавува на екранот, а потоа второ, итн е начинот на кој самата страница е кодирана. Најлесно е, кога се гради одговорен сајт, да се прикаже она што е прво во кодот прво на екранот, проследено со втората ставка во кодот и така натаму. За жал, она што може да биде најважно на еден уред не може да биде толку критично на друг. А реално одговора сајт разбира дека хиерархијата на содржината треба да се промени во зависност од различни ситуации и треба да биде паметен за она што го прикажува каде.
Подобрувањата во техниките на распоред на CSS, вклучувајќи ги CSS Grid Layout, Flexbox и многу повеќе, им овозможуваат на веб-дизајнерите и на програмерите повеќе опции кога станува збор за интелигентно поставување на содржини, наместо да бидат пренатрупани со точниот редослед на областите за содржина во HTML-кодот. Искористувањето на овие нови техники на изглед ќе стане уште поважно како пејзажот на уредот и потребите на корисниците на нашиот сајт, продолжува да се развива.
3. Искуства што влегуваат во предвид предностите и слабостите на уредот
Останува на тема уреди - секој уред што некој може да го користи за посета на вашиот сајт има и силни страни и слабости кои се својствени за таа платформа. Големиот одговорен сајт ги разбира способностите и ограничувањата на различните уреди и ги користи за да креира индивидуални искуства кои се најпогодни за уредот што посетителот може да го користи во тој момент.
На пример, мобилниот телефон содржи голем број на функции што не би ги пронајде на традиционален десктоп компјутер. GPS е еден пример за функција од мобилен-оддалечиме (да, може да добиете општи информации за локација и на десктоп-компјутерите, но уредот GPS е многу попрецизен). Вашето место може да користи информации за ГПС за умно да испрати лице на многу детални и специфични информации од чекор по чекор или специјални понуди врз основа на точно каде се наоѓаат во тој момент.
Друг пример за овој принцип во пракса ќе биде веб-страница која подразбира каков екран ќе го користите и испраќа слики кои најдобро се прилагодени на тој екран. Ако имате екран со висока густина на пиксели, може да одлучите да испратите слики од повисок квалитет на тој екран. Сепак, истите слики ќе бидат бесмислени на помалку способен екран, а дополнителниот квалитет ќе се изгуби, додека дополнителната големина на датотеката ќе биде симната без вистинска причина.
Навистина одлични одговора сајтови сметаат дека целиот корисник искуство и работат за да се прилагоди тоа искуство врз основа не само тип на уред или големината на неговиот екран, но и други важни аспекти на хардверот, како и.
4. Содржина со контекст
Првично, реагираниот веб-дизајн го доби своето име поради идејата за изгледот на сајтот кој одговара на различни големини на екранот, но може да одговорите на многу повеќе од само големината на екранот. Врз основа на претходниот пример за користење на предностите и слабостите на уредот, можете да ги користите тие, како и други податоци како датумот и времето, за да го прилагодите искуството на веб страната.
Замислете веб-страница за голем трговски настан. Додека одговора веб-сајт ќе го промени изгледот на страниците на сајтот да скала со различни екрани, можете исто така да го користите датумот за да се утврди која содржина е најважно да се прикаже. Ако е периодот пред настанот, веројатно сакате да ги прикажете информациите за регистрација. Ако, пак, настанот всушност се случува во тој момент, регистрацијата можеби не е најважната содржина. Наместо тоа, може да одлучите дека распоредот на настаните на денот е многу критичен, бидејќи е порелевантен за непосредните потреби на тој корисник.
Преземање на работите чекори понатаму, можете да допрете во GPS уред на уредот за да се утврди каде што всушност се на саемот. Можете да им дадете интерактивна содржина врз основа на нивната локација, покажувајќи ги во близина кабини или сесии за да започнете.
5. Пристапност
Последниот пример што ќе го разгледаме за тоа како една локација навистина може да одговори на потребите на посетителот е да размисли за достапноста на веб-страниците . Веб-сајтовите треба да бидат во можност да се користат од што е можно повеќе луѓе, вклучувајќи ги и оние со попреченост. Вашиот веб-сајт треба да биде во можност да се користи од некој кој има потреба од читач на екранот или друг помошник софтвер за пристап до неговата содржина. На овој начин, вашата страница одговара на нивните потреби, бидејќи сте обезбедиле дека искуството, додека е различно за посетителите со посебни потреби, се уште е соодветно.
Одговарањето на колку што е можно повеќе податоци, а не само на големината на екранот, веб-страница може да биде многу повеќе од само "пријателска за мобилни уреди". Тоа може да стане вистинско одзивно искуство во секоја смисла на фразата.