Просмотров: 4 615

Верстка сайта под мобильные устройства. Адаптивная верстка.

Доля посетителей, которые заходят на ваш сайт с мобильных устройств (планшетов и телефонов) с каждым годом все более и более увеличивается.

В зависимости от тематики вашего сайта, количество таких пользователей может доходить до 50%. Скорость современного интернета и удобство смартфонов позволяют пользоваться интернетом в пути и в тех местах, где нет доступа к стационарному компьютеру.

Слева — сайт, который настроен на взаимодействие с мобильными устройствами. Справа — сайт, без адаптации.

Как вы думаете, что будет делать посетитель, когда он зашел на ваш сайт с мобильного и видит примерно картину как на правом изображении?

 

image00

Пользоваться подобным сайтом очень и очень не удобно. Приходится постоянно увеличивать экран пальцами. Изображение и текст не вмещаются в экран монитора и приходится постоянно прокручивать страницу влево и вправо.

Конечно, пользователь постепенно уйдет с такого сайта, т.к. пользоваться им очень не удобно.

Таким образом, вы можете потерять до 50% аудитории вашего сайта!

Чтобы избежать такой проблемы, делается специальная верстка сайта, которая будет адаптироваться под мобильные устройства.

Особенность такой верстки в том, что сайт автоматически адаптируется (сжимается) при уменьшении окна браузера. Посмотрите в следующем видео как это происходит:

При сжимании окна браузера:

+ Сжимаются основные блоки элементов веб-страницы;

+ Сжимаются изображения;

+ Убираются лишние элементы;

+ Преобразовываются элементы меню.

Верстка, которая позволяет добиваться такого эффекта называется адаптивной версткой.

С помощью адаптивной верстки вы можете создавать сайты, которые будет одинакового хорошо смотреться как на мобильных устройствах, так и на стационарном компьютере.