Как спроектировать и сверстать гибкий сайт

Содержание материала:

Гибкая разметка при верстке

Гибкая разметка при верстке

Здравствуйте уважаемые посетители моего блога. Мы уже с вами начали ознакомление с понятием адаптивной верстки и затронули частичку теоретической стороны этого вопроса в первой статье об истории адаптивной верстки.

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

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

Мета тег X-UA-Compatible управляет режимом отображением страниц в браузерах IE8+. Тег должен находиться в секции head страницы перед всеми остальными элементами, за исключением title и других мета-элементов. В противном случае он игнорируется!

Далее идет мета тег вьюпорта:

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

Еще вас скорее всего интересует вот эта часть кода:

Это часть кода специально для IE-8 чтобы он читал все теги с HTML5. Здесь подключаются две библиотеки, которые добавляют возможность в будущем использовать новые элементы и конечно медиа запросы, к которым мы еще придем в последующих занятиях.

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

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

Формулы перерасчета абсолютных величин в относительные

  • Цель/контекст=результат
  • 24px/16px=1.5em

Теперь вносим ясность в понятие изменений величин и размеров, значит все ширины будут указываться строго в %, а все размеры шрифтов в em. Бывают исключения, но в основном все так, как я написал.

Этапы замены размеров верстки

Наш основной блок, у которого ширина 960px заменяем на относительную ширину в 90%. Что это нам даст, а даст следующее, какой бы размер не был браузера, наш контент будет иметь одинаковые отступы с лева и права по 5%. Это мы задали размер глобальному блоку в котором все содержимое страницы, теперь время посмотреть на блоки с размерами 650px и 300px.

Обращаем внимание на формулу: цель/контекст=результат, цель — это блок с 650px, а контекст, ранее взятые 960px, которые сейчас уже 90% и в результате мы получаем такую запись: 650/960*100=67,70833333333333 — это и есть ширина в процентах нашего блока.

Аналогичным образом заменяем размеры и второму блоку с 300px на процентное соотношение используя все ту же формулу: 300/960*100=31.25%. Как видите ничего сложного, все довольно просто и понятно.

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

Что такое контекст в нашей формуле

Контекстом выступает всегда родитель, в первом случае, это глобальный размер 960px или как сейчас некоторые верстают 1140px, это и есть контекст. Но если мы допустим хотим наш блок, который имел 650px (67,70833333333333) поделить скажем еще на две части, тогда контекстом для етих частей уже будет размер 67,70833333333333% и так везде. Обратно же, это если вы будете переверстывать готовый шаблон под отзывчивый дизайн, а так можно просто написать 50%, и это будет половина от размера родителя.

Вторая формула перерасчета размеров шрифта

Перед обращением непосредственно к самой формуле давайте обратимся к записи в css, а именно к этому участку кода:

#2 — Гибкая разметка — перевод из статичной.

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

Гибкая верстка на практике — алгоритм расчета

На видеоуроке мы создадим самую обычную HTML-разметку, подключим к ней файл стилей. Все величины этой разметки у нас будут заданы в пикселях (px), т.е. это будет обычная статичная верстка.

Чтобы перевести нашу статичную верстку в гибкую нам необходимо будет перевести абсолютные величины, выраженные в px, в относительные — % и em. % будут использоваться для задания ширины блокам, а em — для определения размеров шрифтов и межстрочных интервалов. Для этого мы будем использовать определенный алгоритм:

Цель/Контекст = Результат.

Гибкая верстка — расчет ширины блока

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

650px/960px * 100% = 67.7%

Гибкая верстка — расчет размера шрифта

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

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

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

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

Однако я не могу не рассмотреть «резиновую» верстку – создание страниц, меняющих размер в зависимости от области просмотра.

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

Можно сказать, что при большом размере экрана сайт должен занимать всю доступную область, а при маленьком размере – соответствующим образом уменьшаться. Было бы не совсем справедливо утверждать, что «резиновая» верстка пытается подстроится под всех пользователей, но у нее близкая к этому задача. Интернет представляет собой конгломерат множества систем, которые обслуживают широкие группы пользователей способами, максимально учитывающими их индивидуальные потребности. Согласитесь, что одинаковое восприятие содержания или функциональности одного и того же сайта невозможно. Почему же внешний вид должен быть одинаковым для всех? «Резиновая» верстка больше подходит для Интернета и лучше учитывает его сильные и слабые стороны, чем страницы фиксированных размеров. Как уже было отмечено ранее, чем естественнее решение, тем оно эффективнее.

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

Дизайнеры-новаторы теперь могут заниматься так называемым «отзывчивым» веб-дизайном. Итан Маркотт, его активный сторонник, утверждает, что такой подход открывает новые возможности:

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

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

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

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

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

Одни и те же принципы дизайна на основе сетки могут использоваться как в «резиновой» верстке, так и в «отзывчивом» веб-дизайне. Юниты можно объединять в колонки и области, а размеры элементов менять в зависимости от основных параметров сетки. Эти элементы должны увеличиваться и уменьшаться в соответствии с этими же параметрами, но важно помнить, что изменяться должно не всё. Некоторые элементы могут и должны оставаться неизменными. В среде, где элементы бесконечно меняют размеры, очень важно сохранить постоянство, предоставить пользователям какие-нибудь ориентиры. По мере развития этой теории появятся новые возможности для дизайнеров, работающих в этой области. Но неизменной останется центральная роль дизайнера – человека, управляющего пользовательским восприятием.

Блочная верстка сайта

Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.

Отличия блочной вёрстки от табличной

Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега , то концепция блочной вёрстки основана на активном использовании универсальных тегов

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

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

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

