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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

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

Комментарии

Александр Колодько
5 октября 2017

Можно в ДевТулз подключить локальные файлы стилей с компьютера? Чтобы если я правлю локальный ЦСС, то в браузере это отображалось.


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

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

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

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

Как написать аккуратный код? Часть четвёртая: ответственность Расскажите, как автор советов работает с маргиналиями? Отслеживаете ли вы производительность программистов? Как и когда зарождающийся стартап в процессе своего развития должен подходить к вопросу имплементации билинга?




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

Висячие предлоги в английском 1 9 Как выжить в дистанционной работе. Исполнитель понимает задачу 2 Мне пока ни разу не удалось выбрать человека, который написал бы правильный текст 1