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

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

12 Декабря, 2014

«Адаптивная верстка» - это словосочетание находится у всех на слуху. Но что же на самом деле является адаптивной версткой сайта. Как, а главное для чего она работает.

b158585f83a321dfabc6a0e74b365be6.png

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

Когда вы в последний раз выходили в Интернет со своего планшета, электронной читалки или телефона?

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

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

Адаптивная верстка как важный тренд развития Сети

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

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

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

Какая разница между резиновой и адаптивной версткой?

Для начала я бы хотел Вам рассказать не об адаптивной верстке, а о верстке, близкой по смыслу – резиновой. Хочу обратить внимание, что эти понятия следует различать, так как требования к ним разные. Резиновая верстка – в основном не предназначена для мобильных устройств, но, на мой взгляд, она вполне неплохо себя показывает и на мобильных устройствах. Только при одном важном условии – «всегда нужно сначала верстать сайт для устройств с меньшим разрешением экрана», а уж потом для устройств с большим разрешением (то же самое и к адаптивной верстке, но об этом позже).

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

  • картинок;
  • шрифтов;
  • различных кнопок;
  • меню и др.

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

Сверстать такой макет не скажу что сложно, просто делается в двое больше работы, чем обычно. Объясню, когда у нас есть один макет на верстку страницы, к примеру, со стандартной шириной 1024px мы для него пишем одну таблицу стилей css. Но, когда у нас к разрешению 1024px еще есть другой макет с разрешением в 640px, мы уже пишем две таблицы стилей css, соответственно для двух разрешений.

Что же мы там пишем? А пишем мы вот что – опять таки, все размеры картинок, шрифтов и других элементов на сайте мы делаем соответственно макету, уменьшаем или увеличиваем. И когда Вы будете просматривать сайт с телефона или планшета он загрузит Вам сайт с меньшим разрешением, более подходящим для Вашего устройства.

Основные принципы адаптивной верстки

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

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

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

Тонкости и нюансы концепции

Особое внимание нужно уделять фонам и картинкам при верстке адаптивных сайтов. Согласно макетам под маленькое разрешение, также вырезаются маленькие картинки, повторяю, «не сжимаются css», а сохраняются более маленькие!

Дело в том, что если картинка сжата css до маленьких размеров, она все же остается большой, иногда даже не красиво смотрится, и соответственно занимает памяти она также много. Поэтому при разных разрешениях устройства, загружаются разные по размеру картинки, их разница в том, сколько они занимают, так как не практично загружать картинку, которая занимает 200кБ на телефон с разрешением в 480х320, и важно, что скорость отображения страницы в телефоне куда медленней, чем на компьютере. Таким образом, мы максимально оптимизируем страницу, это – скорость загрузки страницы и ее красивое отображение.

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

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

Заключение

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

Другие похожие публикации:

02
05
2018
Компания Google начала переводить сайты на индексацию mobile-first
06
01
2016
Стоит ли вкладывать средства в разработку мобильного приложения для сайта?