Меню
ГлавнаяWindows 7

Мобильное цифровое устройство. Мобильные устройства, наладонные или карманные компьютеры (КПК), сотовые телефоны, видеокамеры, цифровые фотоаппараты, Personal Digital Assistant, PDA, гаджет. Отдельный шаблон для мобильных устройств на основном домене

С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?

На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

  • Адаптивный дизайн;
  • Отдельная мобильная версия сайта;
  • RESS (Responsive Design + Server Side).
Каждый из способов обладает своими плюсами и минусами, которые я постараюсь подробно описать.

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

Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. В зависимости от размера экрана, пользователь будет видеть разную картинку:

@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }

Преимущества адаптивного дизайна
  • Удобство разработки - при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля - достаточно лишь подправить CSS и HTML… С учетом наличия фреймворков, подобных Bootstrap подобная разработка не является очень сложной при стандартной реализации. К тому же, поддержка такого продукта будет относительно простой задачей.
  • Один URL - избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m.). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.
Недостатки адаптивного дизайна
  • Разные задачи - типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации - адреса ближайших отделений, банкоматов и т.д.
    В целом, при адаптивной верстке самый распространенный подход - делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
    • «вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. Это означает, что некоторые типичные для десктопных сайтов активные элементы, в том числе embedded-карты, ролики, кредитные калькуляторы и меню с анимацией на мобильных сайтах должны быть заменены на более легкие альтернативы. Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная - еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти.
  • Безысходность - Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.
В целом идея разработки мобильной версии в адаптивном дизайне достаточно популярна, несмотря на вышеуказанные минусы. В частности, эту концепцию целиком поддерживают такие гиганты как, например, Google.

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

Чтобы сделать сайт удобным для мобильных пользователей часто создают так же отдельные версии сайтов - специально ориентированные на пользователя со смартфоном/планшетом. Наиболее распространена практика - перенаправление мобильных пользователей на специальный поддомен (m.example.com, mobile.example.com и т.д.). Наверное, в 99% случаев, мобильная версия представляет собой урезанную основную версию - лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов.
Преимущества мобильной версии
  • Легкость в изменениях - поскольку сайт существует, де-факто, отдельно от основной версии, вносить в него правки, связанные только с мобильной версией значительно проще, поскольку мобильная версия чаще всего не предоставляет избыточного, ненужного функционала.
  • Удобство для пользователя - мобильная версия обычно сильно упрощена по сравнению с десктопной версией, поэтому пользователю не нужно будет далеко ходить за нужной ему информацией.
  • Быстрота - из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G.
  • Выбор- чаще всего, в мобильной версии есть возможность перейти на основную версию сайта.
Недостатки мобильной версии
  • Несколько адресов -
  • Неудобство для пользователя - для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же - крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
  • Ограниченность - создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

В целом, создание мобильных версий сайтов оправдывает себя достаточно хорошо, в частности, для крупных проектов. Как пример - Amazon использует у себя специальную, мобильную версию сайта.

RESS

Сам Google, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств. RESS - Responsive Design + Server Side. Пример реализации, набросанный «на коленке»:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "libraries" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = "template.m.php"; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = "template.t.php";} else{ $tmpl = "template.php"; } include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);

Плюсы RESS
Фактически, метод может включать в себя преимущества как и отдельной мобильной, так и адаптивной версии сайтов, в зависимости от реализации. Из того, что будет новым:
  • Минимизация трафика - Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве. Так же может быть специально оптимизирована html и css.
  • Возможно использовать таргетирование - например, для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.
Минусы RESS
  • Сложность в разработке - подобный метод потребует соответствующей настройки сервера и труда большего количества программистов. Так же необходимо будет делать несколько различных вариантов верстки.
  • Механизм определения устройств - к сожалению, даже в наше время ещё не доведен до совершенство. Истории с тем, как чей-то редкий телефон не определился как мобильное устройство, всплывают довольно часто.

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

Резюме

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

Что с 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 и пр.

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

Проверку вашего сайта на удобство отображения на мобильных устройствах можно проверить с помощью различных веб-сервисов. В частности, данный сервис от 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 и т.д.).

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



Сейчас телефоны есть практически у всех. Моделей сотовых телефонов так много, что сориентироваться в них не так-то просто. Перед покупкой стоит спросить себя: «Для чего мне нужен телефон?» Иначе можно переплатить за функции, которыми ни разу не воспользуешься. Если предполагается, что телефон будет лишь средством связи, нет смысла платить за него больше 2000 рублей. Громкий звонок и удобные кнопки для набора SMS – вот и все, что вам пригодится.


