Задаволены
- Праектаванне для невядомага
- Прагматычны падыход да дызайну
- Становіцца магнатычным
- Кадаванне паступова
- Апусканне ў нацэнку
Здаецца, у наш час усе кажуць пра спагадны вэб-дызайн і нездарма; паколькі колькасць прылад з падключэннем да Інтэрнэту працягвае расці - кожная з рознымі магчымасцямі і функцыямі - больш не мэтазгодна ствараць вэб-сайты з фіксаванай шырынёй.
Праўда, ніколі гэтага не было. Тым не менш да гэтага часу лічылася лепшай практыкай распрацоўваць досвед, які зрабіў шэраг здагадак, няхай гэта будзе вакол дазволу экрана, прапускной здольнасці або спосабу ўводу. Калі вы калі-небудзь распрацоўвалі вэб-сайт шырынёй 960 пікселяў, толькі каб праглядзець яго на маленькім экране сябра (і так, я пішу з балючага досведу тут), вы зразумееце, чаму гэта быў не асабліва разумны падыход. Цяпер, калі смартфоны і планшэты ўвайшлі ў сумесь, відавочна, што нашы традыцыйныя метады больш не падыходзяць для мэты.
На шчасце, з'яўленне CSS-запытаў у СМІ і ўсё большае прызнанне таго, што Інтэрнэт сам па сабе з'яўляецца сродкам, азначае, што мы пачынаем асэнсоўваць сапраўдную прыроду платформы, прызнаючы, што яе ўніверсальнасць - гэта моц, а не слабасць.
На працягу наступных пяці дзён я правяду вас праз метад, які прызнае гэты факт: спагадны вэб-дызайн. Распрацаваны Ітанам Маркотам, ён спалучае вадкасныя макеты, гнуткія выявы і запыты ў сродках масавай інфармацыі, якія дапамагаюць нам ствараць сайты, якія вытанчана адаптуюцца да любога асяроддзя, з якім яны сутыкаюцца.
Я прадэманструю гэты падыход, паказаўшы, як стварыць простую медыя-галерэю. У сваіх прыкладах я буду ствараць невялікі вэб-сайт, каб зафіксаваць нядаўняе падарожжа, якое я прайшоў па Злучаных Штатах, але не саромейцеся наладжваць код і дызайн у адпаведнасці з вашымі патрэбамі.
Праектаванне для невядомага
Большая частка гэтага падручніка будзе сканцэнтравана на аспекце распрацоўкі адаптыўнага дызайну. Але перш чым мы разбіраемся ў якім-небудзь кодзе, давайце падумаем, як мы можам стварыць вэб-сайт, які, магчыма, можа мець бясконцыя макеты.
Цяпер мне пашанцавала ў тым, што я магу распрацоўваць інтэрфейсы і распрацаваць інтэрфейсны код, які робіць іх рэальнымі. Зразумела, гэта не ўнікальны навык - калі вы працуеце для сябе, то, верагодна, аднолькавыя. Але, безумоўна, выгадна разумець, як змест можа адаптавацца і перапрацоўвацца пры распрацоўцы вадкасных канструкцый.
Я таксама працую ў складзе большай каманды, дзе мая роля больш спецыялізаваная. У такіх умовах візуальны дызайнер можа сканцэнтравацца выключна на тым, каб ператварыць каркасы ў прывабныя, прывабныя (падпісаныя, ідэальна падыходзячыя да пікселяў) кампутары. І незвычайна, што распрацоўшчыкі размяшчаюцца асобна, пераводзячы гэтыя макеты ў стройную і эфектыўную разметку і CSS.
Аднак такія лінейныя і падзеленыя працоўныя працэсы хутка руйнуюцца, як толькі мы пачынаем ацэньваць, як дызайн будзе адаптавацца да розных умоў. Як і любы новы інструмент альбо тэхналогія, мы павінны разглядаць больш сумесныя і спрытныя спосабы працы. Многія з самых складаных праблем, якія ўзнікаюць пры распрацоўцы адаптыўных сайтаў, можна вырашыць проста шляхам размовы, эксперыментаў і ітэрацый.
Прагматычны падыход да дызайну
Гэта не азначае, што ў дызайнераў няма магчымасці думаць пра тое, як дызайн можа працаваць па-за межамі якой-небудзь канкрэтнай прылады.
У Clearleft мы пачынаем візуальны дызайн з пункту гледжання працоўнага стала. Мы пачынаем з вызначэння агульнай мовы дызайну і візуальнай эстэтыкі, часта грунтуючыся на першапачатковых даследаваннях вакол асноўнага зместу. Напрыклад, калі мы займаемся распрацоўкай харчовага сайта, мы пачнем са старонкі рэцэптаў; для сайта навін, старонкі гісторыі.
Гэта не толькі важная старонка на сайце, але яна, верагодна, уключае дастаткова структураванага зместу, каб мы маглі стварыць друкарскую палітру. Мы таксама падумаем пра тое, як макет можа адаптавацца - нават калі на гэтым этапе гэта нам проста ў галаву.
Адзін карысны спосаб стрэс-тэсту дызайну - заняць такую старонку і адаптаваць яе да больш вузкага экрана (каля 320 пікс.). Вы, верагодна, выявіце, што некаторыя аспекты дызайну трэба будзе перагледзець, каб яны працавалі з такой шырынёй. Вось некалькі прыкладаў:
- Тыпаграфіка: Вялікія загалоўкі могуць добра працаваць на больш шырокіх макетах, але на меншых экранах яны могуць займаць шмат вертыкальнай прасторы і таму патрабуюць дадатковай пракруткі. Па меры змянення даўжыні лініі вам варта ўлічваць вышыню лініі і іншыя тыпаграфскія апрацоўкі.
- Спасылкі: Як будзе працаваць ваш дызайн на сэнсарных прыладах? Хоць у нас пакуль няма простага спосабу іх выявіць (гэта значыць, мы павінны ўлічваць усе аспекты нашага дызайну), дызайн для больш вузкага экрана можа даць нам магчымасць падумаць пра мэтавыя вобласці для спасылак і іншых інтэрактыўных элементаў . Рэкамендацыі iOS рэкамендуюць, каб яны мелі не менш за 44 пікселі / кропкі, што добрая лічба.
- Навігацыя: Гэта, напэўна, будзе самым нязручным кампанентам любога дызайну, які рэагуе, асабліва калі ваш сайт мае шмат раздзелаў і глыбокую іерархію. Брэд Мароз напісаў кароткі змест некаторых розных падыходаў да навігацыі, якія разглядаюцца ў цяперашні час.
- Лішні змест: Не патрабуецца нейкі змест? Ці трэба паказваць іншы змест толькі ў пэўных сцэнарах? Я не выступаю за ўтойванне змесціва ў залежнасці ад таго, на якой прыладзе карыстаецца карыстальнік, але такія метады, як умоўная загрузка (якія мы разгледзім пазней на гэтым тыдні), могуць дапамагчы нам абслугоўваць меншыя старонкі, якія загружаюць толькі дадатковы змест, калі гэта неабходна.
Распрацоўка двух кантрасных макетаў падмацоўвае ідэю аб тым, што дызайн будзе адаптавацца, і на раннім этапе выправіць патэнцыйныя праблемы. Хоць гэта гучыць як падваенне працы, памятайце, што мы не распрацоўваем кожную старонку з дакладнасцю да пікселяў. Замест гэтага мы сканцэнтраваны на стварэнні маштабуемай мовы дызайну - той, якая будзе развівацца па меры ўкаранення яе ў код, і той, які заснаваны на асобных модулях і кампанентах.
Становіцца магнатычным
Нядзіўна, што для галіны, якая гістарычна разглядала Інтэрнэт як друк, макеты з фіксаванай шырынёй прасякнуты многімі прадуктамі, якія мы вырабляем. Пачынаючы распрацоўку адаптыўнай асяроддзя, разглядаюцца новыя падыходы, якія дазваляюць вырашаць праблемы і перадаваць ідэі, адначасова прызнаючы плынную прыроду асяроддзя. Вось некалькі маіх улюбёных:
- Схемы апісання старонкі: Хоць каркасныя каркасы часта могуць мець на ўвазе кампаноўку (і, такім чынам, мяркуюць пэўны тып прылад), дыяграмы апісання старонак выдаляюць гэта здагадка і замест гэтага апісваюць асобныя кампаненты, размешчаныя ў дакуменце з пункту гледжання прыярытэту.
- Стыль пліткі: Пры зносінах з кліентамі ідэй дызайну мы можам прадставіць "карціны вэб-сайтаў". Калі мы не будзем уважлівыя, кліенты справядліва папросяць убачыць канцэпцыі, якія дэманструюць, як дызайн будзе выглядаць і на іншых прыладах. Гэта можа прымусіць нас апынуцца ў няўстойлівай сітуацыі стварэння некалькіх старонак для некалькіх прылад. Саманта Уорэн задумалася над гэтай праблемай і прыдумала кафлю. Яны размяшчаюцца дзесьці паміж дошкай настрою (але менш расплывістай) і цалкам рэалізаванымі камплектамі (але менш дакладнымі) і дапамагаюць нам мець зносіны з тыпаграфікай, стылямі кнопак і лячэннем мачты. Яны таксама заклікаюць да больш сталага ўзроўню абмеркавання з нашымі кліентамі.
- Мабільная дызайнерская гульня: Гэта практыкаванне можа вельмі добра працаваць падчас сумесных дызайнерскіх семінараў. У гэтым практыкаванні кожны запісвае на Post-it адзначае элементы, якія могуць з'явіцца на пэўнай старонцы. Затым яны прыляпляюцца да сцяны ў парадку важнасці, як быццам яны выглядаюць лінеалізаванымі на мабільным тэлефоне. Атрыманая дыскусія можа прывесці да дзіўных высноў. Напрыклад, вы можаце зразумець, што навігацыя - не самы важны кампанент на старонцы. Гэта можа працягвацца да дызайну, дзе прапушчаная спасылка ўверсе старонкі спасылаецца на навігацыю ў калантытуле.
Безумоўна, ёсць месца для інструментаў, якімі мы ўжо карыстаемся, але, распрацоўваючы вэб-сайт у агульных рысах, трэба мець на ўвазе, што макет больш не вядомы.
Кадаванне паступова
На шчасце, нам не трэба турбавацца пра візуальны дызайн у прыкладзе, над якім мы працуем, бо цяжкая праца была зроблена для нас! Замест гэтага мы можам сканцэнтравацца на кадаванні нашага дызайну ў цалкам адаптыўны вэб-сайт.
Яшчэ адно, перш чым пачаць. Важна памятаць асноватворны прынцып асяроддзя, з якім мы працуем: універсальнасць. Гэта азначае не толькі стварэнне сучасных сеткавых прылад, але і забеспячэнне сумяшчальнасці з учорашнімі і заўтрашнімі прыладамі. Джон Алсопп расказаў, чаму гэты прынцып важны ў сваім паведамленні "Наступныя 6 мільярдаў":
"Наступныя шэсць мільярдаў - гэта дзеці ў сельскай Індыі, Афрыцы, Кітаі, дзе доступ да электраэнергіі і сетак можа быць перарывісты. Гэта хтосьці на Суматры ў дзесяцігадовай скрынцы Wintel. Гэта людзі, якія размаўляюць на сотнях розных моў, з дзесяткамі розных сістэмы пісьма. Гэта людзі, якія першымі ў сваёй сям'і ўмеюць чытаць і пісаць. Гэта 20 адсоткаў людзей ва ўсім свеце, якія не ўмеюць чытаць і пісаць. Тым не менш.’
Мы можам прасачыць наша разуменне Інтэрнэту, паглядзеўшы розныя моды (дзеля недахопу лепшага слова), якія прыжыліся ў нашай прафесіі: вэб-стандарты, даступнасць, ненадакучлівы JavaScript ... усё гэта варыянты на адну і тую ж тэму: паступовае ўдасканаленне. Тое ж самае і з адаптыўным вэб-дызайнам. Для пабудовы па-сапраўднаму спагадны вэб-сайт - гэта стварэнне сайта, які не толькі сумяшчальны назад, але і дружалюбны ў будучыні.
Апусканне ў нацэнку
Добра, дастаткова прэамбулы, прыйшоў час адкрыць тэкставы рэдактар.Наш дызайнер прадставіў нам дызайн, арыентаваны на працоўны стол, і быў мілы, каб даць прыклады таго, як гэта можа выглядаць і ў больш вузкім праглядзе.
Магчыма, спакушае іх закадаваць асобна, але я прапаную іншы падыход. Размясціўшы асобныя кампаненты - альбо ўзоры - якія складаюць дызайн, на адну старонку, мы можам стварыць партфель шаблонаў. Гэта дазваляе нам распрацоўваць кампаненты па-за межамі любога макета старонкі і дасць нам што-небудзь, на што мы будзем звяртацца пазней для любога рэгрэсійнага тэсціравання. Давайце разгледзім пачатковую разметку на некалькіх розных прыладах:
Паглядзіце наш партфель размечаных шаблонаў
Ну, я буду пракляты - у нас ужо ёсць адаптыўны сайт! Наш змест адаптуецца да абмежаванняў кожнай прылады, няхай гэта будзе модны новы iPad альбо адкінуты функцыянальны тэлефон. Ён нават працуе ў тэкставым браўзэры, як Lynx.
Дзякуючы асноўным прынцыпам універсальнасці, Інтэрнэт ёсць рэагуе па змаўчанні. Гэта цудоўна, але гэта таксама азначае, што ўсё, што мы робім з кодам з гэтага часу, можа паставіць пад пагрозу гэту прыстасаванасць.
Заўтра: Мы будзем уважліва ступаць і пачнем прымяняць першы аспект адаптыўнага дызайну: тыпаграфіку і вадкія сеткі.
