Mobile-first дизайн: основите, които всеки сайт трябва да има

Започнете от най-малкия екран

Когато дизайнът започва от широк монитор, телефонната версия обикновено е „смачкана“ версия на него: колоните се нареждат една под друга, менюто се крие, а важното потъва някъде долу. Когато започнете от екран с ширина около 360 px, сте принудени да решите кое е наистина важно.

Полезно упражнение: напишете на лист какво трябва да направи посетителят в първите десет секунди. За ресторант това е менюто, адресът и телефонът. За зъболекар — услугите, работното време и бутонът за записване. За къща за гости — снимки, цени и свободни дати. Тези неща трябва да са видими, без да се търсят.

• Едно основно действие на екран: „Обадете се“, „Резервирайте“, „Вижте менюто“.
• Кратки заглавия и абзаци от 2–4 изречения.
• Телефонът като връзка (tel:), адресът — с връзка към карта.
• Най-важното съдържание — преди декоративните елементи.

Viewport, гъвкави оформления и точки на прекъсване

Без мета тага viewport телефонът показва сайта като умален десктоп и потребителят трябва да мащабира с пръсти. Стандартният ред е <meta name="viewport" content="width=device-width, initial-scale=1">. Не забранявайте мащабирането (user-scalable=no): това пречи на хората със слабо зрение.

Вместо фиксирани ширини в пиксели използвайте проценти, гъвкави решетки (flexbox, grid) и max-width за текста. Точките на прекъсване (breakpoints) слагайте там, където съдържанието започне да изглежда зле, а не по моделите на конкретни телефони — моделите се сменят всяка година.

• Пишете стиловете за малкия екран като основа, а с min-width медийни заявки добавяйте за по-големите.
• Ограничете реда на текста до около 60–75 знака на десктоп — дългите редове се четат трудно.
• Проверете и хоризонталната ориентация: нищо не трябва да излиза встрани и да се появява хоризонтален скрол.

Текст, който се чете без присвиване на очи

Основният шрифт на телефона да е поне 16 px. Това не е само въпрос на удобство: Safari на iPhone автоматично приближава страницата, когато потребителят докосне поле за въвеждане с шрифт под 16 px. Страницата „подскача“ и после трябва да се връща ръчно. С 16 px в полетата този проблем изчезва.

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

Бутони за пръсти, а не за мишка

Пръстът е много по-неточен от курсора. Различните насоки дават сходни минимуми за докосваема зона:

• Apple Human Interface Guidelines: поне 44 × 44 точки.
• Material Design на Google: поне 48 × 48 dp.
• WCAG 2.2, критерий 2.5.8 (ниво AA): минимум 24 × 24 CSS пиксела или достатъчно разстояние около по-малките цели.

WCAG дава долната граница, а насоките на Apple и Google — удобния размер. На практика се целете в около 44–48 px за важните бутони и оставяйте разстояние между съседните връзки, за да не се натиска грешната.

Помислете и за „зоната на палеца“. Когато телефонът се държи с една ръка, долната и средната част на екрана се достигат най-лесно, а горните ъгли — най-трудно. Затова много приложения слагат основните действия долу. За сайт това може да е лента с „Обади се“ и „Карта“ в долния край — но само ако е ниска и не закрива съдържанието.

Форми, които не изнервят

Формите са мястото, където мобилните сайтове губят най-много запитвания. Всяко излишно поле е причина някой да се откаже. Питайте само за това, което ви трябва, за да отговорите.

• Използвайте правилния тип поле: type="tel" за телефон, type="email" за имейл, inputmode="numeric" за числа — телефонът показва подходящата клавиатура.
• Добавете атрибута autocomplete (name, email, tel, street-address), за да може браузърът да попълни данните сам.
• Етикетът да е над полето, а не само като сив текст вътре в него — той изчезва, щом човек започне да пише.
• Грешките да се показват до полето, с ясен текст какво да се поправи.
• Бутонът за изпращане — широк, с глагол: „Изпратете запитване“, а не „Изпрати“.

Снимки по мярка за телефона

Снимка от 4000 px, сложена направо от фотоапарата, може да тежи няколко мегабайта и да зарежда секунди по мобилни данни. Браузърът може сам да избере подходящия размер, ако му дадете варианти.

• Атрибутите srcset и sizes казват на браузъра кои размери съществуват и колко широко ще се покаже снимката.
• Форматите WebP и AVIF обикновено дават значително по-малки файлове от JPEG при сходно качество.
• Задавайте width и height (или aspect-ratio), за да не „скача“ съдържанието, докато снимката се зарежда.
• loading="lazy" за снимките под първия екран; първата, голямата снимка — без lazy.

Повече за скоростта има в статията как да поддържате малкия сайт бърз.

Най-честите грешки

• Менюта само при посочване (hover). На телефона няма „посочване“ — подменютата трябва да се отварят с докосване.
• Изскачащи прозорци на целия екран. Абонамент, отстъпка и бисквитки едновременно, още преди човек да види съдържанието. Google също не гледа с добро око на натрапчивите прозорци на мобилни устройства.
• Фиксирани ленти, които изяждат екрана. Горно меню, долна лента и банер за бисквитки могат да оставят за съдържанието половината височина. Нека горното меню се скрива при скролване надолу.
• Таблици и PDF-и вместо страници. Ценоразписът в PDF е неудобен на телефон; по-добре като обикновен текст или списък.
• Видео, което тръгва само със звук и харчи мобилните данни.

Тествайте на истински телефони

Режимът за мобилни устройства в инструментите за разработчици е полезен, но не заменя истинския телефон. Той не показва колко е бавна мрежата навън, колко трудно се уцелва малка връзка с палец и как изглеждат цветовете на слънце.

1. Отворете сайта на по-стар, евтин телефон с Android и на iPhone.
2. Изключете Wi-Fi и пробвайте с мобилни данни.
3. Изпълнете основната задача с една ръка: обаждане, запитване, резервация.
4. Помолете човек, който не познава сайта, да намери работното време — и само гледайте.

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