Редизайн необходим или почему все переходят на адптивную верстку и Flat

Интернет развивается,а вместе с ним развиваются и устройства, с помощью которых человек попадает в интернет. Сейчас ни для кого не секрет, что в интернет можно попасть через телефон или mp3 - плеер, но это далеко не все устройства, на которых есть возможность прогуляться по интернету. Мы постоянно проверяем показатели яндекс - метрики и каждый раз натыкаемся на какие-то непонятные устройства, с кодовыми именами в стиле "mg423as550", немного погуляв по интернету мы натыкаемся на информацию, о том, что это некая беговая дорожка с встроенным android интерфейсом, помимо беговых дорожек, мы встречали часы, микроволновки, холодильники. Сложно представить, что это только начало.

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

Второй частью проблемы портативных посещений является переход интернета на новые единицы измерения, измерять разрешение экрана в пикселях больше не имеет смысла, выпускаются телефоны 2500*1500 точек, в то время, как большинство ноутбуков, которыми сейчас пользуются люди имеют разрешение 1368*768. Разрешение сотового телефона, экран которого примерно в 10 раз меньше, чем у ноутбука, в 2 раза больше.

Теперь представьте что происходит с неадаптивным сайтом на мобильном телефоне.

Мобильный трафик

Все бы ничего, но трафик вашего сайта минимум на 40% состоит из мобильных устройств. Как вам? Неплохая доля аудитории?

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

Адаптивный шаблон ( Framework )

Решение было найдено пару лет назад - когда в массы вошел знаменитый шаблон twitter bootstrap. Это некий набор кода, имеющий блочную верстку, при этом весь шаблон разбит на 12 колонок и неограниченное число строк, каждая из колонок имеет процентное число пространства от всего сайта, это число как вы уже догадались равно 100/12.

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

Каждый элемент сайта может иметь в себе от 2 до 12 столбцов, т.е максимально в ряду мы можем расположить 6 столбцов.

Таким образом, при разработке макета сайта для удобства мы советуем указывать сколько колонок будет внимать в себя тот или иной элемент. Например мы верстаем шапку и осознаем, что в ней должны быть: логотип, строка поиска, номера телефонов и часы работы - мы понимаем, что на все про все у нас 12 колонок, выходит - если у нас небольшой логотип, то мы отдадим ему 2 колонки, строке поиска сразу 5, того 7, еще по 3 и 2 колонки мы отдадим на телефоны и время работы.

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

Система управления контентом сайта (CMS) + адаптивный шаблон (Framework)

Теперь у вас в голове осталось несколько вопросов - ну а как же потом управлять этим шаблоном? - только через код? Только в нотпад++, сублайм и т.д.? - А вот и нет. Twitter bootstrap лишь запустил волну адаптивных фраймворков. Сейчас всего фраймворков около 200.

Самый популярный из них это gantry. А знаете почему? Потому что гантри без труда внедряется в joomla 3, magento, больше вам скажу - шаблоны на гантри выпускают уже давно известные студии, такие как rocket theme, yootheme и т.д.

Т.е. - вы покупаете шаблон (о том как и где их покупать смотрите в уроке Александра Куртеева : успешный шаблон для joomla), ставите его на свою cms и набиваете контентом. Просто? - просто в таком случае вам даже не понадобятся услуги веб-студий, конечно же базовые навыки кодинга нужны, но на их изучение уйдет не больше 60 дней. Если у вас не большая компания и денег на сайт за 100 000 у вас нет - вы вполне можете обойтись таким вариантом.