Изградите одзивни сајт за недељу дана: идите даље (5. део)

Садржај

• Тестирање
• Десктоп прегледачи
• Симулирано испитивање уређаја
• Савет за уређај
• Перформансе и оптимизација
• Закључак

• Потребно знање: Средњи ЦСС и ХТМЛ
• Захтева: Уређивач текста, савремени прегледач, графички софтвер
• Време пројекта: 1 сат (укупно 5 сати)

Иако прилагодљиви веб дизајн може да нам помогне да створимо убедљива адаптивна искуства, то није сребрни метак; овај приступ неће аутоматски испоручивати веб локације које могу задовољити све могуће уређаје и случајеве употребе - али то је почетак.

Ово је посебно тачно с обзиром на то да се већина респонзивних веб локација прилагођава само на основу ширине прегледача (а затим закључује о уређају и контексту на основу ове вредности). Надамо се да ће се ово променити када будемо у могућности да тестирамо могућности попут брзине везе и начина уноса. Рани су дани и још увек откривамо ове ствари.

Закључићу ову серију гледајући како можемо побољшати одзивност наших веб локација тестирањем на широком спектру уређаја и континуираном итерацијом дизајна на основу употребе.

Тестирање

Кроз ово упутство сам предложио прилагођавање прозора прегледача како би се видело колико добро дизајн одговара. Иако је користан као лагани тест, то није разлог (нити како ће већина корисника доживети) одзивну веб локацију. Као и сваки добар дизајн, начин на који се веб страница прилагођава треба да буде невидљив за корисника. Трент Валтон је поновио ово осећање када је рекао „моја веб локација ће вас дочекати где год да се налазите - од мобилног до потпуно развијене радне површине и било где између“.

Да бисмо правилно процијенили како ће корисници ‘упознати’ нашу веб страницу, то морамо сами искусити. Можемо само да просудимо о прикладности дизајна на основу стварне употребе. Тестирање није активност коју треба извести на крају сваког пројекта; то је саставни део процеса развоја.

Десктоп прегледачи

Навикли смо да тестирамо на читавом низу различитих прегледача за радну површину и прилагодљиве веб локације се не разликују. Вероватно имамо инсталиран пакет прегледача, а можда чак и виртуелну машину како бисмо могли да тестирамо и на различитим оперативним системима.

Ово би требало да потврди да наш код функционише како је предвиђено у свим модерним прегледачима. У овом нам погледу помажу захваљујући Фирефоку 3.5+, Опера 9.5+, Сафари 3+ и Цхромеу који подржавају све медијске упите. Ипак, остаје уобичајено сумњиво: медијске упите Интернет Екплорер препознаје тек од верзије 9. Али изградњом наше веб странице претпостављајући прво мобилне уређаје, прегледачи који не препознају медијске упите и даље ће видети наш садржај - мада са поједностављеним изгледом.

Ако желите да се изглед оријентисан на радну површину појави у ранијим верзијама Интернет Екплорера, имате две могућности.

Прва (и најједноставнија) је употреба ЈаваСцрипт полифила. Свиђа ми се респонсе.јс који је креирао Сцотт Јехл. Не само да је ова скрипта мала (4кб), већ подржава и медијске упите засноване на ем. Користећи условне коментаре у глава значи да само исправне верзије ИЕ користе ову скрипту:

1. ! - [ако је ИЕ 9]>
2. скрипта срц = "_ јс / либ / респонсе / респонсе.мин.јс"> / сцрипт>
3. ! [ендиф] ->

Друга опција је премештање сложених стилова распореда у засебну ЦСС датотеку, повезујући се на ово из глава са медијским упитом унутар медија атрибут. То нам даје стилове распореда које затим можемо поновити (без упита за медије) у оквиру условног коментара:

1. линк рел = "стилесхеет" типе = "тект / цсс" хреф = "стиле.цсс" медиа = "сцреен, хандхелд" />
2. линк рел = "стилесхеет" типе = "тект / цсс" хреф = "лаиоут.цсс" медиа = "сцреен анд (мин-видтх: 40.5ем)" />
3. ! - [иф (лт ИЕ 9) & (! ИЕМобиле)]>
4. линк рел = "стилесхеет" типе = "тект / цсс" хреф = "лаиоут.цсс" />
5. ! [ендиф] ->

