Цифровые мобильные устройства современного человека. Что такое смартфон, планшет и электронные книги

В текущей статье речь пойдет о том, как осуществляется проверка мобильной версии сайта, её удобство, читабельность и правильность отображения.

Проверку вашего сайта на удобство отображения на мобильных устройствах можно проверить с помощью различных веб-сервисов. В частности, данный сервис от Google позволяет адекватно оценить грамотность вашей мобильной вёрстки.

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

Будь ваш сайт трижды удобен для десктопных платформ, нужно проверять качество мобильной вёрстки, иначе вы будете терять внушительную часть трафика (доля мобильных платформ в поиске стремительно растет с каждым годом), а значит - терять своих клиентов. Поэтому нужно адаптировать свои сайты для мобильных устройств и проверять корректность отображения сайтов в мобильных браузерах.

Проверяем качество мобильной вёрстки с помощью Google Chrome

Для разработчиков у Google есть отличный инструмент для имитации мобильных устройств. Этот инструмент встроен в браузер Google Chrome. Для доступа к нему нужно нажать F12 в браузере (перейти в режим разработчика) и нажать на значок смартфона:

Страница преобразуется в режим переключения устройства, где вы сможете выбрать одно из популярных мобильных устройств, тип сети (GPRS, 2G, 3G, 4G и т.д.), указать строгие параметры дисплея. Это позволяет имитировать работу сайта на конкретных мобильных девайсах. К числу доступных устройств относятся различные версии iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy и некоторых других популярных устройств.

Выбрав определенный девайс вы сможете проверить сайт на мобильном устройстве. Например, отображение главной страницы сайта "Нубекс" на iPad 3:

И на Samsung Galaxy S4:

Здесь вы сможете не только увидеть отображение сайта на том или ином девайсе, но и полноценно работать с сайтом, будто перед вами находится нужный гаджет. Несомненно, этот инструмент является просто незаменимым при разработке мобильной версии сайта, но как будет отображаться ваш сайт на реальных устройствах - нужно проверять на реальных устройствах. Особенно это важно, если нужно проверить отображение сайта в "родных" браузерах (Safari - для iPad/iPhone, IE - для Windows Phone и т.д.).

Приветствую всех. Интернет развивается колоссально быстрыми темпами и сегодня увидеть посещения на сайт с мобильных устройств и планшетом уже не диковинка, как это было раньше. Рынок мобильного интернета набирает очень быстрые темпы и поэтому создатели сайтов должны адаптировать свои сайты под данные устройства. Если посмотреть последние новости интернет индустрии, то можно увидеть, что все идет к тому, что мобильные устройства в ближайшие 5-10 лет заберут большую половину рынка под себя.

К чему я веду? А к тому, что необходимо адаптировать свои сайты и делать их удобными для просмотра на мобильных гаджетам.

Компания Google недавно заявила, что будет отмечать в сайты, которые дружественные к смартфонам и планшетам. Многие эксперты говорят, о том, что сайты которые не будут соответствовать данным критериям будут немного понижаться в выдаче и хуже . Так же есть предположения, что Google может сделать отдельную выдачу для мобильных сайтов.

То, что сайты будут помечаться информация 100%, остальная информация только предположения.

Мое мнение таково, что необходимо следовать всем стандартам и делать дружественным сайт к разного рода мобильным гаджетам. Мы свой сайт почти закончили адаптировать, осталось еще несколько штрихов и все будет готово. Хотя если посмотреть уже сейчас, то можно увидеть, что сайт хорошо отображается на смартфонах и планшетах. Пока я занимался этой работой, то выбрал для себя несколько онлайн сервисов с помощью которых можно проверить сайт на мобильных устройствах . Хочу ими поделится с вами.

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

Давайте перечислим все бесплатные сервисы и потом рассмотрим каждый по порядку:

1. Google Webmaster Tools ()

Выше я перечислил 5 бесплатных онлайн сервисов, которыми сам пользуюсь и Вам рекомендую. Их функционала полностью хватит для решения любых посталенных задач. Давайте по порядку разберем каждый из них.

