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

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

IT-конференция МТС True Tech Day 17 мая

Что будет:

• 5 тематических треков: Main, Development, AI/ML, Cloud, Science;
• 50 спикеров с докладами про архитектуру, облачные платформы, NLP4Code, вероятностное программирование, безопасность контейнеров и другое;
• 10 часов нетворкинга;
• Цифровые зоны и digital-интеграции;
• А ещё вечеринка со звездой.

Все спикеры и темы уже на сайте. Регистрируйся на True Tech Day. Участие бесплатное.

Реклама. ПАО «МТС». ИНН 7740000076. ОГРН 1027700149124

Второй частью проблемы портативных посещений является переход интернета на новые единицы измерения, измерять разрешение экрана в пикселях больше не имеет смысла, выпускаются телефоны 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 у вас нет - вы вполне можете обойтись таким вариантом.