Уеб дизайн: Адаптивен уеб сайт

През последните две петилетки уеб дизайна мина през много тенденции.
Модерни бяха флаш сайтовете, модерни бяха свръхтежките графични уеб сайтове, модерни бяха сайтове с така наречен web 2.0 дизайн – големи бутони преливки, фонове и наклонени черти и доста други.
Сега идва една нова тенденция, наложена от новите мобилни технологии.
Интернет вече не стои на десктоп компютър. Ползват се всевъзможни смартфони, таблети и мобилни устройства. Новото потребителско поведение изисква нови решения когато проектираме даден уеб сайт и съответно създава нова тенденция. Web вече е мобилен.

Какво имаме в предвид?

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

Адаптивен лейаут

Течна структура на сайта, която се самоподрежда в зависимост от резолюцията на потребителя. Размера на текстовете се задава в em, ширината на колоните и блоковете се задават в проценти. Голямата полза от адаптивните лейаути идва когато искаме да променим коренно структурата на лейаута, не само ширината му. За пример даваме новия дизайн на Web Design Depot. Ако ширината на браузера е достатъчна главното меню стои на цял ред. При свиване логото на уеб сайта се премества отгоре, заедно с контакти.
Тази адаптивност се постига с помощта на CSS3 media queries. Те работят по много прост и ефективен начин. С общи думи казано, представляват блокове CSS код, който се прилага само когато резолюцията е по-голяма или по-малка от даден брой пиксели.

Точно поради горепосочените причини в началото на 2012г. много уеб дизайн компании започнаха да проектират сайтове с адаптивен уеб лейаут, който позволява на фирмения уеб сайт, портфолио, блог и всички прилежащи страници към него да се разглеждат под различни резолюции, като: 410px; 480px; 580px; 680px; 720px; 820px; 980px; 1280px;1920px и т.н.
Адаптивните лейаути са основата на новия векторен web.
Пример за качествен уеб сайт с адаптивен уеб дизайн: Web Design Depot

HTML код на статия

Автор: webdesigndepot


VN:F [1.9.18_1163]
Рейтинг: 0.0 от 6 звезди. (от 0 гласа)

Напиши коментар