После тщательного анализа HTML и CSS кода, который постоянно переделывается, можно сделать выводы, которые должны помочь читателю в этом нелегком деле.
В этой статье не будем привязываться к конкретным реализациям и готовым рецептам, дабы избежать основной проблемы любой CSS документации — за время написания статьи выйдет пара-тройка браузерных обновлений. И советы будут попросту бесполезны.
Рубрика «верстка» - 14
CSS принципы
2012-10-02 в 17:21, admin, рубрики: css, html, Веб-разработка, верстка, метки: css, версткаЕще один jQuery плагин для верстки «пиксель в пиксель»
2012-10-01 в 16:52, admin, рубрики: css, html, jquery, Веб-разработка, верстка, метки: css, jquery, Веб-разработка, версткаЯ начал писать этот плагин в феврале этого года просто для себя, потому что на тот момент я не нашел ничего похожего. Сейчас уже читательу известно про такие инструменты, как PixelPerfect и X-Precise, однако у каждого из них есть свои плюсы и минусы, как и у моего.
Итак, что же особенного в pixLayout?
Читать полностью »
Отличный плагин для проверки верстки
2012-09-24 в 18:38, admin, рубрики: html, jquery, Веб-разработка, верстка, метки: jquery, Веб-разработка, версткаСуществует множество способов тестировать верстку. Большинство из них были описаны в статьях или комментариях хабра. Упоминаний данного способа я не нашел.
XPrecise
Утилита разработана командой xhtmlized.
Совместима со всеми браузерами, потому как подключается в виде плагина jQuery.
Установка и настройка
Для тестирования верстки вам нужно подключить jQuery, а за ним XPrecise
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="_xprecise/xprecise.min.js"></script>
Немного упрощаем жизнь web-верстальщика в Windows
2012-09-24 в 14:42, admin, рубрики: web-разработка, веб-дизайн, Веб-разработка, верстка, макет, метки: web-разработка, веб-дизайн, верстка, макетДанный пост не претендует на полноценную статью и не является рекламным, а всего лишь небольшой lifehack, который может немного упростить жизнь верстальщикам
Наверное, каждый нормальный web-верстальщик задавался вопросом: «Как удобнее сверять макет с уже готовой вёрсткой», ну или что-то вроде этого. Сегодня я тоже задался этим вопросом.
Первая мысль, которая пришла в голову, это «Было бы неплохо быстро изменять прозрачность окон». Насколько я знаю, в Windows 7 нет такой функции. Немного погуглив я в этом окончательно убедился. Но поиски на этом не остановились. Позже я набрёл на замечательную программу, под названием: See Through Windows.
Читать полностью »
Почему лучше верстать в соответствии с БЭМ — практические примеры
2012-09-21 в 15:23, admin, рубрики: bem, css, css3, БЭМ, верстка, яндекс, метки: bem, css, css3, БЭМ, версткаПро БЭМ (методология написания CSS от Яндекс — Блок__Элемент_Модификатор ← наиболее правильная запись расшифровки) нынче можно услышать на каждом шагу. Дело оказалось благим и покатилось по миру. Яндекс даже полез в W3C (связано это или нет — не знаю, но надеюсь, что да).
Думаю многие, кто ещё не пробовал, но прочитал описание БЭМ, задаются справедливым вопросом: «какая практическая польза от всего этого действа?» На самом деле, не смотря на то самое развёрнутое описание, конкретно уловить основную «фишку» довольно сложно. Описано конечно много плюсов и общее ощущение от методологии положительное, и кажется, что вроде как и не плохо бы попробовать, но нехватает чего-то конкретного. Прямо вот примера на живом что ли. Вот у меня сайт, вот вёрстка не по БЭМ, почему я должен всё менять? Особенно, если учесть тот факт, что БЭМ в принципе отметает все селекторы кроме классов, неужто за это время столько умных мужей в W3C не осознали, что всё настолько неправильно?
За сим возьму на себя смелость привести несколько примеров с которыми вы (конечно если вы каким-то образом связаны с вёрсткой) сталкиваетесь, не побоюсь этого слова, ежедневно. И что изменится в таких ситуациях если бы вёрстка была изначально выполнена в БЭМ.Читать полностью »
Практическая виртуализация для верстальщиков на win*
2012-09-21 в 12:53, admin, рубрики: веб-дизайн, Веб-разработка, верстка, виртуализация, виртуализация приложений, тестирование, метки: верстка, виртуализация приложений, тестирование 
Я долго время искал инструмент благодаря которому можно было бы запускать различные версии браузеров без их фактической установки. Но т. к. я плохо искал единственный рабочий способ для меня посей день были виртуальные машины. Незнаю как вам, но по мне — не очень удобный способ тестировать верстку.
Буквально сегодня мне нужно было быстро проверить верстку сайта в Safari. Под рукой ничего подходящего не оказалось и пришлось как это говорится «гуглить». В результате «гугления» я попал на spoon.net/ и честно признаюсь, что сначала даже не придал особого значения этому сервису. Зарегистрировался и установил плагин.
Читать полностью »
Анимация средствами HTML+CSS+JS — промо-сайт японского Nissan Note
2012-09-20 в 14:54, admin, рубрики: css, html, анимация, веб-дизайн, верстка, маркетинг, промо-сайт, метки: анимация, веб-дизайн, верстка, маркетинг, промо-сайтМожет быть, вы уже и видели промо сайт Nissan Note, но на мой взгляд он стоит того, чтобы веб-дизайнеры обратили на него внимание.
Очень простой, но элегантный и оригинальный прием: огромная простыня с картинками превращается в анимированную презентацию при быстрой прокрутке страницы.
Не открывайте ссылку на мобильном интернете! Размер страницы больше 20Мб.
Промо-сайт Nissan Note
Эффект отличный — сайт явно понравится запомнится посетителям, тем более с качеством японских сетей.
Немного технической статистики
По информации из Google Chrome:
- общее число запросов: 289;
- размер: 25.98Мб;
- время загрузки на моём ноуте: 1,3 мин;
- число «полезных» картинок: 46 (столько насчитал я);
Может ли обычный текст поглючить IE?
2012-09-19 в 22:16, admin, рубрики: bugs, css, html, Веб-разработка, верстка, ошибки на сайте, метки: bugs, css, html, верстка, ошибки на сайтеКаждый, кому приходилось заниматься разработкой сайтов, знает об ошибках браузеров.
Однако до сегодняшнего дня я думал, что нужно хотя бы использовать хитрые конструкции CSS, вложенные иерархии DIV-ов и таблиц, всякие float-ы и коллапсирующиеся margin-ы, чтобы налететь на реальную ошибку.
Я был уверен, что существует хотя бы одна ситуация, когда можно не опасаться никаких засад и приколов: мы всегда можем обернуть фрагмент обычного текста обыкновенным DIV-ом (display:block; и float:none;) и быть уверенными, что наш текст останется внутри него:
<DIV>
Этот текст никогда не выйдет за пределы обычного DIV-а!
</DIV>
Но на самом деле нет пределов в этом жестоком мире браузерного маразма…
Читать полностью »
Демо-данные для интернет-магазинов или верстаем правильно
2012-09-13 в 6:13, admin, рубрики: csv, Веб-разработка, верстка, верстка сайтов, Дизайн в IT, дизайн сайта, дизайн сайтов, интернет-магазин, метки: csv, import, верстка, верстка сайтов, дизайн сайта, дизайн сайтов, интернет-магазинНе многие разработчики наполняют сайт реальными, или похожими на них, данными. В большинстве случаев все заканчивается созданием категорий Тест1, Тест2… и товаров Товар1, Товар2… Естественно, это не может отразить/показать настоящее поведение сайта/шаблона. Если с товаром еще не всегда все плохо, то с категориями почти всегда что-то не в порядке. Читать полностью »
О практических применениях свойства float
2012-09-12 в 9:39, admin, рубрики: css, float, html, Веб-разработка, верстка, метки: css, float, html, верстка 
Каждый хороший верстальщик скажет, что только безукоризненное знание собственной работы способно принести позитивные результаты. Собственные наблюдения привели меня к выводу, что не только начинающие верстальщики не совсем понимают сути применения свойства float. На Хабре просмотрел имеющиеся публикации на данную тематику. Появилось желание поделиться некоторыми замечаниями и практическими применениями данного свойства. Приведенные ниже разъяснения в большинстве своем могут стать полезными для начинающего верстальщика.
Читать полностью »