Адаптивността на дизайна ви е една от най-важните теми, на които да обърнете внимание, при изграждане на уебсайт. Макар че започна през далечната 2016 г., mobile-first индексирането, все още продължава да е ключова тема не само в уеб дизайна, но и в SEO средите. За съжаление, твърде много хора продължават да неглижират важността на мобилната версия на сайта си, поради което бавно но сигурно губят не само позиции в търсачките, но и клиенти.
Доколкото сте способни, трябва да предоставите на потребителите сходно преживяване на компютър, на телефон и на таблет. Имайки предвид, че всяко едно от тези видове устройства, има безкрайно количество размери, операционни системи и клиенти (браузъри) – тоест рендериращи ги софтуери.
Следното е неизчерпателен списък на основните неща, които да имате предвид, изграждайки адаптивен дизайн за вашия сайт.
Гъвкавост
Съдържанието ви следва да е видимо и достъпно на всякакви устройства. Следователно, то трябва да премества позициите си, поради естеството на дисплеите, на които ще бъде показвано. Мобилните устройства се различават от компютрите не само по размерите си, но и по вертикалната позиция на дисплея, за разлика от хоризонталната при компютрите.
Абстрактното решетъчно (grid) разделение на съдържанието на сайта ви, със сигурност ще помогне да поставите съдържанието където трябва. То се изобразява от ляво надясно и отгоре надолу. Тоест, ако имате два елемента, които стоят в един и същ (абстрактен) ред (хоризонтала), но в две различни колони (вертикала), последвани от друг/и елемент/и на долният ред, при изобразяването им на мобилно устройство (освен ако няма допълнителна намеса), следва да бъде Ред 1 ляво, Ред 1 дясно, Ред 2 ляво, Ред 2 дясно.
Хубаво е да имате предвид тази подредба особено, ако използвате бутони или илюстрации, които очаквате и искате да се показват по-нагоре в мобилната версия на сайта ви.
Точки на прекъсване
Точките на прекъсване се отнасят до резолюцията на устройството. Тоест, при какъв размер на резолюцията вече не е удачно да опитвате да смалявате съдържанието на сайта си, за да се събере в пространството и вече е време да го подредите по вертикалата. Друг момент, който да имате предвид, когато определяте точките на прекъсване, е на каква резолюция главното ви меню вече не може да се събере в дисплея и трябва да преминете към мобилно меню (тоест, да скриете всички опции зад т.нар. бургер бутон).
Типография
Последвайте линковете, за да научите повече за елементите на типографията, както и обща информация за шрифтовете и общи насоки за основите на дизайна.
В настоящаата статия, обсъждайки адаптивността на дизайна ви, типографията се отнася до това, да изберете подходящ размер на шрифта си за различните устройства. Направете така, че заглавията и подзаглавията на сайта ви, да изглежда добре на всяко устройство. С други думи, да не се налага разделянето на повече от два реда (освен, когато самото заглавие е дълго, разбира се).
Обърнете внимание
Разстоянията, които можете да дадете на потребителите за елементите, с които те взаимодействат, следва да са по-големи, колкото по-малък е дисплея. Тоест, елементи като бутони, текстови полета, тостове и модални елементи, следва да вземат повече пространство, когато са на по-малък дисплей, за да могат потребителите да ги виждат и използват без да се затрудняват особено.
Не взимайте пример от рекламите на мобилни телефони, в които знакът „Х“ е толкова малък и труден за уцелване, че по-голямата част от потребителите отварят реклами, към които всъщност нямат никакъв интерес, което води единствено до фрустрация. Позволете на потребителите си да взаимодействат спокойно и свободно със сайта ви.
Мобилните дизайни следва да са по-изчистени. Там нямате нужда от толкова много изображения, особено онези, които са абстрактни и служат просто за визуална почивка, и можете да разчитате на по-минималистичен дизайн. Съдържанието на страницата ви, следва да бъде по-семпло и бързо за зареждане и консумация на мобилните устройства. Оставете абстрактните и големи визуални елементи за компютрите и таблетите, на чийто дисплеи се вижда много повече.
И последно, използвайте векторни изображения, особено за важни елементи, като иконите и други илюстративни елементи. Файловият формат .svg позволява на всеки визуален елемент да бъде на 100% от резолюцията си на всеки екран. Следователно, няма да се налага нито да сменяте изображението, което се показва на отделните резолюции, нито да се примиерявате, че то няма да изглежда перфектно на поне едно от устройствата, което потребителите ще ползват.