1. Google Webmaster Tools (Mobile Friendly Test). Самый лучший сервис поскольку он разработан компанией Google. Хорош он тем, что можно посмотреть не только как отображается сайт на экране, а и получить все необходимые рекомендации для устранения ошибок и правильного отображения. Для того, что бы увидеть все ошибки необходимо перейти в Google Webmaster Tools , в пункте “Поисковый трафик” выбрать “Удобство просмотра на мобильных устройствах”. После перехода на страницу можно увидеть проблемы с удобством просмотра.

После просмотра ошибок можно перейти к тесту самого сайта. Переходим к тесту , вводим и получаем все рекомендации, которые необходимо выполнить. Для просмотра всех рекомендаций, справа нажимаем на кнопку «Далее » в пункте “Как сделать страницу удобной для мобильных” .

2. Теперь переходим к остальным сервисам с помощью которых можно проверить сайт на мобильных устройствах.

Все они довольно просты в применении, достаточно ввести в строку адрес сайта и получите все результаты сайта на различных устройствах. Давайте для примера рассмотрим сервис Responsinator . Переходим и вводим адрес и нажимаем «GO «, я ввожу loleknbolek . Результаты получены.

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

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

Многообразие представленных в салонах и магазинах телефонов сейчас настолько велико, что порой сложно сделать выбор. Даже в рамках небольшого бюджета можно выбрать достаточно функциональную модель, которая будет обладать всеми необходимыми качествами. Кому-то требуется быстрый доступ к мобильным приложениям, а кто-то предпочитает пользоваться лишь основными функциями телефона - звонками и текстовыми сообщениями. Попробуем разобраться, на какие параметры стоит обратить пристальное внимание, если вы собираетесь купить мобильный телефон. Телефон в современном мире - это не просто средство связи, он может стать действительно достойной заменой нетбуку или планшету.

Перечисляя самые важные функции мобильного устройства, нельзя не упомянуть возможность передавать сообщения SMS, MMS, EMS. Большую роль играет и поддержка интернет протокола, позволяющая выходить в сеть, самый распространённый из протоколов - GPRS. Передача данных посредством радио интерфейса Bluetooth, ИК-порта или Wi-Fi сейчас присутствует практически во всех телефонах. Наличие камеры с большим разрешением опционально, она даёт возможность делать фото и видеозаписи. Стоит обратить внимание еще на то, имеются ли у мобильного устройства дополнительные слоты расширения памяти, куда помещают флеш-карты. На них можно хранить более весомую по объему информацию, например, видео или музыку. Обязательная функция - присутствие полифонии и вибровызова. Следует также знать, какие мультимедийные форматы поддерживает телефон. Что касается технических характеристик, то тут, прежде всего, следует уделить внимание аккумулятору, времени его автономной работы без подзарядки. Затем стоит рассмотреть основу телефона, например, версию операционной системы или «прошивки».

В зависимости от выполняемых функций мобильные устройства делятся на несколько типов. Первый - мобильный телефон. Его главная функция - совершение голосовых вызовов. Работает такое устройство на базовой прошивке, которая выполняет определенные задачи. Второй вид - смартфон. Он отличается от мобильника тем, что работает под управлением операционной системы Symbian, Android или Windows Mobile Smartphone. Как правило, смартфоны обладают массой дополнительных функций, включая поддержку нескольких медиаплееров, интернет-сервисов. Третий вид гаджетов - карманный персональный компьютер. Он представляет собой миниатюрный аналог компьютера с упрощенными возможностями. В его основе лежит операционная система Windows Mobile, Palm OS или Embedded Linux. Четвертый вид мобильных устройств, получивший название коммуникатора, появился не так давно путем встраивания в КПК модуля мобильной связи.

1. Какие преимущества и недостатки вы видите в популярных сейчас операционных системах с технической точки зрения (распределение памяти, безопасность приложений)?

Максим Десятых , Redmadrobot
Несомненно, «дьявол» в мелочах, но последние пару лет популярные мобильные ОС становятся все больше похожи друг на друга. По этой причине выделить весомые преимущества сложно.

