Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-03-10

1 <ul><li><a>Определение</a></li>

2 <li><a>Этапы развития</a></li>

3 <li><a>Адаптив и мобильная версия - разница</a><ul><li><a>Преимущества и недостатки мобильных версий</a></li>

4 </ul></li>

5 <li><a>Особенности адаптивного дизайна</a></li>

6 <li><a>Основные принципы и правила</a></li>

7 <li><a>Разрешения экранов</a></li>

8 <li><a>Инструменты для верстки</a></li>

9 <li><a>Как сделать адаптив - советы</a></li>

10 <li><a>Распространенные ошибки верстки</a></li>

11 </ul><p>Адаптивность - понятие, которое встречается в IT и дизайне. Данный термин часто применяется в веб-разработке сайтов и приложений. Адаптивная верстка является процедурой формирования структуры документа на базе HTML-разметки, предусматривающей автоматическое изменение страницы в зависимости от размеров пользовательских экранов. Порталы, созданные с ее применением, согласно Google, становятся наиболее популярными и успешными.</p>

12 <p>Далее предстоит познакомиться с адаптивной версткой сайта более подробно. Необходимо выяснить, что этот процесс собой представляет, чем отличается от мобильной версии, а также какие правила требуется соблюдать при его реализации. Дополнительно нужно рассмотреть основные инструменты для адаптивов и наиболее распространенные ошибки при их формировании. Предложенная информация рассчитана на широкую публику. Она подойдет как начинающим веб-разработчикам, так и уже более опытным специалистам.</p>

13 <h2>Определение</h2>

14 <p>Адаптивная верстка - способ обеспечения оптимального отображения интерфейсов сайтов на устройствах с разными разрешениями экранов. Версткой должен заниматься веб-разработчик. А именно - фронтенд-программист или fullstack-программист.</p>

15 <p>Адаптивный веб-дизайн - это дизайн веб-страниц, который обеспечивает грамотное и правильное отображение сайтов и сервисов на самых разных устройствах, подключенных к Интернету. Веб-проекты будут динамически подстраиваться под заданные параметры браузерного окна.</p>

16 <p>Целью такой верстки, согласно Google, является универсальность отображения содержимого того или иного сайта для различного оборудования. По рассматриваемой технологии для обеспечения корректной "картинки" веб-портала на экранах с разными разрешениями не придется создавать отдельные его версии. Один сайт сможет полноценно функционировать на ноутбуке, смартфоне, планшете, телевизоре с выходом в Интернет и так далее.</p>

17 <h2>Этапы развития</h2>

18 <p>Адаптивная верстка сайта - относительно новое понятие. Историю развития этого процесса условно можно разделить на несколько ключевых этапов:</p>

19 <ol><li>Появление мобильных версий сайтов. Этот период начался в 2000-х годах. Он характеризуется появлением Интернета на мобильных устройствах. С возникновением подобных возможностей крупные компании стали активно разрабатывать мобильные версии сайтов.</li>

20 <li>"Резиновая" верстка. Это второй этап развития адаптивных сайтов. При "резиновой" верстке ширина всех компонентов менялась при изменении ширины страницы. Сайт становился словно "резиновым" благодаря разработчикам, которые указывали ширину элементов не в пикселях, а в процентах. Дизайнерам нужно было разработать для подобных веб-проектов всего один макет. "Резиновые" сайты выглядели на смартфонах и планшетах намного лучше, чем их мобильные версии, если речь шла о простейших веб-порталах. По мере усложнения сервисов их элементы становились мелкими и нечитаемыми. "Резиновые" сайты из-за соответствующей особенности не смогли полноценно решить проблему адаптивности.</li>

21 <li>Адаптивный дизайн. Этот этап начался после "резиновых" сайтов. Google указывает на то, что суть такой концепции заключается в создании для каждого экрана отдельного макета веб-сервиса. Минимальное их количество - 2 штуки: для мобильных устройств и десктопная версия. Больше макетов тоже допускается.</li>

22 </ol><p>С появлением адаптивного дизайна, согласно Google, веб-проекты стали выглядеть более презентабельно и удобно. Именно такая концепция стала пользоваться спросом в веб-разработке. Адаптивные веб-страницы до сих пор являются наиболее посещаемыми в Интернете.</p>

23 <h2>Адаптив и мобильная версия - разница</h2>

24 <p>Google указывает на то, что сейчас можно выделить два типа верстки для смартфонов и планшетов: адаптив и создание полноценных мобильных версий веб-порталов. Они схожи между собой по предназначению, но также имеют колоссальную разницу. Понимая ее, каждый веб-программист сможет решить, какой именно вариант адаптации проекта на мобильных устройствах выбрать в том или ином случае.</p>