Если вы намерены использовать , задача усложняется. Вам потребуется большой экран (не меньше 3 дюймов) для удобства просмотра страниц в Интернете и чтения электронной почты. Обратите внимание на разрешение – для телефонов с экраном 3,5-4 дюйма оно должно быть не меньше 480х800, иначе изображение будет зернистым. Сенсорный экран уже перестал быть признаком престижности аппарата. Некоторым до сих пор нелегко приноровиться к нему, но, глядя на последние тенденции в сфере разработки телефонов, понимаешь, что привыкать все-таки придется – почти все актуальные новинки не имеют кнопок.


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


Ноутбук или нетбук?



Многие до сих пор не вполне понимают, в чем разница между . Главное отличие нетбука – компактность и простота конструкции. Как правило, нетбуки могут дольше работать в автономном режиме. Но есть и минус – у нетбука нет встроенного DVD-дисковода. Зато он оснащен USB-портом, Wi-Fi, Bluetooth и веб-камерой.


Это идеальный гаджет для тех, кто не может расстаться с Интернетом даже на час. У нетбука небольшая производительность, однако на нем удобно просматривать страницы и отвечать на письма. Word, PowerPoint и Excel с легкостью осилит любой нетбук , что делает его очень удобным для деловых людей, студентов и всех, чья работа связана с частыми переездами и постоянной перепиской. А вот Photoshop, 3D Max, игры с хорошей графикой и другие «тяжелые» программы по плечу только самым современным нетбукам. Так что для дизайнеров и любителей пострелять в инопланетных монстров большинство нетбуков бесполезны.


Очевидно, что ноутбук – более «серьезное» устройство, обладающее большими техническими возможностями. Он и стоит соответствующе. Если довольно качественный нетбук можно приобрести за 10 000 рублей, то ноутбук, скорее всего, обойдется вдвое дороже. Однако если фильмы, игры и работа с графикой вас не интересуют, не тратьте деньги зря.


Смартфон. Всё своё ношу с собой



Эволюция мобильных телефонов привела к тому, что по производительности и возможности решения различных задач они почти сравнялись с компьютерами. Смартфон – это гаджет, совмещающий функции ПК и телефона. Главное различие смартфонов состоит в операционной системе. Android, BlackBerry OS, IOS и Windows Phone – у каждой есть плюсы и минусы.


В нашей стране особенно популярна система Android . Ее сильные стороны – разнообразие виджетов, интеграция с социальными сетями, поддержка 4G и огромное количество приложений, в том числе и бесплатных.


iOS – детище . Отличается простым и удобным интерфейсом, разнообразием приложений и высоким качеством обслуживания. iTunes позволяет легко купить приложения, фильмы и музыку в одном месте. Весьма существенные минусы – система используется только на весьма дорогостоящем iPhone, даже простые приложения, как правило, платные.


Windows Phone создана относительно недавно на основе самых передовых решений. Прекрасный интерфейс, хорошая анимация, интеграция с сервисами Microsoft – несомненные плюсы этой системы.


BlackBerry OS – выбор бизнесменов. Безопасная и быстрая электронная почта очень важна для «бойцов» информационных войн. Однако не везде есть возможность нормальной работы данной системы – для этого нужно дополнительное программное обеспечение. Так что обслуживание выходит достаточно дорогим.


При выборе смартфона в этом году, в первую очередь, ориентироваться стоит на тройку лидеров ПО – Android, IOS, Windows Phone.


Планшет. Палач бумажных СМИ



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


Самый – iPad , но в этой категории много других моделей. Основные характеристики, по которым следует выбирать устройство – вес, время автономной работы и размер экрана. При покупке нужно обратить особое внимание на внешние интерфейсы – наличие и количество разъемов USB, HDMI-порта для подключения к телевизору, разъема под карту памяти MicroSD. Мало кто знает об этом, но устройства с металлическим корпусом хуже принимают WiFi – проблемы могут возникнуть, если точка находится за несколькими бетонными стенами или на большом расстоянии. Но зато металлический корпус прочнее, хоть и тяжелее.


Большинство современных цифровых устройств создано для того, чтобы мы в любых условиях могли оставаться на связи. Физические расстояния становятся все более несущественными. На смену казенным кабинетам приходят виртуальные офисы, долгие совещания в неуютных залах сменяются видеоконференциями, а свежие новости приходят одновременно в Москву и Аддис-Абебу. Информационный мир становится компактнее и насыщеннее. И возможно, очень скоро оборот «деловая поездка» станет анахронизмом – все дела будут решаться там, где нам этого хочется.