Адаптивная верстка Вконтакте

1

Использование вики-разметки ВКонтакте очень популярно, с помощью простых кодов можно оформлять привлекательные графические меню, вики-лендинги, вики-посты, чередуя текст и картинки. Но, пользователи все чаще выходят в интернет с мобильных устройств, и часто вики-странички в мобильной версии отображаются не корректно.
Все же есть несколько способов создать эффект адаптивной верстки и сейчас мы с вами их рассмотрим.

1. Оформить в таблице.

Можно весь дизайн разрезать на одинаковые по ширине и высоте элементы и оформить их с помощью таблицы.

Плюсы:
+ Меню будет одинаково выглядеть на всех устройствах
+ Один универсальный дизайн

Минусы:
— Главный минус — это то, что в мобильной версии кнопочки маленькие, на них неудобно нажимать пальцем — есть большой риск промахнуться, если под рукой нет стилуса)))
— На некоторых устройствах все же дизайн может отображаться некорректно — могут появляться пробелы между нарезанными картинками или показываться только левая часть таблицы. Но это встречается очень редко.

Шаблон кода :
{| fixed;nopadding;noborder

|-

|[[photoXXX_XXX|XXXpx;noborder;nopadding|ссылка]]||[[photoXXX_XXX|XXXpx;noborder;nopadding|ссылка]]||[[photoXXX_XXX|XXXpx;noborder;nopadding|ссылка]]

|-

|[[photoXXX_XXX|XXXpx;noborder;nopadding|ссылка]]||[[photoXXX_XXX|XXXpx;noborder;nopadding|ссылка]]||[[photoXXX_XXX|XXXpx;noborder;nopadding|ссылка]]

|}

(при копировании между строчками получаются пробелы — нужно их  удалить, чтоб было просто с новой строки)

Результат:

Адаптивная верстка ВКонтакте Адаптивная верстка ВКонтакте Адаптивная верстка ВКонтакте
Адаптивная верстка ВКонтакте Адаптивная верстка ВКонтакте Адаптивная верстка ВКонтакте

2. Подвижная верстка

Если вы хотите сделать подвижную верстку, нужно учесть, что та часть, где несколько кнопок встают в 1 ряд должна быть на белом фоне и количество кнопок должно быть кратно 2.

Плюсы:
+ Кнопки не уменьшаются на маленьких экранах
+ Создается эффект действительно адаптивной верстки

Минусы:
— Белый фон под подвижными элементами
— На некоторых устройствах элементы складываются несимметрично, например, вместо 2+2 получается 3+1

Шаблон кода:

 

[[photoХХХ_ХХХ|ХХХpx;noborder|ссылка]]

<center>[[photoХХХ_ХХХ|ХХХpx;noborder|ссылка]][[photoХХХ_ХХХ|ХХХpx;noborder|ссылка]][[photoХХХ_ХХХ|ХХХpx;noborder|ссылка]][[photoХХХ_ХХХ|ХХХpx;noborder|ссылка]][[photoХХХ_ХХХ|ХХХpx;noborder|ссылка]][[photoХХХ_ХХХ|ХХХpx;noborder|ссылка]]</center>

[[photoХХХ_ХХХ|ХХХpx;noborder|ссылка]]

(при копировании между строчками получаются пробелы — нужно их  удалить, чтоб было просто с новой строки)

Результат:

Адаптивная верстка ВКонтактеАдаптивная верстка ВКонтактеАдаптивная верстка ВКонтактеАдаптивная верстка ВКонтактеАдаптивная верстка ВКонтактеАдаптивная верстка ВКонтактеАдаптивная верстка ВКонтакте

Адаптивная верстка ВКонтакте

3. Два варианта дизайна

Можно сделать 2 разных варианта — один для мобильной версии, другой для десктопной и в мобильной версии добавить кнопку»перейти в полную версию», а в полной наоборот.

Плюсы:
+ Отличное отображение всех элементов и текста на всех устройствах.
+ Удобный дизайн на всех устройствах.

Минусы:
+ В 2 раза больше работы у дизайнера и верстальщика — по сути — это 2 разных дизайна.
+ Не все пользователи замечают кнопочку перехода и не пользуются нужной версией.

4. Очень простой дизайн

Создаем дизайн, в котором элементы выстраиваются в 1 столбик.

Плюсы:
+ Меню будет одинаково выглядеть на всех устройствах
+ Один универсальный дизайн, который не «съезжает» , можно использовать любой фон))

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

Идеальный вариант адаптивности вики-страниц я пока не нашла, если у вас есть свои способы — делитесь в комментариях.

Ваш SMM-помощник, Мария Жукова