Конечный HTML-документ представляет собой набор блоков

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

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

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

Разберём некоторые моменты.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

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

#clear запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

Программы для верстки сайтов.

06.02.2020

Программы для верстки сайтов.

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

Скорей всего если Вы верстаете больше года, то я для Вас не открою новых способов верстать быстро и качественно. Но возможно, даже верстальщик с опытом, возьмет на вооружение пару технологий и программ для ускорения в верстке.
Для того что бы верстать на хорошей скорости, и при этом качественно. Нужно обладать не только опытом, но и определенным набором технологий и программ. Я подобрал для Вас то что использую сам.

1. Редактор кода — думаю можно скачать бесплатно

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

Топ-пост этого месяца:  Как включить ссылки (закладки) в WordPress

Сейчас по факту у меня на пк установлены две программы для верстки, — IDE PHPStorm и Sublime Text. Саблайм хорошо выезжает на дополнительно установленных пакетах и темах. А вот PHPStorm, — умеет уже из коробки, то что обычно до устанавливаю на SublimeText3. Поэтому PHPStorm это мой основной редактор кода. Чаще всего на нем юзаю горячими клавишами:

  • Выравнивание кода(как правило по ) ( выделяю всё crtl + A, выравниваю ctrl+alt+L)
  • Поиск по всему проекту + найти и заменить (ctrl + shift +F)
  • Найти метод или его использование ( ctrl + клик левой кнопкой мыши)
  • Закомитить + запушить (ctrl + K ctrl + shift + K)
  • Работаю с базой данных проекта (на правой стороне панели редактора)
  • Обнять часть кода новым тегом html (ctrl +alt + J)
  • Показать идентичные куски кода (ctrl + alt + shift + J)
  • создание и использование сниппетов и пр.

2. Emmet.

Программа для верстки сайтов в программе редактора кода. Эдакий набор плагинов для текстовых редакторов. Этот товарищ поможет быстрее набирать код в HTML & CSS.
Например такой строкой:
nav>ul>li*3
По жамканью на tab Вы получите такой код:

Или вот так например в CSS :
bg
Даст:
background: #000;

3. CSS препроцессоры.

Это конечно не программа для верстки сайтов, а наверное больше быстрый и умный способ написания кода CSS. Сам использую LESS, SASS, SCSS. Разобравшись с одним из них, остальные Вы тоже поймете. Они отличаются только синтексом. Я использую препроцессоры потому что в них есть:

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

4. Grid (сетка).

Как правило .psd макет веб-дизайнер разбивает на колонки(12, 24 и прочие извращения). Самостоятельно подгонять под сетку с помощью отступов, это издевательство над собой. Поэтому лучше воспользоваться сетками от фреймворков. Самая известная от Bootstrap. Bootstrap — это свободный набор инструментов. Который закрывает сразу множество задач по верстке. Поэтому советую изучить его и использовать как повседневный инструмент в верстке.

Есть еще менее известные сетки, но не значит, что они хуже остальных, например:
Skeleton или
Smart-Grid(Дмитрий Лаврик), — это вообще самое лучшее что может быть в сетках для быстрой и качественной верстки сайтов.

5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб

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

Сам использую Gulp. Grunt немного по медленнее, и на тот момент когда я начинал изучать Таск-менеджеры, был на пике Gulp.
Ну и WebPack вроде как лучше всех, я садился разбирать, но так у меня и не пошло.
Gulp который я настроил, закрывает задачи на моих проектах

  • Расставляет префиксы CSS для всех браузеров
  • Минимизирует CSS удаляя пробелы, и переносы
  • Создает файлы .map указывая номер строк браузеру для того что бы дебажить изначальный код
  • Группирует медиа запросы(что бы не повторялись для разных элементов DOM в одной ширине)
  • Преобразует препроцессорный код в обычный CSS
  • Минимизирует изображения
  • Уродует и минимизирует код JavaScript
  • Объединяет все файлы CSS в один(уменьшая количество обращений к серверу)
  • Минимизирует файлы HTML
  • Отслеживает изменения в редактируемых файлах и самостоятельно обновляет браузер во время верстки
  • Конфигурирует файл Smart-Grid

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

6. Онлайн программы, для верстки и работы с .psd макетами сайтов.

И еще когда нет под рукой Photoshop или просто хочется что-то новенького, можно использовать для препарирования .PSD макета, — онлайн программы типа:

Как правильно и быстро верстать сайты

Всем привет, друзья. Сегодня мы затронем очень важную тему — быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку. Теперь, я с радостью поделюсь накопленными знаниями, хитростями и фишками скоростной верстки, чтобы вы, дорогие мои друзья, смогли заработать больше денег за единицу времени. Ведь именно скорость верстки влияет на то, какую колбасу вы будете кушать на завтрак. Обычно медленные веб-дизайнеры кушают на завтрак колбасу за 80 рублей из эмульсии шкурок, в то время, как более прозорливые и быстрые — хорошую докторскую за 900 рублей/кг. Конечно, есть много веб-дизайнеров, которые скажут — «Я выполняю работу вдумчиво и качественно, соответственно, медленно». Я не буду долго углубляться в психологический анализ, но это отговорки и самооправдание. Можно верстать очень быстро и качественно, это не картину маслом малевать.

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

1. Анализ макетов и подготовка к верстке

Пойдем по хронологии ваших действий — от работы с PSD макетом (или другим исходником), до, собственно говоря, верстки. Конечно, немаловажную роль играет макет, который нарисовали до вас или вы сами наваяли, так как правильно подготовленный макет позволит вам сэкономить кучу времени. В конце данного урока я приведу памятку для дизайнера по подготовке макета к верстке. А пока представим, что вы простой верстальщик и по определенным причинам вам пришлось верстать макет дизайнера, которому глубоко плевать на ваши проблемы и который слабо представяет, что делют с его макетом далее. Это типичная ситуация в настоящее время.

