D.iK.iJ
 
Ссылки Поиск Написать В избранное NO

Адаптация сайтов для мобильных устройств (телефонов, смартфонов, планшетов)

D.iK.iJ          Если вы нашли эту страницу, значит вы уже что-то знаете про адаптивный дизайн. Я не буду долго рассказывать вам о его преимуществах, не буду даже показывать красочные графики про увеличение конверсии на 146%. Откройте свой сайт в телефоне и все сразу станет понятно.
         Кстати, примерно 70% посетителей просто не будут пользоваться не адаптированным под мобильные устройства сайтом, а конверсия может упасть на 80 - 100%.


         • Откуда столько паники?
          С 21 апреля компания Google начала использовать адаптированность сайта под мобильные устройства (mobile-friendliness) как критерий для ранжирования в мобильной выдаче. Адаптивные сайты получают более высокие места в поиске и специальные пометки.
          Яндекс теперь тоже проверяет и учитывает мобильность сайта.

         • Как проверить свой сайт на адаптивность?
          • Инструмент тестирования - получите отчет от Гугла и узнайте, удобно ли работать с вашим сайтом на мобильных устройствах и компьютерах.
          • PageSpeed Insights - проверить скорость загрузки и баллы удобства сайта.
          • Проверка удобства просмотра на мобильных устройствах - еще показывает запрещенные для сканирования файлы.
          Я обычно использую браузер Гугл Хром и просто уменьшаю ширину окна. Также, в нем вы можете нажать [Правую кнопку мыши] => [Просмотр кода элемента] => [Иконка телефона]. Появится интерфейс с выбором размера окна и устройства.
          Учтите только, что при любом изменении размера (или при выборе другого устройства) часто важна перезагрузка страницы или отключение рекламы.


Закажите адаптацию сайта


