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

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

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

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

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

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


Примеры работ по адаптации сайтов для мобильных устройств На данный момент я адаптировал уже больше 388 сайтов (начинал с 11 своих).
• englishask.ru - адаптивная "резиновая" верстка, разработка кнопок и скриптов.
• net27.ru - переделан сайт и логотипы магазина спутниковой связи.
• sh71.ru - сделана мобильная версия магазина интерьеров.
• renault-club.ru - сложная верстка форума на VBulletin.
• uc-prioritet.ru - переделал учебный центр Приоритет.
• naturaliste.ru - работа для энтомологического магазина.
• pokaz.me - кроме адаптации сайта и правок, разрабатывал отдельную версию движка на PHP и текстовых базах.
• tranzitplus.com - адаптация услуг по грузоперевозкам.
• domstroy-psk.ru - работа с сайтом производственно-строительной компании.
• dosaaf-a17.ru - переделка автошколы ДОСААФ под мобильные устройства.
• medserv.ru - адаптация для телефонов КонверсМедПроект.
• zdanie.info - площадка для аренды, сложные слайдеры, карта и меню.
• sina-trade.ru - работа с сайтом оборудования для обработки зерна.
• soling.md - мобильная версия спецодежды в Молдове.
• hteplokey.ru - адаптация сайта, слайдеров, меню и форм заказа.
• intalika.ru - мобильная верстка для компании «Инталика» с двойным меню.
• teh-52.ru - адаптивная верстка по примерам заказчика.
• lipok.ru - адаптация сайта «Липецкаой обувной компании» (ЛОК) и меню в административный раздел.
• pokraska-trub.ru - верстка для рвысотной покраски и ремонта.
• ikinoitv.ru - проведена очень большая работа по сайту. Верстка переведена на полноценную адаптивную, удален старый скрипт. Оптимизированы видео по высоте, добавлен lazy load и оптимизированы картинки. Скорость загрузки увеличена с 18 до 75. Также, разработано прилипающее мобильное меню с подпунктами.
• cks-33.ru - адаптивная верстка центра кровельных и фасадных систем. С довольно сложной версткой главной страницы.
• rini.ru - работа для магазина картриджей. Немного осовременили существующий шаблон.
• batuthappyhop.ru - мобильная версия для магазина игрушек. Со сложной шапкой и двойным меню.
• kitlook.net - разработан предзагрузчик по примеру существовавшего скрипта, сделана верстка адаптивных шаблонов для всех страниц.
• liftcenter.ru - CSS стили, скрипты и меню для компании Liftcenter.
• bpnf.ru - с библиотекой «Золотая рамка» теперь можно работать даже с телеона!
• ka-comfort.ru - агентство домашнего персонала. Табличная верстка (трехколоночный макет) теперь отлично смотрится на мобильных устройствах.
• marshruty.ru - переделано все сообщество вместе с субдоменами.
• koreashop.ru - верстка для магазина запчастей и всех подразделов. Отдельно сделан скрипт корзины с получением данных из фрейма.
• meteostar.ru - на старом сайте была сделана версия для широких экранов и для мобильных устройств.
• gooool.org - работа без доступа к сайту футбольных трансляций. И немного сложнее из-за трех колонок для контента.
• ustanovka.ru - большой сайт по установке со сложными интересными меню. Много работы и хороший результат. Удалось адаптировать все, что только было можно.
• stihmarket.ru - правки скрипта меню для нескольких сайтов. Также, я перенес адаптивную версию на этот сайт сдругого адаптивного шаблона.
• zebra.credit - так как у сайта полностью поменялся шаблон, была сделана новая "тянущаяся" верстка для мобильных устройств.
• watchcopy.su - работа для иностранного сайта с часами.
• znakmastera.ru - очень обширная работа. Переделал полностью и форму заказов, убрал вирусы и старую версию стилей. Поправил скрипты.
• platcdarm.ru - отзывчивая верстка для магазина сборных моделей.
• watchcopy.pw - респонсив верстка для старого табличного сайта из трех колонок.
• 4cheat.ru - сложная верстка таблиц для форума разработчиков, геймеров и вебмастеров. И создание светлой версии шаблона.
• dorstr.com - мобильная версия для группы компаний "Дорстройтехнология".
• chakmaks.ru - CSS верстка для магазина плитки, мозаики и декоров из натурального камня.
• mozik.ru - самый большой шоу-рум мозаики в Москве.
• test3.php - большая интересная работа с кучей доработок. Собственными силами разработан шаблон как у сайта Тесла! Главная его особенность - постраничное листание и подстраивающаяся по цвету навигация.
• altius.ru - мобильная версия для систем управления строительством.
• polimerk.ru - переделал ПолимерКомплекс для мобильных устройств.
• mgp-nsk.ru - мобильные стили для магазина путевок с Кворка.
• nogtishop.ru - правки адаптивной верстки для заказа с Кворка.
• alata.by - адаптивная версия для лингвистического центра - для всех 3 языков.
• ak-store.ru - верстка для мобильных устройств под ключ.
• fsk-market.ru - работа для официального дистрибьютора инструмента.
• gardemarket.ru - тоже адаптирован.
• husmarket.ru - теперь и на мобильных устроствах!
• makeitmagic.ru - красивый сайт, шаблон которого выглядел как адаптивный, но таким не являлся. Я это исправил. А сейчас верстка обнолвена по пожеланиям заказчика.
• sindom.ru - мобильная верстка для сайта и поддоменов. Делал на тестовом шаблоне.
• litenergo.ru - кроме адаптации - еще одно сложное меню с дополнительными кнопками звонка, каталога, брендов и корзины. Для последней показывается количество товаров внутри.
• abdc.spb.ru - верстка по примеру от заказчика, работа с версиями на разных языках. Также создан каталог статей и страницы статей.
• informing.ru - адаптиная версия, увеличение шрифта и добавление мобильной рекламы от Гугл.
• eicom.ru - сделан дизайн и мобильное меню. Главная страница упрощена по желанию заказчика.
• visa4you.ru - оформить визу теперь можно и с телефона.
• prokat-avto-sochi.ru - кроме мобильной версии, добавлена дополнительная плавающая панель с телефоном и кнопка Вверх.
• components.ru - сайт со сложным меню и каталогом. Переделан с учетом пожеланий заказчика.
• rusinsects.com - старый сайт полностью переверстан на HTML5 с сохранением внешнего вида и добавлением резиновой верстки.
• ltsr.ru - адаптив для Лентехстром.
• oootis.com - мобильная версия сайта ремонта и обслуживания контейнеров.
• plkcargo.ru - правки и верстка для Пулковской Логистической Компании.
• innomsk.ru - резиновая адаптивная верстка сайта ГК Инновация.
• rostok-pitomnik.ru - магазин саженцев. Адаптирован по PDF макету - с учетом адаптивной верстки.
• saidingpro.ru - магазин сайдинга теперь отлично работает на смартфонах и планшетах.
• керомаг.рф - адаптация шаблона, схожего с Керомаг.ру для мобильных устройств. Переделан для нового сайта.
• omgisperfect.com - довольно сложный проект. Замена мобильного шаблона на адаптивный - с сохранением старого внешнего вида. работал как со стилями, так и со скриптами.
• alteprint.ru - мобильная версия для большого сайта по логотипам и корпоративным подаркам.
• plasmacentre.ru - адаптивная верстка для научно-производственной фирмы. Сделано мобильное разворачивающееся меню без дублей.
• tambovbeton.ru - адаптирован сайт, доработаны скрипты и таблицы - для правильной работы на телефонах.
• stranarazuma.ru - сверстан мобильный шаблон для магазина развивающих игр.
• ekogrunty.ru - магазин грунтов. Как обычно, добавил адаптивные стили и сделал мобильное меню.
• bars-security.ru - охранная фирма теперь доступна и с мобильного телефона.
• bagforlife.ru - адаптивная верстка магазина. Создано работающее мобильное меню с фильтрами и работающей корзиной.
• stepland.ru - магазин сумок со сложной шапкой и фильтрами - адаптировал под телефоны и планшеты.
• dusterclubs.ru - Табличный сайт. Был доработан под мобильные устройства, но форум пока решили оставить прежним.
• kid.ru - адаптирован большой сайт и форум (на таблицах).
• veronica-lake.ru - верстка и создание меню и слайдера.
• luminarc-group.ru - мобильная версия для большого магазина.
• overclockers.ru - CSS для сайта уже готов, но будет запущен позже - вместе с форумом.
• spb.dvernoylider.ru - межкомнатные двери. Довольно старая работа, но стараюсь поддерживать в актуальном состоянии. Чего и всем желаю!
• s-m-r.ru - когда-то делал адаптивную верстку, но теперь там совершенно другой сайт.
• veronica-lake.ru - сделана верстка для мобильных устройств, переделаны скрипты меню и добавлен слайдер баннеров на мобильных устройствах.
• keromag.ru - адаптивная верстка, фиксированная шапка и многоуровневое мобильное меню.
• rokos-okna.ru - стильный мобильный дизайн и небольшие правки для лучшего отображения на Айпадах.
• zov-piter.ru - практически полностью сохранил оригинальный дизайн на мобильных устройствах.
• watchcopy.me - работа с магазином часов. Возможно, шаблон позже будет перенесен на другой домен.
• strahovka36.ru - переделал для телефонов и планшетов сайт по автострахованию.
• apelsin-tour.com - сайт турфирмы, для которого пришлось переделывать партнерские скрипты на всех страницах. Они не были предназначены для мобильных телефонов. Да и заменить их было никак нельзя.
• innomsk.ru - резиновый шаблон доработан до полноценного адаптивного. Добавлено всплывающее меню.
• probadge.ru - по пожеланию заказчика сделана шапка для мобильных устройств и два разных всплывающих меню.
• vivasanglobal.ru - магазин перевден с мобильного шаблона на нормальную адаптивную верстку.
• profstaldom.ru - еще один проект с полюбившимся заказчикам плавающим меню. Также, использован мой новый скрипт открытия меню по клику на "бутерброд".
• mesto-mebeli.ru - Сложный сайт с необычной шапкой, где удалось объединить несколько верхних меню в одно адаптивное (без дублей).
• bankstoday.net - кроме прочего, разработано два абсолютно разных многоуровневых мобильных меню.
• fly-line.ru - еще одна работа с Битриксом. По желанию заказчика сделано красивое плавающее меню - плавающей плашкой с кнопками.
• m143.ru - адаптивная верстка для магазина масштабных моделей. Применил новое плавающее меню с эффектом затемнения.
• bestcareprost.ru - несколько сайтов с походим шаблоном на HTML. Были переделаны всплывающие окна и отключена прокрутка в них.
• obivkamebely.ru - сделана отличная мобильная версия, сохраняющая все особенности оригинала.
• dustershop77.ru - верстка для автомобильного сайта о Рено Дастер. Очень интересно, когда CSS можно заменить картинки так, чтобы сайт стал отзывчивым, но разницы никто не заметил.
• timecity.by - стильный большой сайт про часы. Также, добавлена кнопка перехода на полную версию.
• iveco.su/forum/ - адаптировал табличный форум под нормальную работу на мобильных устройствах. Наличие колонок - по пожеланию заказчика.
• luxeled.ru - большая работа. Сделана адаптивная верстка сайта, полностью перенесен администранивный раздел, переписаны пути для всех картинок и оптимизирована загрузка по Гуглу.
• long-lash.ru - магазин косметики (и все его зеркала) теперь отлично отображаются на всех разрешениях экрана!
• aquadiamond.ru - адаптивная верстка и рекомендации по скорости загрузки.
• argo-geser.ru - интернет-магазин «Арго» теперь и на мобильных устройствах. Разработано многоуровневое меню, настроены редиректы в URL.
• swisstime.by - адаптировано 3 похожих шаблона для швейцарских часов.
• careprost-shop.ru - разработан скрипт разворачивания меню. По желанию заказчика - полностью развернутая шапка без «бутерброда».
• magazinpechi.ru - полностью резиновая верстка для фирменного магазина Ермак!
• avtobot.by - разработаны меню, кнопки и вид главной страницы на смартфонах и планшетах.
• starina-mebel.ru - осветление картинок шаблона и адаптивная верстка для сайта мебели ручной работы.
• new-shpon.ru - работа с сайтом компании «Белый ясень».
• rmh24.ru - разработана и поддерживается мобильная версия сайта по ремонту холодильников. Когда обращаются за правками и не забрасывают сайт - это особо приятно!
• seone.ru - кроме остальной работы, разработана мобильная шапка без дублирования контента.
• faradey.ru - верстка для «НТЦ Фарадей».
• gdenasnet.ru - адаптивная верстка интернет-магазина путевок.
• volgastroy.ru - База недвижимости городов России доступна и на мобильных устройствах!
• окна-строймонтаж.рф - мобильная версия для окон Rehau.
• malinka-fashion.ru - аеределан под мобильные устройства, полностью "резиновый" шаблон.
• stroy-avenue.ru - Строй-Авеню теперь красиво выглядит на мобильных устройствах.
• moscowkredit.ru - разработано три разворачивающихся меню, проработан вопрос асинхронной загрузки виджетов ВК
• heatway.ru - переделан сайт внутрипольных конвекторов.
• carsrent.by - аренда авто в Минске. Дополнительно увеличены показатели PageSpeed Insights.
• krmagazine.ru - информационный онлайн журнал для продавцов и покупателей.
• moipoisk.com - новая жизнь старого сайта - стартовой страницы для пенсионеров.
• longboardmaster.ru - верстка по PNG макетам под разные разрешения. Сложная большая работа с красивым сайтом.
• mrdiamond.ru - интернет-магазин увелирных украшений.
• zebra.credit - Кредозебрик теперь встречает гостей с любых устройств!
• carloson.ru - внесены правки в основной шаблон, чтобы он умещался в 750px. Работа - по ТЗ для отдельной мобильной версии на субдомене.
• goldenbeach.su - отдых в Феодосии. Красивый сайт про отели полностью избавлен от полосы прокрутки!
• jazzi-pool.ru - бассейны и Спа теперь удобно просматривать на мобильном. По желанию заказчика добавлена кнопка перехода с мобильной версии сайта на полную.
• vashinstrument.com - адаптивная верстка для поставщика ручного инструмента и оборудования. Сайт и личный кабинет.
• upackcenter.ru - адаптация интернет-магазина под мобильные устройства.
• skhotel.ru - адаптация сайта отеля, который сделан на чистом HTML и таблицах.
• 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 - переделка сайта на самописном движке.


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