1.1 Визуально разбейте макет на повторяющиеся части, определите сетку

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

Вообще, очень важную роль в скорости работы играет использование CSS фреймворков. Не зависимо от того, стилизуете ли вы все элементы CSS фреймворка, например, Bootstrap или используете только сетку — вы ускоряетесь до скорости света при позиционировании элементов на странице и решении вопроса с адаптивностью сайта. Чаще всего, в наше нелегкое время, требуется именно адаптивная верстка. Если вы — веб-стдия, хотите выполнять проекты быстрее и порадовать ваших верстальщиков (если у вас такая система распределения обязанностей), научите веб-дизайнеров пользоваться сеткой. Недовольные возгласы о стандартизации веб-дизайна и ограничениях можно проигнорировать, мы не картины на Невском рисуем, а значит нужно использовать эффективные и быстрые инструменты для максимальной стандартизации. Не в ущерб качеству, конечно. Сетка будет не лишней точно и даст крепкую основу для верстки.

Если вы — самобытный верстальщик 80lvl и считаете, что сами сможете сделать сетку проекта лучше Bootstrap — разработайте вашу собственную сетку, протестируйте и подключите к вашему проекту. Проект без сетки — геморрой на долгие года, благоприятная и теплая среда для размножения HTML костылей в будущем.

1.2 Определите параметры проекта

Не зависимо от того, используете ли вы какой-либо CSS фреймворк, обязательно используйте CSS препроцессор. Это очень важно, так как позволит вам сэкономить время на написании CSS. Открывая любой свой выполненный проект я с ужасом наблюдаю, как много времени было потрачено на написание CSS, можно сказать, что 60-70% работы на этапе верстки — это написание CSS. И было бы логично данный этап автоматизировать. Я рекомендую использовать препроцессор Sass, но здесь вы можете выбрать любой препроцессор, который вам нравится. Если вам понравился Sass синтаксис, рекомендую ознакомиться с руководством Sass для самых маленьких, где я рассказываю о преимуществах использования препроцессора и привожу примеры, которые демонстрируют эффективность верстки с использованием Sass. Довольно трудно объяснить новичку преимущества использования препроцессора, но ребята, которые, как говорится, «уже хлебнули», понимают, на сколько это эффективный инструмент. Думаю, после выполения верстки 10-15 макетов к вам придет это понимание, а пока просто поверьте мне на слово — верстать с CSS препроцессором быстрее.

Создайте файл _typography.html, подключите к нему все необходимые стили и библиотеки. Это будет ваш базовый плацдарм с типовыми элементами. Исходя из данных открытого в графическом редакторе макета, определите такие параметры проекта, как:

  1. Базовый шрифт. Определяется для селектора body. Это размер и шрифт текста на текстовых макетах сайта, например, на странице «Статья» или размер и шрифт текста наиболее часто повторяющихся текстовых блоков на макете Landing Page. Если не смогли определить размер, так как, например, все элементы одностраничника разные, напишите font-size: 16px, это среднее значение по больнице. Отобразите базовую верстку в _typography.html;
  2. В файле _vars.sass определите переменную акцентного цвета и остальных явных цветов макета. Здесь и далее я буду приводить в пример и менно Sass, но вы можете без труда спроецировать информацию на ваш препроцессор. Постарайтесь задавать интуитивно понятные названия переменным и комментировать переменные, чтобы в дальнейшем не запутаться;
  3. Пройдитесь по всем страницам проекта и определите заголовки от h1 до h6 (Размеры, капс/некапс, шрифт, цвет). Сделав это заранее, вы сэкономите около 10 минут вашего времени или 1 часа, с учетом времени на прокрастинацию. Также определите инверс для заголовков и цвета текта. Добавьте родительский класс .dark-section ко всем заголовкам и тегам типографики p, blockquote, ol, ul, если в вашем макете есть секции «светлым по черному». Отобразите базовую верстку типографики в _typography.html;
  4. Также было бы полезно сразу определить типографику вашего проекта. Для тега body определите такой параметр, как line-height, обычно это 1.4 — 1.7 без указания единиц измерения. Расстояние между строк базового текста должно быть ориентировочно такое-же, как на макете в графическом редакторе. Здесь очень важную роль играет ваш глазомер, он очень сильно влияет на скорость вашей работы. Вам не придется измерять линейкой всё и вся, если ваш глазомер работает как надо. Данный скилл, к сожалению, развивается только с опытом и я не могу представить себе упражнения лучше, чем верстка, сам рабочий процесс.
  5. Определите кнопки. В вашем макете, наверняка есть кнопки. Определите параметры самой большой кнопки и используйте CSS модификатор для получения кнопок другого размера. Не определяйте заранее отношение элементов к «внешнему миру», такие как float, только внешний вид. Единственное, опытным путем было выявлено, что чаще всего кнопки наиболее универсальны по отношении к внешним элементам, если определены, как display: inline-block по-умолчанию. Отобразите базовую верстку кнопок в _typography.html;
  6. На ваше усмотрение, определите другие специфичные конкретно для вашего проекта параметры и повторяющиеся блоки заранее. Если вам кажется, что можете что-то забыть — комментируйте.

1.3 Ускоряем экспорт данных из макета

Раньше было такое понятие, как «Нарезка изображений» или «Нарезка макета». Сейчас такое определение не совсем корректно и более подойдет Экспорт данных из макета. Экспорт данных заключается в экспорте изображений и определении параметров для CSS.