Примеры работ по адаптации сайтов для мобильных устройств           На данный момент я адаптировал уже больше 127 сайтов (начинал с 11 своих):
          • infotexcenter.ru - обслуживание оргтехники и принтеров - теперь и на мобильном.
          • palantinhotel.ru - адаптация под мобильные устройства сайта отеля бизнесс-класса «Палантин».
          • santechpomosch.ru - работа для сервисной компании «СанТехПомощь».
          • megavarm.ru - адаптивный дизайн сайта Мегавар - про конденсаторные установки.
          • dtp-help36.ru - адаптация для Аварийных комиссаров в Воронеже.
          • creditura.ru - большой проект по кредитам теперь тоже мобилен.
          • familycircle.ru - большое кадровое агентство на чистом ХТМЛ. Дополнительно проконсультировал по дальнейшей работе со стилями и переносом блоков.
          • asgard-mebel.ru - мебельный магазин.
          • suhin.ru - работа для автоцентра с правками от заказчика.
          • a-radio.ru - сайт про радиосвязь - теперь тоже мобильный!
          • jemo.ru - адаптивная верстка для автомобильного портала.
          • mlady.net - очень большой сайт по гороскопам и магии.
          • zpuhouse.com - работа для торгового дома. В качесте меню сделана плавающая панель с кнопками звонка и поиска.
          • defencer.ru - магазин на очень старом движке, в который было внесено несколько правок.
          • crimea-taxi.ru - работа по адаптивному дизайну для сайта iRenT - прокат и трансфер такси.
          • autoinfo24.ru - автомобильная справочная служба. Мобильая адаптация сайта с большим количеством таблиц и красивых фоновых рамок фиксированного размера.
          • ab-glushkov.ru - aрхитектурное бюро Дмитрия Глушкова. С правками по дизайну от заказчика.
          • trekhrechie.ru - мобильный дизайн для сайта рыболовной базы Трёхречье.
          • rh2.ru - сайт с форумом из серии по скидке. Добавлено всплывающее окно подпики.
          • 20art.ru - еще одна галерея картин и довольно необычный движок. Добавлены адаптивные стили для форума.
          • art-happy.ru - почти 200 страниц на полном HTML. От всех отделил файлы хедера и футера, заменил лайтбокс, поправил ошибки, переверстал галерею, добавил стили для картинок.
          • zdanija.ru - адаптирован сайт, форум и галерея.
          • prom23.ru - портал по продаже строительного оборудования.
          • pozdrav.ru - редкий заказчик с полным пониманием верстки и положения блоков. Делел дизайн по готовому эскизу.
          • bentowok.ru - сдалал аж две адаптивных версии. Первую - для быстрой индексации поисковиками. И более ложную - с плавающим меню и корзиной.
          • tushkan.club - адаптация под мобильные устройства для онлайн-кинотеатра. Сделано большое количество разных скриптов для меню и просмотра постеров.
          • zdanija.ru - переделан портал, обновлены картинки и CSS стили форума и галереи. Все это адаптировал за ту же цену, да. К сожалению, пришлось отказаться от полной адаптации форума - в пользу частичной и горизонтальной прокрутки таблиц.
          • edinorog.com.ua - долгий заказ, для которого реализована новая кнопка перехода на полную версию, адаптивное меню и разворачиваемые фильтры товаров.
          • fdauto.ru - магазин автомобильных запчастей. По просьбе заказчика полностью переработана страница оплаты, добавлена плавающая панель с корзиной.
          • mosarchinform.ru - из большого заказа. Поправлено несколько моментов, адаптировано 4 разных шаблона.
          • stroi-tk.ru - сайт из таблиц, на котором была проблема с их адаптацией (не работало td display: block) решившаяся сменой доктайпа.
          • eroticfactory.ru - мне абсолютно все равно - для чего разрабатывать адаптивный дизайн. Иногда - это магазины для взрoслых. К сожалению, большую часть я не могу добавить в портфолио.
          • kszn.ru - из большого заказа - со скидкой за количество сайтов.
          • fdparts.ru - интересен плавающим верхним меню с корзиной и скриптом, меняющим порядок блоков с контентом в мобильной версии. Ну и телефоном (картинкой телефона) в шапке, по которому можно позвонить 1 кликом.
          • wm-painting.ru - проект про картины. Кроме адаптации, бесплатно поправил полную версию.
          • okomed.ru и субддомен en.okomed.ru - работа для офтальмологической клиники. С так полюбившимся мне выдвигающимся левым меню и плавающим (фиксированным) «бутербродом» или «гамбургером».
          • kuhnitrio-spb.ru - тоже адаптивный дизайн для практически лендинга. Но на самом деле - довольно большой симпатичный сайт по кухням. Попутно сделал шаблон «резиновым».
          • igroutka.net - доработка полной версии (JavaScript и CSS) и создание версии для мобильных устройств. Это уже второй адаптивный шаблон для нового домена - после переезда.
          • designstickers.ru - и designstickers.com.ua. Два похожих сайта по одной цене. Тут я впервые сделал верхнее адаптивное меню в виде «плашки» или «бара».
          • formproduction.ru - верстка для студии, создающей и продвигающей сайты. Работа временно? приостановлена.
          • danaja.ru - статейный сайт. Интересно, что вместо отдельного меню для категорий предпочли в «мобильном» дизайне поставить левую колонку выше контента.
          • roof-facade.com - и montazh.roof-facade.com. Адаптация двух похожих дизайнов на Битриксе. Домена и субдомена для строительной и торговой компании.
          • sklad-shin.ru - долго, много мелких деталей, но вышло симпатично. Как и в других проектах, делаю телефоны кликабельными - для быстрого заказа услуги или товара.
          • consolcontainers.ru - все про контейнеры. Теперь и на мобильном.
          • tr-pl.ru - симпатичная работа по полимерным трубам и фитингам.
          • contlease.ru - еще один вариант, где сайт при уменьшении ширины становится «резиновым».
          • taxiairport.ru - адаптивные слайдеры, «резиновый» шаболон при помощи CSS, подправлен под популярные iOS устройства.
          • tgv.ru - обещал подправить шаблон, но потом все снес и сделал дизайн с нуля. По аналогии владельцы сами переделали store.tgv.ru.
          • video-grup.ru - по желанию заказчика - полностью переделан под резиновую верстку.
          • ladnydom.ru - мобильная версия для поставщика строительных материалов.
          • bobfilm1.net - была переделана была как версия для обычных пользователей, так и для зарегистрированных.
          • babystart.com.ua - адаптивный дизайн для детского магазина.
          • profnastil.com - два сайта по профнастилу на одном шаблоне. Переделал оба по одной цене.
          • navigator-beton.ru - адаптивный дизайн для сайта по покупке бетона и субдомену с металлопрокатом.
          • megamagnat.ru - у сайта уже была мобильная версия. Она неплохо выглядела по Google PageSpeed Insights, но была не самой красивой для пользователей.
          • burnavod.ru - просто огромный портал для фирмы, которой я уже делал Автовыхлоп.ру. Мне даже сложно подсчитать количество реализованного в адаптивной версии.
          • dolyarisca.ru - тоже из большого заказа. Я был очень благодарен за терпение.
          • productorg.ru - продуктовый магазин. Дизайн - по пожеланию владельца. Довольно долгий заказ.
          • amurochka.ru - один из сайтов из большого заказа. Был полностью перерисован стилями для мобильных устройств.
          • open-deposit.ru - довольно простой шаблон для меня. Больше времени ушло на его проверку.
          • nobele.ru - кроме самой адаптации, удалось исправить некоторые серьезные ошибки в скриптах.
          • 1sofia.ru - аякс, анимация, абсолютное позиционирование, таблицы... не зря от работы над сайтом до меня уже отказывались.
          • dlyapohudeniya.ru - сайт на довольно простом шаблоне, который немного поправили для десктопа.
          • s-tab.ru - сложный местами табличный сайт, где было сделано целых 2 разных версии - для смартфонов и планшетов.
          • peminecraft.net - не очень сложный сайт по Майнкрафту. К концу адаптации было решено свернуть боковое меню под кнопку.
          • spanch-bob.org - еще однин симпатичный сайт про игры. Так как шаблон уже неплохо тянулся, сделал скидку на работу.
          • spasibovsem.ru - адаптивный дизайн по ТЗ для мобильной версии. Как обычно, в требованиях - кнопка переключения на полную версию.
          • homm3sod.ru - реализовал первое в своей практике выплывающее меню на jquery, которое закрывается по тапу на свободную область.
          • topdealers.ru - сайт для постоянного заказчика. Для него были разработаны стили для прокрутки таблиц с thead и tbody одновременно.
          • aliexpressblog.ru - еще один серьезный проект для постоянного заказчика.
          • nost.ru - пока в прощессе доработок владельцем. Продолжаю консультации и техподдержку. Именно тут впервые решили использовать несколько хаков для Оперы Мини.
          • radioradar.net - проведена работа не только над сайтом и его меню, но и над рекламой Директа. Улучшены показатели по тестам Гугла.
          • клуб-лада.рф - переделан и сайт и форум - за одну цену. Сверстаны адаптивные таблицы и меню.
          • florets.ru - большой сайт про растения. Было много работы по адаптации изображений.
          • vedmochka.net - портал с большой посещаемостью. Переделывался так, чтобы никто не заметили. Также, я сделал рекламу Яндекса адаптивной.
          • investtalk.ru - сайт по инвестициям. Кроме самой работы, были даны рекомендации по замене блоков Адсенса на адаптивныею.
          • petergid.ru - переделка табличного сайта под мобильные устройства. Только средствами CSS стилей.
          • grostal.ru - адаптивная верстка таблиц с товаром, слайдеров и всего остального оформления.
          • verevki.net - полностью на статичных HTML файлах.
          • magnato.ru - сайт переделан под мобильные устройства по акции на Серче.
          • pleervox.ru - удалось получить 100 / 100 Удобство для пользователей от Гугла и адаптировать все слайдеры и просмотрщики фото.
          • iney-cleaning.ru - сложный, но интересный в адаптации сайт.
          • v-screen.ru - сайт с правками и дизайном от клиента.
          • remo-blog.ru - блог, с большой скидкой.
          • tulasamovar.ru - сложный табличный сайт на Битриксе.
          • travoved.org - мой сайт на таблицах.
          • psymania.info - мой же сайт с 3 колонками.
          • autovyhlop.ru - переделка сайта на самописном движке.

