През 2013г екипа на Екзисто разработи няколко адаптивни уеб сайт проекта, като за наша радост, един от тях – www.aec.bg бе отличен и с първо място на Български награди за уеб 2013г в своята категория.
Вземайки под внимание бързината с която нараства мобилният уеб, става все по-критична нуждата от това, Вашият уеб сайт да е готов, да посрещне и тези потребители, които предпочитат да браузват през мобилни и таблетни устройства с различни размери на екрана. Осъзнавайки това, все по-често запитванията ни от клиенти посочват именно желание за разработка на адаптивни уеб сайт проекти.
Адаптивният уеб сайт заема „автоматично“ размера на екрана на устройството, от което потребителите го достъпват, като по този начин задоволяваме успешно нуждата им, от това да намират търсената от тях информация, от предпочитаното от тях устройство.
Разбира се, когато говорим за уебсайт дизайн и особено, когато той е адаптивен, трябва да имаме предвид, че работата над подобен тип проект е предизвикателство, тъй като респонсивните решения въвличат съществен ресурс в планиране на структурата и разположението на всеки основен тип страница в нейните основни формата – за десктоп компютри, за таблети и за мобилни телефони. Едва, когато структурата и най-вече функционалности по отделните екрани са внимателно преценени и заложени, можем да мислим за дизайн оформление на сайта.
С нарастването на интереса към подобен тип адаптивни уеб сайт решения, вече има добре установени практики, които е добре да се вземат под внимание, както от разработчици, така и от клиентите, така че да са добре запознати с предизвикателствата, които стоят пред един такъв проект.
Кои са 7-те основни и критични практики, които да следваме в процеса на работа, така че да подсигурим коректното визуализиране и гъвкавост на дизайна, така както се очаква.
1. Мобилните потребители заслужават същото добро качество!
Един от първите и най-важни принципи, които трябва да се имат предвид създавайки респонсивен дизайн, е да се уверите, че оформлението е построено по начин, който запазва комфорта на браузването на уеб сайта от различните устройства. Това означава че визията и структура на уеб сайта, трябва да се променят без да се премахва съдържание или функционалност за определено устройство или размер на дисплей. Посетител, който преглежда уеб сайта от своя смартфон или таблет, трябва да има достъп до същото съдържание и функционалност, до което би имал и посетител, който използва десктоп компютър. Всички елементи в адаптивния уеб сайт трябва да са гъвкави, което изисква при оформлението на дизайна да сме сигурни, че снимки, съдържание и цялостна структура, на която и да е страница в уеб сайта ще се преконфигурират и пренаредят, съобразявайки ги с различните размери на екрани, които се използват най-често в ежедневието.
Крайният резултат трябва да е уеб сайт, който се конвертира добре на всички популярни устройства – десктоп компютри, смартфони и таблети, без потребителите да се чувстват ощетени, че заради техният избор на устройство, те нямат достъп до определена информация, която иначе е налична за потребители с други, по-големи например устройства.
2. Адаптивно дизайн оформление
След като структурата на всяка страница от уеб сайта е проектирана (най-често се изготвят wireframes) и преминем към дизайн оформление и програмиране, трябва да приемем, че има изгледи, които са идеални за адаптивен дизайн, както и такива, които не са. Има страници, чиято структура лесно приема размера на различните екрани, както и такива страници на които това става по-трудно. Какво може да се направи в тези случаи? Семпъл, стилен и изчистен дизайн и HTML код доколкото това е възможно, използване на стандартни механизми за основни елементи, като навигация и менюта, прилагане правилата от HTML 5 и като цяло – семпла и ясна структура и визия.
Това, което със сигурност трябва да се избягва е излишно сложни div-ове, освен в случаите на <абсолютно позициониране>, избягват се нестандартни и интересни Javascript или Flash елементи, които само ще усложнят „пренареждането“ на страницата.
3. Различни резолюции, различни отправни точки.
Избора на резолюции за които ще достъпен уеб сайта е една от най-критичните отправни точки в проектирането и разработката на адаптивният уеб сайт. Резолюциите могат да бъдат дефинирани в няколко основни, с които да се съобразим и фокусираме:
– 480px – екрани на стари, малки смартфон устройства
– 768px – тук попадат по-големи смартфони и малки таблети
– над 768px, където попада всичко с по-голям размер на екрана, като например по-големите таблети и десктоп екрани
Ако имате енергията и времето, можете да вземете под внимание и тези:
– до 320px – за стари малки телефони с ниска резолюция
– над 1024px – за широки екрани на десктоп компютри
4. Гъвкави изображения.
Изображенията във всеки съвременен уеб сайт са важна част от неговата визия. При адаптивните уеб сайтове снимките също, като структурата трябва да са гъвкави. Най-лесният начин да се постигне това, е като се използва адаптивното оразмеряване за да се промени ширината им, като един от най-лесните методи да се постигне това, е чрез този малък и полезен инструмент: Adaptive Images.
Имайте предвид, че преоразмеряването за мобилните потребители е вероятно най-добрият начин, на който можете да заложите за в разработката на адаптивния уеб сайт, особено ако държите на добрата скорост на зареждане, което е абсолютно критичен момент.
Може да се реализира и по начин, при който се съхраняват отделни варианти (размери) на изображенията предназначени за различните резолюции, но това може да се превърне в проблем свързан с трафика, който натоварва потребителите, а не може да създадем сайт, с презумпцията, че всички потребители имат достъп до добра и неограничена интернет свързаност.
5. Компресиране на елементите и съдържанието на уеб сайта
Използването на програми от типа на GZIP за компресиране ресурсите на страниците, за да бъдат по-лесно предаването им по мрежите е препоръчително. Така ще се намали броя на байтовете, изпращани на страница или елемент и ще стане по-лесен достъпа до съдържанието от устройства с по-бавен интернет.
В допълнение, процеса може да бъде ускорен, като се премахнат ненужните бели пространства и празни редове. Така размерите на файловете ще са по-ниски, като цяло и ще подпомогнат по-гладкото представяне на уеб сайта.
6. Отървете се от несъществено съдържание.
За да направите мобилната версия на адаптивният сайт да изглежда страхотно по лесен начин, имайте едно наум: Има съдържание, което не е предназначено за мобилните потребители.
Ако имате такива елементи във вашият уеб сайт, тогава моментално се отървете от тях в мобилната версия. Това става лесно, като добавите клас .not mobile към специфичните елементи, които не бихте желали да видите в мобилната версия на уеб сайта или се отървете завинаги от тези елементи във всички версии на уеб сайта. Такива много често могат да бъдат Flash плеъри, форми за ъплоуд на файлове (например онлайн кандидатстване) и други, които на този етап не са приложими за мобилни устройства и таблети.
7. Помнете крайната цел
Горните са само част от най-важните практики, които се следват в разработката на адаптивен дизайн.
В края на краищата най-важното е ако искате адаптивния дизайн на уеб сайта да работи добре, е да бъде разработен по начин, който да му позволява да функционира бързо на устройства, които често са с ниска резолюция, ниска производителност и слаб достъп до интернет. Това означава семпъл, добре организиран уеб сайт, който представя основна функционалност с максимален фокус.
Вижте проекти, които са реализирани от екипа на Екзисто следвайки именно тези практики:
Други уеб сайт проекти и мобилни приложения можете да прегледате в нашето портфолио.
Статията е по материали на Stephan Jukic @ webdesignledger.com
Определено трябва да се обърне внимание и на мобилната версия на даден сайт, защото света и технологиите се развиват именно в тази посока. Често се случва потребителите да погледнат в някой сайт за малко през смартфона си и би било доста глупаво, ако настройките на сайта не са направени така, че да бъдат удобни и за мобилни версии. Лично на мен ми е било трудно да превключа към мобилната версия на един от най-използваните социални сайтове, когато за първи път си купих смартфон и все още смятам, че има малки неудобства. Именно за това е важно да се развие и тази вероятност за потребителите.