Если вы пользователь Photoshop, вы можете использовать плагины для определения CSS свойств, такие, как CSS Hat. Отличная альтернатива подобным плагинам и инструментам — развитый глазомер. Когда у вас будет достаточный опыт, вы естественным образом откажетесь от подобных инструментов. Обратите внимание, что копируя абсолютно все CSS свойства из CSS Hat, вы будете верстать несколько быстрее, но потеряете в качестве и возможностях кастомизации. Дело в том, что CSS Hat не всегда правильно определяет отношение элементов к другим. Там где нужен padding, он определяет margin, там где нужна резиновая ширина или значение в процентах, он определяет фиксированные значения. Поэтому развивайте глазомер и храните базовые параметры в переменных.

Для быстрого экспорта картинок достаточно пользоваться новым Adobe Photoshop или Adobe Experience Design. У первого достаточно кликнуть на слое правой кнопкой мыши и вырать пункт Quick Export As PNG. В Adobe XD процесс экспорта изображений также прост и даже есть возможность экспорта нарисованных иконок в формат SVG. На данном этапе не слишком заморачивайтесь оптимизацией изображений, так как это задача для таск-менеджера. Об этом чуть позже.

Что касается иконок:

  1. Если это сложные иконки или иконки-изображения, которые предположительно должны меняться контент-менеджером через админку сайта — экспортируйте их как png и подключайте в тег img, как обычные картинки;
  2. Если это «фиксированные» иконки, которые ни под каким предлогом не будут изменены на сайте и контент-менеджеру их менять незачем (например, иконки телефонов, почты, карты и т.д.), можете объединить их в спрайт и использовать через CSS, задавая одной картинке разные координаты background-position. Данную операцию можно автоматизировать с помощью Gulp плагина css-sprite. Хотя можете сделать сами, если иконок немного, просто разбив направляющими поле на матрицу из квадратов заданной ширины и высоты. К Gulp вернемся чуть позже и подробнее рассмотрим важность таск менеджера в быстрой верстке. Только предварительно убедитесь, что дизайнер не использовал какой-либо шрифтовой айконпак. Если это так то достаточно будет подключить соответствующий айконпак к проекту;
  3. Если это одноцветные простые иконки, также убедитесь, что дизайнер не использовал шрифтовой айконпак. Если это так то подключите соответствующий айконпак к проекту. Чаще всего используется шрифтовой айконпак Font Awesome. Если иконки самобытные — переведите их в вектор и создайте свой шрифтовой айконпак. У нас есть урок на эту тему: Создание шрифтового Icon Pack с использованием сервиса Fontello.

2. Скорость печати

После того, как вы подготовили все материалы, экспортировали картинки, сделали шрифтовой Icon Pack проекта, подготовили все иконки, настроили проект, можно приступать к верстке. Думаю, очевидно, что если вы хорошо знаете теги и CSS свойства, узким местом в скорости может быть только скорость набора символов на клавиатуре в процессе HTML верстки и написания CSS свойств. Для прокачки данного скилла более, чем достаточно освоить какой-либо метод быстрого набора символов на клавиатуре. Методов много и эта информация легко гуглится. Занимайтесь, практикуйтесь и все получится. Здесь также немаловажную роль играет практика именно верстки.

Мне как-то написал начинающий веб-разработчик, который сетовал на то, что его мечты о легком заработке не оправдались и за верстку макета Landing Page на биржах фриланса ему предлагают 2000 руб. Он отправил мне примерный макет. Я спросил, сколько бы он взял за этот макет денег, на что бедолага ответил мне — 10-12 т.р. Если бы мне предлагали на верстку LP за 2000, когда у меня была небольшая пригоршня опыта, как у этого парня, я искренне был бы рад таким возможностям. Конечно, сейчас верстка в моем исполнении стоит несколько дороже этой цифры, но если бы я брал такие проекты за 2т.р, с текущей скорость работы я без проблем поднимал бы 4-5 т.р в день без потери в качестве, работая по 7 часов в день. Не густо, но уже не плохо. Вообще, признаюсь вам, друзья, меня подбешивают нытики, у которых все плохо, у таких всегда будет куча отговорок и бублик в кармане. Поэтому оставим эту историю и двигаемся дальше к нашей цели верстать быстро и качественно.

3. Используйте Emmet и/или Jade

Я люблю Emmet. Благодаря этой полезной штуке, моя работа в 10 раз быстрее, чем без нее. Без лишних слов, просто посмотрите урок: на YouTube.

Также, вы можете использовать Jade или любой другой HTML препроцессор. Штука тоже удобная и классная, но для моих задач хватает Emmet с головой. Вангую много недовольных поклонников Jade, но несмотря на все преимущества и фишки, include для меня не многим проще вставки шапки Ctrl+V, а репит миксина не легче того-же Ctrl+Shift+D. Теоритически, если подумать, изменив шаблон миксина, можно не заморачиваться с переверсткой однотипных накопированных элементов, но таких ошибок я не допускаю, да и крупные проекты не по моей части, поэтому, надобности в ускорении подобных моментов нет. Пробуйте, друзья, экспериментируйте, может вам понравится такой инструмент 🙂

4. Используйте ваши наработки

Используйте Github Gist для сохранения ваших наработок, кусов кода, блоков и даже целых секций. Всего того, что вам может оперативно пригодиться в процессе верстки. У нас есть урок по настройке Github Gist в редакторе Sublime Text для быстрого доступа и поиска нужного гиста: урок на YouTube с таймкодом на подключении Gist и отдельный урок по Gist.

Топ-пост этого месяца:  Новые и улучшенные шрифты Google Fonts