• harmonica-tula.ru - верстка шаблона для страницы баянов и лендиг акции.
• perevod-piter.spb.ru - новая шапка на мобильных устройствах.
• roossa.ru - правки и создание меню.
• bazarmatrasov.ru - правка рамок, шрифтов, кнопок, подсветки ссылок, чекбоксов и т.д.
• sanberg.ru - правки телефонов, корзины, шрифтов и прочего.
• q38.ru - дистанционная работа для ИрГУПС.
• landolt.ru - верстка каталога из картинки с текстом, другие правки.
• shop.aquazon.ru - правки товаров.
• plus-center.ru - вывод меню на страницу Сервисов, смена оглавления, отзывы, уменьшение количества и смена шрифтов.
• broshka.net - правка стилей, различных кнопок и меню. Очень частая просьба - сделать товары в две колонки.
• vseothody.ru - верстка шапки и части страницы.
• ulanaspb.ru - правки мобильного меню и шапки сайта для соответствия рекомендациям Гугла, правка таблиц; добавление интерактивных элементов.
• zaimax.ru - небольшие рекомендации по скорости для Гугл ПейджСпид.
• racio.me - приведение сайта в полный порядок, правки практически всех блоков.
• m-service.ru - правки мобильной версии и приведение ее в полный порядок.
• недорогое-остекление-балконов.tk - адаптивная верстка лендинга про недорогие балконы.
• projects.apkit.ru - правки лендинга под планшеты и мобильные устройства.
• m-strop.by - правки ошибок мобильной версии, заказ через Кворк, верстка шаблона нескольких блоков.
• kalina.by - доработка меню и шаблонов, консультация по скорости и правильному отображению в мессенджерах.
• franciya.ru - перевод сайта и блога на HTTPS протокол. Устранение ошибок.
• kontur-gr.ru - исправление ошибок мобильной версии.
• androdoctor.ru - устранение ошибок калидатора и горизонтальной прокрутки.
• bhmpro.ru - правки адаптивной версии.
• 3kryla.ru - новая мобильная шапка искрипт спойлера. Адаптив переведен в полностью «резиновый».
• tehdver.ru - правки CSS, создание новых меню и шапки.
• akb12v.ru - небольшие правки стилей шаблона и шапки.
• talisiya-tula.ru - сделал адаптивное меню, и шапкау, поправил шаблон.
• francearoundme.com - перенес сайт и блог на HTTPS.
• ebomb.biz - правки верстки, мобильного меню и добавление новых блоков в шаблон.
• zavodilov.ru - переделана шапка в адаптивной версии - с учетом пожеланий заказчика.
• lila-shop.ua - полностью сверстана новая шапка для мобильных телефонов, поправлены ошибки.
• lenaholst.ru - полностью переверстан самодельный сайт художницы на чистом HTML.
• deva-maria.com - закончена верстка сайта, которую исполнитель бросил из-за сложности.
• dhprime.ru - поправил адаптивную верстку лендинга.
• geomash.ru - немного помог по вопросам верстки.
• fl59.kynoty.ru - срочная переделка адаптивного шаблона.
• доставка-шаров.рф - исправлены ошибки верстки, изменена шапка.
• i.dentalmir.ru - правка блоков и анимации для стоматологии.
• thstore.ru - правка верстки купонов, корзины и формы заказа.
• logframehouse.com - правки по IE и слайдеру на главной странице.
• truby.artelm.ru - адаптирован интересный лендинг по разводке и замена труб в квартире.
• niipigrad.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Р за сайт (и она не может быть больше, но есть скидки. Например, скидка 50% на простые сайты).

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

