Как да направите уебсайта си мобилно адаптивен

За да направите уебсайт мобилно адаптивен, добавете мета таг viewport, изградете оформлението mobile-first с гъвкави ширини и използвайте CSS точки на прекъсване, за да го пренаредите на по-големи екрани — подреждане на колони в една колона, свиване на менюто и мащабиране на изображенията по размер. След това проверете всяка страница при ширина на телефон за хоризонтално превъртане, мъничък текст и бутони, твърде малки за докосване. На сайт, изграден с AI, един ясен промпт плюс проверка в преглед с размер на телефон обикновено оправя по-голямата част.

Какво всъщност е адаптивен дизайн

Адаптивният сайт използва един набор от страници и URL адреси, които се нагаждат към екрана. Вместо отделен сайт „m.“, CSS променя оформлението при определени ширини, наречени точки на прекъсване (breakpoints). Градивните елементи:

• Мета тагът viewport казва на мобилните браузъри да използват реалната ширина на устройството.
• Гъвкави оформления използват проценти, flexbox и grid, а не фиксирани пикселни ширини.
• Media queries (или класове от рамка като md: на Tailwind) променят оформлението над дадена ширина.
• Гъвкави медии — изображения и видео, които се свиват, за да се поберат в контейнера си.

Важно е, защото голяма част от трафика ви вероятно е от телефони и защото Google индексира мобилната версия на страниците ви. Ако съдържание или връзки съществуват само на настолен компютър, Google може да не ги вижда.

Опции и компромиси

Mobile-first обикновено е по-просто: една колона е най-лесното оформление, а добавянето на колони при повече място е по-малко работа от премахването им.

Частите, които обикновено се чупят

Таг viewport

Ако страница изглежда като мъничък настолен сайт на телефон, таг viewport липсва:

<meta name="viewport" content="width=device-width, initial-scale=1">

Не добавяйте maximum-scale=1 или user-scalable=no. Блокирането на мащабиране с щипване затруднява сайта за хора с нарушено зрение.

Фиксирани ширини и хоризонтално превъртане

Най-честият адаптивен бъг е нещо по-широко от екрана: фиксиран контейнер width: 1200px, широка таблица, дълъг URL или блок с код, изображение без max-width: 100%. Цялата страница тогава се превърта встрани. Използвайте max-width вместо width, оставете текста да се пренася и дайте на широките неща собствена зона за превъртане.

Навигация

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

Текст и зони за докосване

• Основен текст около 16 px е разумен минимум на телефон. Полетата с по-дребен текст карат iPhone да увеличават при докосване.
• Направете бутоните и връзките лесни за натискане. WCAG 2.2 AA задава минимум 24 на 24 CSS пиксела (или достатъчно разстояние); около 44 пиксела е по-удобно за палци.
• Оставяйте разстояние между съседните връзки, за да не натискат хората грешната.

Таблици и данни

Широките таблици са най-трудната част на адаптивното приложение. Опции, по ред на предпочитание: показвайте по-малко колони на телефони, превръщайте всеки ред в карта или поставете таблицата в хоризонтално превъртащ се контейнер с фиксирана първа колона. Изберете според това какво хората трябва да сравняват.

Изображения и медии

Използвайте max-width: 100% и height: auto, сервирайте по-малки файлове на малки екрани с srcset и задавайте ширина и височина, за да избегнете скачане на оформлението. Вградените видеа и карти имат нужда от адаптивен обвиващ елемент, за да запазят съотношението си. По-малките изображения също правят страниците по-бързи — вижте как да направите уебсайта си по-бърз.

Формуляри

Поставяйте етикетите над полетата, правете полетата с пълна ширина и използвайте правилните типове вход (type="email", type="tel", inputmode="numeric"), за да показват на телефоните съответната клавиатура. Поставете бутона за изпращане там, където палецът го достига, и го дръжте видим, когато се отвори клавиатурата.

Взаимодействия само с посочване

Телефоните нямат посочване (hover). Подсказките, падащите менюта и прегледите, които се появяват само при посочване, са невидими за потребители с докосване. Направете ги да работят и при докосване.

