Рубрика «верстка» - 16

в 12:53, , рубрики: веб-дизайн, Веб-разработка, верстка, виртуализация, виртуализация приложений, тестирование, метки: , ,

Практическая виртуализация для верстальщиков на win* Я долго время искал инструмент благодаря которому можно было бы запускать различные версии браузеров без их фактической установки. Но т. к. я плохо искал единственный рабочий способ для меня посей день были виртуальные машины. Незнаю как вам, но по мне — не очень удобный способ тестировать верстку.

Буквально сегодня мне нужно было быстро проверить верстку сайта в Safari. Под рукой ничего подходящего не оказалось и пришлось как это говорится «гуглить». В результате «гугления» я попал на spoon.net/ и честно признаюсь, что сначала даже не придал особого значения этому сервису. Зарегистрировался и установил плагин.
Читать полностью »

в 14:54, , рубрики: css, html, анимация, веб-дизайн, верстка, маркетинг, промо-сайт, метки: , , , ,

Может быть, вы уже и видели промо сайт Nissan Note, но на мой взгляд он стоит того, чтобы веб-дизайнеры обратили на него внимание.

Очень простой, но элегантный и оригинальный прием: огромная простыня с картинками превращается в анимированную презентацию при быстрой прокрутке страницы.

Не открывайте ссылку на мобильном интернете! Размер страницы больше 20Мб.
Промо-сайт Nissan Note

Эффект отличный — сайт явно понравится запомнится посетителям, тем более с качеством японских сетей.

Немного технической статистики

По информации из Google Chrome:

  • общее число запросов: 289;
  • размер: 25.98Мб;
  • время загрузки на моём ноуте: 1,3 мин;
  • число «полезных» картинок: 46 (столько насчитал я);

Читать полностью »

в 22:16, , рубрики: bugs, css, html, Веб-разработка, верстка, ошибки на сайте, метки: , , , ,

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

Однако до сегодняшнего дня я думал, что нужно хотя бы использовать хитрые конструкции CSS, вложенные иерархии DIV-ов и таблиц, всякие float-ы и коллапсирующиеся margin-ы, чтобы налететь на реальную ошибку.

Я был уверен, что существует хотя бы одна ситуация, когда можно не опасаться никаких засад и приколов: мы всегда можем обернуть фрагмент обычного текста обыкновенным DIV-ом (display:block; и float:none;) и быть уверенными, что наш текст останется внутри него:

<DIV>
Этот текст никогда не выйдет за пределы обычного DIV-а!
</DIV>

Но на самом деле нет пределов в этом жестоком мире браузерного маразма…
Читать полностью »

в 6:13, , рубрики: csv, Веб-разработка, верстка, верстка сайтов, Дизайн в IT, дизайн сайта, дизайн сайтов, интернет-магазин, метки: , , , , , ,

Не многие разработчики наполняют сайт реальными, или похожими на них, данными. В большинстве случаев все заканчивается созданием категорий Тест1, Тест2… и товаров Товар1, Товар2… Естественно, это не может отразить/показать настоящее поведение сайта/шаблона. Если с товаром еще не всегда все плохо, то с категориями почти всегда что-то не в порядке. Читать полностью »

в 9:39, , рубрики: css, float, html, Веб-разработка, верстка, метки: , , ,

О практических применениях свойства float
Каждый хороший верстальщик скажет, что только безукоризненное знание собственной работы способно принести позитивные результаты. Собственные наблюдения привели меня к выводу, что не только начинающие верстальщики не совсем понимают сути применения свойства float. На Хабре просмотрел имеющиеся публикации на данную тематику. Появилось желание поделиться некоторыми замечаниями и практическими применениями данного свойства. Приведенные ниже разъяснения в большинстве своем могут стать полезными для начинающего верстальщика.
Читать полностью »

в 8:23, , рубрики: css, css3, html, html5, internet explorer, web-разработка, Веб-разработка, верстка, сайты, метки: , , , , , , ,

Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).
Читать полностью »

в 8:48, , рубрики: css, html, верстка, Песочница, метки: , ,

Эта статья, является в первую очередь ответом на недавно вышедшую статью: «Простые правила простой вёрстки».
Автор пригласил написать ответ, высказать свой взгляд на эти примеры и рекомендации, этим приглашением ниже я и намерен воспользоваться. (Читать оригинальную статью перед тем, как зайти под кат — обязательно!)
Читать полностью »

в 12:22, , рубрики: Foundation, адаптивный дизайн, веб-дизайн, верстка, Мобильный веб, переводы, метки: , ,
Джонатан Смайли | Перевод Главмастера | Оригинал

 

Погружение в адаптивную вёрстку с Foundation

На свете уже толпа мобильных устройств с полным доступом в интернет. Все со своими возможностями и ограничениями, определяющимися стилем, размером и разрешением экрана, формой. Без вариантов одно — они набрали ход, по уровню жора трафика, оставивший позади стационарные компы. И для того, чтобы уже в следующем году не выкатывать вёрстку, вызывающую желание избегать возврата на сайт, вэбмастерам чесаться надо уже вчера.
Читать полностью »

в 12:16, , рубрики: css, html, верстка, метки: , ,

Речь в этой небольшой статье пойдет не о специфических техниках для конкретных случаев, также не будет раскрыта тема правильной оптимизации кода и графики под высоконагруженные проекты. Не знаю, много ли здесь людей, часто имеющих дело с вёрсткой небольших проектов, для которых избыточно применение haml/sass и кучи методик правильной оптимизации, отлично описанных в статьях других профессионалов.

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

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

в 11:33, , рубрики: html, input, jquery, placeholder, верстка, формы, метки: , , , , ,

Тут уже поднималась тема об использовании такого замечательного атрибута форм как placeholder. И даже приводились примеры на js (ищем по слову placeholder).

Экономия места при создании форм налицо (особенно в всплывающих формах). Поэтому было решено не отказываться от атрибута, а просто помочь ему заявить о себе и Internet Explorer. На помощь был призван jQuery.
Читать полностью »

1...10...151617...18
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js