Из недостатков - необходимо продолжать работу над улучшением безопасности системы и возможностей, которые она предоставляет. Джейлбрейки для iOS, выходящие практически день в день с очередным обновлением платформы, и относительная легкость получения root-доступа в Android все еще остаются основными проблемами как для платформодержателей, так и для разработчиков приложений для них.

Для Android основным недостатком остается фрагментация версий ОС и устройств, а точнее долгий процесс вывода обновлений ОС вендорами. В связи с этим необходимо длительно поддерживать устаревшие версии ОС и часто не использовать нововведения сразу.

С iOS в этом плане всё гораздо лучше, но из-за закрытости платформы в целом и средств разработки в частности порой приходиться «бороться» с IDE вместо того, чтобы писать код. Да и сами средства разработки уступают своим Android-коллегам.

Александр Шибаев , e-Legion
Преимущество iOS в хорошо развитой экосистеме, которая сильнейшим образом «затягивает». Android пока только на пути к этому. В пользу Android играет открытость системы и возможность встроить ее хоть в чайник. Основная проблема - в скорости обновления ОС на устройствах. С безопасностью приложений с последним обновлением у Android должно наконец-таки стать все хорошо.

Вадим Митякин , Проектное бюро Eleven
Ограниченный модельный ряд дает возможность Apple превосходно оптимизировать свою операционную систему, в том числе алгоритмы управления оперативной памятью. Поэтому Apple достаточно оснастить свои iPhone всего одним гигабайтом оперативной памяти для получения такого же уровня производительности, как у Android c 3 гигабайтами. С другой стороны, Google постоянно совершенствует работу с Java Virtual Machine и со «сборщиками мусора».

IOS изначально позиционировалась как безопасная операционная система с акцентом на защиту пользовательских данных, хотя и регулярно компрометировалась (находились бэкдоры, недоработки, ошибки). Android же только в последних версиях залатал прорехи в безопасности.

Владимир Бараковский , Artics
Самая очевидная проблема - проблема вредоносного ПО на платформе Android. Операционная система iOS в этом плане защищена лучше: чтобы поймать вирус, нужна явная ошибка пользователя, а это уже человеческий фактор.

Денис Царев , Morizo
Основной недостаток текущих операционных систем - это фрагментированность платформ. Вендоры выпускают все новые и новые устройства, но пытаются сохранить поддержку старых и совместимость. Это накладывает большие требования на разработчиков, вынужденных поддерживать не только мириады разрешений экрана, но и несколько типов процессорных архитектур, «зоопарк» устройств, а так же 4–5 версий платформы, присутствующих на рынке. Ситуация напоминает эпоху веб-разработки лет 5 назад, когда обязательным требованием была поддержка IE6, а на рынке присутствовало несколько браузерных движков.

2. Какие тренды вы бы могли отметить в развитии мобильных операционных систем в последние годы? Как будет развиваться мобильная разработка?

Максим Десятых , Redmadrobot
Последний год Apple и Google сражаются за ускорение работы ОС и приложений и, как одно из следствий, за жизнь батарейки. Это отличная новость для пользователей, но создает определенные сложности для разработчиков. Однако с учетом тенденции к тому, что мобильные средства разработки будут догонять своих «старших братьев» и предоставлять все более удобные инструменты, эту временную сложность можно назвать скорее эволюционным порогом, чем препятствием.

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

Кроме того, мобильные ОС с каждым годом стремятся все больше и больше проникать в личную жизнь пользователей, максимально участвовать в ней, и работа в этом направлении будет только усиливаться.

В целом, мобильная разработка продолжит взрослеть. Вполне возможно, что этот год в Android-разработке можно будет назвать годом тестирования.

Александр Шибаев , e-Legion
Очевидные тренды - носимые устройства, дополненная и виртуальная реальность. А мобильная разработка будет постепенно развиваться в сторону усложнения, благо перетекание трафика с десктопа на мобайл происходит весьма активно.

