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

 

 

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

От тук идва и нуждата да се създава уеб дизайн, който да представя по най-добрия начин съдържанието на всеки размер екран. Адаптивният уеб дизайн е техника, при която се създава уеб дизайн, нагаждащ се спрямо размера на екрана (т.е. резолюцията) на устройството, от което се отваря сайта.

В интерес на истината терминът адаптивен уеб дизайн не е съвсем буквален превод на вече широко използвания английски термин "responsive design". Когато говорим за responsive web design, освен адаптивен уеб дизайн, се използва и терминът гъвкав уеб дизайн, но според нас определението адаптивен е по-близко до смисъла на техниката.

Пред създаването на адаптивен уеб дизайн съществуват редица трудности. Освен техническите такива, които са въпрос на използване на подходящи технологии и подход при създаването на кода, съществуват и проблеми, свързани с ползваемостта и интуитивността при представяне на информацията. Когато създаваме адаптивен уеб дизайн не можем просто да разработим стандартна визия за голяма резолюция и от там да мислим как да се променя визията при по-малка резолюция. Налага се още при изготвянето на съдържанието, моделите за потребителско поведение и цялостната концепция за сайта, да се вземе предвид, че сайтът ще разполага с адаптивен уеб дизайн и да се предвиди под каква форма ще бъде визуализирано съдържанието при различните варианти, както и как поддържането на различни визии за различните резолюции ще се отрази на начина, по който потребителят използва сайта.

Съществуват примери за адаптивен уеб дизайн, които могат да послужат за вдъхновение и които демонстрират как най-добре се прилага адаптивен уеб дизайн. Ето част от сайтовете, разработени от Едж Софт, които разполагат с адаптивен дизайн и които намираме за особено добри примери.

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

 

 

Аеростар - корпоративен уеб сайт

Аеростар - пример за адаптивен дизайн
 

 

 

Топлофикация София

toplo.bg - пример за адаптивен дизайн

 

 

Flamentina UK

Flamentina UK - пример за адаптивен дизайн

 

Lparbox

Lparbox - пример за адаптивен дизайн

 

EDGE SOFT - нашият сайт също е с адаптивен дизайн

EDGE SOFT - пример за адаптивен дизайн