Имајте на уму да овај условни коментар треба да изузме ИЕМобиле тако да Интернет Екплорер на Виндовс Пхоне-у наставља да игнорише сложене стилове изгледа.

Симулирано испитивање уређаја

Такође бисмо требали тестирати одзивне веб локације и на мобилним прегледачима. Будући да ово може потрајати дуго, креиран је низ апликација и веб локација које нам помажу да тестирамо тачке прекида и симулирамо споре мрежне везе на радној површини:

• Цхарлес Проки: Ова апликација за ПЦ, Мац и Линук помаже вам да испитате ХТТП саобраћај између машине и Интернета, као и да симулирате спорије везе.
• Мрежни уређај за кондиционирање: Матт Геммелл открио је користан услужни програм укључен у Мац ОС Кс Лион Девелопер Тоолс који вам омогућава да симулирате различите мрежне услове.
• Полако: Слови је сличан алат, али вероватно боље дизајниран од Апплеовог еквивалента!
• респонсивепк: Постоји велики број веб локација које ће вам омогућити да тестирате тачке прекида у једном прозору прегледача, али овај алат Ремија Схарпа један је од мојих омиљених.
• Аптус: Ова апликација за Мац ОС Кс коју је креирао Алек Моррис помаже вам да тестирате одзивне веб локације на низ резолуција екрана које можете временом прилагодити и додати. Ово може бити врло корисно када се локална веб локација развија ван мреже.

Већина произвођача уређаја такође нуди емулаторе које можемо додати у наш тестни пакет заснован на радној површини. Посетите следеће странице за више детаља:

• Аппле кЦоде
• Андроид СДК
• МСДН Апп Хуб за Виндовс Пхоне
• БлацкБерри Девелопер
• Нокиа Девелопер

Савет за уређај

Колико год симулатори и емулатори могли бити корисни, они то могу само; симулирати. У стварном свету не постоји замена за тестирање веб локација на уређајима. Овде можемо доживети различите мрежне брзине и проблеме са повезивањем, променљиви контекст употребе (колико другачије можемо да користимо веб локацију у влаку, а не да седимо на софи) и директну манипулацију додиром.

То значи имати пакет уређаја за тестирање. Ово би требало да представља најмање све савремене мобилне оперативне системе (иОС, Андроид, Виндовс Пхоне, БлацкБерри ОС, Симбиан) и да укључује и претходне верзије. Фрагментација око Андроид платформе отежава предлагање једне одређене верзије на којој бисте требали да тестирате, али ако веб локација ради на 2.1 (Ецлаир), онда ће вероватно радити и на каснијим верзијама. Обавезно инсталирајте Опера Мини на ове уређаје и тестирајте и на овоме.

За пример колико широки могу бити пакети за тестирање, Давид Блооман је описао лабораторију уређаја коју је ББЦ користио током редизајна њихове веб странице са вестима која реагује. Луке Вроблевски је такође затражио од бројних програмера за мобилне уређаје да наведу са којим телефонима тестирају на Багцхецку. И на крају, алати попут Адобе Схадов и сховофф.ио олакшавају истовремено тестирање дизајна на многим уређајима.

Заједничка тема овде је потреба за поседовањем огромног низа уређаја; са више додатих како се нови уређаји лансирају. Да будем искрен, мало ми је непријатно у овој ситуацији. Не само да представља потенцијалну препреку уласку свима који желе да израде одзивне веб локације, већ подстиче куповину још више уређаја и уређаја. Једном када погледате Причу о стварима, конзумеризам може постати мало мучан.

Срећом, постоје и други начини на које можемо интегрирати тестирање уређаја у наш радни процес, а који су јефтинији и мало пријатнији за животну средину:

• Тестирајте на свом уређају: Ово је дато, али тестирање на уређају који увек имате на себи може бити изузетно драгоцено.
• Тестирање на уређајима пријатеља: Вероватно имате пријатеље са моделима мобилних телефона, таблета и читачима е-књига који нису у вашем власништву. Направите поенту да тестирате веб локације које тренутно развијате на њиховим уређајима кад год можете.
• Када се пријатељи надограде, купите њихове старе уређаје: Поново, пријатељи могу бити користан извор старијих уређаја око којих можете да градите библиотеку уређаја. Када се надограде, понудите им купњу старих телефона - ако имате среће, можда вам их дају и бесплатно!
• Пронађите старије уређаје на еБаи-у: Ово може бити користан извор јефтиних половних телефона, одличних за стварање колекције старијих модела.
• Организујте локалну библиотеку дељених уређаја: Можда у власништву или под управом локалне дизајнерске агенције или смештеном у заједничком простору, заједнички објекат може бити фантастичан начин за многе да искористе предности велике библиотеке уређаја без трошкова. Такође може да подстакне дискусију о уобичајеним проблемима који се виде на различитим уређајима и могућим решењима како их решити.