Владимир Бараковский , Artics
Наблюдается явный тренд в сторону синхронизации мобильных и десктопных платформ. Особо отчетливо это видно по взаимодействию iOS и OS X от Apple. Последней удалось выстроить единую экосистему, в которой соседствуют ноутбуки, планшеты, смартфоны и даже часы: можно начать действие на одной платформе, продолжить его на другой, а закончить на третьей. Google, понимая это, тоже придет к подобному, хотя есть некоторые сложности из-за фрагментации рынка и множества игроков на нем.

3. Какие перспективы развития wear-платформ?

Александр Шибаев , e-Legion
Прекрасные. Проблема одна - аккумулятор. Жду революции именно в этом вопросе.

Вадим Митякин , Проектное бюро Eleven
Совершенно точно, что перспективы есть и, скорее всего, wear-платформы займут свое место, просто произойдет это не революционно, а эволюционно. Задачи две: нужен аналог дешевых устройств, таких же как простые Android-телефоны, и действительно полезные пользовательские сценарии использования.

Конечно, хотелось бы, чтобы рынок wear-платформ развивался быстро, но так, к сожалению, не будет.

Сергей Денисюк , MobileUp
Сейчас очевидны перспективы в трекинге здоровья. Фреймворки Apple (ResearchKit, CareKit, Health Kit) могут сыграть большую роль в развитии медицинской отрасли.

Владимир Бараковский , Artics
Носимая электроника появилась относительно недавно и в настоящий момент развивается бурными темпами. Пока что на рынке она представлена в основном smart-часами и фитнес-браслетами, но сюда стоит также отнести шлемы виртуальной и дополненной реальности и еще одно очень перспективное направление - умная ткань. Такая одежда способна анализировать состояние человека, например, давать советы спортсменам, следить за нагрузками, может даже вызвать скорую. Сценариев масса, уверен, разработчики придумают еще больше, но пока что все упирается в технологии и готовность для массового рынка, хотя первые ласточки уже вылетели из гнезда.

Денис Царев , Morizo
Носимые устройства - основной тренд будущего, но пока они в самом начале пути. И многие попытки разработки таких устройств все еще выглядят смешно, как те умные носки или унитаз, который постит в Твиттер каждый раз, когда смывают воду.

4. Какие факторы играют главную роль при выборе мобильной платформы, для которой будет разрабатываться приложение?

Максим Десятых , Redmadrobot
Если говорить о b2b-приложениях, то выбор чаще всего полностью зависит от унифицированных устройств, которые есть в наличии или доступны большой партией на рынке, и, соответственно, какая мобильная ОС предустановлена на этих устройствах.

Если мы говорим о b2c-приложениях, то включаются традиционные показатели, важность которых для каждого проекта может быть уникальна: целевая аудитория, количество пользователей, доступные ресурсы, способ монетизации, сроки предполагаемой окупаемости и возможные ограничения платформы.

Александр Шибаев , e-Legion
Целевая аудитория, стоимость разработки и поддержки, скорость обновления приложений в сторах (например, для A/B-тестирования).

Всеволод Иванов , Touch Instinct
Аудитория владельцев iOS-устройств более платежеспособна, конверсия покупок выше. Android-пользователи платить не любят, зато берут количеством. Еще надо учитывать географию: в дальних регионах России рассчитывать на обилие телефонов на iOS не стоит. Имеет смысл задуматься об Android-версии, если приложение должно использовать много датчиков, работать в фоне или собирать информацию о пользователях. В iOS таких возможностей меньше.

Вадим Митякин , Проектное бюро Eleven
Прежде всего, целевая аудитория и ее предпочтения.

Сергей Денисюк , MobileUp
Выбора почти нет. Есть всего две основные платформы, и нужно работать на обеих. Исключениями являются проекты, где есть явное разделение: если приложение для небогатых масс (например, региональные водители такси), тогда выбирают Android; если какой-то модный сервис - начинают с iOS, Android - после.

Денис Царев , Morizo
Основным фактором будет не выбор платформы, а выбор технологий, которые стремятся быть кроссплатформенными.

5. Повлияли ли облачные технологии на развитие мобильной разработки и если да, то каким образом?

