ÐÑд авÑоÑа: медÑа запиÑи â невÑд’Ñмна ÑаÑÑина веб-дизайнÑ, пÑоÑе вони далеко не завжди добÑе пÑаÑÑÑÑÑ. У ÑÑй ÑÑаÑÑÑ Ð¼Ð¸ ÑозглÑнемо ÑÐ´ÐµÑ Â«ÐµÐ»ÐµÐ¼ÐµÐ½ÑÐ½Ð¸Ñ Ð·Ð°Ð¿Ð¸ÑÑв», навколо Ñкого Ñ Ð¾Ð´Ð¸ÑÑ Ð±Ð°Ð³Ð°Ñо ÑÑпеÑеÑок. ÐагаÑо Ñ Ñо вважаÑ, Ñо елеменÑÐ½Ñ Ð·Ð°Ð¿Ð¸Ñи â Ñе майбÑÑÐ½Ñ Ð°Ð´Ð°Ð¿Ñивного веб-дизайнÑ.
Ð Ñамого поÑаÑкÑ
СÑаÑÑÑ ÐÑона «адапÑивний веб-дизайн» назавжди змÑнила Ð½Ð°Ñ Ð¿ÑÐ´Ñ Ñд до ÑайÑоÑÑÑоениÑ. Ðого ÑÑаÑÑÑ Ð±Ñла Ñвидко пÑийнÑÑа ÑпÑлÑноÑÐ¾Ñ Ð²ÐµÐ±-дизайнеÑÑв Ñ ÑозÑобникÑв, ÑÐºÑ Ð½Ð°Ð´Ð¸Ñ Ð½ÑлиÑÑ Ð¹Ð¾Ð³Ð¾ ÑдеÑÑ. Ð’ÑвилиÑÑ ÑÐ°ÐºÑ Ð¼ÐµÑоди, Ñк «Mobile First», «Desktop First» Ñ «Device Agnostic». ÐÑли ÑозÑÐ¾Ð±Ð»ÐµÐ½Ñ Ñаблони Ð´Ð¸Ð·Ð°Ð¹Ð½Ñ Ñ Ð½Ð¾Ð²Ñ ÑÑандаÑÑи. ÐапÑиклад, з’ÑвивÑÑ Ñег picture. ÐаÑаз Ñ Ð½Ð°ÑÐ¾Ð¼Ñ ÑозпоÑÑÐ´Ð¶ÐµÐ½Ð½Ñ Ð½ÐµÐ·Ð»ÑÑÐµÐ½Ð½Ñ ÐºÑлÑкÑÑÑÑ ÑÑеймвоÑкÑв, Ñо полегÑÑÑÑÑ ÑозÑÐ¾Ð±ÐºÑ Ñ ÑÑвоÑÐµÐ½Ð½Ñ Ð°Ð´Ð°Ð¿ÑÐ¸Ð²Ð½Ð¸Ñ ÑайÑÑв.
Ðи бÑлÑÑе не Ñобимо ÑайÑи пÑд конкÑеÑÐ½Ñ ÑозмÑÑи екÑанÑ, бÑаÑзеÑи або пÑиÑÑÑоÑ. Ð¢ÐµÐ¿ÐµÑ Ð¼Ð¸ ÑÑвоÑÑÑмо ÑайÑи, ÑÐºÑ Ð²ÑдмÑнно виглÑдаÑÑÑ Ð½Ð° вÑÑÑ Ð¿ÑиÑÑÑоÑÑ Ñ ÑозмÑÑÐ°Ñ ÐµÐºÑанÑ. У ÑÑÐ¾Ð¼Ñ Ð½Ð°Ð¼ допомагаÑÑÑ Ð¼ÐµÐ´Ñа запиÑи, але не можна Ñакож забÑваÑи Ñ Ð¿Ñо меÑа Ñег viewport.
ÐедÑа запиÑи
ÐедÑа запиÑи дозволÑÑÑÑ Ð½Ð°Ð¼ ÑоÑмÑваÑи ÑÑÐ¸Ð»Ñ Ð¿Ñд Ð¿ÐµÐ²Ð½Ñ Ð¿ÑиÑÑÑоÑ. Ðдин з найпоÑиÑенÑÑÐ¸Ñ Ð¿ÑикладÑв викоÑиÑÑÐ°Ð½Ð½Ñ Ð¼ÐµÐ´Ñа запиÑÑв â Ñе змÑна ÑÑÐ¸Ð»Ñ Ð´Ð»Ñ ÑкогоÑÑ Ð´ÑÐ°Ð¿Ð°Ð·Ð¾Ð½Ñ ÑиÑини екÑана. ÐапÑиклад, код нижÑе Ñ Ð¾Ð²Ð°Ñ ÑÐ°Ð¹Ð´Ð±Ð°Ñ Ð¿Ñи пеÑеглÑÐ´Ñ ÑайÑÑ Ð½Ð° екÑÐ°Ð½Ð°Ñ Ð´Ð¾ 720px в ÑиÑинÑ.
.site-sidebar { display: flex; flex: 1 1 320px; } @media ( max-width: 720px ) { .site-sidebar { display: none; } }
ÐедÑа запиÑи Ñ Ð¿ÑиÑÑÑÐ¾Ñ ÑÑали кÑаÑе. Ð’ÑвилиÑÑ ÑÐ°ÐºÑ ÑÑнкÑÑÑ Ñк orientation Ñа resolution. ÐÑиклад нижÑе показÑÑ, Ñк можна викоÑиÑÑовÑваÑи Ð¾Ð´Ð½Ñ Ð· ÑÐ¸Ñ ÑÑнкÑÑй Ð´Ð»Ñ Ð²ÑÑавки зобÑÐ°Ð¶ÐµÐ½Ð½Ñ Ð±ÑлÑÑого ÑозмÑÑÑ Ð½Ð° екÑÐ°Ð½Ð°Ñ Ð· виÑÐ¾ÐºÐ¾Ñ ÑоздÑлÑÐ½Ð¾Ñ Ð·Ð´Ð°ÑнÑÑÑÑ.
.site-logo a { display: inline-block; background: url( images/logo.png ) no-repeat; } @media screen and ( min-resolution: 2dppx ) { background: url( images/[email protected] ); }
ÐедÑа запиÑи ÑÑали оÑновним компоненÑом пÑи пÑоекÑÑÐ²Ð°Ð½Ð½Ñ Ð°Ð´Ð°Ð¿Ñивного дизайнÑ.
Ðле вÑе ж
ÐедÑа запиÑи â не панаÑÐµÑ Ð´Ð»Ñ Ð²Ð¸ÑÑÑÐµÐ½Ð½Ñ Ð²ÑÑÑ Ð¿Ñоблем в адапÑÐ¸Ð²Ð½Ð¾Ð¼Ñ Ð²ÐµÐ±-дизайнÑ. ÐаÑпÑавдÑ, вони Ñ Ð½Ðµ Ð¿Ð¾Ð²Ð¸Ð½Ð½Ñ Ð²Ð¸ÑÑÑÑваÑи вÑÑÑ Ð·Ð°Ð´Ð°Ñ.
СÑÐ¾Ð³Ð¾Ð´Ð½Ñ Ð½Ð° ÑÐ¸Ð½ÐºÑ Ð²ÐµÐ»Ð¸Ñезна безлÑÑ Ð¿ÑиÑÑÑоÑв з ÑÑзними ÑозмÑÑами екÑÐ°Ð½Ñ Ñ ÑоÑмами, Ñо ÑÐ¾Ð·Ð¼Ð¸Ð²Ð°Ñ Ð¼ÐµÐ¶Ñ Ð¼Ñж мобÑлÑними пÑиÑÑÑоÑми Ñ Ð½Ð°ÑÑÑлÑним комп’ÑÑеÑом (Ð¼Ð°Ñ Ð½Ð° ÑÐ²Ð°Ð·Ñ Ð³ÑбÑÐ¸Ð´Ð½Ñ Ð½Ð¾ÑÑбÑки). ÐÑе Ñе ÑеÑйозно ÑÑкладнÑÑ Ð¿ÑдÑÑÐ¸Ð¼ÐºÑ ÐºÑаÑивого Ð´Ð¸Ð·Ð°Ð¹Ð½Ñ Ð½Ð° вÑÑÑ Ð¿ÑиÑÑÑоÑÑ , Ñ Ð¾ÑоÑий коÑиÑÑÑвалÑниÑÑкий доÑвÑд Ñ Ð²Ð¸ÑÐ¾ÐºÑ Ð¿ÑодÑкÑивнÑÑÑÑ.
Ð ÑкÑо Ñе додаÑи ÑекламÑ, ÑаблиÑÑ Ñ ÑÑаÑий конÑенÑ, вÑе може ÑÑаÑи Ñе гÑÑÑе. ÐÑже ÑкоÑо ви зÑÑкнеÑеÑÑ Ð· не найкÑаÑими ÑÑоÑонами медÑа запиÑÑв.
ÐедÑа запиÑи: вÑе не Ñак добÑе
РозглÑнемо наÑÑÑпний пÑиклад. У Ð½Ð°Ñ Ñ ÐºÐ¾Ð¼Ð¿Ð¾Ð½ÐµÐ½Ñ ÑнÑеÑÑейÑÑ, за Ð´Ð¾Ð¿Ð¾Ð¼Ð¾Ð³Ð¾Ñ Ñкого ми Ñ Ð¾Ñемо показаÑи пÑоÑÑÐ»Ñ ÐºÐ¾Ð¼Ð°Ð½Ð´Ð¸ ÑайÑÑ. Ðаний ÐºÐ¾Ð¼Ð¿Ð¾Ð½ÐµÐ½Ñ Ð¼Ð¸ бÑдемо викоÑиÑÑовÑваÑи в декÑлÑÐºÐ¾Ñ Ð¼ÑÑÑÑÑ ÑайÑÑ. ÐÑиклад нижÑе показÑÑ, Ñк Ð½Ð°Ñ UI ÐºÐ¾Ð¼Ð¿Ð¾Ð½ÐµÐ½Ñ Ð²Ð¸Ð³Ð»ÑдаÑиме на екÑÐ°Ð½Ð°Ñ ÑиÑÐ¸Ð½Ð¾Ñ 780px.
Ðа ÑÑоÑÑнÑÑ ÐºÐ¾Ð¼Ð°Ð½Ð´Ð¸ ÑайÑÑ Ñаблон зÑÑваÑÑÑÑÑ. ÐваÑÐ°Ñ ÑÐµÐ¿ÐµÑ ÑозÑаÑовÑÑÑÑÑÑ Ð·Ð²ÐµÑÑ Ñ, а Ñм’Ñ Ñа бÑогÑаÑÑÑ Ð·Ð½Ð¸Ð·Ñ. Також може злегка зменÑиÑи ÑозмÑÑ ÑÑиÑÑÑ.
ÐÐ°Ð½Ñ Ð¿ÑÐ¾Ð±Ð»ÐµÐ¼Ñ Ð¼Ð¾Ð¶Ð½Ð° поÑÑкÑиÑи з Ð´Ð¾Ð¿Ð¾Ð¼Ð¾Ð³Ð¾Ñ Ð¼ÐµÐ´Ñа запиÑÑв. Ðожна, напÑиклад, напиÑаÑи наÑÑÑпний код CSS:
/** * ÐÑоÑÑÐ»Ñ */ .team-profile { text-align: center; } .team-profile .bio { margin-top: 20px; font-size: 14px; } @media ( min-width: 480px ) { .team-profile { text-align: left; display: flex; } .team-profile .avatar { flex: 0 0 120px; } .team-profile .bio { font-size: 16px; flex: 0 1 580x; } } /** * ÐаÑÑка пÑоÑÑлÑ. */ .team-profile-card { text-align: center; } .team-profile-card .bio { margin-top: 20px; font-size: 14px; } /** * ЯкÑÑÑ ÑÑÐ¸Ð»Ñ Ð´Ð»Ñ Ð¿ÐµÑезапиÑÑ Ð·Ð½Ð°ÑÐµÐ½Ñ */ .page .team-profile-card { … }
Ðоки ми викоÑиÑÑовÑÑмо паÑÑ Ð´Ð¾Ð´Ð°ÑÐºÐ¾Ð²Ð¸Ñ ÐºÐ»Ð°ÑÑв .user-profile .user-profile-card, ми можемо Ñе поÑÑкÑиÑи. Ðднак Ñакий пÑÐ´Ñ Ñд йде вÑозÑÑз з ÑдеÑÑ Ð¿Ñо повÑоÑÐ½Ð¾Ð¼Ñ Ð²Ð¸ÐºÐ¾ÑиÑÑÐ°Ð½Ð½Ñ Ð½Ð°Ñого UI компоненÑа. UI елеменÑ, Ñкий можна помÑÑÑиÑи Ñ Ð±ÑдÑ-ÑÐºÐ¾Ð¼Ñ Ð¼ÑÑÑÑ ÑайÑÑ, Ñ Ð²Ñн адапÑÑÑÑÑÑÑ Ð´Ð¾ оÑоÑеннÑ.
У пÑÐ¸ÐºÐ»Ð°Ð´Ñ Ð½ÐµÐ¾Ð±Ñ Ñдно, Ñоб Ð¼Ð°ÐºÐµÑ Ð½Ð°Ñого компоненÑа адапÑÑвавÑÑ, коли вÑн Ð·Ð½Ð°Ñ Ð¾Ð´Ð¸ÑÑÑÑ Ð²ÑеÑÐµÐ´Ð¸Ð½Ñ Ð¼Ð°Ð»ÐµÐ½Ñкого конÑейнеÑа, а не коли ÑÑиÑкаÑÑÑÑÑ Ð²Ñкно бÑаÑзеÑа. Щоб не покладаÑиÑÑ Ð½Ð° ÑозмÑÑ Ð²Ñкна бÑаÑзеÑа пÑи змÑÐ½Ñ Ð¼Ð°ÐºÐµÑа, ÑÐ¾Ð¼Ñ Ð± не зÑобиÑи Ñе на елеменÑÐ½Ð¾Ð¼Ñ ÑÑвнÑ?
ÐлеменÑÐ½Ñ Ð·Ð°Ð¿Ð¸Ñи
ÐÐ´ÐµÑ ÐµÐ»ÐµÐ¼ÐµÐ½ÑÐ½Ð¸Ñ Ð·Ð°Ð¿Ð¸ÑÑв з’ÑвилаÑÑ Ð½Ð° поÑаÑÐºÑ 2012 ÑокÑ. ÐаÑÐ¾Ñ ÑокÑв пÑзнÑÑе адапÑивний веб-дизайн ÑÑав найпопÑлÑÑнÑÑÐ¾Ñ Ð¼ÐµÑодологÑÑÑ. Ðа жалÑ, на Ñой Ð¼Ð¾Ð¼ÐµÐ½Ñ ÑозÑобники не баÑили ÑÐºÐ¸Ñ Ð¾ÑÑ ÑÑÑоÑÐ½Ð¸Ñ Ð¿ÑиÑин, Ñоб запиÑаÑи меÑодологÑÑ Ñ Ð²Ð¸Ð³Ð»ÑÐ´Ñ Ð²ÐµÐ±-ÑÑандаÑÑÑ. СвÑÑ ÑÐ¾Ð´Ñ Ñе коÑиÑÑÑвавÑÑ ÑÑаÑими меÑодами.
Ðеб-ÑпÑлÑноÑи Ñозвивали ÑÐ´ÐµÑ Ð»Ð¸Ñе на влаÑÐ½Ð¾Ð¼Ñ ÐµÐ½ÑÑзÑазмÑ. RICG (ÐÑÑпа ÑпÑлÑÐ½Ð¾Ñ Ð·Ð° ÑÑÑеннÑм пÑоблем адапÑивного дизайнÑ) â гÑÑпа, Ñка пÑидÑмала Ñег picture, додала елеменÑÐ½Ñ Ð·Ð°Ð¿Ð¸Ñи в ÑвÑй ÑпиÑок пÑоблем, поки ÑнÑÑ ÑозÑобники ÑÑвоÑÑвали JS бÑблÑоÑеки ÑÐ¸Ð¿Ñ EQCSS Ð´Ð»Ñ ÐµÐ¼ÑлÑÑÑÑ Ð´Ð°Ð½Ð¾Ð³Ð¾ ÑÑнкÑÑоналÑ.
ÐлеменÑÐ½Ñ Ð·Ð°Ð¿Ð¸Ñи пÑаÑÑÑÑÑ ÑоÑно Ñак Ñамо, Ñк медÑа запиÑи. ÐÑдмÑннÑÑÑÑ Ñ ÑомÑ, Ñо вони ÑлÑдкÑÑÑÑ Ð·Ð° ÑозмÑÑом елеменÑа, а не ÑозмÑÑом вÑкна бÑаÑзеÑа. Це дозволÑÑ ÑÑвоÑÑваÑи по-ÑпÑавжнÑÐ¾Ð¼Ñ Ð¼Ð¾Ð´ÑлÑÐ½Ñ ÑиÑÑеми ÑнÑеÑÑейÑÑв з бÑлÑÑ ÑиÑÑим кодом. СÑÐ¸Ð»Ñ Ð½Ð°Ñого UI компоненÑа можна пеÑепиÑаÑи з Ð´Ð¾Ð¿Ð¾Ð¼Ð¾Ð³Ñ EQCSS:
.team-profile { text-align: center; } .team-profile .bio { margin-top: 20px; font-size: 14px; } @element «.team-profile» and ( min-width: 480px ) { .team-profile { display: flex; } .team-profile .avatar { flex: 1 1 120px; } .team-profile .bio { text-align: left; font-size: 16px; flex: 1 1 580x; } }
ÐÐ°Ñ Ð½Ðµ ÑÑкавиÑÑ ÑиÑина вÑкна бÑаÑзеÑа. Ðа кодом виÑе видно, Ñо поки UI ÐµÐ»ÐµÐ¼ÐµÐ½Ñ ÑозÑÑгнÑÑий до 480px Ñ ÑиÑÑе .avatar Ñ .bio вÑдобÑажаÑÑÑÑÑ Ð¿Ð¾ÑÑÑ. Ðоли ÑиÑина елеменÑа нижÑе 480px, ми дозволÑÑмо .avatar Ñ .bio ÑозÑаÑÑваÑиÑÑ ÑÑовпÑиком, а вмÑÑÑ Ð²Ð¸ÑÑвнÑÑÑÑÑÑ Ð¿Ð¾ ÑенÑÑÑ.
ÐиÑновок
ÐÑоÑÑо ÑÑоÑнимо, Ñ Ð½Ðµ кажÑ, Ñо викоÑиÑÑовÑваÑи медÑа запиÑи â Ñе погано. ÐедÑа запиÑи â ÑÑдовий ÑнÑÑÑÑменÑ, Ñкий ми зÑÑÑÑÑÑаÑмо на безлÑÑÑ ÑайÑÑв. ÐедÑа запиÑи Ñ ÐµÐ»ÐµÐ¼ÐµÐ½ÑÐ½Ñ Ð·Ð°Ð¿Ð¸Ñи можÑÑÑ ÑпÑвÑÑнÑваÑи. Ðднак ÑÑнÑÑ Ð±ÐµÐ·Ð»ÑÑ ÑÑенаÑÑÑв в дизайнÑ, коли набагаÑо кÑаÑе пÑдÑйдÑÑÑ ÐµÐ»ÐµÐ¼ÐµÐ½ÑÐ½Ñ Ð·Ð°Ð¿Ð¸Ñи.
Ðа жалÑ, елеменÑним запиÑам належиÑÑ Ñе пÑойÑи довгий ÑлÑÑ , пеÑÑ Ð½Ñж вони ÑÑанÑÑÑ Ð²ÐµÐ±-ÑÑандаÑÑом. ÐокладаÑмо наÑÑ Ð½Ð°Ð´ÑÑ Ð½Ð° добÑÐ¸Ñ Ð»Ñдей з RICG.
Рпоки ми ÑекаÑмо, можна вивÑаÑи поÑенÑÑал елеменÑÐ½Ð¸Ñ Ð·Ð°Ð¿Ð¸ÑÑв за Ð´Ð¾Ð¿Ð¾Ð¼Ð¾Ð³Ð¾Ñ JS бÑблÑоÑеки EQCSS. Цим ми Ñ Ð·Ð°Ð¹Ð¼ÐµÐ¼Ð¾ÑÑ Ð² наÑÑÑÐ¿Ð½Ð¾Ð¼Ñ ÑÑоÑÑ. СлÑдкÑйÑе за оновленнÑми!