Как сделать адаптивный сайт

     

     

    Всеобщая «мобилизация»: переходим на адаптивный дизайн. Всем привет! Недавно, заглянув в статистику одного из своих проектов, я поняла, что пришло время учиться создавать адаптивный дизайн сайта, то есть, дизайн, который будет хорошо смотреться, как на стационарных компьютерах и ноутбуках, так и на мобильных устройствах. Взгляните сами, Метрика намекает. А вы знаете, каким видят ваш сайт пользователи мобильных устройств? К счастью, для проверки есть отличный сервис — responsinator.com. Здесь все до безобразия просто — вводишь адрес сайта и видишь, как он выглядит на мобильных устройствах. Давайте для примера проверим блог, который, наверное, знаком все. У Александра Борисова красивый шаблон, сразу видно — в дизайн и верстку вложены деньги и не маленькие. Однако, с телефона читать блог очень неудобно, и я не удивлюсь, если процент отказов среди пользователей мобильных устройств гораздо больше, чем тех, кто заходит на сайт с компьютера. Что делать? Выхода два: оставить все как есть и наблюдать за тем, как другие проекты обходят твой в выдаче поисковых систем либо сделать дизайн своего сайта адаптивным. Что такое адаптивный дизайн. По началу я не видела разницы между адаптивной и «резиновой» версткой, когда размеры блоков меняются в зависимости от ширины экрана. Однако, разница есть. Адаптивный дизайн не просто тянется или сжимается по ширине, он подстраивается под размер экрана, иногда полностью меняя стиль блоков. Самый простой пример: область контента растягивается на всю ширину экрана, а сайдбар или переносится вниз или вообще исчезает со страницы. Или меню из обычного горизонтального превращается в выпадающий список. Как сделать адаптивный дизайн для своего сайта. В зависимости от вашего бюджета и знаний CSS/HTML, вариантов может быть несколько. Заказать адаптивную верстку у фрилансера. Самый правильный, на мой взгляд, вариант, и он же самый непопулярный. Потому что удовольствие не из дешевых. И все же, если позволяют средства, и нет желания разбираться в тонкостях верстки, лучше найти студию или фрилансера, который адаптирует ваш шаблон под мобильные устройства или сделает новый. А как проверить его работу на устройствах с разными разрешениями, вы уже знаете — responsinator.com в помощь. Найти готовый дизайн. В последнее время практически все дизайнеры стараются адаптировать свои шаблоны под мобильные устройства. Можно поискать готовый дизайн, например, тут: www.templatemonster.com — одна из самых популярных коллекций платных шаблонов для разных CMS и просто HTML-сайтов. www.templatemo.com — множество бесплатных вариантов современного дизайна. Этот вариант подойдет тем, кто не гонится за эксклюзивным дизайном или способен внести свои правки в код, так, чтобы сделать шаблон уникальным. Использовать фреймворки. Фреймворк (framework) — можно сказать, каркас шаблона, его основные файлы и сетка блоков. Дизайнеры любят их за удобство в работе и экономию времени, потому что готовая «рыба» шаблона позволяет не тратить время на рутину. Если вы умеете работать с фреймворками, использовать их для создания адаптивного дизайна — отличное решение. Огромный список адаптивных фреймворков на любой вкус вы найдете на Хабре. Но большинство из них достаточно сложные в использовании и тяжелые в объеме. Поэтому тем, кто любит минимализм я рекомендую другой список легких адаптивных фреймворков от Beloweb.ru. Заодно присмотритесь к блогу, здесь очень много полезных «вкусняшек» для дизайнеров и верстальщиков. Сделать верстку самому. Этот способ для тех, кто не ищет легких путей и хочет разобраться во всем самостоятельно. По сути, чтобы сделать свой шаблон адаптивным, нужно использовать две вещи: Который определяет тип устройства, с которого посетитель зашел на сайт и установит верную ширину экрана. Просто скопируйте этот код в head своего сайта. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Благодаря которому мы можем прописать разные стили для одних и тех же блоков в своем css-файле. Выглядит это примерно так: В этом примере блок #left имеет ширину 600 пикселей и будет располагаться слева от блока #right шириной 400 пикселей. Но если разрешение монитора меньше 1010 пикселей, мы убираем обтекание у обоих блоков и растягиваем их на 98% ширины экрана. И вот таким образом нужно прописать правила под следующие размеры экранов: 320px дляiPhone 3-5 в вертикальном положении 480px для iPhone 3-4 в горизонтальном положении 568px для iPhone 5 в горизонтальном положении 384px для смартфона в вертикальном положении 600px для смартфона в горизонтальном положении 768px для iPad в горизонтальном положении 1024px для iPad в вертикальном положении. Полный список разрешений можно найти на responsinator.com или в отчете Яндекс.Метрики для вашего сайта (раздел Технологии/Разрешения дисплеев). Одним словом, тем, кто знаком с версткой сайтов, не трудно будет разобраться в этом вопросе. Вы знаете, я редко даю ссылки на платные курсы (потому что никогда не рекомендую то, чем сама никогда не пользовалась), но это действительно лучший обучающий материал по верстке из всех, которые мне доводилось смотреть. Именно благодаря Михаилу шаблон моего блога теперь не только адаптирован под разные разрешения экрана, он стал легче предыдущего варианта и лучше оптимизирован под поисковые системы. Кстати, если читаете статью с мобильного, напишите, все ли на месте, все ли удобно? А на сегодня все. Если у вас остались вопросы или дополнения — добро пожаловать в комментарии, они как обычно открыты для всех. Хороший намек…:-) и рекомендованный сервис. Понятно конечно, что нужен адаптированный под мобильные устройства дизайн, но как вы правильно заметили стоит он копеечку… надо думать. Судя по тому что у вас дизайн изменился, вы уже приобрели опыт. Без особого раскрытия тайн, не подскажете в каких ценовых пределах это удовольствие будет стоить? Кай, я бы и рада предложить свою помощь, но боюсь, мне будет трудно адаптировать ваш шаблон. Слишком хитрая у него структура. Как вариант, можно попробовать сделать свой дизайн на основе шаблона по умолчанию, они у WP сейчас все адаптивные. Да, шаблон у меня сложноватый. Но я его планирую менять попозже. Уже надо… Где нибудь на фралансе за адаптацию вашего дизайна возьмут 3000-4000р. Выгоднее будет поменять шаблон на адаптивный, благо их готовых уже много. О, спасибо за ценовую прикидку, в принципе нормально… Привет! Если хочешь сохранить существующий шаблон, то естть плагин для ВП, который создает мобильную версию сайта, это не совсем адаптивность, но все же. А так есть масса отличный адаптивных шаблонов и абсолютно бесплатных. Если интересно стукнись мне, покажу где взять))) Хорошо, постучусь, в принципе как временный вариант было бы самое ТО!:-)

     

    Предыдущая страница   Следущая страница




Рейтинг@Mail.ru