Максим Десятых , Redmadrobot
Да, повлияли. Как в виде новых инструментов и сторонних решений, позволяющих быстро решать технически сложные бизнес-задачи, так и в виде нового взгляда на приложения, которые можно создать и предложить пользователю. Так, например, хранение музыки на устройствах становится все менее популярно после появления большого числа игроков на рынке потоковой передачи музыки.

Александр Шибаев , e-Legion
Пока не особенно заметно, но тренд набирает популярность, в том числе облачное тестирование приложений, для которого физически не обязательно иметь огромный парк устройств (например, Cloud Test Lab). Это позволяет небольшим разработчикам выпускать более качественные продукты. А вот на backend для приложений облачные технологии влияют уже сейчас (как облачный хостинг, так и SaaS-решения для интеграций с различными системами).

Сергей Денисюк , MobileUp
Это снизило порог вхождения в разработку клиент-серверных приложений. Но для тех, кто использует собственные сервера, это ничего не изменило.

6. В последнее время набирает популярность интернет вещей. Как вы оцениваете его развитие? Каким образом это влияет на технологии мобильной разработки и развитие операционных систем?

Сергей Денисюк , MobileUp
У этого направления большие перспективы, и сейчас все только начинается. По мнению McKinsey, к 2025 году вклад этой отрасли в экономику составит от 3,9 до 11,1 триллионов долларов. Сейчас активно применяется в транспортной отрасли, для анализа медицинских показателей, в системах промышленной безопасности и т.д. Приложения становятся центральным интерфейсом для взаимодействия человека с IoT, и параллельно развиваются направления machine learning, DSP, computer vision. В IoT уже создано достаточно много успешных проектов, и мы стараемся этому способствовать.

7. Какие факторы могут повлиять на изменение позиций на рынке мобильных операционных систем?

Максим Десятых , Redmadrobot
Трудно назвать хотя бы одну мобильную ОС, неважно, локальную или глобальную, которая смогла успешно конкурировать с двумя хэдлайнерами. Выводы можно сделать самые разнообразные, но скорее всего, это говорит о том, что на настоящий момент рынок сформирован, и пользователям нужны веские преимущества для выбора других платформ, которые никто предложить пока не в силах.

Кроме того, выбор мобильной ОС не стоит рассматривать отдельно от устройств, на которых они поставляются - ведь по сути пользователь выбирает не только мобильную ОС, но и конкретные технические и другие характеристики устройства. Основными факторами выбора являются технические характеристики, цена, дизайн, UI мобильной ОС или дополнительной оболочки, предоставляемой вендором, время жизни устройства, возможности интеграции со сторонними сервисами и устройствами.

Сергей Денисюк , MobileUp
На мой взгляд, существенные изменения могут быть связаны с выходом и массовым распространением принципиально новых интерфейсов. Например, для виртуальной реальности могут появиться свои новые ОС, которые станут лидерами. Примерно как в 2008 появилась iOS, затем Android. Они появились и стали популярными в связи с выходом принципиально нового класса устройств.

Денис Царев , Morizo
Рынок мобильных систем уже сформировался. Можно выделить три эпохи персональных компьютеров:
1. Большая корпорация продавала большие компьютеры большим компаниям (мейнфреймы IBM);
2. Средняя компания продавала компьютеры семьям со средним и высоким достатком;
3. Малые компании продают персональные мобильные устройства всем. Порог входа в самые дешевые смартфоны на Android - от 40 долларов.

Поэтому на рынке будет массовая аудитория на Android и аудитория со средне-высоким достатком на iOS. Вполне возможно, что скоро мы увидим Windows 10 в корпоративном сегменте.

Что с 21 апреля в поисковый алгоритм будет включен фактор дружественности сайта к мобильным устройствам. Повлияет это нововведение на основную выдачу Google или только на результаты мобильного поиска, будет видно позднее.

Оно мне надо?

Ответ на этот вопрос можно найти, проверив, как ваш сайт отображается в следующих сервисах тестирования Google:

Если вы видите подобное сообщение - статья для вас:

Адаптивный дизайн

В каких случаях подойдет? Если у вас сайт-визитка, информационный сайт, блог, одностраничник, интернет-магазин (с простой структурой, дизайном и/или небольшим ассортиментом), сайт услуг или форум.

