Мобильный дизайн сайта

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

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

HTML и CSS в зависимости от устройства, по его параметрам, которые были получены из URL. Мы хотим детально остановится на каждом методе работы, при этом приведем реальные примеры, открыв которые на своем мобильном устройстве - вы сразу все поймете.

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

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

Положительные стороны:

1. Вы полностью сохраняйте содержимое, контент, разметку, не важно при этом, какое устройство вы используйте. Такой подход к работе все больше собирает положительных качеств, так как мобильные телефоны используются все большим количеством людей, как средство выхода в Интернет. Все чаще используют смартфоны и все чаще забывают про компьютеры
2. Один URL для страницы. Это процесс делает более облегченным расшаривание контента и информации, и полностью избавляет от ненужных вам редиректоров, чтобы вы могли получить максимально приятный вид страницы для разных страниц, в отличие от мобильных сайтов, отдельного типа.  .

Отрицательные качества:

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

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

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

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

Создание отдельного сайта для мобильных устройств

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

Положительные стороны:

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

Отрицательные стороны:

1. На каждой странице есть сразу несколько адресов. Проблема заключается в том, что когда вы захотите подключить рекламу в социальных сетях, то одной ссылкой будут делиться пользователи при помощи мобильного телефона и пользователи, работающие с компьютера. Контент начинает дублироваться, если правильно специалистом не будут прописаны мета-теги. Если пользователь мобильного поиска Гугл кликнет по ссылке в результатах, то он попадает автоматически на десктопную версию или будет перенаправлены на мобильную. Еще один нюанс - если мобильной версии сайта не существует, то пользователь получает сообщение об ошибке, а значит вы потеряли клиента потому что как правило после такого, никто сайт ваш искать не будет.
2. Есть различие в содержании и возможностях функционального типа. Если вы все таки решили создать отдельный мобильный сайт, то вы просто избавитесь от ненужной информации и ненужных функций, которые утяжеляют загрузку страницы. В результате пользователи получают для знакомства совершенно новый сайт, и поведение пользователей конечно будет иным. К тому же вы можете сделать совершенно два разных набора контента, но это не всегда играет в плюс вашему сайту.
3. Нужно подключать перенаправление. Пользователи смартфонов, компьютеров, могут быть перенаправлены сразу на оптимизированную версию сайта и наоборот. Данный способ работы сильно влияет на время загрузки страницы и к тому же может отрицательно повлиять на СЕО вашего сайта в отдельном случае.

Давайте рассмотрим примеры таких мобильных сайтов

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

Рассмотрим последний метод работы - вывод разных HTML и CSS на одном URL

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

Положительные стороны метода:

1. Клиентам ориентироваться будет легче, так как структура навигации будет настроена для разных задач, которые выполняются с мобильного и настольного компьютера.
2. На странице будет небольшое количество элементов. Вместо того, чтобы создавать скрытые элементы страницы для мобильных телефонов, они будут удалены из HTML или CSS. Это позволит свести к минимуму уменьшить объем данных загружаемых, и при этом ускорить время загрузки.
3. Потенциальные клиенты получают максимальную скорость загрузки. Ненужные для работы JavaScript удаляются из HTML, которые при этом освобождает CPU, память устройства и кэш.

Отрицательные стороны:

1. Нужно подключить дополнительные ресурсы сервера, так как динамическое создание HTML увеличивает нагрузку на сервер.
2. Нужны определительные устройства. Мобильные пользователи должны быть вычислены, технология определения устройства ненадежная.

Давайте рассмотрим сайты, которые выполнены по такой технологии.

Компания - CNN. Открывая мобильную версию мы видим сочетание HTML и CSS, которое полностью оптимизировано для мобильных телефонов, а настольная версия использует больше запросов HTTP и JavaScript. Навигация в таком сервисе специально продумана конкретно для мобильных задач, поэтому пользователям будет очень удобно. Загрузка сейчас на среднем уровне - от 4 секунд.

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

Сайт  SlideShare -здесь мы видим совершенно разные версии мобильного типа и настольного. Мобильная версия адаптивного веб-дизайна, настольная - нет. Сайт использует разные HTML и CSS. Например, для мобильной версии меньше присутствует JavaScript. При этом структура навигации у каждого сайта разная, время загрузки страницы находится в районе 6 секунд - средний довольно показатель.

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

Потенциальный успех

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

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