Респонсивният уеб дизайн е без съмнение една от топ темите, когато става въпрос за front-end. Това е така, защото един уеб сайт вече се достъпва от няколко коренно различни вида платформи, които носят освен разлика в пропорциите и абсолютния размер на дисплея, така и в начина по който потребителя взаимодейства с това устройство, а от там - и с вашия бъдещ сайт. Какво обаче ви е необходимо, за да го постигнете? В този кратък материал ще разгледаме някои решения, които е необходимо да разбирате и имплементирате, за да постигнете достатъчно гъвкав дизайн.

Гъвкав Grid

”Grid” или „мрежа“ е средство, което се прилага повече при двуизмерния дизайн. За двуизмерен дизайн говорим тогава, когато искаме нашият сайт да оползотворява на максимум различните размери на дисплеите и търсим пространство за разположение на елементите както по вертикала, така и по хоризонтала.

Има редица готови решения, които да използвате за Grid, но всяко от тях най-често носи някакви ограничения, свързани с употребата на CSS класове, за определяне на размера, пространството и разположението на елементите. Да се опитате да внесете кардинални промени в една такава готова система, с цел да я приспособите към собствен дизайн, може да се окаже трудна и времепоглъщаща задача.

Без значение обаче дали ще използвате готово или персонализирано решение, най-важният аспект на гъвкавата grid система е в размера на елементите, които изграждат изгледа и отстоянията. За дизайнерите това означава да се изостави любимият им начин на изчисление на пиксели и да се премине към употреба на проценти, които са много по-относителни мерни единици. Разбира се, това не спестява напълно работата с пиксели, просто е необходимо нещата да се изчисляват по нов начин.

Гъвкави изображения

Гъвкавата мрежа е само един аспект от репонсивния дизайн. Тя ще ви осигури гъвкава/променлива структура на вашия сайт. Но тук идват и изображенията. Те също трябва да са достатъчно гъвкави, да могат се движат спрямо другите елементи на сайта, да се преоразмеряват и т.н. Да се реализират тези цели е една от най-проблемните задачи на уеб дизайнера.

Зареждането на много големи изображения, които да се намалят посредством инструментите, които предлагат HTML и CSS не е препоръчително, защото в крайна сметка вашият сайт зарежда пълния размер на файла, а това води до по-дълго време за зареждане и по-голям трафик.

Разбира се, доколко този проблем е проблем за вашия проект - зависи от спецификациите на проекта ви, дали той залага на много изображения или по-малко. Все пак ако стигнете до вкарване на изображения, можете да се сблъскате с различни проблеми при различните размери на вашата страница. Добра идея е да използвате инструментите за динамично изрязване, които CSS предлага. Можете да използвате CSS свойството за overflow, чрез което да „скриете“ части от изображението, които иначе „счупват“ дизайна при преоразмеряването (разпростират се върху други елементи от дизайна и т.н.).

Проблемът с файловия размер на изображението пък можете да разрешите, като качите няколко различни версии на изображението, всяка с различен размер и всяка предназначена за точно определен размер на вашия сайт. Предвид устройството, от което се достъпва сайта, сървърът ще зарежда съответното изображение.

Media Queries

Media queries са без съмнение един от крайъгълните камъни на респонсивния дизайн. Най-голяма полза от тях има, когато ги използвате в комбинация с гъвкавия Grid. С тяхна помощ вие можете да създадете няколко различни изгледа на вашия сайт, използвайки един и същ HTML документ. Именно чрез тях вие задавате набори от различни размери на екрана на браузъра, според които ще се пренареждат елементите. Можете също така да изберете и ориентацията (пейзажна или портретна), както и редица други показатели.

Програмата на курса „CSS Advanced - юли 2020“ акцентира върху гъвкавия дизайн и в нея ще можете да усвоите умения при работа с елементи като media queries и CSS Grid. Тя е подходяща за всеки, който има основни познания по изграждане структурата на уеб страници чрез HTML & CSS. Ако имате такива умения и желаете да ги развиете - запишете се, очакваме ви!