Как реализовать?

Можно смело брать один из CSS-фреймворков (bootstrap , responsivegridsystem , Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.

Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:

1. прописать view-port;
2. подключить файлы фреймворка;
3. добавить в разметку классы сетки bootstrap.

Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:

@media screen and (max-width: 1280 px) { div .contentblock {width: 1200 px ;} }
@media screen and (max-width: 1140 px) { div .contentblock {width: 1024 px ;} }
@media screen and (max-width: 992 px) { div . contentblock {width: 970 px ;} }

Некоторые элементы, которые актуальны для мониторов, можно, а иногда и нужно будет скрыть для мобильных устройств либо вместо них выводить другие, более компактные.

Плюсы данного метода: быстрая реализация для перечисленных типов сайтов.

Минусы: скрипты и стили, которое не используются на мобильной версии, но используются на десктопной, все же будут подгружаться и влиять на время загрузки.

Что мы получим?

Сайт, который будет доступен со всех устройств, дизайн будет узнаваем на всех этих устройствах, только элементы будут сдвигаться по вертикали. Некоторые элементы не будут отображаться на мобильных устройствах (и наоборот) либо будут отображаться в более компактном виде.

И рассмотрим пример. Меню для устройств с экраном более 768px выглядит так:

А для экранов менее 768px выглядит так (в свернутом виде):

И так, при клике на иконку в правом углу (в развернутом виде):

Отдельный шаблон для мобильных устройств на основном домене

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

Как реализовать?

Нужны знания php и база основных устройств для их определения и вывода соответствующего шаблона. Т.е. нужно написать скрипт, который будет определять тип устройства и выводить для него соответствующий шаблон.

Отдельно стоит упомянуть о CMS. Если ваш сайт на WordPress, то о вас уже позаботились, и можно обойтись установкой плагинов для адаптации сайтов под мобильные устройства.

Среди них: WPTouch, WordPress Mobile Pack, WP Mobile Detector и т. д. Все эти плагины имеют несколько тем оформления и дополнительные полезные фишки вроде сбора статистики по мобильным пользователям.

Также в настройках этих плагинов есть возможность установить, какие блоки будут отображаться в мобильной версии сайта, а какие нет. Есть возможность добавлять свой логотип, что помогает пользователям, зашедшим на ваш сайт с мобильного устройства, идентифицировать ваш сайт.

Плюсы: В случае с плагинами - очень быстрый и простой способ реализации, быстрее, чем адаптивная верстка. В случае создания отдельного шаблона для сайта - возможность упростить дизайн сайта, уменьшить количество активных элементов, т. е. сделать сайт «легче».

Минусы: не для всех CMS есть такие плагины, да и не всегда они корректно работают. Бывает, что сайт хорошо отображается на моб.устройствах, но при этом по скорости не лучше, а даже хуже, чем его полная версия. Стоит отметить, что иногда бывают баги в определении мобильного устройства, если это какой-то редкий телефон, и в этом случае на таком устройстве будет отображена полная версия сайта.

Что мы получим?

Сайт для мобильных устройств будет доступен по тому же адресу, что и основной сайт, только шаблон его будет существенно отличаться от шаблона основного сайта, он будет значительно упрощен, но все-таки узнаваем.

Рассмотрим пример сайта с установленным плагином, который адаптирует его под мобильные устройства.

Например, вот так сайт выглядит на ПК:

А вот так выглядит этот же сайт на мобильном:

Мобильная версия сайта на поддомене

В каких случаях подойдет? Для интернет-магазинов, каталогов, интернет-порталов, социальных сетей.

Как реализовать?

Этот вариант похож на предыдущий, также достаточно трудоемкий в плане реализации. Но для больших интернет-магазинов с огромным ассортиментом – единственный выход.

Немного подробнее о реализации: создается поддомен, на нем такой же движок, как и на основном домене, но база данных используется одна на оба сайта (чтобы в случае внесения каких-либо изменений, не пришлось их добавлять дважды). При заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitemane.com, mobile.sitename.com, pda.sitename.com и пр.