Овде је кључна ствар коју треба запамтити свако тестирање је боље од било каквог тестирања. Направите тестни пакет колико год можете себи приуштити и пронађите могућности за тестирање на другим уређајима кад год можете.

Перформансе и оптимизација

Само тестирањем на читавом низу прегледача и уређаја решићете одређене проблеме. Различите резолуције екрана и густина пиксела могу захтевати прилагођавање циљаних подручја око веза. Можда ћете чак открити да се неки интерактивни елементи налазе на тешко доступним местима на одређеним телефонима.

Када сам дизајнирао свој лични сајт, провео сам неколико недеља гледајући га у возовима, на улици и у кафићима док сам користио њихов ВиФи. Радећи ово, приметио сам да се фонтовима требало пуно времена, моји наслови су заузели превише простора и да је било тешко клизати поред уграђених „клизавих“ мапа. Тако сам имплементирао Гоогле-ов ВебФонт Лоадер да бих побољшао учитавање фонтова, смањио величину заглавља када су се појавила у ужим оквирима приказа и додао десну маргину уз бок сваке мапе.

Без обзира на уређај, највећа побољшања која можете учинити биће она која утичу на перформансе ваше веб локације. Учинак може бити читав чланак сам за себе, али три кључне ствари на које ћете желети да се усредсредите су: кеширање, величина датотека и број ХТТП захтева који се подносе. Алати попут Гоогле Паге Спеед, иСлов и ВебПагетест могу нам рећи колико су добре странице и предложити подручја за побољшање.

Једноставне ствари попут употребе ЦСС градијента уместо слика у позадини, уграђивање малих слика у наше ЦСС датотеке помоћу УРИ-ја података и спајање ЦСС и ЈаваСцрипт датотека могу смањити број ХТТП захтева. Премештање референци на ЈаваСцрипт датотеке на крај документа такође може убрзати приказивање странице.

Величину сликовних елемената можемо смањити коришћењем одговарајућих формата датотека и прихватљивих нивоа компресије. Технике попут замућивања позадине слика (дајући им ефекат дубинске оштрине) и покретање кроз апликације попут ИмагеОптим могу још више смањити њихову величину. Такође можемо убрзати испоруку средстава тако што ћемо их сместити на ЦДН.

Технике попут условног учитавања - где се одређени делови странице приказују само на захтев корисника - вероватно ће расти у популарности, посебно на већим веб локацијама. На пример, на нашој страници са медијским ставкама можемо одлучити да повезане везе нису основни садржај. Уместо да га укључимо у извор странице, уместо тога можемо да понудимо везу која овај садржај захтева само када се кликне на њега. На већим екранима овај садржај би се подразумевано учитавао. Јереми Кеитх је написао више о овој техници на 24 начина.

Закључак

Кроз ову серију водича представио сам процес респонзивног дизајна и пружио вам увид у околну дискусију која је произашла из њега.

Открили смо да је прилагодљиви веб дизајн облик прогресивног унапређења и као такав наставак нашег сазревања разумевања веба као универзалног медија. Такође смо научили да прихватимо пропорције и формулу која подупире распоред течности. Ипак и даље постоје проблеми, посебно око слика, али пут ће вам водити континуирано експериментисање, засновано на тестирању и употреби.

И са тим имамо готову веб страницу:

роадтрип.паулробертллоид.цом

Али веб локација никада није готова. Имајући то на уму, позивам вас да клонирате, форкирате и допринесете коду иза ове демо странице на Гитхуб-у:

гитхуб.цом/паулробертллоид/роадтрип/

Паул је дизајнер интеракција са седиштем у Бригхтону, у Енглеској. Најсрећнији је када израђује једноставне, али занимљиве интерфејсе који су изворни за веб.