Доработка адаптивных шаблонов, лендингов и прочее

          • pavira.de - один из самых долгих проектов. Шаблон, адаптированный только под 3 размера экранов мобильых устройств, был полностью переделан под любые разрешения. Переработаны поиск, меню, корзина и все разделы.
          • agava-m.ru - разработка меню, множество различных правок адаптивного шаблона.
          • evrazia-sushi.ru - практически лендинг. Был доработан по примеру другого сайта владельца.
          • politshturm.com - только правка ошибок шаблона, недорого. Ну и настройка кеширования, сжатия.
          • vseigru.net - где-то в середине работы оказалось, что заказчик пока решил оставить полную версию для всех устройств. Но я закончил работу, все проверил и сделал скидку 50%. Думаю, так честнее.
          • profprava.ru - помогаю с переносом шаблона, разбивкой на php файлы, настройкой robots.txt, .htaccess и прочего.
          • plastilinkin.ru - исправление заголовка, сортировки, карточек товаров и многого другого.
          • zaim-na-kartu.com - кто-то уже пытался сделать этот сайт мобильным, но не совсем справился.
          • smexoblog.ru - переделка небольшого лендинга со скидкой 100%.
          • lleo.me/dnevnik - добавлю в качестве шутки. Я вообще часто помогаю с различными правками для сайтов. Но это очень редко попадает в портфолио.
          • останкинская-телебашня.рф - лендинг, хоть и сложный. У него была полная версия и немного кривая - на 900px. Доработал, добавил версию для телефонов.


          Цена - 10 000Р за сайт (и она не может быть больше, но есть скидки).

          На вёрстку обычно уходит 12 часов работы.
          Но основное оформление начинает работать даже быстрее. Плюс, иногда нужно время на проверку и какие-то правки от вас. Это займет от 5 минут и до тех же 8 - 12 часов.

          Также, ко мне всегда можно обратиться внести правки, если всплывут какие-то «косяки» или недоработки.

          Обычно, адаптацию заказывают люди с темы на Серче и с форума Сапы. В принципе, я не проф. верстальщик, но все делаю ответственно и «как для себя».

          Дополнительно подскажу по Кешированию, GZIP, robots.txt и другим требованиям Гугла.

         • Как со мной связаться?
          Есть множество способов связи. Например, можете оставить комментарий к этой странице. Но удобнее всего - почта и Скайп (есть по ссылке). Также, стараюсь бесплатно помогать по вопросам адаптирования сайтов.

          Тема с отзывами на SearchEngines.guru
          freelance.ru/dikij_com
          www.fl.ru/users/dikij_com
          weblancer.net/users/dikij_com

