Главная » Новости сайта »Начало
12:50
Начало
Всегда хочется поставить начальную точку. Эта заметка появилась самой первой.
Начато редактирование сайта 23.09.2013

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

1.08.2015 - закончен переход на новый шаблон сайта.
Кроме красивых картинок в заставке, изменилась вся идеология дизайна - от фиксированной верстке мы перешли к адаптивному (responsive) шаблону. Как известно, такой подход делает просмотр удобным на различных, в том числе и мобильных, устройствах. Применение готовых решений UCOZ, конечно, упростило задачу, но пришлось повозиться и с самим шаблоном и с компоновкой многих страниц. В общем, задача усложнилась, так как теперь пришлось проверять страницы на соответствие с требованиями Google (speed test):

Адаптируйте размер контента для области просмотра

Используйте удобочитаемые размеры шрифтов

Настройте область просмотра

Откажитесь от плагинов

Увеличьте размер активных элементов на странице.
 И всё это пришлось сделать.
Результат пока радует, хотя необходимо время и сотни проверок, что бы появилась полная уверенность.
 Паралельно, выявлялись маленькие тонкости, связанные с адаптивным шаблоном и с особенностями HTML
<img width="20" src="/.../start.jpg" height="20 /> и
<img src="/.../start.jpg" style="width:20px; height:20px;> дадут один и тот же результат в фиксированном дизайне и совершенно разный при использовании тега viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Фокус заключается в масштабировании рисунка браузером при изменении разрешения экрана. Задание размеров рисунка в виде style (2-й вариант") действительно фиксирует размеры рисунка, а в первом случае рисунок масштабируется.
 Вообще, с рисунками возникает наибольшее число трудностей. При фиксированном дизайне можно ориентироваться на самый "маленький" размер экрана компьютера и все расчеты строить исходя из этого. При этом редко приходится менять размеры изображения. В адаптивном варианте стоит помещать изображения в контейнеры и применять max-width для свойств.
Да и добиться, что бы картинка находилась в центре страницы - дело хитрое. Многие любимые советы не работают. Прежде всего нужно сделать float: none; Затем, проанализировать сам размер картинки. Хорошо, если он больше, заданного в max-width;, ну, а если нет - то этот параметр нужно переопределить.
Достигли ли мы совершенства? Конечно нет. Ну, будем работать.
Категория: Новости сайта | Просмотров: 511 | Добавил:
    
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
РЕГИСТРАЦИЯ ВХОД
Для перехода к статье нажмите
Х
(X);