телефон
+38 095 457 00 88
abz.dn.ua
Предисловие

На протяжении шести лет разработки Web-сайтов перед дизайнером, а затем верстальщиком стояла одна задача: сделать сайт который помещается в 1000px (подразумевается ширина экрана) и в тоже время нормально смотрится на больших разрешениях 1440px и более. Большинство сайтов не выходили за рамки допустимой «тысячи», а остальные были просто масштабируемыми («резиновый сайт»). Но в «резиновой верстке» тоже есть ряд неудобств, все время приходилось бороться со «съезжанием» текста (или блоков) при небольшом размере окна браузера.

«4size» технология (от англ. size – размер; в переводе - «четыре размера») позволяет создавать веб-сайт, которые качественно отображаются и удобно читаются на всех популярных разрешениях экранов монитора (поддерживается 4-х и 6-ти размерные варианты).

Была и вторая проблема – если сайт растягивать более чем на 1440px, получится что все абзацы, превращаются в одну строку.

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

Скажете: «верстать все в 1000px и точка»!? Да! Верстать в «тысячу» и в правду проще. Начнем именно с этого.

Свидетельство регистрации авторского права № 44403 от 20.06.2012.

Реализация технологии

Рассмотрим на данный момент наиболее популярные разрешения экранов мониторов, а так же объединим их в две группы "4size" и "6size".

6
s
i
z
e
4
s
i
z
e
I
1024 x 600
WSVGA
90% всех нетбуков
1204 x 768
XGA
Apple iPad и iPhone
II
1280 x 800
WXGA
16:10 – ноутбуки «прошлого поколения»
1280 x 1024
SXGA
5:4 – часто стоят в офисах
II
1366 x 768
WXGA
HD ready – все новые ноутбуки от 12" до 16,4"
IV
1440 x 900
WXGA+
широкоформатный монитор от 17" до 20"
V
1680 x 1050
WSXGA+
широкоформатный монитор от 21" до 24"
VI
1920 x 1080
Full HD
плазменные панели и ряд мониторов от 22"
Рисунок 1. Популярные размеры мониторов

Особенностью данной технологии является разработка макетов с учетом размеров графических элементов (картинок, фото, др. изображений) и текстового наполнения в рамках каждого размера экрана. Вся графика должна быть вписана в рамки заданного размера: -70px от обшей ширины (1366-70=1296), за исключением «тысячи»: ширина -90px. Данный запас дает возможность пользователю ставить меню «Пуск» с боку экрана или немного уменьшить размер браузера, до появления скрола (на «тысячи»), или перехода к другому размеру (об этом ниже).

Макет рисуется в самом большом размере (например, для “6size” – 1920px). Затем используя правило: «текст должен легко восприниматься глазом» (например: без увеличения читаться на iPad, а так же откинувшись на спинку стула при разрешении 1440px), уменьшается размер макета пошагово для каждого размера. При переходе от размера к размеру макет не равномерно уменьшается по диагонали (не масштабируется, а именно уменьшается вручную дизайнером). Для каждого размера сначала размещается текстовая информация, а затем каждый элемент графики подгоняется под доступное пространство на странице. Временные затраты на разработку макета увеличиваются мин на 30%. Данные затраты оправдываются при верстке.

Особенности верстки

Все страницы сайта имеют заданную ширину, что в разы облегчает верстку (до 40%). В первую очередь создается сайт самого большого размера. Во время верстки создается один большой CSS файл, который затем парсится (применяется алгоритм разбора комментариев, в которых заданны величины для остальных размеров), на выходе получается 4-ре или 6-ть CSS файлов для каждого размера “4size”.

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

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

Преимущества технологии

Возьмем среднюю статистику по размерам экранов пользователей, за 2011 год, по Киеву, Донецку и Днепропетровску (Яндекс.Метрика).

36%
1280
23%
1366
13%
1024
7%
1440
6%
1680
4,5%
1920
10,5%
остальные размеры
30,5%
Рисунок 2. Рейтинг использования устройств.

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

Что обеспечивает технология “4size”:
  • Уменьшение отказов при заходе на сайт, более 40% аудитории посетителей;
  • Позволяет в полной мере показать графические элементы сайта;
  • Качественно отображает текст, на большинстве доступных мониторов;
  • 8% из 15,5% остальных размеров так же поддерживаются “4size”;
  • Просмотр фото-галереи становится «наслаждением».
Визуальное сравнение

Для сравнения возьмем сайты: туристической компании «АвиаТревел», который является примером сайта фиксированной ширины в 1000px; сайт турнира по конкуру "DonbassTour", который маштабируется до 1440px, после чего отображается песчаный фон; третий же сайт сделан на технологии "4size" для торговой марки "EXTRA®", который качественно отображается на всех представленных ниже разрешениях.

Фиксированный под 1024
Масштабируемый
(с ограничением до 1440)
Технология “4size”
1024
1280
1366
1440
1680
1920
Как показывает сравнительный анализ на каждом размере экрана текст удобно читается, вся графика отображается на экране, при этом, не ущемляя пользователей с маленькими и большими экранами.
2016 © abz.dn.ua
Технология “4size”
+38 095 457 00 88
abz@inbox.ru

Свидетельство регистрации авторского права № 44403 от 20.06.2012