25 <p>С технической точки зрения, согласно Google, мобильная версия сайта на поддомене (чаще всего - .m) - это отдельно функционирующий, самостоятельный веб-проект. Его адаптив - мобильная и полная версия сервиса одновременно. Он умеет подстраиваться под любой тип пользовательского устройства.</p>

26 <p>Обе концепции имеют свои преимущества и недостатки. Сначала стоит разобраться с мобильными версиями сайтов. Они существуют намного дольше адаптивного дизайна.</p>

27 <h3>Преимущества и недостатки мобильных версий</h3>

28 <p>Google отмечает следующие сильные стороны мобильных версий сайтов на поддоменах:</p>

29 <ul><li>более быстрая загрузка;</li>

30 <li>возможность выбора пользователем версии сайта, запускаемой на данный момент;</li>

31 <li>простая процедура разработки за счет сильно урезанной функциональности;</li>

32 <li>лучшее юзабилити.</li>

33 </ul><p>Недостатки тут тоже есть. Google называет среди них:</p>

34 <ul><li>сильную функциональную ограниченность;</li>

35 <li>распознавание поисковыми системами сразу нескольких версий одного и того же сайта;</li>

36 <li>отсутствие возможности публиковать весь контент, доступный в полной версии веб-портала;</li>

37 <li>вероятность возникновения санкций поисковых систем: если осуществляется дублирование опубликованного контента основной версии на мобильной разработке;</li>

38 <li>возможные проблемы загрузки содержимого сайта при использовании перенаправления.</li>

39 </ul><p>Также Google отмечает, что для поисковых систем поддомен - это новый и самостоятельно функционирующий сайт. Для его продвижения придется все начинать с нуля.</p>

40 <h2>Особенности адаптивного дизайна</h2>

41 <p>У адаптивной верстки сайта тоже есть как преимущества, так и недостатки. Их придется принять во внимание в процессе разработки того или иного веб-портала. Google к "сильным" сторонам адаптивного дизайна относит следующие особенности:</p>

42 <ol><li>Отсутствие необходимости генерации дополнительных URL-адресов.</li>

43 <li>Более простая SEO-оптимизация.</li>

44 <li>Элементарная реализация.</li>

45 <li>Отсутствие необходимости использования перенаправления.</li>

46 <li>Нет необходимости в дополнительной раскрутке веб-портала: все ранее достигнутые показатели остаются с веб-порталом.</li>

47 <li>Более аккуратный внешний вид сайта. Страницы с адаптивным дизайном, согласно Google, будут корректно отображаться на экранах с любым расширением. Элементы портала не будут "залезать" друг на друга, получаться слишком крупными или мелкими.</li>

48 <li>Высокий уровень удобства для пользователей. Еще в 2019 году большинство посетителей заходили на страницы в Интернете с компьютеров и телефонов примерно в равной степени. К 2022 году доля тех, кто предпочитает пользоваться смартфонами для веб-серфинга, значительно увеличилась. Согласно данным Google, их доля составляет 65 %.</li>

49 <li>Приоритеты в поисковой выдаче. Перспективы развития адаптивных веб-страниц привели к тому, что поисковые системы отдают приоритет именно им. Google с 2019 года показывает сначала те сайты, которые оптимизированы под мобильные устройства и корректно на них отображаются.</li>

50 </ol><p>Недостатки у рассматриваемого подхода тоже есть. Google относит к ним:</p>

51 <ul><li>невозможность переключения между полной и мобильной интерпретацией сайта;</li>

52 <li>вероятность возникновения сложностей при реализации нестандартного функционала;</li>

53 <li>скорость загрузки у такого портала будет ниже, чем в случае с мобильной интерпретацией веб-сервиса.</li>

54 </ul><p>Google отмечает, что адаптивный дизайн - это современный подход к веб-программированию. Он, несмотря на некоторые недостатки, все равно остается востребованным и очень удобным с точки зрения пользовательского применения. Далее формирование адаптивов будет рассмотрено более детально.</p>

55 <h2>Основные принципы и правила</h2>

56 <p>Запомнив правила адаптивной верстки, можно будет намного быстрее получить адаптив того или иного веб-портала. Google выделяет следующие принципы такой разработки:</p>