5. Используйте таск-менеджер

Использование таск менеджера, например, Gulp — важнейший элемент быстрой работы над версткой. С помощью таск-менеджера вы сможете автоматизировать такие моменты, как: создание рабочего веб-сервера с автообновлением страницы при сохранении в редакторе кода; удобное использование препроцессоров; автоматизация рутиных задач, таких, как оптимизация изображений, сжатие CSS, JS, если нужно, то и HTML и многие другие задачи.

Вы можете также использовать инструменты типа Prepros, но Prepros — это не Gulp. Для Gulp существует тысячи полезных плагинов — от работы с файловой системой, создания спрайтов, до генерации шрифтовых иконок и многое другое. Очень часто меня спрашивают, в чем разница между Gulp и Prepros, вот вам и ответ. За один раз вы сможете настроить целый комбайн, построить нейросеть задач и пустить по трубам горячую воду, все будет автоматически работать и экономить ваше время при работе над более или менее сложными проектами.

Более подробно изучить Gulp вы можете в уроке Gulp для самых маленьких — подробное руководство.

6. Изучайте jQuery

Если бы данное руководство было написано для Front-End разработчиков, все сводилось бы к изучению JavaScript и его фреймворков, таких, как Angular. Но я не силен во Front-End, как и в программировании в целом, моя стихия — веб-дизайн, поэтому пусть настоящий глубокий фронтенд остается на закуску акулам прграммирования. Чаще в процессе верстки приходится решать несколько другие задачи. А именно: анимация каких-либо блоков, настройка сортинга в таблицах, создание табов и аккордеонов, подключение библиотек, определения фоллбека для SVG файлов, определение параметров документа для несложных операций и прочие мелкие скриптовые работы. Для этих целей нет лучше библиотеки, чем любимой всеми верстальщиками jQuery. Она проста, элегантна и обрасла огромным количеством плагинов, которые решают практически все необходимые задачи маленьких и средних проектов.

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

jQuery не просто так был вынесен в отдельный пункт. Чаще всего узким местом верстки по времени являются многочасовые затупы над скриптами проекта и чем лучше вы разбираетесь в jQuery, тем быстрее выполняете проекты без изнурительного поиска решений на Stack Overflow.

Для решения типовых задач (карусели, галереи, попап окна, валидация форм и т.д.) используйте jQuery плагины, не стоит писать свои велосипеды — это долго, нестабильно и неэффективно в большинстве случаев.

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье «Как стать крутым веб-дизайнером», но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

  1. Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
  2. Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
  3. Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
  4. Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
  5. Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
  6. Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: «Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок. «;
  7. Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
  8. В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
  9. Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
  10. Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
  11. Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? — да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

2. Как быть с Perfect Pixel? — я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея, простите за выражение, говно, то хоть сколько ее не полируй и подгоняй по пикселам, она так и останется неработающим высером. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

3. Почему бы все картинки не сделать спрайтами, ведь тогда будет всего один запрос к серверу? — есть изображения, которые должны загружаться контент-менеджером. Вряд ли контент-менеджер сможет быстро и безболезненно вычислить координаты новой добавленной в спрайт картинки. Не забывате о тех, кто будет обслуживать и наполнять сайт.

4. Где кончается грань верстки и начинается Front-End, это разве не одно и то же? — все просто, если стоит задача разработать сложный интерактивный интерфейс какого-либо сервиса или веб-приложения, где нужна тесная работа с базой данных — это Front-End. Такие уникальные проекты выходят за рамки области компетенции и бюджета одного фрилансера, чаще всего подобные задачи ставятся команде разработчиков и подходы к таким проектам совершенно другие.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Как сверстать изогнутую линию?

Готовое решение не прошу 🙂 как минимум на чем лучше это сделать canvas или svg(или более подходящий вариант)

2 ответа 2

Inkscape вот такую штуку сгенерировал — сама кривая

Можно двумя радиальными градиентами

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css svg canvas или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Как сделать дизайн сайта, если вы новичок

Рассказываем, как сделать красиво, если у вас раньше никогда не было опыта в этой сфере.

Многие новоиспеченные фрилансеры думают о том, как получить заказ и сделать хороший дизайн. Тоже из их числа? На практике все не так страшно, как кажется на первый взгляд. Первое, что нужно сделать, — начать действовать.

Определитесь с целью

Для начала нужно понять, зачем вашему клиенту нужен сайт. Пусть он ответит на несколько простых вопросов:

  • Чему посвящен сайт?
  • Какие задачи должен решать?
  • Как планируется продвигать сайт?
  • Какая у сайта должна быть структура?
  • Какой контент планируется размещать?
  • Есть ли у клиента готовый брендбук?

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

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

Определитесь с типом сайта

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

Лендинг

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

Корпоративный сайт

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

Интернет-магазины

Эти сайты знакомы каждому из вас: AliExpress, OZON, «М.Видео» и десятки других аналогичных сайтов. Главный вызов дизайнеру здесь — в количестве информации и товаров, а также проектировании страницы заказа.

Изучите конкурентов

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

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

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

Найдите референсы

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

Если вы новичок в дизайне, делать это самому — сомнительное решение. Лучше всего найти примеры сайтов, которые вам нравятся, и перенять некоторые идеи. Только не перерисовывайте понравившийся сайт от шапки до футера — это уже откровенный плагиат. Рекомендуем сделать подборку из пары десятков (и больше) сайтов смежных тематик, оформление которых вам понравилось, и приглядеться к деталям, разобрав макеты на составные части.

Более того, подборку референсов вы можете смело показать заказчику. Вместе выберете подходящий стиль, что поможет избежать ненужных правок в дальнейшем. Найти множество хороших примеров можно на Behance, Awwwards и Pinterest.

