Сайты для разных экранов

Содержание сайта
Разное
Сайты для разных экранов

Сайты для разных экранов

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

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

Для этого есть два основных способа:

1. При создании сайта заранее ограничить ширину страниц  - Подробнее. Этот способ может лишь частично решить проблему.

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


Методы создания сайтов для разных экранов

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

В настоящее время существуют два основных метода по созданию сайтов для разных экранов - создание нескольких вариантов сайта для разной ширины экрана и создание так называемых "резиновых" сайтов.

Примечания:

1.
Из Википедии: Адапта́ция (от лат. adapto — приспособляю) — процесс приспособления к изменяющимся условиям внешней среды.
В нашем случае адаптация - это приспособление страниц сайта к разной ширине экрана.
2. Еще раз хочется обратить внимание, что в русском языке существует много слов, написанных русскими буквами, но которые нужно переводить на русский язык.
3. В Интернете царит полная разноголосица, когда начинают рассуждать о сайтах для разных экранов. Встречаются термины "Адаптивный сайт", "Адаптированный сайт", "Адаптивный дизайн", "Резиновый сайт", "Адаптивная верстка", "Резиновый адаптивный веб дизайн" и другие.


Создание нескольких вариантов сайта для разной ширины экрана.


Создание сайта для небольших экранов (например - для экранов мобильных телефонов) предусмотрено в некоторых редакторах веб-страниц, например в визуальном редакторе XSitePro, Adobe Dreamweaver, Adobe Muse, Xara Web Designer, Web Site X5, EZGenerator, в ряде визуальных онлайн-редакторов (см. Обзор визуальных онлайн-редакторов).

В этих редакторах можно создать несколько вариантов одного сайта для разных размеров экрана. Например, в редакторе  Adobe Muse можно создать варианты сайта для большого экрана настольного компьютера, для планшета и для мобильного телефона.

Если Вы хотите создать сайты для разных экранов путем написания кода, то в Интернете уже имеется много материалов по созданию кода таких сайтов.
Для начала посмотрите видео:  http://blog.myrusakov.ru/mobile.html

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

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

См. также Создание сайтов для разных экранов. Список программ


Создание "резиновых" сайтов


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

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

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

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

Дополнительные справочные материалы:

Резиновый сайт
О резиновом сайте
Сделать ширину сайта в зависимости от разрешения монитора. @ Media
Сайты, адаптированные для разных типов устройств: руководство для начинающих
Уроки по созданию резинового сайта

Сайты для мобильных телефонов


Сайт для мобильного телефона создается специально для того, чтобы просматривать его в мобильной сети или браузере WAP.
Просматривать сайт, созданный для мобильного телефона, в обычном браузере - плохое решение. И наоборот, обычный сайт в мобильном телефоне будет выглядеть плохо.

Стоит ли создавать версию обычного сайта еще и для мобильного телефона ?

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

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

Это - одна из причин, почему большие игроки относятся к этому делу очень серьезно. Google, Yahoo и Microsoft предпринимают большие усилия, чтобы продвинуть мобильные веб-службы.


Основные отличия обычного сайта от сайта для мобильного телефона

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

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

Нажмите здесь, чтобы рассмотреть Ваш сайт, используя Мобильный Эмулятор Сети Google 

На открывшейся странице введите адрес Вашего сайта, нажмите ПУСК.


Некоторые из главных различий между этими двумя типами сайтов включают:

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

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

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

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

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

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

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


Последнее обновление: февраль 2017 г.