57 <ol><li>Дублирование контента десктопной и мобильной версии сайта. Все, что пользователь сможет увидеть с компьютера, должно быть доступно со смартфонов и планшетов. Если каких-то данных не хватает в мобильной интерпретации, придется включать ПК и искать их в полноценной интерпретации портала. Именно поэтому дизайнерам и разработчикам придется перенести все сведения из десктопной версии в мобильную.</li>

58 <li>Сохранение дизайна. Google подчеркивает, что при создании адаптива необходимо следить, чтобы шрифты, цвета, логотипы и другие элементы были одинаковы и в десктопной, и в мобильной разработках порталов.</li>

59 <li>Сохранение иерархии элементов. Иерархия заголовков, подзаголовков, текстовых блоков, иллюстраций, а также кнопок должна выстраиваться на основе целей сайта.</li>

60 <li>Высота и ширина кликабельных компонентов - не меньше 44 пикселей. Это связано с особенностями управления адаптивной разработки веб-портала.</li>

61 <li>Повторение функциональных возможностей десктопного сайта. Google отмечает, что у адаптива должен быть точно такой же функционал, что и у полноценной интерпретации того или иного веб-портала. Если с компьютера доступны фильтры и различные варианты отображения товаров, в адаптивном представлении они тоже должны поддерживаться.</li>

62 <li>Уменьшение количества колонок. При верстке десктопных сайтов используется сетка из 12 колонок. Для узких экранов смартфонов и планшетов столько колонок не требуется. Google указывает, что для подобных проектов хватает 1-4 штук. В случае с планшетами можно обойтись 6-8 колонками.</li>

63 - </ol><p>Формируя ��даптивный интерфейс, веб-дизайнер должен помнить про две важные вещи - компактность и наведение.</p>

63 + </ol><p>Формируя адаптивный интерфейс, веб-дизайнер должен помнить про две важные вещи - компактность и наведение.</p>

64 <p>Компактность - это вертикальное расположение мобильной версии карточек и иных элементов, которые в десктопной интерпретации идут в ряд. Это обосновано тем, что на ПК контент просматривается слева-направо, а на телефонах - снизу-вверх.</p>

65 <p>Google подчеркивает, что иногда подобное расположение мешает переходить к важным данным. Пример - когда карточки с отзывами располагаются перед блоком с комментариями. Чтобы пользователи могли быстро перейти к самым важным и интересным компонентам на сайте, при оптимизации страницы под смартфоны и планшеты рекомендуется прятать карточки в горизонтальный скролл.</p>

66 <p>Также Google указывает на то, что при формировании адаптива нужно использовать элементы, активные при наведении. Они представляют собой своеобразные интерактивные подсказки и пояснения. В десктопной интерпретации на мелкий знак вопроса около слова легко наводится курсор, а в мобильной разработке подобной механики нет. Из-за этого приходится продумывать каждую подсказку и ее расположение.</p>

67 <p>Соблюдая эти принципы, согласно Google, можно научиться создавать потрясающие адаптивы. Но есть еще информация, которая пригодится каждому верстальщику.</p>

68 <h2>Разрешения экранов</h2>

69 <p>Google подчеркивает, что для адаптивных сайтов необходимо учитывать разрешения экранов. Вот средние показатели для каждой интерпретации веб-портала:</p>

70 <ul><li>1600 пикселей - компьютерная разработка;</li>

71 <li>960 пикселей - планшеты;</li>

72 <li>375 пикселей - смартфоны.</li>

73 </ul><p>Ширина может меняться в зависимости от конкретного веб-портала, идеи и технических особенностей проекта. Соответствующие значения носят название брейкпоинтов (breakpoint) - разрешения, при которых сайт будет менять отображение на экране.</p>

74 <p>Иногда дизайнерам приходится отрисовывать по 6 макетов проектов, а иногда - достаточно всего 2-х. промежуточный вариант для планшетов фронтенд-разработчики могут сделать самостоятельно по усредненным параметрам.</p>

75 <p>Выбор верстки зависит от задач сайта. Google указывает, что для лендингов с распродажами достаточно двух вариантов макетов. Сложным сервисам с огромным количеством фильтров, кнопок и иных компонентов лучше предоставлять несколько интерпретаций - 3-4 штуки минимум.</p>

76 <h2>Инструменты для верстки</h2>

77 <p>Адаптивная верстка сайта, согласно Google, создается при помощи специальных инструментов. Основное приложение, с которым предстоит познакомиться - графический редактор Figma. В нем есть готовые шаблоны под разные разрешения экранов - фреймы. Достаточно выбрать подходящий вариант, а затем расположить его в рабочей области. Сервис сам задаст необходимые параметры ширины и высоты.</p>