Как сделать красивый сайт

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

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

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

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

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

Подойдет в том случае, если вы используете продукты компании Apple, так как программа пока доступна лишь для iOS.

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

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

Рассмотренные в статье принципы — первый шаг на пути становления дизайнера. Если вы действительно заинтересованы в создании классных продуктов, вам предстоит открыть для себя еще очень много нового и интересного. Начать можно с наших вебинаров, а стать настоящим профессионалом — с помощью годового курса «Веб-дизайн с 0 до PRO».

Что такое адаптивная верстка и зачем она нужна

Еще в 2015 году Google внедрил изменения в алгоритмы своей поисковой системы, которые теперь учитывают адаптированность сайта под мобильные устройства как важный пункт при ранжировании сайта. Дата была удачно названа Мобилгеддон (Mobilegeddon), как сравнение с Армагеддоном. Одно только такое введение требований от поисковиков к наличию мобильной версии сайта может оправдать важность адаптивного дизайна. Проще говоря, веб-сайт должен быть удобным для просмотра на смартфоне.

Требования к адаптивной верстке включают в себя такие элементы дизайна, как:

  • читаемый текст без необходимости его увеличения;
  • достаточное количество места для целей касания (tap targets);
  • отсутствие горизонтальной прокрутки.

На сегодня уже почти 4 миллиарда пользователей используют смартфоны для серфинга в Интернете.

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

Более 50% поисковых запросов в Интернете теперь происходит с мобильного устройства.

Чтобы ваш веб-сайт мог работать с карманными устройствами (не создавая отдельное приложение), вам для начала стоит признать – адаптивная вёрстка важна для пользователей смартфонов.

Давайте рассмотрим более детально, почему и как это происходит.

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

Что такое адаптивная верстка?

Адаптивный веб-дизайн (RWD — Responsive web design) создает систему, позволяющую одному сайту (с одним URL-адресом и одним источником контента) реагировать и адаптироваться к размерам устройства пользователя. Адаптивный веб-сайт создан с использованием верстки с гибким макетом, который подстраивается под размеры экрана устройства.

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

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

Сам термин «адаптивная верстка» был фактически придуман в 2010 году веб-дизайнером Итаном Маркоттом. Сегодня адаптивная верстка в веб-дизайне уже не новая тенденция, а скорее проверенный временем способ мышления, стоящий за созданием сайтов.

На сегодня наличие адаптивного веб-сайта больше не является еще одной возможностью для развития вашей инфраструктуры — это уже необходимость!

Преимущества мобильного адаптивного дизайна

  • Преимущество адаптивного макета номер один— это получение гарантии того, что любой пользователь на любом устройстве будет иметь наилучшие возможности взаимодействия с контентом на вашем сайте.
  • Адаптивная верстка веб-сайта также является отличным способом улучшить контент на вашем сайте. Вы сможете убедиться, что те, кто использует мобильное устройство, видят всю важную информацию.
  • Благодаря особенностям алгоритма Google, адаптивный веб-дизайн повышает видимость сайта в поисковых системах, поскольку он удобен для просмотра на мобильных устройствах.
  • Сайт с качественным представлением контента на мобильном устройстве будет находиться в результатах поиска выше, чем сайт, хорошо отображающий контент только на десктопах.

Почему адаптивный дизайн важен для бизнеса

  • Расширяется охват клиентов благодаря захвату пользователей небольших устройств (планшетов и смартфонов);
  • Постоянный опыт работы с широкой аудиторией, который может увеличить количество потенциальных клиентов, продажи и конверсии;
  • Аналитика, отслеживание и отчетность по версиям сайтов для десктопов и мобильных устройств могут быть в одном месте;
  • Затраты времени и стоимость управления контентом снижается;
  • Более 60 % запросов в Google наконец первого квартала 2020 делаются с мобильных устройств.

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

Первый называется динамическим показом (Dynamic Serving), в котором используется один и тот же URL-адрес, но разные коды HTML и CSS. Страницы распознают устройство, на котором они просматриваются, и предоставляют соответствующий код.

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

Топ-пост этого месяца:  Vue js CMS как настроить страницу отзывов, создать FAQ для приложения и управлять блогом

Учтите, что на Google ежедневно приходится более 5,6 миллиардов поисковых запросов.
Рекомендуемая Google конфигурация для сайтов, оптимизированных для смартфонов, — это сайты с адаптивным веб-дизайном.

Google даже предлагает тест на адаптивность сайта под мобильные устройства, чтобы вы могли увидеть, насколько легко посетитель может использовать вашу страницу на мобильном устройстве. Вы просто вводите URL страницы и получаете оценку.

Как создать адаптивный дизайн

Как сделать адаптивную верстку? Есть несколько моментов, о которых стоит подумать при создании адаптивного макета. Это процесс, который требует определенной системы проектирования и иерархии контента среди различных устройств.

Три основных компонента адаптивного веб-дизайна включают в себя:

  • Гибкая (плавающая) сетка — fluid grid;
  • Гибкий текст и изображения;
  • Медиа-запросы.

Рассмотрим каждый из этих элементов детальнее.

Плавающая Сетка (Fluid Grid)

Сетка является ключевым элементом для создания адаптивного макета.
На сегодня сетки уже не являются чем-то новым. Веб-дизайнеры использовали сетки для создания веб-сайтов с самого начала. Однако в прошлом эти сетки имели фиксированную ширину и не позволяли поддерживать плавную компоновку.

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

Гибкий текст и изображения

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

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

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

Медиа-запросы

