К основному контенту

Правила текста на сайте

Верстка и типографика

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

Типографика

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

Текст должен быть удобным для чтения

Исключение: названия бренда, компании — начертание логотипа.

Удобнее читать шрифты с высокой различимостью букв

Т.е. одна буква должна хорошо отличаться от другой. Для чтения не подходят декоративные шрифты.

Выделяйте жирным особенно важные слова или часть текста

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

Ширина колонки должна быть удобной длины

Например, 7-8 слов. Если ваш текст будет растянут по ширине экрана 1680, такой текст будет очень плохо читаться.

Расстояние между строками

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

Кегль

Кегль — это высота шрифта. Шрифт на сайте должен быть умеренным. Для основного текста считается оптимальным шрифт размером 12-16 пикселей. В частности при выборе кегля стоит учитывать, для кого предназначается текст. Например, пожилым людям текст лучше увеличить. Также существуют возможности подстраивания размера шрифта под пользователя.

Шрифт с засечками и без

Шрифты без засечек проще для восприятия в интернете. В печати используются шрифты с засечками.

Цвет шрифта

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

Соблюдайте иерархию заголовков

Самый важный заголовок (например, заголовок страницы, должен быть самым большим, подпункты — поменьше, а текст — стандартного размера (12-16).

Не сочетайте слишком много шрифтов на одной странице

Максимум 2 шрифтовых решения. Не больше.

 

 

Верстка

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

Нерезиновая верстка

Макет имеет заданную ширину и при изменении ширины экрана не меняет свой размер.

Резиновая верстка

Макет полностью изменяется пропорционально размеру окон. Для резиновых макетов обязательно должна быть задана минимальная и максимальная ширина.

Адаптивная верстка

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

 

 

Что важно в верстке сайта

Кроссбраузерность, кодировка и DOCTYPE

Кодировка должна быть UTF-8, это современный стандарт. Данная кодировка должна использоваться для всех файлах верстки (html, css, js).

DOCTYPE: html. Необходимо для отображении страницы в соответствии со стандартами.

Кроссбраузерность: Firefox, Chrome, Safari, Opera, IE7+. Просматривать сайт в описанных браузерах последней версии.

Валидность, доступность, микроформаты

Код верстки должен быть доступен для поисковых систем. Валидный код обладает понятной структурой и упорядоченностью.

Микроформаты упорядочивают код и делают его доступным для обработки роботами.

Отображение в стандартных разрешениях

Сайт должен нормально смотреться во всех стандартных разрешениях от 1024 и выше и не иметь горизонтального скролла

Список классических разрешений: 1024x768, 1280x1024, 1680x1050, 1920x1080

Надежность верстки

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

Проверка и оптимизация скорости загрузки

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

Наличие аналогов шрифтов

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

Доступность при выключенных картинках

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

Правильная структура заголовков (H1, H2,... и т.д. и TITLE)

Заголовки структурируют сайт и делают его корректным документом для восприятия поисковыми системами.

Работоспособность при выключенном JavaScript

Сайт должен сохранять работу и вид при выключенном JavaScript. Самый важный функционал на сайте должен быть доступен без JS.

Работоспособность при выключенном Flash

В идеале весь критически важный функционал сайта должен быть доступен без Flash. Также нужно: выводить фоновую графику в блок, где отображается flash; предлагать установить Adobe Flash Player. Но лучше не использовать, поскольку flash плохо индексируется.

Отсутствие багов при увеличенном шрифте

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

 

 

Мобильные устройства

На мобильных экранах сложнее читать, а значит, нужно сделать, чтобы было максимально удобно читать. Увеличить шрифт до максимума — не выход.

Итак, для мобильных устройств нужно:

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

 

 

Выводы

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

 

 

Истории из жизни

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

Комментарии

Популярные сообщения из этого блога

Служба политики диагностики не запущена – исправить.

Центр управления сетями и общим доступом сообщает, что не удалось запустить дочернюю службу. Диагностика сетей Windows сообщает: Служба политики диагностики не запущена. Обновление информации на 02.04.17
Если вы неопытный пользователь, то можете повредить систему так, что её нужно будет переустанавливать. У Майкрософт есть свои возможности для диагностики, но и они для более опытных пользователей.

ВАРИАНТ 1.  Сброс настроек IP и DNS для всех сетевых подключений. Способ срабатывает только в случае, если заглючили обозначенные службы, что бывает достаточно редко. Команды выполняются в командной строке (вызов командной строки Win+R, cmd Enter). В конце ввода команды нажимайте Enter.
Сброс и получение нового IP от DHCP-сервера:
ipconfig /releaseipconfig /renewСброс кэша DNS:
ipconfig /flushdnsПолный сброс настроек пула протоколов TCP/IP и протокола Winsock:
netsh int ip reset c:\log1.txtnetsh winsock reset с:\log2.txtПосле сброса настроек необходимо перезагрузить компьютер, в командной строке э…

Загрузочная флешка Acronis True Image и Acronis Disk Director

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

Процесс System в Windows 10 может потреблять 4 Гб RAM

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

Процесс System.exe нагружает оперативную память - Windows 10 Был у меня на windows 8 процесс host, который периодически грузил нехило процессор, а теперь system кушает ОЗУ.

Пошли капать сеть.

Это не баг, это фича Гейб Аул (twitter):В Windows 10, мы добавили новое понятие в диспетчере памяти называется оно магазин сжатия, который хранит в памяти сжатые страницы. Это означает, что, менеджер памяти будет сжимать неиспользуемые страницы, а не писать их на диск. Это уменьшает объем памяти, используемый в процессе, позволяя Windows 10, поддерживать большее применение в физической памяти, на данный момент. Это также помогает обеспечить более высокую отзывчивость Windows 10 ... Это видно в диспетчере задач и поэтому процесс 'System' потребляет больше памяти, чем в предыдущих выпусках. Это может пока…

Установка и настройка Яндекс Диск в Linux Ubuntu (14.04)

В данной статье будет рассмотрена установка клиента и индикатора Яндекс.Диска в системный трей Ubuntu, которой значительно упростит использование Яндекс.Диска.

Консольный клиент Яндекс.Диска для Linux позволяет вам управлять файлами на Диске без использования оконного интерфейса или программ, поддерживающих протокол WebDAV.

Преимущества консольного клиента по сравнению с WebDAV-подключением:
низкие требования к ресурсам системы; более высокая скорость чтения и записи файлов; более высокая скорость синхронизации с сервером Диска; отсутствие необходимости постоянного подключения для работы с файлами.  Установите клиент Яндекс.Диск через терминал (одной командой): echo "deb http://repo.yandex.ru/yandex-disk/deb/ stable main" | sudo tee -a /etc/apt/sources.list.d/yandex.list > /dev/null && wget http://repo.yandex.ru/yandex-disk/YANDEX-DISK-KEY.GPG -O- | sudo apt-key add - && sudo apt-get update && sudo apt-get install -y yandex-disk Подключение к Янде…

Acer Aspire 5315 windows xp, vista, 7, linux - что ставить?

Попал мне на этой неделе старичок: Acer Aspire 5315 с родной Вистой и предустановленным софтом от Acer. Чем он гордился: одноядерный селерон, 1 ОЗУ ДДР2, винт на 80 Гигов.

Какие страдания он испытывал? При загрузке все ОЗУ уходило в кратер прожорливых процессов. Понятно, что серфинг превращался в ад ожидания. Переключение между программами было болью, а интерфейс и логика Висты - расстройством. 
Сначала пробуем чистить и ускорять... Не могу сказать, когда был приобретем ноут, но на сегодняшний день, мой телефон в два раза мощнее. Это и не удивительно.
Ставлю Auslogics BoostSpeed, запускаю.

Скрин не от него, но почти аналогично.
Танцы с бубном не увенчались удачей. После всех скальпелей и пластырей, ОЗУ не похудел, а ноут прибавил, но не значительно в отзывчивости.
Владелец ноута был не против экспериментов и заранее всю необходимую инфу сохранил.
Накатываем Windows 7 (W7x86_U_SP1_REACTOR_v10_Ldr)
Ей доверяю, так как стоит на нетбуке Lenovo супруги и живет почти год. Там было проще, т…

Windows 10 - что значит зарезервировано аппаратно?

Почему на Windows 10 доступна не вся оперативная память?
Всем привет. На моем ноуте сделал апгрейт и поставил 16 Гиг ОЗУ. Но как оказалось, не вся память доступна для работы.

Начали капать.


Написано, что системой (в диспетчере задач) зарезервировано аппаратно аж 3,2 Гига. Давайте вернем 16.
ПОИСК: msconfig ИЛИ жмём «Win+R» и вводим «msconfig».

Тыкаем дополнительные параметры

Убираем галочку

 и перезагружаемся
Альтернативные варианты проблемы Вы используете 32 битную версию Windows 7 или Windows 8 Максимальное количество оперативной памяти, которые способны «увидеть» 32 разрядные версии Windows — это 4 Гб. Таким образом, если у вас больший объем RAM, следует установить 64-разрядную версию, чтобы воспользоваться этой памятью. Для того, чтобы узнать, какая версия Windows установлена на Вашем компьютере, откройте пункт «Система» в панели управления (или кликните по «Мой компьютер» правой кнопкой мыши и выберите «Свойства»). В пункте «Тип системы» будет отображена информация о разрядности…