Да, с меня - любая скидка на 2 часть оплаты, если не успеваю по срокам.

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

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

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

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

Тема с отзывами на SearchEngines.guru
Мой Кворк: kwork.ru/user/dikij
freelance.ru/dikij_com
www.fl.ru/users/dikij_com
freelansim.ru/freelancers/dikij

Заказать


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


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

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

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

• Где можно скачать пример адаптивного шаблона?
Адаптивный шаблон на HTML 5 со скриптом меню, адаптивный шаблон как у Тесла.

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

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

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

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

@media screen and (max-width: 960px) {
img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}
table, span, div, ins {max-width: 100% !important;}
}
@media screen and (max-width: 775px) {
}
@media screen and (max-width: 500px) {
td, th {word-wrap: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}

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

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

• Почему при max-width: 100% иногда появляется прокрутка?
Дело в том, что ширина блока складывается из внутренних отступов, внешних и рамки. К чему и добавляется наше width: 100%. И если внешний отступ margin легко убрать стилями же, то чтобы не учитывался внутренний, лучше использовать box-sizing: border-box.

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

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

• Как получить 100% по Page Speed за изображения?
Использовать грамотное сжатие и свои изображения для каждого разрешения. Ну и не уменьшать размер картинки стилями. Но есть и один трюк. Но его лучше использовать только для иконок.

• Как еще увеличить скорость загрузки сайта и баллы PageSpeed?
Например, использовать асинхронную загрузку комментариев Вконтакте и других скриптов. Практически все виджеты и рекламые сети позволяют использовать для их вызова асинхронный код.
А иногда можно просто перенести вызов стилей и скриптов в самый низ страницы, как это рекомендуется Гуглом. Хотя, 90% скриптов тут перестают работать и требуют доработки.

• Можно ли переделать сайт с табличной версткой?
Есть способ сделать табицы адаптивными только CSS стилями или адаптировать красиво при помощи прокрутки. Это зависит от сложности данных внутри. Все способы с примерами.
Но иногда c таблицами возникают проблемы и глюки, которые обязательно нужно учитывать.

• Как сделать мобильное меню из любого блока?
Я использую свой простой скрипт, позволяющий не только быстро добавить меню, но и открывать его свайпом (движением пальца по экрану) как в приложении ВК. Также, есть более старый вариант на Jquery.

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

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

• Что делать, если реклама выходит за край блока или странно обрезается?
Запрещаем AdSense показываться на всю ширину экрана на мобильных устройствах.

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

• Что делать, если сайт «прыгает» при загрузке?
Возможно, виновата просто полоса прокрутки.

• Как адаптировать видео к мобильным устройствам?
Адаптация видео и ускорение его по google pagespeed.

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

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