Медиа-запросы — это код, который обеспечивает гибкость макета на адаптивных веб-сайтах. Медиа-запросы определяют код CSS, который будет применен соответственно, в зависимости от размеров и ориентации устройства (например, книжная ориентация iPhone или альбомная ориентация iPad и т. д.).

Медиа-запросы допускают существование несколько макетов дизайна, которые будут использовать одну и ту же HTML-кодированную веб-страницу.

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

Обратите внимание на:

Пользовательское тестирование адаптивных сайтов

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

Существует множество способов провести пользовательское тестирование, чтобы получить максимально полезную обратную связь.

Такие сайты, как UserTesting.com, предоставляют пользователям тестирование за небольшую плату или бесплатно. Различные методы, такие как тестирование in-the-wild и карточная сортировка (Card Sorting), также могут помочь обнаружить неожиданные болевые точки и слабые места в использовании вашего продукта.

Браузерное и устройство-зависимое тестирование на адаптивный дизайн

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

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

Вы будете удивлены тем, что можно обнаружить при переходе от одной операционной системы к другой, от одного устройства – к другому.

Вдохновение от других адаптивных сайтов

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

Задумайтесь над следующими вопросами:

  • Какие веб-сайты или приложения вы часто используете на своем мобильном телефоне или других портативных устройствах?
  • Почему вы предпочитаете один сайт другим, которые могут предоставлять аналогичные услуги?
  • Предпочитаете ли вы использовать их на смартфоне или на настольном компьютере?

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

Будущее адаптивного дизайна для мобильных устройств

Мы знаем, что Google требует следующих оптимизированных элементов для эффективного взаимодействия с пользователями мобильных интерфейсов, используя адаптивный веб-дизайн:

  • Текст, с читаемым размером без необходимости его принудительного увеличения;
  • Контент, который умещается на экране устройства, без необходимости горизонтальной прокрутки;
  • Ссылки и кнопки, расположенные на достаточном расстоянии друг от друга, чтобы не было затруднений в работе с интерфейсом;
  • Разумное время загрузки страниц;
  • Не используйте Flash!

Эти правила адаптивной верстки очень важно соблюдать.

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

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

Является ли ваш сайт Mobile-Friendly?

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

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

Вместо зеленого видите большие красные иксы? Значит вам следует начать предпринимать определенные шаги для оптимизации работы вашего сайта под пользователей мобильных устройств.

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

Подводя итоги

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

В этой статье мы ответили на общий вопрос «что такое адаптивный дизайн?». Есть три компонента адаптивного веб-дизайна: плавающая сетка, гибкий текст и изображения и медиазапросы.
Помните о важности адаптивного веб-дизайна для вашего бизнеса.

Выполнение вашего сайта по всем правилам адаптивной верстки поможет вам:

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

Google привлекает к коммерческим сайтам более 85% трафика мобильного поиска и рекомендует применять на ваших сайтах адаптивный дизайн. Поскольку адаптивный веб-дизайн удобен для мобильных устройств, он помогает улучшить видимость в поисковых системах, что, в свою очередь, может увеличить количество посетителей вашего сайта.
Увеличение трафика приводит к лучшей генерации потенциальных клиентов, дополнительным конверсиям и увеличению продаж — три основные причины, по которым вам нужен адаптивный веб-дизайн!

От редакции ITVDN

Мы с вами рассмотрели необходимость адаптивной верстки для каждого современного сайта. Такой подход является конкурентным преимуществом для компании из любой сферы бизнеса. Если говорить о разработчике, то навыки создания адаптивных web-сайтов будут существенным конкурентным преимуществом при поиске работы. Специальные знания и навыки вы можете получить, обучаясь по видео курсам ITVDN. В первую очередь это курсы:

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

По материалам статьи за авторством Сони Грегори.

16 правил грамотной верстки макета

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

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

Конечно, можно выполнить любую «дизайнерскую мечту», вроде развевающихся вымпелов, тонкого градиента в 24 контрольных точки, фона в виде северного сияния… Но если отбросить эзотерику, то с практической точки зрения «косяки» в созданном дизайне ведут к неоправданному усложнению верстки, и на выходе получается не то, что изначально было задумано или как хотел заказчик. Главное — от этого страдает эффективность сайта.

  1. Сетка. Соблюдайте сетку. С её помощью можно быстро собрать каркас страницы в соответствии с предложенным дизайном. К тому же это просто удобно.
  2. Именование слоёв в файле макета. Имена слоёв по названию должны соответствовать тому, что на них находится и не иметь непонятных названий. Это облегчает и поиск, и понимание логики созданного.
  3. Наложение слоёв. Его лучше использовать только обычное. Никаких затуханий или исключений. А эффекты слоя — уже поверх.
  4. Делать границы с использованием градиентов также не стоит.
  5. Шрифты. Этот отдельный момент хочется выделить не только в отдельный пункт, но и в рамочку и с кучей восклицательных знаков. Прикладывайте к созданному макету используемые в нём шрифты (хотя бы в .ttf). Зачастую поиск необходимого шрифта отнимает очень много времени. Помните также, что существуют лицензионные ограничения.
  6. Наличие более чем двух нестандартных шрифтов на странице делает затруднительной её визуализацию в браузере, как следствие, пользователем такая страница воспринимается негативно.
  7. Элементы типографики. Таблицы, заголовки, списки и их параметры, оформление цитат и т.п. типографические элементы лучше сделать в отдельном макете. Становится понятнее, какие стили прописывать при вёрстке ресурса.
  8. Используйте несколько проработанных стилей, которые будут повторяться в макете, помогая структурировать содержание. (Классический пример: Заголовок 1, Заголовок 2, Заголовок 3, Заголовок 4, основной текст)
  9. Элементы навигации. Кнопки, ссылки и элементы управления обычно имеют минимум четыре состояния: обычное отображение, стиль отображения с наведенным курсором, нажатая (процесс) и посещенная. Для кнопок меню и навигации есть положения «текущий активный пункт» и «неактивная кнопка» (в зависимости от текущих условий и событий на странице). Не надо заставлять верстальщика делать лишнюю работу, додумывая недостающее, и гадать, какой стиль элемента имелся ввиду.
  10. Каждую часть (блок) стоит хранить в своей папке с понятным названием.
  11. Дополнительные функции и блоки. Связанный по смыслу контент (выпадающие списки, дополнительные функции или окна) должны также находиться в связанных по смыслу папках.
  12. Слои со скрытыми элементами. Стоит выделить слой цветом, если он содержит в себе скрытые элементы (выпадающие списки, дополнительные функции или окна)
  13. Фон. Если используется повторяющийся фон, то надо дать верстальщику 1 единичку этого узора, чтобы он не резал и не подгонял его.
  14. Размеры шрифтов. Никаких чисел со знаками после запятой. Используйте целые единицы.
  15. Разрешение макета 72 dpi.
  16. Если предполагается адаптивность макета — создайте макет в нескольких размерах: для десктопа, для планшета в портретном и ландшафтном отображении, для смартфона.

