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

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

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


Учтите только, что при любом изменении размера (или при выборе другого устройства) часто нужно обновить страницу, так как адаптивная реклама подстраивается под ширину контейнера только при загрузке.
Закажите адаптацию сайта

• 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
На вёрстку обычно уходит 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) и ниже сайт начинает подстраиваться под разрешение пользователя. Это обеспечивает дополнительный траффик и дополнительные бонусы от поисковых систем.
Мобильная версия - это отдельный сайт (похожий на приложение) со своими страницами и логикой. Устаревший способ, который требует множество настроек для правильного перенаправления пользователя и корректной индексации. Также, может вызывать недовольство посетителей с планшетами.

Абсолютно любые. В 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, тогда блоки будут вести себя (и переноситься) как картинки. Очень удобно применять для пунктов меню, выравнивая их по центру.

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

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

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

Использовать грамотное сжатие и свои изображения для каждого разрешения. Ну и не уменьшать размер картинки стилями. Но есть и один трюк. Но его лучше использовать только для иконок.

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

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

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

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

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

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

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

Возможно, виновата просто полоса прокрутки.

Адаптация видео и ускорение его по google pagespeed.

Вы можете написать мне и заказать адаптацию сайта. Или просто спросить совета.