78 <p>Среди инструментов для верстки, согласно Google, можно выделить любые другие графические редакторы. Остается выбрать программное обеспечение, которое удобно конкретному верстальщику. Других специфических инструментов в выбранном направлении нет.</p>

79 <h2>Как сделать адаптив - советы</h2>

80 <p>Адаптивная верстка сайта должна начинаться со сбора аналитики. Если известно, откуда на сайт должны приходить конечные пользователи, дизайнеры смогут выбрать, с какой интерпретации начинать разработку проекта.</p>

81 <p>Mobile First - это подход, при котором мобильная реализация создается в первую очередь. Она появляется гораздо раньше десктопной.</p>

82 <p>Адаптивный веб-дизайн чаще всего начинается с десктопной интерпретации, а потом дизайнер адаптирует ее под разрешение смартфона или планшета. Это более распространенная концепция.</p>

83 <p>Когда ПК-версия сайта готова, адаптивность сайта не доставляет существенных хлопот. Для ее обеспечения достаточно перенести все компоненты на готовый макет с нужным разрешением, а затем пропорционально уменьшить их. Пункты меню и фильтры, согласно Google, чаще всего скрываются под кнопками.</p>

84 <p>Адаптированные элементы удобнее всего проверять в режиме предпросмотра. В него получится попасть при помощи специальной кнопки, расположенной в правом верхнем углу экрана. Если что-то выглядит "не так", в режиме предпросмотра допускается корректировка элементов портала.</p>

85 <h2>Распространенные ошибки верстки</h2>

86 <p>Создавая адаптивные сайты, разработчики могут допускать ряд ошибок. Вот самые распространенные из них:</p>

87 <ol><li>Использование сжатых изображений. При верстке с фотографиями и картинками можно действовать двумя разными методами - пропорционально уменьшать изображение или кадрировать его. При кадрировании картинка не сжимается. Google подчеркивает, что пользователи видят часть фотографии, а не полностью всю картинку. При пропорциональном уменьшении части изображения не отсекаются - она просто становится меньше. Проблемы возникают, если на картинке есть текст, но она не кадрируется, а пропорционально уменьшается. Текст будет сжат вместе с картинкой. Он станет нечитаемым. За визуальные компоненты сайта отвечает дизайнер, поэтому ему придется следить за корректным кадрированием или сжатием графических изображений. Если картинка отображается некорректно, необходимо сообщить о соответствующем явлении разработчику.</li>

88 <li>Мелкий кегль. Кегль шрифта - это размер буквы по вертикали. Он изменяется в пикселях. В десктопных интерпретациях сайтов, согласно Google, используется кегль от 16 до 18, а подписи к фото можно сделать 14 или 15. При просмотре страницы со смартфона 14 и 15 кегль выглядят слишком мелким. Пользователю придется растягивать экран пальцами, чтобы прочитать текст.</li>

89 <li>Пространство под заголовки. Об этой особенности часто забывают и дизайнеры, и веб-разработчики. Google подчеркивает - верстка начинается еще до того, как все тексты сайта написаны. Именно поэтому не исключены ошибки определения пространства под заголовки и подзаголовки. Существует вероятность, что дизайнер отведет под эти компоненты слишком мало места. Именно поэтому лучше выделять его "с небольшим запасом".</li>

90 <li>Использование длинных строк. Такая проблема, согласно Google, возникает, если дизайнер работал по концепции Mobile First. У мобильного телефона экран обычно узкий, а контент часто располагается в одну колонку. Именно поэтому существует вероятность заполнения текстом всю ширину колонки, оставив только небольшие поля. При переходе к созданию десктопных интерпретаций порталов можно случайно или намеренно растянуть текстовый блок так же - по всей ширине экрана. Для ПК-версии сайта подобный подход не годится. На широком экране его реализация смотрится плохо - строка получается слишком длинной, ее неудобно читать. Идеальная длина строки для ПК-версий сайтов составляет 60-70 символов с пробелами, для мобильных - 40-60.</li>

91 </ol><p>Теперь понятно, что такое адаптивная верстка сайта. Как ее грамотно реализовать, тоже ясно. Научиться создавать веб-сайты для ПК и смартфонов/планшетов помогут специальные компьютерные курсы. На них в срок от нескольких месяцев до года опытные IT-специалисты научат программировать сайты и верстать их. В конце каждого курса ученику вручается электронный сертификат установленной формы, подтверждающий приобретенные знания и навыки.</p>

92 <p><em>Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в <a>Otus</a>!</em> </p>