Промпти, които работят

За нова сборка кажете го от началото:

Изгради го mobile-first. Една колона на телефони, две колони от ширината на таблет, пълно оформление на настолен компютър. Без хоризонтално превъртане при 320 px ширина, основен текст поне 16 px, зони за докосване поне 44 px, бутон за меню на малки екрани и таблици, които на телефон се превръщат в карти.

За съществуваща страница опишете какво виждате:

На телефони страницата /pricing се превърта встрани и трите карти на плановете са смачкани една до друга. Подреди картите вертикално под 768 px, направи таблицата за сравнение да се превърта хоризонтално в собствен контейнер с фиксирана колона на функциите и запази настолното оформление непроменено.

Провери всяка страница при 375 px ширина. Изброй всичко, което се препокрива, припокрива, има текст по-малък от 16 px или зони за докосване по-малки от 44 px, или работи само при посочване, след което поправи всяко.

Стъпка по стъпка

1. Потвърдете мета тага viewport в head частта на страницата.
2. Тествайте при 320–375 px ширина в режима за устройства на браузъра или в преглед с размер на телефон. Превъртете всяка страница от край до край.
3. Оправете първо хоризонталното превъртане. Намерете елемента, който е твърде широк; всичко останало е трудно за оценка, докато той не изчезне.
4. Наредете навигацията: бутон за меню, ключовите действия видими.
5. Проверете текста, зоните за докосване и формулярите във всеки ключов поток — регистрация, търсене, плащане, контакт.
6. Обработете таблиците и медиите: карти или контейнери за превъртане, адаптивни изображения и вграждания.
7. Проверете междинните размери. Плъзнете бавно ширината от телефон към настолен компютър; оформленията често се чупят около ширината на таблет.
8. Тествайте на реален телефон. Емулаторите пропускат неща като клавиатурата на екрана, която покрива бутон, извивките на екрана и колко бърз е сайтът при мобилен интернет.

Чести грешки

• Тестване само на един размер телефон. Проверете малък телефон, голям телефон и таблет.
• Скриване на съдържание на мобилни, за да се вмести. Google индексира мобилната версия, а потребителите на телефони искат същата информация.
• Изключване на мащабирането в мета тага viewport.
• Изображения с настолен размер на телефони, което струва време за зареждане и трафик.
• Натрупване на фиксирани елементи: залепнал хедър, банер за бисквитки и балонче за чат могат да покрият половината от екрана на телефона.
• Изскачащи прозорци, които не могат да се затворят на малък екран, защото бутонът за затваряне е извън видимото поле.

Контролен списък за мобилни

• Мета таг viewport присъства; мащабирането не е изключено
• Няма хоризонтално превъртане при 320 px на нито една страница
• Основен текст ~16 px; полетата не предизвикват увеличение
• Зоните за докосване са достатъчно големи и с разстояние
• Менюто работи на телефони и с клавиатура
• Таблиците се четат на телефони (карти, по-малко колони или контейнер за превъртане)
• Изображенията и вгражданията се мащабират; сервират се файлове с правилен размер
• Формулярите използват правилните типове вход; бутонът за изпращане е достижим
• Нищо важно не зависи от посочване
• Тествано поне на един реален телефон

Адаптивното оформление е и част от достъпността: WCAG изисква съдържанието да работи при 320 px ширина и при 200% мащабиране. Ако изграждате приложение, което хората ще използват всеки ден на телефоните си, как да изградите мобилно удобно уеб приложение отива по-далеч, включително инсталируеми PWA.

Адаптивен дизайн в Mythex

Mythex изгражда адаптивни уеб приложения, а в Pro може да ги опакова като Android и iPhone приложения. В работното пространство кликнете иконата на телефон над Preview (Switch to Mobile), за да видите приложението си в рамка с размер на телефон, и плъзнете ръба на рамката, за да пробвате други ширини (Preview и Code). В документацията има кратък стартов промпт за оправяне на оформлението за малки екрани в промптове за мобилна адаптивност. Проверете и на реален телефон — отворете публикувания URL или споделете линк за преглед и го отворете на телефона си.

Въпроси