x
 
Куст
5 октября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Чем дизайнеру могут помочь инструменты разработчика в браузере?


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

В каждом браузере свой набор инструментов. Обычно открыть его можно с помощью сочетания Command+Shift+I на Маке и Control+Shift+I или F12 в других ОС.

Первая вкладка любого веб-инспектора — Элементы. На ней расположены основные инструменты для просмотра и редактирования открытой страницы. Обычно эта вкладка разделена на две части: слева разметка страницы, справа стили выделенного элемента.

Сафари
Хром
Фаерфокс

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

Редактирование разметки

Для того, чтобы выбрать элемент для инспектирования, кликнем на нём правой кнопкой и выберем в контекстном меню «Инспектировать»:

В других браузерах пункт меню может называться «Проверить элемент»

Отредактируем текст в выбранном элементе:

Для перехода в режим редактирования, нужно кликнуть на текст дважды. Чтобы сохранить изменения — нажать «ввод»

Заменим класс, чтобы посмотреть как выглядит кнопка в другом состоянии:

Заменим изображение:

Таким образом можно отредактировать любой атрибут

Включим отключенную форму:

Элементы на странице можно скрыть на время или удалить:

Удалить элемент можно также клавишами Delete или Backspace

Или менять местами перетаскиванием:

Редактирование стилей

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

Поправим внешний вид заголовка:

Цифровые значения можно изменять стрелками «вверх»/«вниз». Если при этом ещё зажать Контрол, то значения будут меняться десятками, если зажать Альт — десятыми долями

Поменяем регистр заголовка, добавив новое свойство:

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

Отключим цвет заголовка:

Посмотрим, как выглядит кнопка при наведении или в активном состоянии:

:hover — состояние элемента при наведении, :active — при нажатии, :focus — в фокусе, :visited — состояние посещённой ссылки

Тестирование адаптивности

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

Посмотрим, как выглядит страница проектов бюро на Айфоне:

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

Что дальше

Вёрстка и прототипирование — дисциплина Школы дизайнеров. Занятия с 27 августа. Мы напишем вам, когда будет открыт набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

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

Вот такой веб 2.0.

Что делать с версткой под ИЕ? Как бороться с багами? (Часть третья: логи) Не преступление использовать Бутстрап? 2 Как бороться с багами? (Часть вторая: отслеживание ошибок)




Недавно всплыло

3 Читаю книгу Джима Кемпа «Сначала скажите „Нет“». Что значат слова: «Никогда не завершайте сделку»? 9 1 Может быть есть возможность разбавить «боль» Синельникова «кайфом» Синельникова? 6