Как посмотреть макет сайта в браузере
Демонстрация макета дизайна сайта клиенту очень важна в процессе разработки сайтов или приложений. Эксперты советуют приглашать клиентов к себе и демонстрировать вживую, но со многими нашими клиентами мы работаем удаленно, и у нас нет такой возможности. Я расскажу о технической части этого процесса и не буду затрагивать темы общения с клиентом.
Почему плохо пересылать клиенту просто картинки?
У меня было несколько курьезных случаев, когда клиент получал макет дизайна в виде графического файла и не мог правильно его оценить. Это случалось из-за программного обеспечения, в котором он просматривал макет. Например, стандартные просмотрщики Windows и OS X показывают картинку целиком на экране, уменьшая её пропорционально. Большую разницу в масштабе легко заметить. Но иногда масштаб картинки уменьшается до 90–80%, и не каждый человек может это сразу заметить, а в стандартном просмотрщике Windows 7 вообще нельзя установить точный масштаб 100%. В результате, когда клиент видел уже сверстанные HTML странички, он удивлялся, почему всё такое крупное и отличается от того, что было в макетах.
Поэтому лучше не угадывать, каким ПО клиент будет просматривать дизайн макет сайта, и найти решение, с помощью которого клиент открывал бы его у себя на компьютере в 100% масштабе.
Демонстрация с предсказуемым результатом
В то время еще не было штук вроде InVision или RedPen, подошел бы хоть какой-то сервис демонстрации макетов дизайна клиенту, и я решил создать собственный инструмент.
Я начал с прямого подхода и создал шаблон странички, в которую, по замыслу, нужно было дописывать только src макета.
Первая трудность, с которой я столкнулся, заключалась в следующем. Макеты сайтов обычно рисуют больше минимально требуемой ширины. Если разместить картинку просто с помощью тега , то при окне, меньшем ширины картинки, появится неприятный горизонтальный скролл, и основная часть макета спрячется за границей окна. Тогда я решил, что картинку нужно размещать как фон. Добавить в фон не составило труда.
Возникла еще одна проблема — страница только с фоновой картинкой не скроллилась по вертикали и была видимой только ее часть до «линии перегиба». Нужна была какая-то «распорка», чтоб страница прокручивалась до низа макета. Тогда я использовал саму картинку как «распорку». Для этого я добавил с той же картинкой и установил ей CSS свойство visibility: hidden .
Этот вариант был уже вполне рабочим и меня устраивал.
Спустя некоторое время мне захотелось как-то оптимизировать этот шаблон. Он немного разрастался с использованием дополнительных фонов. Таким образом, макеты выглядели еще правдоподобнее, так как при любой ширине экрана фон его полностью заполнял. Что мне нужно было оптимизировать? Больше всего не нравилось вводить путь к картинке два раза. Хотелось свести это действие к минимуму. Я попросил одного из знакомых верстальщиков помочь мне, и, используя JavaScript, а если точнее, jQuery, он сделал указание пути только в начале файла один раз. Тогда я еще ничего в этом не понимал.
Со временем я стал больше интересоваться JavaScript и решил переписать этот кусочек на чистом JavaScript, дабы не дергать библиотеку jQuery для такой маленькой задачи. И у меня получилось следующее:
С таким шаблоном я был, в принципе, уверен, что заказчик увидит макет корректно и в нужной среде — в браузере.
Дополнительные фишки
В зависимости от нужд я пытался добавлять кое-какие фишки. Например фиксированное меню. Много экспериментировал с фоновыми изображениями, так как они были разные у разных сайтов. Кое-где встречалось по 3-4 слоя фона. Также была идея добавлять ссылку на список страниц проекта. Клиент мог открыть по ссылке одну страничку, посмотреть и тут же открыть список других страниц проекта.
Адаптивный дизайн
Спустя некоторое время я получил задачу на разработку адаптивного дизайна сайта, и мне предстояло придумать, как демонстрировать макеты клиенту, да еще и показать эту самую адаптивность максимально приближенно к реальности. Тогда я разобрался, как работают media queries в CSS, и решил применить это в своем шаблончике.
В результате, я показывал первую картинку старым способом, а остальные добавлял с помощью media queries. Опять возникла проблема с вертикальным скроллом. Изначально высота всей страницы была равна одному макету, при изменении макета высоту также необходимо было менять. Найти изящное решения времени у меня не было, и я просто изменял свойства height при смене картинки.
Это работало. Можно было открыть страничку даже на мобильном или планшете и проверить, как она буде выглядеть вживую.
Со временем у меня появилось время оптимизировать шаблон для демонстрации адаптивного дизайна. Основным требованием было свести редактирование файла к минимуму — один раз указывать пути к макетам, подсчитывать высоту автоматически, удобно указывать диапазоны в media queries.
Не без помощи нашего frontend-разработчика Игоря Богдосарова мне удалось оптимизировать шаблон.
В результате, в html я вставляю только пути к изображениям и диапазоны для media queries в массив, а отдельный скрипт делает остальное.
Также по совету Игоря я решил выложить шаблон на github. Думаю, многие смогут подсказать, что еще можно в нем улучшить.
InVision как альтернатива
Мое решение, конечно, имеет свои достоинства, но присутствуют и недостатки, такие как отсутствие интерактива или возможности комментирования прямо поверх макетов. Пока этого было достаточно для демонстрации макетов дизайна.
О сервисе InVision я слышал много позитивных отзывов от коллег, и есть желание попробовать его в работе. Он привлекает своими преимуществами:
- удобство ведения проекта: удобно добавлять, обновлять макеты вплоть до автогенерации разных состояний прямо из PSD;
- интерактив: переходы между «страницами», фиксированные шапки;
- мобильный вид: хорошо подходит для дизайна мобильных приложений;
- комментирование макетов: можно оставлять комментарии прямо на страницах, обсуждать с клиентом или коллегой;
- и многое другое.
В моем браузере установлено около 30 расширений, которые упрощают жизнь и работу в интернете. В этой статье я хочу поделиться 10 актуальными расширениями Google Chrome для верстальщика, которые постоянно использую при разработке сайтов.
1. PerfectPixel
Верстка сайта пиксель-в-пиксель вызывает трудности как у новичков, так и у опытных специалистов. PerfectPixel накладывает изображение макета поверх верстки в браузере. В настройках расширения можно отрегулировать прозрачность и расположение макета, что позволяет учесть все необходимые размеры и отступы. Использование этого плагина упростит работу верстальщика и сократит количество правок при сдаче проекта. В моем наборе расширений PerfectPixel занимает первое место за счет своей функциональности и удобства использования.
2. Wappalyzer
Всегда интересно какие инструменты и технологии используются на сайтах. Wappalyzer предоставляет информацию о CMS, JS фреймворках, CSS библиотеках, инструментах аналитики и многом другом. Представьте, что анимация на сайте – это бесплатная CSS библиотека, которую вы можете использовать у себя в проекте. Это позволит сократить время поиска необходимого инструмента и быть в курсе технологий, которые использует сайт.
3. HTML5 Outliner
HTML 5 Outliner отображает список заголовков на странице сайта. Расширение помогает структурировать заголовки и определять нарушения в иерархии. Например, в теге section HTML 5 Outliner выводит предупреждение об отсутствии тега h2. Это один из быстрых и удобных способов, чтобы определить правильность использования заголовков в верстке.
4. Wireframify
Дизайнеры проектируют сайты с помощью wireframe — это набор линий, блоков и подписей. Такой подход позволяет создавать архитектуру проекта с учетом отступов, размеров и расположения блоков на странице. Wireframify включает альтернативный вид сайта в виде wireframe, что позволит избежать ошибочного использования:
- отрицательных margin;
- выравнивания элементов с помощью padding;
- добавления отступов с помощью CSS свойств left, right;
5. PageLiner
В графическом редакторе выровнять элементы или отобразить сетку сайта можно с помощью направляющих линий. Верстальщик может включить этот функционал в браузере используя PageLiner. Расширение отображает похожие направляющие, как в том же Adobe Photoshop. С PageLiner выравнивать элементы становится намного проще.
6. Web Developer
Список возможностей web developer
Web Developer добавляет в браузер дополнительную панель с инструментами. Внутри нее находится 10 вкладок: Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize и Tools. Функционал расширения позволяет:
- отключать CSS, JS и изображения;
- проверять валидность HTML, CSS;
- манипулировать CSS стилями;
- тестировать HTML формы;
- отображать необходимую информацию мета тегов;
- изменять размер окна браузера;
- очищать кэш;
Web Developer остается популярным расширением среди разработчиков. Его можно сравнить с мультитулом в реальной жизни: всегда под рукой необходимый набор инструментов.
7. User CSS
8. StyleURL
User CSS не заменит панель разработчика браузера. Если вы привыкли работать в devtools и при этом не хотите потерять изменения после обновления браузера – установите StyleURL. Расширение запомнит ваши изменения и предоставит возможность сохранить наработки в отдельном файле или загрузить в github gist.
9. Siteimprove Accessibility Checker
Siteimprove Accessibility Checker — это инструмент, который проверяет HTML на соответствие стандартам доступности, чтобы обеспечить доступ к контенту для всех. Расширение отображает ошибки с подробной информацией. В описании к ним вы можете найти сноски с WCAG 2 и прямые ссылки на подробные статьи о доступности.
10. Tabsbook
Пример использования Tabsbook
Каждый работает с закладками по-своему. Есть те, кто сохраняет ссылки для быстрого доступа к сайтам, и те, кто используют закладки, чтобы хранить полезную информацию. С помощью Tabsbook можно превратить ваши закладки в базу знаний. Интерфейс расширения отображает древовидную структуру папок для удобной навигации по вашим закладкам. Все данные хранятся в облаке, что позволяет иметь доступ к ним с любого устройства.
Расширения будут полезны всем новичкам и опытным специалистам, которые о них не знали. Напишите в комментарии, какие расширения вы используете.
Бывает необходимость посмотреть, как выглядит сайт на разных разрешениях экрана. Особенно, если сайт адаптивный для мобильных устройств, т.е. корректно трансформируется под разные разрешения экрана. В этой статье мы рассмотрим несколько способов, с помощью которых можно сделать проверку сайта на разных разрешениях экрана.
Для чего это может пригодиться?
Например, по статистике своего сайта можно проанализировать, — какие разрешения экрана и в каком процентном отношении используют посетители вашего сайта:
Затем можно посмотреть, как отображается ваш сайт на устройствах с данными разрешениями. Если вам разработали/разрабатывают адаптивную версию сайта, посмотрев, как выглядит сайт в разных разрешениях, можно обсудить с разработчиком какие-то детали.
Также, если на вашем сайте используется уже какой-то определенный адаптивный шаблон, то можно посмотреть, как выглядит сайт в разных разрешениях и принять решение, — использовать данный шаблон или заняться поиском другого.
Как посмотреть сайт на разных разрешениях экрана
Есть много способов, чтобы сделать просмотр сайта в разных разрешениях экрана. Так, например, основные разрешения экранов для сайта можно было бы посмотреть вообще простыми средствами Windows, изменив разрешение экрана в разделе Настройки экрана:
Но, данный способ не совсем удобен, а также он дает возможность посмотреть, как выглядит сайт только с основными разрешениями экранов компьютера.
Проверка сайта в браузере. Разрешение экрана
Другой способ просмотра сайта в разных разрешениях экрана дают встроенные возможности браузеров. Например, в Гугл Хром, находясь на нужном сайте, нажимаем правой кнопкой мыши и выбираем Просмотреть код (либо пользуемся комбинацией клавиш, как показано на снимке):
Появляется дополнительная панель с кодами сайта, где для включения просмотра сайта в разных разрешениях нажимаем на специальную вкладку ( 1 ), как показано на снимке ниже.
Для выбора разных мобильных устройств используем выпадающее меню ( 2 ). Справа также указывает разрешения экрана на выбранном устройстве. Чтобы развернуть экран устройства, — пользуемся соответствующей кнопкой ( 3 ):
А более удобный способ проверки сайта на разных разрешениях экрана дают специальные онлайн сервисы.
Просмотр разрешения экрана сайта в Screenfly
Это один из самых удобных (при этом, — бесплатный) на текущий момент сервисов, с помощью которого можно быстро посмотреть сайт не только на основных, а вообще на разных разрешениях экрана!
Переходим в сервис Screenfly . Вводим в предлагаемое поле проверяемый сайт и получаем результат (прокомментирую под снимком):
Первые вкладки позволяют просмотреть сайт со всеми основными популярными разрешениями экрана. Т.е. можно посмотреть, как выглядит сайт при просмотре на нетбуках или ноутбуках, на планшетах, мобильных телефонах, в телевизорах.
Дополнительные функции:
Другие сервисы для проверки разрешения экрана сайта
В общем-то, вышеприведенный сервис удовлетворит практически любые потребности в проверке разрешения экрана сайта. Но, если он будет недоступен или хочется попробовать что-то другое, то вот, на всякий случай, еще парочка сервисов: Сybercrab и Infobyip .
Безусловно лучший способ просмотра макетов для верстальщиков.
И удобный способ делится макетами для дизайнеров.
Так уж повелось, что большинство веб-дизайнеров работает в программе Adobe Photoshop и присылают готовые макеты с расширением `.psd`. Что нам, верстальщикам, совершенно не удобно, но многие уже привыкли.
Таким образом приходится постоянно скачивать обновлённые дизайны, удалять старые (чтобы не перепутать), следить за изменениями.
Сейчас можно намного проще!
Дизайнер (или вы сами) публикует свои макеты в специальной программе и даёт доступ к проекту. Если что-то обновилось — появляются уведомления “что” и “где”.
Помимо всегда акутальной версии дизайна, преимущество таких программ в том, что не надо совершать лишних действий для просмотра стилей. Нажимаешь на кнопку или текст и тебе сразу отображает свойства элмента, а при наведении на соседние элементы — отступы.
Что ещё можно сделать в этих программах?
В общем, куча полезных функций, которые намного упрощают жизнь обычному разработчику.
Если дизайнер работает в:
1) программе Sketch (.sketch)— Zeplin / InVision / Figma / Avocode
2) программе Photoshop (.psd)— Zeplin / InVision / Avocode
3) программе Adobe XD (.xd) — Zeplin / Avocode / Adobe XD
4) программе Figma (.fg) — Figma / Zeplin / Avocode
Рассмотрим подробнее самые популярные сервисы.
Zeplin — сервис для просмотра дизайн-макетов. Работает он следующим образом: берет файл с дизайном и генерирует руководство по стилю, исходники и спецификации для разработчиков.
Есть десктопное приложение, но в браузере работает стабильнее. Добавить макеты можно только из программы, в которой работал дизайнер.
Имеется множество настроек, например:
- отключить отображение базовых стилей
- задать формат отображения цвета (HEX, RGB, HSL)
- добавить в Style Guide цвета и параметры шрифта, чтобы проще ориентироваться и быстрее задавать такие же стили к другим элементам
Из минусов стоит отметить, что здесь нет возможности просмотра модульной сетки, она должна быть либо отдельным файлом, либо описана в каком-то документе.
Чтобы залить макеты в Zeplin нужно скачать десктопное приложение, которое автоматически установит дополнительные плагины для программ Sketch / Photoshop / AdobeXD. В Zeplin уже должен быть создан проект. Далее:
- Photoshop выбираете инструмент “монтажная область”, выделяете макеты и отправляете в Zeplin (Window > Extensions > Zeplin)
- Sketch выдеялите все артборды, которые нужно передать разработчику, нажимаете Cmd + E (⌘E) или Plugins > Zeplin > Export Selected Artboards. Выбираете нужный проект и нажимаете Import
- AdobeXD выбираете артборды, нажимаете Cmd + Option + E (⌥⌘E) macOS / Ctrl + Alt + E Windows, либо меню >Export > Zeplin. Выбираете проект и нажимаете Import
- Figmaуже имеет встроенный функционал для работы с сервисом Zeplin. Чтобы включить экспорт открываете меню >Integrations > Zeplin. Потом выбираете артборды, нажимаете Option + E (⌥E) / Alt + E либо нажимаете кнопку экспорта (в правом верхнем углу) и выбираете Export to Zeplin и нужный проект
Ещё подробнее можете прочитать в самом блоге Zeplin — они записывают видео по экспорту + скриншоты, а так же описывают, как подготовить ресуры для экпорта.
InVision — сервис для быстрого преобразования дизайнов в кликабельные прототипы и макеты для совместной работы.
В InVision, в отличии от других программ, можно просматривать анимированные прототипы. Загрузить макеты и прототипы можно по такому же принципу как в Zeplin, то есть из исходной программы.
Очень удобно, что все картинки для скачивания находятся в одном месте. Имеется множество вариантов языков для просмотра стилей.
- слишком нагруженный интерфейс (показываются слои и их нельзя скрыть, переключатели режима и многое другое, что не зачастую не нужно простому разработчику)
- неудобная навигация по макетам
- нельзя растянуть панель стилей
- нет формата HSL(HSB) для цветов, зато есть UIColor для apple разработчиков
Figma — инструмент, в котором можно делать дизайн и напрямую смотреть стили из макета.
Интерфейс больше заточен именно под дизайнеров. Так же есть десктопное приложение. По стилям пока что можно выбрать только CSS, iOS, Android + они сразу логически разбиты.
Принцип работы Figma — индивидуальная настройка прав: приглашаете разработчика в проект, назначаете ему статус «read-only». Разработчик смотрит макеты, шрифт, цвета, размеры, отступы. Но если вам дали права с полным доступом, то постарайтесь не накосячить.
Свежесть версий обеспечивается неощутимым процессом синхронизации — все макеты в руках фронтендера находятся в той стадии, в какой их последний раз оставил дизайнер.
Помимо того, в приложение можно экспортировать любой .sketch файл, который преобразуются в необходимый формат для Фигмы.
Avocode — программа для работы с любыми макетами.
Макеты можно загрузить двумя способами:
- Подключив учетную запись Dropbox и выбрав оттуда необходимый файл
- Загрузка дизайна непосредственно с компьютера
Поддерживаемые разрешения: .sketch, .psd, .xd, .ai. Файлы из программы Figma можно загрузить через десктопное приложение.
Если дизайнер заранее не подготовил ресурсы для скачивания, то тут это не проблема — всю графику можно сохранить самостоятельно, просто выбрав нужный элемент и нажав кнопку экспорта.
Avocode настраивается под любые критерии и типы разработки (веб и мобильные приложения). Можно даже подключить библиотеки Compass или Bourbon, если выбрать стил кода Sass.
До Avocode ни в одной программе не было возможности выбрать просмотр стилей через CSS in JS. И что самое крутое — десктопная программа доступна для всех операционных систем! Так что они явно на шаг впереди всех остальных.
Следует заметить, что такие программы позволяют бесплатно делиться ограниченным числом проектов с одного аккаунта. Если вас приглашают, проектов может быть сколько угодно.
Zeplin — 1 проект. Платная версия 3 проекта и более от 17$ в месяц
Adobe XD — 1 проект. Стоимость платной подписки с безлимитным количество проектов от 9.99$
Figma — 3 проекта и 2 пользователя. Дальше от 12$ за каждого пользователя в месяц
Avocode —пробный период 14 дней. Сервис стоит от 10$ за пользователя в месяц
Превращать макет в готовую веб-страницу сложно. Сделать процесс чуть менее болезненным помогут эти расширения для веб-разработчиков. Дизайнерам они тоже будут полезны — например, с их помощью можно находить новые идеи на уже работающих сайтах.
ColorZilla
Понравился цвет на другом сайте или хотите проверить, тот ли оттенок взяли из макета? Включите расширение ColorZilla и посмотрите подробную информацию о цвете любого элемента на странице.
Можно сразу скопировать нужный цвет
WhatFont
Часто в макетах используются несколько начертаний или разные шрифты. Чтобы не выискивать свойства в коде, установите WhatFont и проверяйте шрифты прямо в браузере.
Удобное окно с характеристиками шрифта
CSSViewer
CSSViewer — отличное расширение для исследования CSS-свойств элементов. Включите его, наведите курсор на нужный объект и посмотрите подробное описание стилей.
Подробное описание элемента
Code Cola
Если вы хотите не только видеть, но и быстро менять стили, установите расширение Code Cola. С его помощью можно изменить внешний вид любого элемента прямо в браузере.
Изменения сохраняются, для перезагрузки страницы требуется подтверждение
Windows Resizer
Простой инструмент для изменения размеров окна и вьюпорта. Можно выбрать разрешение из списка или задать свои параметры. В параметрах расширения доступны настройка горячих клавиш и создание пресетов для тестирования. Для удобства можно вывести Windows Resizer как всплывающее окно.
Пресеты для тестирования адаптивности
PerfectPixel
PerfectPixel накладывает изображение макета поверх вёрстки в браузере. Это позволяет подогнать страницу с точностью до нескольких пикселей. В настройках расширения регулируются прозрачность и расположение изображения макета.
Можно наложить любое изображение
PageLiner
В паре с PerfectPixel отлично работает расширение PageLiner. С его помощью вы добавите в окно браузера горизонтальные и вертикальные линии — прямо как в графическом редакторе.
Удобно равнять элементы интерфейса по линиям
Siteimprove Accessibility Checker
Siteimprove Accessibility Checker помогает убедиться в том, что HTML соответствует стандартам доступности — то есть вашей странице могут пользоваться люди с разными возможностями и ограничениями.
Подробнее о доступности и способах её проверки можно узнать из этой статьи.
Быстрая проверка доступности страницы
Wappalyzer
Увидели классный сайт и захотели повторить отдельные фишки в своём проекте? Узнайте с помощью Wappalyzer, какие технологии, фреймворки и библиотеки для этого нужны.
Вся информация представлена в виде удобной таблицы
Web Developer
Мощное расширение, с помощью которого можно отключать CSS и JavaScript, удалять изображения, проверять валидность HTML и CSS, изменять стили, тестировать формы, смотреть мета-теги, изменять размер окна браузера. В принципе, Web Developer способен заменить практически все указанные выше расширения вместе взятые. Вопрос только в удобстве.
Все необходимые инструменты на одной панели
Если вы используете другие расширения для веб-разработчиков, расскажите о них в комментариях. Будем обмениваться полезным опытом.
Читайте также: