Перед вами новая статья моего цикла “Шкатулка с секретами”. Здесь я стараюсь простым языком рассказывать о цифровом дизайне и системном подходе. Если вам интересно читать, есть вопросы или вы хотите предложить мне новую тему, то я буду очень рада обратной связи.
Эта статья будет полезна практикующим дизайнерам, а так же продакт-менеджерам, которые хотят глубже погрузиться в эту тему.
Почему так больно смотреть?
Многим знакома ситуация, когда в Figma или Sketch на макетах дизайн сайта смотрится отлично, а реализация вызывает чувство грусти. Вроде что-то похожее на задуманный тобой проект, но не совсем. И в этот момент дизайнер начинает косо смотреть на разработчика, обвиняя в невнимательности, а разработчик в ответ кидает комментарий о том, что макеты были нарисованы плохо.
По моему опыту частой причиной такого результата является недостаточное знание особенностей реализации. В материалах, посвященных этому вопросу, часто советуют прикинуть макеты в трех стандартных разрешениях — веб, планшет и мобильный телефон. На самом деле этого достаточно только в двух случаях — если вы очень давно делаете сайты и способны все просчитать или если система адаптации уже продумана до вас (вы используете готовую систему).
Адаптивность сайта: теория и разбор типичных ситуаций на практике
Чтобы не утонуть в дизайн-ревью и спорах с разработчиком, нужно хорошо понимать, как работает верстка, поэтому сейчас о ней и поговорим.
Адаптивно-резиновая верстка
Современные сайты в большинстве случаев имеют адаптивно-резиновую верстку. Это не единственный вариант, но он является наиболее распространенным, так как соотношение трудозатраты/качество-на-выходе оптимальное. Поэтому в данной статье будет описан именно данный вариант.
Как это работает?
При данном подходе к верстке контент растягивается или сжимается в зависимости от размера экрана, а когда ему становится совсем “тесно”, сайт “ломается”. Например, блоки, выстроенные горизонтально, становятся друг под друга, заголовки уменьшаются, иллюстрации сжимаются, а иногда и вовсе пропадают. Этот момент “слома” называется точкой слома или breakpoint.
Посмотрим на примере сайта www.figma.com/. На ширине 1250px сайт все еще имеет “бургер” вместо меню, а на 1251px появляется полноценная навигация. Значит, сайт Figma имеет точку слома на 1251px.
Если сайт верстается с нуля, то точек слома на сайте разработчик может поставить сколько и где угодно. Но, конечно, чем их больше, тем сложнее сайт верстать и поддерживать. Поэтому чаще всего используется от двух до шести таких точек.
Как выбрать точки слома?
К сожалению, нет универсального ответа на этот вопрос. Все индивидуально и зависит от дизайна, а также от сценариев использования вашего сайта. Для простых лендингов и сайтов может подойти 1–2 точки слома, а для более сложных — от 3 до 6 точек. Для сайтов с большим количеством мобильного трафика можно сделать минимальное количество точек слома и сосредоточиться только на мобильной версии.
Хорошей новостью является то, что точки слома не прибиты гвоздями. Их можно поменять при желании. Правда, придется перепроверять верстку на всем сайте, поэтому тестировщики вряд ли будут рады этой новости. В моей практике был случай, когда моя команда успешно поменяла точки слома на довольно большом высоконагруженном сайте.
Уроки CSS — Медиа запросы основы. Как сделать адаптивный сайт.
И раз я не могу дать единственно правильного ответа, то могу помочь советами. Для начала обратимся к статистике. Это поможет нам получить представление о том, на какие размеры экранов в целом нам можно ориентироваться.
Посмотрим, какие разрешения экранов являются самыми популярными за 2022 и 2023 год.
На данном графике представлены наиболее популярные размеры экранов в px. Размеры “темной” зоны под расплывчатым названием “другое” впечатляют. Дело в том, что сейчас выпускается огромное количество различных устройств на платформе андроид, а также других менее популярных. Узнать их все невозможно. Однако возможно поделить эти устройства на понятные группы и с их помощью вычислить наиболее удобные точки слома для вашего сайта.
Несмотря на очевидный мобильный тренд, все еще довольно большое количество людей пользуются интернетом на стационарных компьютерах. Значит, будет неплохо, если ваш сайт будет выглядеть привлекательно на таких разрешениях, как 1920х1080, 1536х864, 1366х768 и 1280х780 px.
Разница в ширине 1920 и 1280 px довольно большая, далеко не каждый дизайн будет хорошо смотреться и там и там совсем без изменений в верстке. Поэтому, вероятно, неплохо будет выбрать точку слома где-то между ними. По такой же логике можно определить и другие точки слома для вашего сайта.
Я советую тестировать ваши точки слома. При работе над новым проектом я часто создаю такие макеты “на грани” — смотрю, как будет выглядеть интерфейс на самых крайних точках. Например, если точка слома 1440px, то я посмотрю, как сайт выглядит на максимальной ширине перед точкой слома 1439px и сразу после нее на 1440px.
А есть примеры?
Да, примеры есть и их довольно много!
Tilda: Думаю, данный конструктор не нуждается в представлении. Проект выбрал точки слома 480px, 640px, 960px, 1200px. Проектируя сайт для тильды, вам нужно ориентироваться именно на них.
Webflow: Визуальный редактор кода, известность которого только набирает обороты. Точки слома, которые можно использовать — 768px, 992px, 1440px.
Мнение разработчика: Когда-то мне очень помогла разобраться в теме данная статья, она не новая — 2006 года. Тут Дэвид советует выбирать точки 600px, 900px, 1200px и 1800px. Конечно, ширина экранов с того времени изменилась, но не так, чтобы сильно, и на мой взгляд статья до сих пор актуальна. Спасибо Дэвид! Если вам интересно почитать статью, но вы не знаете английского, то держите перевод.
Еще пример: В данном материале ребята предлагают использовать точки слома 640px, 768px, 1024px, 1280px, 1536px. Да, это много, но зато интерфейс будет выглядеть хорошо почти на всех размерах экранов.
И еще одна хорошая идея: Помимо этих примеров, вы можете исследовать любой сайт, который близок по стилю к вашему проекту, и взять точки слома оттуда.
На какие разрешения стоит ориентироваться при подготовке макетов?
С точками слома, надеюсь, разобрались. Теперь я бы хотела постараться ответить на следующий вопрос: на какие разрешения экранов лучше ориентироваться при подготовке макетов?
И снова, увы, нет универсального ответа. Чтобы вычислить, на какое же разрешение стоит ориентироваться, лучше всего обратиться к статистике по вашему сайту (если он уже существует). Если по какой-то причине этого сделать нельзя (сайт совершенно новый или у вас нет доступа к аналитике), то можно обратиться к общей статистике.
Мобильные телефоны
Посмотрим в график выше. Из него можно сделать вывод, что наиболее популярной шириной мобильного экрана являться 360рх с большим отрывом — около 23%, затем идут 412–414рх — около 14% и 390–39рх — около 10%.
Для новых проектов по умолчанию я выбираю ширину 360рх для отрисовки макетов. То, что нарисовано в дизайне на ширину 360 px, должно выглядеть нормально и на ширине 320, и на ширине 414px. Если нет уверенности, лучше прикинуть блок на минимальном и максимальном экране. Да, это дольше, но зато неприятных сюрпризов на этапе разработки будет меньше.
Тут я бы хотела затронуть еще одну интересую тему. Вы замечали, что в документации к телефону разрешение в пикселях может быть указано куда больше реального в px? Дело в том, что рх и пиксель — это далеко не всегда одно и то же. Единица px — это конечно же пиксель, но не любой. Px был рассчитан на основе ЭЛТ-мониторов из 1990-х.
Наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) — ее и определили как px. В наше время пиксели совсем измельчали, а единица px осталась прежней.
Если все еще не очень понятно, то можно разобрать этот вопрос на примере айфона. В документации разрешение iPhone X составляет 1125 пикселей. Посмотрим на таблицу ниже и поймем, что плотность пикселя на данной модели в 3 раза выше, чем плотность в единицах измерения px. То есть 1125/3=375.
Зона лимбо
Что касается зоны между мобильными устройствами и планшетами, то это либо горизонтально развернутый телефон, либо какой-то небольшой андроид-планшет. Устройств в этой зоне мало. Поэтому, несмотря на то, что здесь могла бы быть дополнительная точка слома, обычно ее не делают из-за экономической нецелесообразности. Для кого стараться?
Планшеты
Четкой цифры размера, определяющей, что считать планшетом, нет, так как сейчас на рынке огромное количество устройств совершенно разных размеров, а последние айпады побольше некоторых ноутбуков. Но чаще всего планшетами считаются устройства шириной от 768px до 1024px.
Для отрисовки дизайна под планшет я выбираю привычные 768.
Десктоп экраны
Небольшие экраны — это ноутбуки или небольшие стационарные мониторы. Сюда входят экраны шириной от 1280px до 1440px. Раньше к этой категории также относили 1024px, но сейчас это все же больше планшетный размер.
Когда мы говорим про широкоформатные экраны, то речь идет в основном о разрешении 1600px и более. Таких экранов довольно много, более 36%, поэтому о них совершенно точно не стоит забывать.
Если вы, как и я, работаете на ноутбуке, советую выбрать размер его экрана для отрисовки дизайна под десктоп, чтобы удобнее было оценивать свой дизайн в режиме прототипа.
Если есть сомнения насчет того, как дизайн будет смотреться при меньших разрешениях, то проверяем все на минимальном размере перед точкой слома. Так, например, если макет нарисован на 1366px, а точка слома 990px, то рисуем дополнительный макет на 990px и проверяем, все ли там хорошо влезло.
Коротко подводим итоги и получаем небольшой сюрприз
Для выбора точек слома стоит ориентироваться на цели сайта и на статистику, а если ее нет, то на глобальную статистику.
Для отрисовки макетов ширины стоит выбирать, исходя из той же статистики. По умолчанию я предлагаю использовать: мобильные телефоны 360px, планшеты 768px, экраны 1366px и большие экраны 1920px. При этом обязательно проверять как будет вести себя интерфейс близко к точками слома.
В подарок тем, кто дочитал но конца, я даю ссылку на заготовку в фигме. Энджой!
Источник: medium.com
Адаптивная верстка сайтов: обзор подходов и CSS фреймворков
В настоящее время доля мобильного трафика растет стремительными темпами. С каждым днем людей, использующих девайсы с выходом в Интернет, становится все больше. Телефон всегда под рукой, в любом месте люди могут посмотреть необходимую информацию, прочитать новости и т. д. Обычный сайт можно просмотреть с помощью мобильного устройства.
Однако, возникают некоторые нюансы при просмотре — для чтения отдельных блоков текста на относительно небольшом экране необходимо масштабировать страницу. Как следствие, теряется читабельность, удобство, сайт нужно постоянно пролистывать, растягивать, приближать. Многие элементы управления сайтов неудобно использовать, так как страницы не рассчитаны на управление с помощью прикосновений к экрану. Для решения этих проблем начали разрабатывать сайты, способные удобно отобразить информацию на любом устройстве.
О статье
Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS, понимающих назначение CSS селекторов и т. д.
В данной статье будут рассмотрены виды версток, позволяющие корректно отображать сайты на любом разрешении, техники, с помощью которых это осуществляется. Разберем понятие CSS-фреймворка и сделаем сравнительный анализ наиболее популярных.
Виды версток
Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.
Фиксированная верстка
Фиксированная верстка (Fixed Layout) — подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:
Резиновая верстка
Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:
Адаптивная верстка
Отзывчивая верстка
Отзывчивая верстка (Responsive Layout) — это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.
Основные техники реализации сайтов под любое разрешение
Относительные значения
Использование относительных значений позволяет отобразить информацию и компоненты на странице без потери читабельности и удобства просмотра.
Относительные значения для размеров и отступов
Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера — указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.
При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:
- vw — 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
- vh — 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
- vmin — выбирается наименьшее из vw и vh;
- vmax — выбирается наибольшее из vw и vh.
Ниже рассмотрен пример использования vw и vh. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.
Относительные значения для размера шрифта
Существуют следующие относительные значения для шрифтов:
- em — задаёт размер относительно шрифта родителя;
- rem — задаёт размер относительно шрифта .
Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px).
Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html — 16px.
Максимальные и минимальные размеры компонентов
Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.
Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в max-width, это 500px. Как только контейнер достигнет этой ширины — он перестанет увеличиваться.
Использование медиа-запросов
С помощью медиа-запросов можно задать стили для следующих типов устройств:
- all — все типы (значение используется по умолчанию)
- braille — устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
- embossed — принтеры, использующие для печати систему Брайля
- handheld — смартфоны и аналогичные им аппараты
- print — принтеры и другие печатающие устройства
- projection — проекторы
- screen — экран монитора
- speech — речевые синтезаторы, а также программы для воспроизведения текста вслух
- tty — устройства с фиксированным размером символов
- tv — телевизоры.
Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.
Ссылки по техникам реализации адаптивной верстки
Подробнее просмотреть и изучить рассмотренные в данной статье подходы и другие можно по ссылкам:
- Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
- Адаптивная вёрстка: что это и как использовать
- Адаптивный и мобильный дизайн с CSS3 Media Queries
- Адаптивные изображения в CSS
- Техники адаптивной типографской разметки текста
CSS-фреймворки
CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.
Многие разработчики предпочитают использование CSS-фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:
- Более быстрая разработка
- Поддержка кроссбраузерности
- Поддержка различных устройств и размеров экранов
- Единообразие кода при работе в команде позволяет снизить число разногласий при разработке.
Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего CSS-файла, добавляются в заголовок веб-страницы.
Рассмотрим самые популярные CSS-фреймворки.
Bootstrap
Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap — это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap — интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений.
Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода — от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:
В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass.
- 12 — колоночная сетка
- Большое количество готовых для использования компонентов
- Поддержка Less и Sass
- Использование Normalize.css.
Material Design for Bootstrap
Material Design for Bootstrap — это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.
- 12 — колоночная сетка
- Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.
Materialize
Materialize — современная, адаптивная платформа, построенная на принципе материального дизайна. В платформу включен набор компонентов, а также стили для них. Проработаны анимации и эффекты в компонентах, чтобы они были максимально плавными. Все элементы и анимации интуитивны и понятны пользователю, а единый адаптивный дизайн упрощает UX для всех платформ.
- 12 — колоночная сетка
- Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
- Поддержка Sass.
Bulma
Bulma — современный CSS-фреймворк основанный на новом способе отображения Flexbox. Flexbox — самый современный инструмент компоновки, доступный в CSS.
- Использование Flexbox вместо колоночной сетки
- Большое количество готовых для использования компонентов
- Поддержка Sass
- Не используются JS-файлы
Pure
Pure — набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure — адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей.
- 24 — колоночная сетка
- Модульный фреймворк
- Не используются JS-файлы
- Использование Normalize.css
- Минимальное количество готовых компонентов и стилей.
Быстрый рост популярности просмотра сайтов на мобильных устройствах обуславливает необходимость реализации удобного и читабельного отображения компонентов в независимости от типа устройств и размеров экранов. Рассмотренные в данной статье подходы помогут создавать сайты для различных устройств и размеров экранов. Описание CSS-фреймворков упростит выбор подходящего фреймворка для использования в проекте.
Источник: jazzteam.ru
Как сделать адаптивный сайт под все разрешения экрана
Приветствую вас, случайные посетители и постоянные читатели блога Royal-Site.ru!
За время существования этого сайта, я менял шаблон несколько раз и даже создавал собственный с нуля.
Одна из главных задач при выборе нового шаблона — это адаптивная верстка сайта под все разрешения экрана.
Краткий план статьи:
- Как сделать адаптивную верстку сайта
- Адаптивная верстка CSS media запросы
- Самые важные разрешения экрана, при адаптивной верстке
- bootstrap адаптивный дизайн
- Проверка адаптивности сайта
Как достичь адаптивности? Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ — это адаптивная верстка сайта с помощью CSS.
Как сделать адаптивную верстку сайта
Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами вставьте следующий код:
Какой я был дурак, что не сделал этого сразу, когда пытался сделать адаптивную верстку сайта.
Проблема мобильных браузеров в их масштабировании верстки сайта, даже адаптивной.
Представьте себе, я рисую дизайн, потом прописываю все нужные стили и запросы, проверяю адаптивность сайта при разных разрешениях. Все вроде бы хорошо! Но, когда я открываю свой блог на смартфоне, я вижу, что сайт просто напросто сжался. Он не адаптировался к мобильному устройству, а просто уменьшились размеры шрифта, картинок и т.д.
Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!
Но ведь этого не может быть!
Оказывается, если не прописать код, который я указал выше, мобильный браузер не понимает, что сайт адаптивный и пытается просто уменьшить страницу сайта, чтобы она влезла в маленький экран мобильника.
Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).
Адаптивная верстка CSS media запросы
Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.
Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:
Это код означает, что стили заключенные между « < >» будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.
То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.
Самые важные разрешения экрана, при адаптивной верстке
- 320 px — Мобильные устройства (портретная ориентация);
- 480 px — Мобильные устройства (альбомная ориентация);
- 600 px — Небольшие планшеты;
- 768 px — Планшеты (портретная ориентация);
- 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
- 1280 px и более — PC.
Именно на эти разрешения и нужно делать упор и уделять им особое внимание при адаптивной верстке. Это самые распространенные виды разрешений экранов.
bootstrap адаптивный дизайн
Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.
Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.
Верстка на bootstrap отличается тем, что ширина блока или экрана делится на 12 равных частей. И присваивая определенный класс блоку, можно задать ширину блока равной нужному количеству частей.
Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:
Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.
Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:
Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.
Если разобраться, то работа с бутстрап делает работу с адаптивным дизайном очень быстрой. При чем эти стили точно работают корректно и не будет ничего кривого на сайте.
В будущем я планирую выложить несколько уроков по работе с bootsrap. Поэтому советую подписаться на обновления блога, чтобы не упустить этот момент.
Проверка адаптивности сайта
Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.
Я для этих целей рекомендую использовать следующий онлайн сервис —http://quirktools.com/screenfly/. Просто введите URL страницы для проверки и переключайте разрешения экранов в панели управления.
Очень точный и главное бесплатный сервис, который заслуживает уважение и благодарности от веб-мастеров и верстальщиков, которые занимаются адаптивной версткой сайтов.
Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.
Да, чтобы сделать адаптивный дизайн сайта, нужно хорошо потрудится. Но эти труды вознаградятся благосклонным отношением к вашему сайту поисковиков, и самое главное посетителей вашего сайта.
Источник: royal-site.ru