Все больше набирает обороты адаптивная верстка (responsive), вот недавно и я делал очередной проект с адаптацией под разные экраны. Для своих читателей, которые уже начинают переходить к этому замечательному и сложному способу верстки решил поделиться некоторыми секретами и фишками которые я нашел при верстке сайта, думаю, будет полезно.
Для тех кто еще не слышал о таком термине как адаптивная верстка могу сказать что такую верстку можно назвать человеческим языком послушной. Этот вид верстки подстраивается под все возможные экраны устройств с которых пришел ваш посетитель, а в последнее время их мягко говоря полно (нетбуки, планшеты, iphone, устройства на основе Android … ). У всех этих устройств есть особенность, они работают с разными экранами, но некоторые и них даже перестраивают отдельные элементы, так например iphone очень не кстати, вашему дизайну делает свои кнопки и поля форм на вашем сайте.
Адаптивная верстка – с чего начать
Поговорим по порядку с чего начать делать адаптивную верстку и какие сложности могут быть при этом.
Что использовать для верстки:
Думаю не ошибусь если, скажу что начинать надо с изучения простого определения браузера при помощи CSS3. То есть чтобы вы могли строить разные стили для разных экранов устройств, а ваш дизайн при сужении окна браузера менялся так, чтобы посетителям сайта было удобно с ним работать.
Вот собственно эти стили их вам будет достаточно для начала:
1 2 3 4 5 6 7 8 9 10 11 | /* Для больших экранов */ @media (min—width: 1200px) { ... } /* Для некоторых нетбуков и планшетов (таблеток) */ @media (min—width: 768px) and (max—width: 979px) { ... } /* Для планшетов и некоторых телефонов */ @media (max—width: 767px) { ... } /* Для телефонов и некоторых устройств у которых совсем маленький экран */ @media (max—width: 480px) { ... } |
С помощью приведенного выше кода вы сможете выставить настройки отдельных блоков и стилизовать их под разные экраны устройств, но кроме этого необходимо, чтобы и устройства понимали, что ваш сайт сделан для них. В этом может нам помочь код viewport.
1 2 | <meta name=«viewport» content=«width=device-width, initial-scale=1.0»> <link href=«assets/css/bootstrap-responsive.css» rel=«stylesheet»> |
Приведенный выше код не даст пользователю увеличивать или уменьшать ваш сайт как ему хочется, это за него должны делать стили о которых мы говорили выше.
Бонус в пользу адаптивных сайтов
Поисковые системы уже намного лучше распознают адаптивные сайты и меняют выдачу под них. То есть ваш сайт, сделанный по правилам адаптивной верстки, скорее всего, будет выше для тех, кто ищет информацию с мобильных устройств, чем простые и скучные сайты которые нужно уменьшать и увеличивать на экране, чтобы на них прочесть хоть что-то. Такой вывод пришел ко мне из опыта разработки сайта для юридической компании и анализа его статистики. Google и Yandex любят удобные сайты, но учитывая, что такие сайты стоят в 3 – 4 раза дороже, не каждый может себе позволить заказать адаптивный дизайн и разработку под этот дизайн. Стоимость обусловлена тем что нужно рисовать дизайн под 3-4 устройства и верстать также под разные устройства, а такие CSS фреймворки как Bootstrap далеко не всегда могут решить все поставленные задачи которые на придумывал клиент ).
Поговорим немного о Bootstrap
Первое что хотелось сказать о Bootstrap, не ищите документации нигде кроме официального сайта, у них там документация насколько хорошо описана, что врядли кто сможет лучше и по шагам расписать все возможности этого мега-фреймворка. Скорость верстки увеличивается в разы, но только в том случаи если клиенту нужен простой сайт без выдумок. Но когда сайт делается по всем требования клиента, иногда лучше этот фреймворк оставить и начать делать все просто вручную. Фреймворк отлично подойдет для тех, кто хочет научиться делать интерфейсы, например для панелей администратора, где уникальность дизайна не играет большей роли, но надо сделать все удобно. Бэкэнд сайта сделанный на bootstrap получается очень удобным и лаконичным, очень советую.
Подробнее почитать о фреймворке Bootstrap можно на их официальном сайте и начинать читать надо слева направо по главному меню, там ничего лишнего и все что нужно.
Тексты в адаптивной верстке
Для того чтобы сайт смотрелся хорошо на всех экранах недостаточно только перестраивать блоки, изменять их размер и назначение при помощи css фреймворков и JavaScript, нужно еще и помнить как ведет себя текст на разных экранах. Если на маленьком экране телефона в 480 пикселей текст хорошо смотрится на 12 пикселях, то на большем экране этот текст нужно увеличивать, так как на больших мониторах никто не смотрит на текст впритык, а читают его издалека. Недолго покопавшись в Интернет, я нашел отличную отличный плагин написанный на jqery. Называется плагин FitText и находится тут. Все, что вам надо сделать, это подключить плагин и вызвать его для нужных элементов страницы.
1 2 3 4 5 6 7 | <script src=«jquery.min.js»></script> <script src=«jquery.fittext.js»></script> <script type=«text/javascript»> $(«#fittext1»).fitText(); $(«#fittext2»).fitText(1.5); $(«#fittext3»).fitText(1.1, { minFontSize: 50, maxFontSize: ’75px’ }); </script> |
У плагина есть одна особенность, он работает только с блочными элементами (block, block-inline).
Проблемы при адаптивной верстке:
- На iphone ваши стили будут смотреться по другому, советую при верстке раздобыть это устройство для тестирования.
- На iphone трансформация работает по другому, причем во всех устройствах по разному. Когда вы выставляете 3D поворот объекта в CSS3 = 0 градусов, то объект таинственным образом может повернуться под некоторым углом, вместо того чтобы исчезнуть.
- Для адаптивной верстки веб-дизайнер должен быть обучен всем тонкостям и если вы знаете PhotoShop, советую запастись примерами качественных адаптивных дизайнов в формате PSD, для примеров как делать надо или не надо. Также вам понадобиться гора терпения и никаких отговорок (почему разработчику надо учить PhotoShop или SEO, которые я слышу все чаще). Мой вам совет из опыта, никогда не работайте с именитыми дизайнерами, которые к веб-дизайну не имеют никакого отношения. Был плохой опыт работы и мороз со стороны дизайнера.
- Работая с Bootstrap вам надо будет дорабатывать фреймворк если клиенту нужен макет больше чем 1200 пикселей в ширину. Хотя там работы не так много, но на сложных проектах мороки много, плавали, знаем…
- Тестировать адаптивный дизайн часто приходится в разных браузерах и даже в разных версиях, то же касается и разных устройств. Например, на iphone3 и iphone4 разница большая, меньше разница между iphone4 и iphone5. Устройства Android вам тоже понадобятся, так как там свои хитрости при выделении блока или написания в форму текста. Если денег на покупку кучи устройств нет, то можно использовать специальные сервисы как этот https://viewlike.us/, но он только меняет размер экрана и не меняет отображение элементов, как это делают устройства.
Пока на этом сложности больше не замечал, но если знаете пишите буду проверять и дописывать. Иногда для отдельных случаев нужно определить тип устройства до загрузки страницы в браузере, в таком случаи советую использовать класс написанный на языке php. Скрипт поможет определять размер экрана посетителя сайта и устройство, с которого тот зашел до загрузки сайта, на стороне сервера. Скрипт для определения браузера пользователя на PHP.
Если вам нужно чтобы ваши блоки плавно менялись на сайте, можно использовать анимацию CSS3 в ваших стилях для всех блоков.
1 2 3 4 5 6 7 | *{ —webkit—transition: all 0.3s ease; —moz—transition: all 0.3s ease; —o—transition: all 0.3s ease; —ms—transition: all 0.3s ease; transition: all 0.3s ease; } |
Если ваш дизайн не позволяет сделать плавную трансформацию всех элементов на странице, то вы можете просто заменить (*) на (любой дугой элемент) или запретить анимацию для отдельных блоков как в примере ниже.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .class—block, .class—block * { /*CSS transitions*/ —o—transition—property: none !important; —moz—transition—property: none !important; —ms—transition—property: none !important; —webkit—transition—property: none !important; transition—property: none !important; /*CSS transforms*/ —o—transform: none !important; —moz—transform: none !important; —ms—transform: none !important; —webkit—transform: none !important; transform: none !important; /*CSS animations*/ —webkit—animation: none !important; —moz—animation: none !important; —o—animation: none !important; —ms—animation: none !important; animation: none !important; } |
В этом примере отменяется вся возможная анимация в CSS для блока с классом .class-block и всего его содержимого.
Прочитав статью думаю становиться понятно почему адаптивный дизайн такой сложный и дорогой для клиентов. Хочешь идеально настроенный сайт плати. Платить лучше почасово, а не за проект, так как сложно оценить масштаб работы когда он такой путаный и масса проверок. Не стесняйтесь брать деньги и знайте себе цену, любая работа должна быть оплачена, так чтобы вам потом еще остались деньги для отдыха после проекта и успокоения нервов.
Думаю пока достаточно, но если будет еще интересная информация по теме, обязательно напишу. Если у вас есть свои библиотеки или плагины для адаптивной верстки, пишите в комментариях тут или в соц. сетях, будем дополнять материал.
Статья взята с сайта: https://wp-admin.com.ua/