Что имеем в итоге, верстая макет таким образом и следуя простым правилам:

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

Финальная история. Несколько лет назад одна крупная компания создала сайт с замечательно-восхитительным дизайном первой страницы-заставки. По результатам первого месяца оказалось, что число посещений сайта измеряется сотнями пользователей в мировом масштабе. Оказалось, что полное воплощение дизайна сделало сайт настолько тяжелым, что больше 90% посетителей не стали дожидаться загрузки стартовой страницы.

Учим, как правильно: профессия «Веб-дизайнер»

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

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

Конечно, можно выполнить любую «дизайнерскую мечту», вроде развевающихся вымпелов, тонкого градиента в 24 контрольных точки, фона в виде северного сияния… Но если отбросить эзотерику, то с практической точки зрения «косяки» в созданном дизайне ведут к неоправданному усложнению верстки, и на выходе получается не то, что изначально было задумано или как хотел заказчик. Главное — от этого страдает эффективность сайта.

  1. Сетка. Соблюдайте сетку. С её помощью можно быстро собрать каркас страницы в соответствии с предложенным дизайном. К тому же это просто удобно.
  2. Именование слоёв в файле макета. Имена слоёв по названию должны соответствовать тому, что на них находится и не иметь непонятных названий. Это облегчает и поиск, и понимание логики созданного.
  3. Наложение слоёв. Его лучше использовать только обычное. Никаких затуханий или исключений. А эффекты слоя — уже поверх.
  4. Делать границы с использованием градиентов также не стоит.
  5. Шрифты. Этот отдельный момент хочется выделить не только в отдельный пункт, но и в рамочку и с кучей восклицательных знаков. Прикладывайте к созданному макету используемые в нём шрифты (хотя бы в .ttf). Зачастую поиск необходимого шрифта отнимает очень много времени. Помните также, что существуют лицензионные ограничения.
  6. Наличие более чем двух нестандартных шрифтов на странице делает затруднительной её визуализацию в браузере, как следствие, пользователем такая страница воспринимается негативно.
  7. Элементы типографики. Таблицы, заголовки, списки и их параметры, оформление цитат и т.п. типографические элементы лучше сделать в отдельном макете. Становится понятнее, какие стили прописывать при вёрстке ресурса.
  8. Используйте несколько проработанных стилей, которые будут повторяться в макете, помогая структурировать содержание. (Классический пример: Заголовок 1, Заголовок 2, Заголовок 3, Заголовок 4, основной текст)
  9. Элементы навигации. Кнопки, ссылки и элементы управления обычно имеют минимум четыре состояния: обычное отображение, стиль отображения с наведенным курсором, нажатая (процесс) и посещенная. Для кнопок меню и навигации есть положения «текущий активный пункт» и «неактивная кнопка» (в зависимости от текущих условий и событий на странице). Не надо заставлять верстальщика делать лишнюю работу, додумывая недостающее, и гадать, какой стиль элемента имелся ввиду.
  10. Каждую часть (блок) стоит хранить в своей папке с понятным названием.
  11. Дополнительные функции и блоки. Связанный по смыслу контент (выпадающие списки, дополнительные функции или окна) должны также находиться в связанных по смыслу папках.
  12. Слои со скрытыми элементами. Стоит выделить слой цветом, если он содержит в себе скрытые элементы (выпадающие списки, дополнительные функции или окна)
  13. Фон. Если используется повторяющийся фон, то надо дать верстальщику 1 единичку этого узора, чтобы он не резал и не подгонял его.
  14. Размеры шрифтов. Никаких чисел со знаками после запятой. Используйте целые единицы.
  15. Разрешение макета 72 dpi.
  16. Если предполагается адаптивность макета — создайте макет в нескольких размерах: для десктопа, для планшета в портретном и ландшафтном отображении, для смартфона.

Что имеем в итоге, верстая макет таким образом и следуя простым правилам:

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

Финальная история. Несколько лет назад одна крупная компания создала сайт с замечательно-восхитительным дизайном первой страницы-заставки. По результатам первого месяца оказалось, что число посещений сайта измеряется сотнями пользователей в мировом масштабе. Оказалось, что полное воплощение дизайна сделало сайт настолько тяжелым, что больше 90% посетителей не стали дожидаться загрузки стартовой страницы.

Учим, как правильно: профессия «Веб-дизайнер»

Добавить комментарий