QIWI
В этом разделе материалы размещаются пользователями сайта и публикуются после одобрения модератором. Редакция не несет ответственности за орфографические и другие ошибки, хотя и старается исправлять их по мере возможности.
Добавить свою заметку вы можете на этой странице.
10 июля 2014, 00:05

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

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

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

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

Получи сертификат Digital Project Manager!

25 октября в Москве пройдет первая очная сертификация RDC по позиции Digital Project Manager.

Если вы управляете цифровыми проектами на стороне агентства или на стороне клиента — получите одним из первых на рынке сертификат, подтверждающий высокий уровень вашей компетенции! А чтобы проверить свои силы, можно и нужно пройти полноценный витринный онлайн-тест.

Запись на очную сертификацию Digital Project Manager 25 октября — на этой странице. Cossa рекомендует!

Реклама

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

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

Все бы ничего, но трафик вашего сайта минимум на 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 у вас нет - вы вполне можете обойтись таким вариантом.

Не пропустите!

5 свежих сервисов для увеличения конверсии интернет-магазина
SEO-кейс: как мы увеличили региональный трафик на 1734%    
Как делать рассылку, от которой не отпишутся: главные принципы полезной и интересной рассылки
«Нативная реклама — это не только карточки Медузы». Алексей Поликарпов о видах нативной рекламы
Как мы делаем SEO для интернет-магазина сантехники
Откуда миллионы просмотров? Как продвигать рекламные видеоролики
Битва брендов на Красной площади во время ЧМ 2018: VR, подстаканники и Instagram
«Простая схема, которая работает годами». Как GeniusMarketing создаёт рекламные кампании
Как мы создали базу знаний по SMM, подключили к чатботу и теперь собираем подписчиков
5 способов создания креатива в Instagram. Советы креативного стратега Facebook
SMM регионального разговорного клуба — ставим рекорд посещаемости за 405 ₽
15 базовых SEO-советов о том, что сделать при переносе сайта на новый движок

Комментарии:

Реклама


📰 Чем живёт digital.
Главное — в рассылке:




Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Вконтакте, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой