Респонсив дизайн

С навлизането на мобилния интернет и устройства с всякакъв размер, които могат да се възползват от услугата, начина на визуализиране на интернет сайтовете при различни резолюции доби съществено значение.
zurbResponsive
Респонсив дизайна не е нещо ново и все повече сайтове се възползват от предимствата му. Фаундейшън е инструмент, който подпомага изграждането на точно такива сайтове, които да изглеждат добре под всякакви резолюции. Тук ще разгледаме възможностите, които Фондейшън предлага, като се концентрираме повече на новостите в последната 3-та версия.

Теоретичното разделяне на екрана на колони или така наречения Грид в комбинация с „CSS“ класове, допринася за лесно подреждане на съдържанието. Стандартно Фаундейшън използва грид с 12 колони, но броят на колоните може да се промени в зависимост от конкретните нужди и предпочитания. Друго предимство на грида е, че не зависи от определена резолюция, лесно се адаптира към всеки екран.
foundation grid
„CSS“ класовете в последната 3-та версия на Фаундейшън са почти изцяло пренаписани, добавени са и нови за да осигурят още по-добро представяне и по-голям контрол над съдържанието. Една от новостите е употребата на “box-sizing: border-box”, което премахва конфликта с размера на елементите при използване на “border” или “padding”, както и много досадни изчисления.
foundation buttons
Обърнато е внимание на всички елементи от уеб страницата, като бутони различните полета за въвеждане и избор, менюта, таблици, съобщения, които могат да се показват ако нуждите на сайта го изисква и т.н. Премахнати са повечето картинки, които предишните версии използваха и това разбира се оказва пряко влияние върху бързината при зареждане и количеството прехвърляни данни, но истинското предимство е, че елементите вече не зависят от резолюцията.

Някои от елементите имат нужда от малко „javascript“ за да работят коректно например падащите менюта, таб менюта и т.н.

Да не забравяме двата „jQuery“ респонсив плъгина, които Zurb са разработили специално за целите на Фаундейшън: „Orbit“ – слайдер за картинки и съдържание и „Revel“ – диалогов прозорец. И двата плъгина са включени в „CSS“ и „javascript“ библиотеките, така че ако използвате стандартния пакет не е нужно нищо допълнително.

Една от големите промени във Фаундейшън 3 е включването на „Sass“ и „Compass“ вместо да се работи директно с „CSS“. Въвеждането на пре-процесор ускорява процеса на работа, като дава възможност за използване на променливи, функции и така наречените mixins – мощен метод за наследяване. Всичко това разбира се не е задължително. За по-консервативните е предоставена версия на Фаундейшън, която съдържа само „CSS“ библиотеката без нужда от пре-процесор, като и тук от Zurb са се постарали да оптимизират процеса на работа. Стандартния пакет предварително може да се модифицира според индивидуалните нужди. Има възможност да се изключат определени класове и да се зададат настройки на някой основни елементи, което като цяло не е кой знае какво, но най-малкото е досадно ако трябва да се прави на ръка.

responsive design | cholakov it
И накрая най-важния въпрос, какво реално се случва при различните браузъри и устройства? „Chrome“, „Firefox“, „Safari“ са браузъри при които Фаундейшън работи точно както се очаква. При „знаменития и така любим Internet Explorer“ ситуацията също е добра, за съжаление само за версии 8 и 9. Ако все пак поддръжката на „IE7“ е важна за вас може да използвате Фаундейшън 2.2.1. При мобилните устройства iPhone и iPad, Android 2+ (Phone и Tablet) и Windows Phone 7 са тези, за които са направени тестове и със сигурност при тях резултатите са добри.

Библиотека с „CSS“ класове и “javascript” плъгини, готови решения, пре-процесор за оптимизиране на работата със стилове, разбира се не трябва да забравяме безплатния лиценз, това най-общо представлява последната 3-та версия на Фаундейшън. Доколко тя е полезна при създаване на респонсив сайтове всеки сам може да прецени.

Вашият коментар

Вашият email адрес няма да бъде публикуван Задължителните полета са отбелязани с *