При верстке макета всегда всплывает множество интересных и потенциально проблемных моментов, которые казались дизайнеру элементарными, но на самом деле таили за собой опасное. Все это можно было бы предотвратить, если бы клиент не строил из себя архитектора всей системы, а дизайнер относился к сайтам не как к журналу, а как к сайтам, продумывая взаимодействие с пользователем, создавая грамотную архитектуру, которая логически непротиворечива и действительно дружелюбна к пользователю. Нужен кто-то, кто обладает определенной IT-культурой, в то же время является и дизайнером, и верстальщиком, и немного программистом, даже архитектором БД. Наверное, это тот, которого все называют UI/UX-дизайнером. Такого человека сложно найти, стоит он дорого и путь к такому званию долгий. Поэтому в типичном случае все происходит проще и вместо инженерного подхода наблюдается некоторая разновидность подхода эволюционного. К сожалению, этого бывает достаточно, это даже можно поддерживать, но только если вы не перфекционист.
Читать полностью »
Рубрика «css» - 100
Привет, я дизайнер, и я хочу, чтобы все и везде выглядело одинаково
2014-12-08 в 8:13, admin, рубрики: css, html, веб-дизайн, Веб-разработка, верстка, дизайн, костыль или не совсемНесколько интересностей и полезностей для веб-разработчика #34
2014-12-08 в 3:00, admin, рубрики: css, html, javascript, веб-дизайн, Веб-разработкаДоброго времени суток, уважаемые читатели. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
Firefox для iOS
Пока это еще только наработки, но затея просто великолепная.
SVG Edit
Отлиный инструмент для редактирования SVG прямо в браузере. Вообще с распространением дисплеев с высоким разрешением, сообщество веб-разработчики все чаще и чаще обсуждает всевозможные способы взаимодействия с SVG. Идея еще одного простого и открытого редактора очень даже уместна, а функционал способен удовлетворить все потребности фронтендеров. Исходники тут. Также хочу добавить, что проект не стоит на месте и постоянно развивается.
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №137 (1 — 7 декабря 2014)
2014-12-07 в 20:36, admin, рубрики: api, css, css3, html, html5, javascript, jquery, JS, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Быстрая настройка Grunt для комфортной разработки
2014-12-04 в 15:48, admin, рубрики: css, deployment, grunt, gruntjs, html, javascript, web-разработка, Блог компании bitCalm, Веб-разработка 
Во время разработки нашего сервиса bitcalm.com, нам потребовалось организовать автоматическую сборку проекта. Перед нами стояла цель улучшить производительность frontend-части нашего приложения, а также оптимизировать процессы разработки и развертывания на сервере.
Основными задачами, которые требовалось решить, стали:
- Объединение и минификация скриптов
- Объединение и минификация стилей
- Сжатие png-изображений
- Создание спрайтов из всех изображений (с возможностью удобного использования и с поддержкой двух видов спрайтов для девайсов с разным PPI)
- Построение разных версий html-документов для разработки и для продакшна
Первые три пункта выглядят достаточно тривиальными, поэтому я постараюсь заострить внимание на работе со спрайтами и на обработке html.
Оптимизируем производительность веб-страницы: CSS
2014-12-02 в 13:11, admin, рубрики: css, perfomance optimization, Веб-разработка, Клиентская оптимизация, оптимизация, производительностьВ наше время скорость интернета довольно высока. Казалось бы, можно забыть о тех временах, когда нам приходилось ждать по 20-30 (а то и больше) секунд, чтобы веб-страница загрузилась и отобразилась на экране — теперь мы ждём отрисовки страницы в среднем около одной-двух секунд. Однако не стоит забывать, что значительная часть юзеров заходит на ваш сайт с мобильных устройств, на которых связь не всегда стабильна. В связи с этим будет совсем не лишним уделить немного внимания оптимизации вашего кода.
В этой статье речь пойдёт о различных методах оптимизации таблиц стилей. Я расскажу о том, что влияет на скорость отрисовки страницы, как заставить браузер отрисовывать страницу быстрее и какие инструменты использовать для оптимизации.Читать полностью »
Sublime Text для фронтэнд-разработчика
2014-12-01 в 12:26, admin, рубрики: css, html, javascript, sublime text, Веб-разработка, инструменты, текстовые редакторы, фронтэнд
Sublime Text на данный момент является одним из самых популярных текстовых редакторов, используемых для веб-разработки, поэтому надо знать его преимущества и недостатки. Вместо того, чтобы шаг за шагом описать все фичи Sublime Text, эта статья познакомит вас с самыми популярными приёмами и полезными плагинами, позволяющими ускорить разработку.Читать полностью »
За последние годы верстка в интернете развилась из фиксированных дизайнов к адаптивным. Причем, в стилях могут использоваться сразу несколько видов единиц измерений (проценты, em или px). Дизайнерам и разработчикам следует понимать, как это работает. Но было бы удобно оперировать (складыва/вычитать) единицами разной размерности в одном и том же выражении.
Для этого отлично подходит calc. При ее всей мощности, то, как ее можно применять, лучше продемонстрировать на примерах.
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №136 (24 — 30 ноября 2014)
2014-11-30 в 18:28, admin, рубрики: api, css, css3, html, html5, javascript, jquery, JS, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Новости, ресурсы, ссылки, ссылки на смиПредлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Видео с доклада Виталия Фридмана «Responsive Web-дизайн: Трюки и уловки»
2014-11-26 в 16:25, admin, рубрики: css, html, javascript, веб-дизайн, Веб-разработка
Мега интересная лекция от знаменитости в области веб-разработки, основателя и шеф-редактора журнала Smashing Magazine. Мероприятие произошло благодаря Mail.ru. Ключевые темы: UI/UX, проектирование, отзывчивый дизайн, производительность, трюки с SVG. Все это на примере реальных кейсов от The Guardian, BBC и конечно же Smashing Magazine.
От себя хочется добавить, что Smashing Magazine я читаю ежедневно и многое беру от туда для моих подборокЧитать полностью »
Отзывчивые изображения на практике (Часть 3)
2014-11-26 в 12:40, admin, рубрики: css, Блог компании Paysto, веб-дизайнПоследняя часть истории об отзывчивых изображениях, которую мы начали здесь и продолжили тут, рассказывая о применении srcset и sizes. Сегодня речь пойдет об использовании тега для обертывания изображений.
Вторая стадия: picture и режиссура
srcset для ленивых, picture для безумных™
Мэт Маркес
Итак, для изображений, которые просто нужно масштабировать, мы приводим список наших исходников и их ширину в пикселях в srcset, позволяем браузеру выбирать, какая ширина изображения будет отображаться с помощью sizes, и отпускаем наше безумное желание все контролировать. Но! Иногда нам захочется адаптировать наши изображения, выходя за рамки масштабирования. В таком случае, нам нужно вернуть небольшую часть контроля над подбором исходников. Вводим picture.
Читать полностью »