ЗАКАЗАТЬ


Как самому адаптировать сайт для мобильных устройств?


          Здесь я отвечаю на множество частых вопросов.

         • Мобильная версия или адаптивный дизайн?
          Адаптивный дизайн - это ваш же сайт. Все остается прежним, просто при ширине экрана 700px и ниже сайт начинает подстраиваться под разрешение пользователя. Это обеспечивает дополнительный траффик и дополнительные бонусы от поисковых систем.
          Мобильная версия - это отдельный сайт (похожий на приложение) со своими страницами и логикой. Устаревший способ, который требует множество настроек для правильного перенаправления пользователя. Также, может вызывать недовольство посетителей с планшетами.

         • Какие CMS можно адаптировать?
          Абсолютно любые. В 99% добавляются только стили. Это позволяет даже «отключить» такой дизайн по первому требованию.

         • На каких разрешениях экранов работает адаптивная версия?
          Обычно я начинаю с 700px и прорабатываю уменьшение ширины экрана до 200 - 230px. Гугл же проверяет примерно на 250px. Также, это позволяет на многих смартфонах «повернуть телефон боком» и получить нормальную широкую версию сайта.

         • С чего начать адаптировать сайт для мобильных устройств?
          С поиска готового адаптивного шаблона для вашей CMS! Или готового плагина, раз уж решили все делать сами.
          Ну, или с добавления простого мета-тега в header, указывающего на наличие мобильной версии:

<meta name=viewport content="width=device-width, initial-scale=1">

         • В чем же заключается сама адаптация шаблона?
          Я всегда начинаю с такого вот CSS кода для ширины экрана в 775, 500 и 310 пикселей (обновлено):

@media screen and (max-width: 775px) {
img {max-width: 100% !important; height: auto !important;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 99% !important;}
table, span, div, ins {max-width: 100% !important;}

#vk_groups {margin: auto !important;}
#vk_groups iframe {max-width: 200% !important;}
}
@media screen and (max-width: 500px) {
body, html {-moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}
@media screen and (max-width: 310px) {
td {word-break: break-all;}
th {word-break: break-all;}
}

          Эта заготовка добавляет max-width для картинок, форм, кнопок и таблиц. А также, включает переносы. Ну а при 400px и меньше - принудительные переносы слов.
          Понятно, что это - только шаблон, который дальше нужно менять и дополнять.

         • Как переносить блоки и таблицы друг под друга?
          Просто используем для таблицы align="left" и (или) style="float: left;". Но лучше использовать в верстке div. C ними перенос блоков друг под друга работает адекватнее во всех браузерах.
          Также, можно использовать inline-block, тогда блоки будут вести себя (и переноситься) как картинки. Но это сработает только в новых браузерах.

         • Как использовать кеш браузера?
          Кэширование сайта через .htaccess. При этом мы отдаем браузеру специальные заголовки, чтобы он реже перезагружал с сайта наши фотографии и стили.

         • Как сократить HTML, Javascript и CSS файлы?
          Для этого нужно убрать все лишние пробелы и переносы строк. Но можно подключить и GZIP сжатие (zlib.output_compression). Иногда достаточно просто включить его на хостинге.

         • Можно ли переделать сайт с табличной версткой?
          Если есть доступ к файлам, таблицы можно разделить по колонкам физически и переносить друг под друга, применяя float: left в нужный момент.
          Но есть способ сделать табицы адаптивными только CSS стилями или адаптировать красиво при помощи прокрутки.

         • Как сделать кнопку «Полная версия сайта» для адаптивного дизайна?
          Кнопка перехода на полную версию сайта (2 версия) часто нужна, но для адаптивных сайтов способ ее создания, к сожалению, не очень очевиден.
          В этой заметке я привел готовый скрипт для вставки на сайт, работающий через PHP, JavaScript и указание width=1025 в мета теге viewport.

         • Как адаптировать рекламу?
          Для Гугла лучше всего получить адаптивные блоки. Единственное, чтобы получить большой прямоугольный блок, а не узкий горизонтальный, нужно в его коде заменить data-ad-format="auto" на data-ad-format="rectangle".
          Техподдержка Яндекса разрешила спользовать такой вот код для изменения количества рекламных объявлений.

         • Что делать при большом разрешении?
          Про это я уже писал отдельно в блоге: Адаптация сайтов для больших (широких) мониторов + Retina.

         • Что делать, если ничего не понятно?
          Вы можете написать мне и заказать адаптацию сайта. Или просто спросить совета.


      Продолжить читать про заработок, продвижение или: