Как мы знаем, CSS3 обещает нам такую фичу как CSS переменные, я рассказывала об этом тут. Но чудо это светит нам совсем не в ближайшем будущем. Однако выход всегда есть.
Если вы хотя бы немного знаете основы языка PHP, то нам с вами не составит труда реализовать использование CSS переменных уже сейчас. Все довольно легко и просто, как пишет нам Крис Койер в своей .
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Уважаемые читатели блога!
Хочу прояснить ситуацию с временным отсутствием новых статей… К сожалению, сейчас я не могу полноценно заниматься ведением блога всвязи с очень радостным событием – 16 октября я родила сыночка! И поэтому все свое время сейчас я посвящаю только ему:
Если у вас есть интересные авторские статьи и вы хотите публиковаться на моем блоге, пишите мне на адрес webmaster(dog)getincss.ru . Я обязательно рассмотрю все ваши предложения!
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Совсем недавно во всемирной паутине появился свежий российский биржевой проект с эксклюзивным контентом www.PayText.ru. Сами владельцы проекта называют свое детище Магазин эксклюзивного контента, но никак не биржей, потому что все статьи на сайте размещены от имени их владельцев.
Закладок, в которых должны размещаться статьи, довольно таки много ( Бизнес и финансы, Авто и мото, Работа и учеба, Дом и семья, Медицина и здоровье, Общество, Развлечения, Отдых и спорт, Культура и искусство, Хай-Тек, Наука и техника, а также Разное), плюс под каждой закладкой находятся еще несколько подпунктов, всего их около шестидесяти. Количество статей, размещенных и выставленных на продажу в магазине около 400, но с каждым днем их становится все больше и больше, появляются новые подпункты и так далее, то есть сайт растет.
Пользовательский интерфейс подобен другим интернет-магазинам. Представлен ряд фото с отрывками из статей, выделенными основными словами, которые дают понять нам о смысле статьи или новости. Саму статью можно проверить на плагиат с помощью разнообразных специальных программ, или просто ввести отрывок текста в строку ввода поисковой системы.
Цены на статьи умеренные, в пределах 0.5 WmZ за тысячу символов, в среднем за статью размером три тысячи символов вы заплатите 1,5 WmZ, что в наличном эквиваленте равно 1,5 долларам США.
Кроме всего этого, в интернет- магазине в соответствующих закладках на панели сайта можно заказать рерайт или копирайт статей размера от одной до пяти тысяч символов и на любую тему. Цены заказов очень, ну просто невероятно низки! За рерайт статьи вы выложите всего-то 0.4 WmZ за тысячу символов, а за копирайт приблизительно 0.7 WmZ, эта информация размещена на самом сайте биржи текстового контента. К тому же на сайте предусмотрена целая система скидок как для обычных, так и для постоянных покупателей. При этом владельцы сайта всегда готовы уменьшить цену, повысив скидки всем постоянным покупателям.
Вообще магазин занимается односторонней работой, то есть покупатель сам работает с системой. Кроме того, при возникновении каких-либо проблем или недоразумений, покупатель всегда может сообщить об этом администрации сайта при помощи новой тикет системы. Администраторы в свою очередь сразу предлагают варианты решения проблем и способы выхода из неудобных ситуаций, хотя таких, наверное, будет мало. Также на сайте есть возможность заработка на привлечении новых покупателей.
В общем, www.PayText.ru – молодой, амбициозный проект, которому еще есть куда расти.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Сегодня я рада вам представить обзор интереснейшего, на мой взгляд, интеренет-ресурса . Вот, что рассказывает нам автор проекта…
Блуждая по просторам Рунета, можно отметить, что наиболее популярными являются статьи для вебмастеров и дизайнеров: советы по разработке логотипа, подборки оригинальных шрифтов, уроки CSS. Но так случилось, что в основном это одинокие статьи на seo-блогах. Настоящих же полноценных дизайнерских блогов на русском языке не так и много, другое дело буржунет, где подобные порталы очень популярны и востребованы. Именно поэтому, сегодня хотелось бы Вам представить Интернет-журнал, ориентированный именно на русскоязычную аудиторию. На нем вы сможете скачать кисти для Фотошопа, вдохновится, смотря на красивые сайты, либо загрузить несколько тем для WordPress.
Одни статьи пишутся авторами проекта, другие являются переводами англоязычных ресурсов. К сожалению, новые материалы появляются не так часто, как хотелось бы – в среднем один пост на 3-4 дня, но проект постоянно развивается, улучшается и набирает обороты. В скором времени также планируется возможность платного добавления статей. Каждый автор за опубликованный материал сможет получить достойное вознаграждение. Что еще выделяет ресурс из толпы, так это раздел с видео-уроками. Согласитесь, лучше один раз увидеть, чем сто раз услышать. Не нужно искать непонятные пункты меню в Photoshop или переводить английские слова на русский, достаточно просто повторять все действия за автором.
Одним словом, сайт должен стать популярным и полезным как для новичков, только приступивших к изучению веб-дизайна, так и для маститых профессионалов в этой сфере. Как только проект выйдет на достойный уровень, планируется запуск параллельных ресурсов (css.webtuts.ru – уроки верстки, seo.webtuts.ru – статьи по оптимизации, php.webtuts.ru – обучение программированию). Ну а пока милости прошу на
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Дорогие читатели блога, буду признательна за ваш голос к моей :) Всем спасибо!!!
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Перевод статьи ««
Будучи дизайнером, делать работу для самого себя — возможно, самая трудная вещь, которую можно вообразить. На самом деле, большинство боится этого. Усугубляет ситуацию тот факт, что иметь свое представительство в интернете не просто жизненно важно для успешной работы, оно еще и должно быть лучшим. Ведь если вы не можете блеснуть умением на собственном сайте, то как можно ожидать, что кто-то сделает вам заказ?
В этой статье мы постараемся разобраться, что мешает нам создать дизайн для себя самого и сформулируем 10 правил, как сделать самый лучший дизайн для себя. Вместе мы победим в себе эту темную сторону.
Как показывает история доктора Джекила и мистера Хайда, дуализм человеческой натуры всегда вызывал глубокий интерес. Дуализм проявляется в отношении к добру и злу, или, в нашем контексте, во внутреннем конфликте творческой личности. Для дизайнера эта внутренняя борьба может стать очень мощным инструментом, если научиться ее контролировать.
Когда вы садитесь в машину, вы же не начинаете просто куда-то ехать, надеясь как-нибудь попасть в пункт назначения? Нет, вы точно знаете, куда вы хотите отправиться. То же и со своим сайтом. Спросите себя, какой результат вы хотите получить на выходе? Только не нужно расплывчатых ответов типа «Хочу клевый сайт». Возможно, назначением сайта будет показать потенциальным клиентам, что вы заботитесь о восприятии сайта пользователем. Возможно, вы стремитесь получить признание в ряде галерей. Возможно, вам просто нужно место для эксперимента и совместного творчества с другими дизайнерами. В вашем сайте должно прослеживаться концентрированное и сфокусированное понимание его общего назначения.
В фильмах «Безумный Макс» не существует правил и все движется просто так. То же самое происходит, когда в вашем проекте нет распорядка. Первозданный хаос. Первым делом нужно поставить себе ограничения. Некоторые, например, задают себе определенный дедлайн. Я не считаю, что дедлайны, поставленные самому себе, работают. Они только ограничивают вас и обуздывают вашу творческую энергию. Вы будете больше озабочены сроком сдачи проекта, и велика вероятность, что начнете задвигать его, как только он помешает другим начинаниям. Так что об этом забудем.
Определяйте для себя задачи в рамках поставленной цели. То есть, выделите конкретные страницы (например, главная, блог, портфолио, о себе, контактная информация). Поймите для себя, что вы хотите увидеть по завершении проекта.
Профессионально выполненные копии швейцарских часов вы можете приобрести только на baselshop.ru
Хотите узнать, какие сейчас самые стильные стрижки и модные прически?
Как можно конкретнее определитесь, что должно быть на каждой из страниц. То есть, первым делом решите, каким будет контент. Понятно, что это дизайнерское портфолио. При этом вам нужно к чему-то приложить свои дизайнерские навыки. Сколько раз клиенты заказывали вам дизайн, не говоря, каким будет наполнение сайта, или обещая сообщить об этом в скором времени (читай: за день до запуска сайта). Не поступайте так с собой.
Не нужно писать все до последней буквы, но хотя бы решите, что вы, например, сделаете ссылки в «подвале», обширную биографию на странице «О себе», или, может быть, какие работы вы разместите в начале раздела «Портфолио».
Кто-то всегда будет лучше вас. Всегда. Но важно помнить: первые несколько сайтов этого человека тоже были отстойными. И даже не просто отстойными, возможно это были худшие сайты из созданных. Так зачем вы пытаетесь создать лучший в мире сайт вот так с пол-оборота? Вы не научитесь делать сайты лучше, если не начнете делать их самостоятельно.
Хватит использовать другие сайты как «костыли», бесцельно бродя в поисках озарения. Если вы определили свои цели и желаемый контент, вы можете быстро двигаться вперед, пока не найдете элементы, которые помогут достичь вашей цели. А затем ПРЕКРАЩАЙТЕ смотреть по сторонам.
Иногда бывает сложно поймать вдохновение. Может быть, это оттого, что многие дизайнеры работают на агентство, целый день делая работу для других, а потом они приходят домой и им уже неохота вновь садиться за компьютер. Или они просто чувствуют, что уже не могут выдать что-либо оригинальное.
Сходите в музей, посмотрите фильм, или просто прогуляйтесь. Дайте себе передышку и у вас появятся новые идеи. Все ищут вдохновение примерно в одних и тех же местах в интернете. Может быть, именно поэтому у вас создается ощущение, что вы не можете родить отличную идею, какая еще никому и не снилась. Вы просто смотрите туда же, куда и все остальные дизайнеры в мире. Попробуйте что-нибудь другое и не пытайтесь изо всех сил поймать вдохновение, оно должно прийти само собой.
Это одна из самых главных вещей, которые я понял: в мире нет человека, такого же, как вы. Может быть, это звучит, как слова школьного психолога. Тем не менее, это правда.
Бренд, который вы создаете, не должен базироваться только на элементах дизайна (логотипе и цветах). Он должен отражать вашу индивидуальность и способ самовыражения. Бренд может быть дерзким и современным, с элементом неожиданности. Вы можете взять его и построить вокруг него дизайн. Ваш бренд является персональным, он должен исходить от вас, а не являться отражением чего-то вами виденного. Тренды обычно исчерпывают себя, поэтому избегайте их, во что бы то ни стало.
Как только вы определились со своим брендом, вы уже не можете его нарушить. Он становится пуленепробиваемым. Станьте лучшим дизайнером своего фирменного стиля. Используйте этот фундамент для этого сайта и его будущих версий. Все становится намного проще, когда вы знаете, кто вы есть.
Проектор Optoma EP721i – лидер продаж! Лучшая цена только на finebuy.ru
Не секрет, что ноутбуки Asus сейчас самые популярные. Выберите модель, которая подходит вашим критериям.
Теперь настало время избавиться от внутреннего критика. Если вы все еще слышите, как кто-то говорит вам, что работа еще недостаточно хороша — просто не стоит их слушать (это относится и к голосам за пределами вашей головы). Давайте смотреть на вещи реально. Вы так можете работать над дизайном несколько следующих лет, и все равно не будете удовлетворены. После того, как вы выполнили все предыдущие правила, вы сможете сформировать свой сайт и свой стиль так, что будет намного проще создать нужный вам дизайн.
Признайте свои слабые и сильные стороны. Дизайнеры по натуре любят то, что они делают, и привязываются к своим творениям. Все, что вы делаете, вы делаете с полной отдачей. Вы не сможете дать больше, и если вы не оставите что-то за рамками, вы никогда не сможете получить «обратную связь» или увидеть результаты работы. Без такого опыта невозможно вырасти до более профессионального дизайнера. Не забывайте, что лучшим дизайнерам иногда не удавалось понять, что лучше оставить за рамками своей работы.
Ну так как вы узнаете, что получилось самое оно? Когда было потрачено достаточно времени? Дайте вашему дизайну «перебродить» несколько дней и вернитесь к нему вновь. Если вы смотрите на работу и понимаете, что она все еще хороша, или даже лучше, значит, вы на правильном пути.
Даниэль: «Но как я узнаю, что моя картина хороша?»
Мияги: «Если она исходит из тебя, то она всегда хороша».
- Из
Даже лучших дизайнеров иногда «заклинивает». Я недавно видел беседу о творческих способностях на TED. Автором была Элизабет Джилберт. Она говорила о том, что творческое вдохновение или «гений» может не исходить изнутри нас, а скорее быть данным нам извне. Что-то вроде музы в греческой мифологии. С этой точки зрения, творческим личностям не стоит быть столь требовательными к себе, стараясь каждый раз достигать блестящего результата. Это действительно изменило мой личный взгляд на творчество и такие ситуации, когда дизайнерские идеи не бьют из тебя ключом.
- .
Все эти правила вместе очень сильно помогают преодолеть внутреннюю борьбу при создании дизайна для себя. Не забывайте использовать то, что было создано, следуя этим правилам, как компас, который не даст вам сбиться с пути.
Например, если вы увидели ссылку на классный сайт, после того, как вы прекратили смотреть и начали творить, используйте нечто вроде вашего Пуленепробиваемого Бренда. Подумайте о назначении того классного сайта. Он работает на того дизайнера, а не на ВАС. Цели того дизайнера, скорее всего, очень сильно отличаются от ваших. Просто посмотрите и продолжайте двигаться по пути к своему отличному дизайну.
Эти правила помогут вам преодолеть внутреннюю борьбу при создании дизайна для себя. Я использовал эти правила и понятия, чтобы справиться с собственными трудностями в дизайне и надеюсь, что другим они тоже будут полезны.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Перевод статьи ««
Существует палитра из 216 цветов, поведение которых мало предсказуемо при использовании разного железа и программных платформ. Она называется web-безопасной (или просто безопасной) палитрой, и эти цвета распознаются всеми браузерами и системами (ну, за исключением совсем уж древних систем). Хотя эти цвета и не выглядят точно один в один из-за особенностей разных мониторов, они хотя бы однозначно распознаются всеми системами.
Web-безопасные цвета были выбраны математически, а не в силу того, что эти цвета используются чаще всего. RGB-коды для безопасных цветов состоят из нуля и других шестнадцатеричных цифр, делящихся на три: 3, 6, 9, C (12) и F (15). Кроме того, эти цифры всегда используются попарно.
Профессиональная разработка интернет-магазинов в Перми.
Нужна раскрутка сайта? Заходи на www.kokoc.com
Например:
Повышение значений парных цифр, например от 33 к 66, означает 20% повышение насыщенности данного тона.
Многие цвета помимо шестнадцатеричных кодов имеют имена. Например, в таблице стилей можно написать «color:red». Загвоздка в том, что только десять из этих имен цветов соответствуют в точности одному и тому же коду во всех браузерах. Казалось бы, нечто такое очевидное, как «red» должно бы всегда соответствовать коду #FF0000, но, к сожалению, это не всегда так. Например, имя цвета «brown» соответствует коду #A52A2A в Navigator 7.2 и коду #993333 в Internet Explorer 6. Хотя новые версии Internet Explorer и Firefox лучше согласуются между собой, все равно безопаснее использовать шестнадцатеричные коды, а не имена.
Фактически, все графические программы и среды web-разработки предлагают собственные версии безопасной палитры. К сожалению, эта палитра имеет строгие ограничения, особенно когда речь идет о более тонких и сложных оттенках, которые так любят многие дизайнеры. Так что происходит, если вы выбираете цвет, не являющийся web-безопасным? Если у посетителя сайта стоит достаточно мощная система, чтобы отобразить именно этот цвет, то он выглядит должным образом. Если же нет, браузер делает одно из двух: либо на свое усмотрение меняет цвет на ближайший к нему, который он может распознать, либо использует дитеринг.
Грамотная регистрация в каталогах Рунета
Веб-студия Юнима. Создание сайта в Саратове.
Дитеринг подразумевает смешение пикселей двух разных цветов с целью создания оптического обмана, чтобы наш глаз воспринял третий, промежуточный цвет — фактически, происходит его подмена. Дитеринг на экране компьютера работает по тому же принципу, по которому наш глаз воспринимает быстро сменяющиеся отдельные кадры как одно плавно движущееся изображение. Даже несмотря на то, что наш глаз выполняет такое слияние автоматически, зернистость в области дитеринга все равно заметна и отвлекает внимание, особенно если заливка большой области выполнена сплошным цветом. Дитеринг не всегда плох (иногда его применяют целенаправленно для получения особых эффектов), однако сплошной цвет является более предпочтительным, чем смешанный.
Есть несколько алгоритмов дитеринга. Один из самых ранних и самых популярных по сей день — , разработанный в 1975 г.
Одним из преимуществ данного алгоритма является минимизация помех изображения, благодаря диффузному процессу; с помощью диффузных алгоритмов обычно удается получить изображение, которое намного ближе к оригиналу, чем изображение, полученное с помощью более простых алгоритмов дитеринга.
— Wikipedia
Из-за этой проблемы некоторые специалисты до сих пор советуют придерживаться web-безопасной палитры. Однако, она налагает серьезные ограничения: 216 цветов это не так уж много для большинства дизайнеров (вроде меня). Неизбежно, в точности такого цвета, как нам представляется, просто не оказывается в безопасной палитре.
Это ставит нас перед дилеммой: следует ли ограничиться безопасной палитрой из 216 цветов, чтобы быть уверенными, что наши цвета не изменятся и не подвергнутся дитерингу у тех пользователей, чьи браузеры не могут распознать большее количество цветов? Или радостно и безоглядно выбирать из 16,8 миллиона великолепных, изумительных и выразительных цветов, которые все же могут увидеть на экране многие, пусть и не все, пользователи?
Фактически, старых компьютерных систем с цветовым диапазоном из 256 цветов осталось так мало, что большинство специалистов уже объявляют, что web-безопасная палитра осталась в прошлом. И все же, ответ на вопрос, стоит ли использовать безопасную палитру, звучит как: «Зависит от обстоятельств». Зависит от того, насколько значительную долю вашей потенциальной аудитории составляют пользователи со старыми компьютерами, поддерживающими только 256 цветов. Зависит от того, будут ли заходить на сайт с коммуникаторов или сотовых телефонов, которые могут поддерживать только 256 цветов. Даже для таких пользователей использование безопасных цветов наиболее важно на больших поверхностях сплошного цвета в графических элементах и фонах HTML-страниц, где больше всего заметны дитеринг или смена цвета. Если ни одно из этих условий, вроде бы, не влияет на большую часть вашей аудитории, то вы можете спокойно использовать любые цвета, которые поражают ваше воображение.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Перевод статьи .
В данной статье, я хочу проилюстрировать вам применение цикла Деминга – так же известного как (Plan, Do, Check, Act) – в веб-дизайне. Если вы никогда не слышали об этом, цикл Деминга – это модель (разработанная ), которая описывает итеративный (повторяющийся) процесс, направленный на поддержание непрерывности совершенствования разработки, обычно используемая в бизнес-процессах реинженеринга и в менеджменте качества. Эта модель включает 4 основных этапа:
– Plan: установить цели и определить методы их достижения;
– Do: осуществить запланированное;
– Check: сравнить полученный результат с ожидаемым;
– Act: улучшить полученный результат.
А для вас постинг это заработок или каторга?
Скоро осень, пора выбрать отопительные приборы. Советую обратится в компанию Гольфстрим.
Проще всего представить круг Деминга можно следующим образом:
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Сразу уточняю, что речь пойдет о разработке именно сайта, а не очередного блога. Т.е. задача в следующем: есть дизайн сайта – нужно натянуть его на CMS Wordpress. Что необходимо учесть в первую очередь и с какимим проблемами придется столкнуться? Давайте разберемся.
Не верите, что желания исполняются? Просто создайте свой вишлист на JustParty.ru
Если вы используете в шаблоне функцию wp_head() (например при использовании плагина All in the Seo), то вскоре обнаружите, как она запачкает блок <head> всевозможными мета-тегами, ссылками на RSS и т.п. Эту неприятность можно исправить следующим образом.
Создайте файл functions.php в вашей теме (если он еще не создан) и разместите код:
<? remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'wlwmanifest_link'); remove_action( 'wp_head', 'feed_links_extra'); remove_action( 'wp_head', 'feed_links'); remove_action( 'wp_head', 'rsd_link' ); remove_action( 'wp_head', 'index_rel_link' ); remove_action( 'wp_head', 'parent_post_rel_link'); remove_action( 'wp_head', 'start_post_rel_link'); remove_action( 'wp_head', 'adjacent_posts_rel_link'); ?> Таким образом, вы избавитесь от 9 лишних строк в блоке <head>.
позволяет выводить записи с помощью конструктора запроса $query. Т.е. если вам надо вывести записи только определенной категории и только 5, вы можете указать:
query_posts('cat=3&showposts=5&orderby=date'); И дальше как обычно цикл:
// the Loop <? while (have_posts()) : the_post();?> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a> <? endwhile;?>
В чем же подвох? А в том, что если вы разместите подобный код, например, в шаблоне шапки сайта, то ваш сайт просто перестанет корректно работать. Дело в том, что в точности такой же цикл у вас будет и в шаблоне записи и в шаблоне страницы, а значит заданный вами запрос query_posts() унаследуется ими.
Чтобы этого не произошло, вам нужно использовать следующую альтернативную кострукцию:
<? $my_query = new WP_Query('cat=3&showpost=5&orderby=date'); while($my_query->have_posts()) : $my_query->the_post(); ?><li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <? endwhile; ?> Такая конструкция обеспечит условие того, что цикл в шапке будет выполняться только по запросу $my_query, который не будет иметь отношения к обычному циклу в шаблоне записи и страницы.
Если перед вами стоит задача вывести несколько блоков навигации, например, верхнее меню, меню слева и .т.п., то вам поможет в этом использование произвольных полей. Не волнуйтесь, здесь не будет много кода :)
Все решается очень просто с помощью встроенной конструкции wp_list_pages(), где в качестве параметра можно указать название произвольного поля meta_key, например:
<?php wp_list_pages('sort_column=menu_order&title_li=&meta_key=top_menu'); ?> Таким нехитрым образом можно вывести определенный список страниц в любой части сайта.
На этом пока все, но я обязательно продолжу рассказывать о наиболее волнующих проблемах разработки сайта на Wordpress в следующих статьях.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Перевод статьи
Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто. Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту. Но в блочной верстке не все так просто.
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Начиная со второго полугодия 2008 года на рынке браузеров произошло несколько ярких событий: выход в свет долгожданного Google Chrome, релиз IE8 и Opera 10. Однако в общую долю популярности использования браузеров они не внесли много изменений. Рекомендую для начала вспомнить статистику на конец первого полугодия 2008 года:
Рис. 1. Статистика использования браузеров на конец I полугодия 2008 года (по миру в целом)
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Система купли-продажи ссылок INDEK.Биржа, не только открывает новые возможности по более эффективной монетизации сайтов, но и анонсируют очень привлекательную двухуровневую партнерскую программу. Которая будет интересна как вебмастерам и владельцам собственных ресурсов, так и всем активно работающим в сети людям. , не только открывает новые возможности по более эффективной монетизации сайтов, но и анонсируют очень привлекательную двухуровневую партнерскую программу. Которая будет интересна как вебмастерам и владельцам собственных ресурсов, так и всем активно работающим в сети людям.
“Привычный взгляду” интерфейс и удобная функциональность, при всех положительных отличиях INDEK.Биржи, позволяет работать на площадке в привычном режиме, поэтому освоение данной системы не займет много времени. Но все же, интерфейс выглядит пока сыровато: не работают некоторые ссылки, форма регистрации мало соответствует правилам юзабилити. Думаю, что разработчики торопились с запуском, поэтому все будет дорабатываться в процессе.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Перевод статьи
Провести юзабилити-тест сайта – очень мудрая затея. Хороший интерфейс – это не только удобство навигации, но и простота восприятия сайта в целом, а значит, еще и довольные посетители, и покупатели.
Однако, не все идеи по улучшению интерфейса могут быть воплощены на практике, т.к. для одних пользователей они кажутся превосходными, а для других – совсем наоборот.
В данной статье мы рассмотрим 10 online инструментов, которые помогут улучшить юзабилити вашего сайта, даже с небольшим бюджетом. Как дизайнеры и разработчики, мы, как правило, не можем корректно судить о собственном произведении: если мы это сделали, значит, мы знаем как оно работает.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Значение многих атрибутов описания характеристик объектов на Web-страницах выражается в цифрах. Цифры сопровождаются названием единиц измерения. Не всегда обязательно эти названия приводить, поскольку броузер распознает некоторые единицы по умолчанию, но для точного определения значений атрибутов элементов документа нужно знать как сами единицы, так и способы их записи.
Единицы измерения, применяемые в описании многих свойств элементов документов, можно разделить на два типа: абсолютные единицы и относительные единицы. Значения одних и тех же атрибутов могут выражаться как в абсолютных, так и в относительных единицах. Например, для описания высоты шрифта могут использоваться абсолютные единицы – миллиметр (mm) или пика (pc), или же относительные единицы, например пиксели (px), величина которых зависит от разрешающей способности экрана. Или проценты, в которых можно выражать величины, составляющие часть или многократное повторение других величин (например, 75% ширины экрана).
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Вот решилась обновить движок – не жалею даже своей темы. Тем более некоторые плагины с новой версией просто не работали (ajax комментарии)
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Перевод статьи . John Urban.
Довольно часто дизайнеров справедливо обвиняют в том, что, создав дизайн сайта, они уходят в свой кокон и замыкаются в неведении, оставляя всю «грязную работу» по воплощению дизайна в жизнь разработчикам. Такая равнодушная позиция отмечается не только в индустрии создания сайтов, но и при разработке программного обеспечения и игр.
Суровая действительность указывает на то, что весь процесс разработки должен происходить при участии дизайнеров. Для достижения оптимальной эффективности дизайнер должен уметь не только нарисовать картинку, но и встроить ее! В этой статье я хотел бы поделиться несколькими соображениями о том, почему дизайнеры должны уметь верстать сайты.
Tweem.ru - реклама в Твиттере.
Здесь можно проверить обратные ссылки.
Эффективная раскрутка сайта в Краснодаре, Сочи, Геленджике, Анапе и Туапсе. Антикризисные акции и скидки!
Имея четкое представление о том, как будет реализовываться конечный продукт, дизайнер будет предлагать более реальные и практически осуществимые идеи. Поскольку работа дизайнера является неотъемлемой частью процесса разработки сайта, он должен озаботиться тем, чтобы дизайн можно было успешно претворить в сетевую реальность, в частности, учитывая юзабилити сайта, удобство его просмотра и доступность. Дружественный интерфейс сайта подразумевает не только удобство и четкую логическую организацию навигации, но и предоставление пользователю всей необходимой ему информации упорядоченно и не перегружая его сверх меры. Единственный реальный способ узнать, правильно ли «работает» ли верстка сайта, - это научиться делать ее самому.
Фактически, продукты, разработанные одними людьми и воплощенные другими, никогда не оправдывают ожиданий всех участников, особенно это касается неосязаемой продукции, такой как веб-сайты, программное обеспечение или игры. Обычно все заканчивается компромиссом между тем, что ожидалось, и тем, что возможно осуществить на деле. Все вроде бы уловили общую идею, но редко когда получается передать ее в точности. Панацея от этого - сделать так, чтобы дизайнеры не только генерировали идеи, но и пожинали плоды их реализации. Тогда исключается путаница, недопонимание и искаженная передача информации.
На практике, готовый дизайн не должен всегда быть окончательным вариантом. Я имею в виду, что он должен быть гибким, чтобы его можно было менять и адаптировать под технические ограничения системы без утраты его изначальной сущности. Такие многократные и неизбежные изменения могут осуществляться только самим дизайнером. Дизайнер/разработчик в одном лице может вносить необходимые изменения гораздо быстрее, чем если бы разработчику приходилось повторно отсылать макет дизайнеру, который, к тому же, редко находится в пределах досягаемости, чтобы внести изменения. К тому же, в такой ситуации могут возникать - и часто возникают - трения между дизайнерами и разработчиками.
Я люблю проводить параллель между созданием ПО, сайтов или игр и оркестровой музыкой, когда дизайнер сравнивается с композитором, а разработчик с руководителем ансамбля или дирижером. Представьте, что будет, если дирижер сам является композитором? Я думаю, это придаст симфонии поистине превосходное звучание и очарование. Ведь она не только была написана мастером своего дела, но и сыграна под руководством своего создателя!
Если дизайнер умеет верстать сайты, то стадии дизайна и верстки происходят непосредственно одна за другой, если не одновременно. Получается, на разработку затрачивается меньше времени - а кому не хочется, чтобы работа шла эффективнее?
Сегодня дизайнеру, чтобы оставаться востребованным, нужно постоянно расширять свое портфолио и улучшать свои конкурентные качества - уже недостаточно обладать каким-то одним набором навыков. Часто приходится быть мастером на все руки - и дизайнером, и разработчиком пользовательских интерфейсов, и копирайтером, и менеджером проекта.
Умея претворять свои дизайнерские работы в жизнь, а не оставляя их на милость разработчиков - вы повышаете свою ценность. К тому же, указанные рядом в резюме навыки дизайна и верстки сайтов еще никому не мешали. Даже наоборот, это делает сотрудника более востребованным и незаменимым, что жизненно важно в наше экономически неспокойное время корпоративной реорганизации (тотальной экономии) и сокращения штатов (массовых увольнений).
Однако, у такого сценария, когда дизайнер занимается версткой своих инноваций, есть и недостатки.
Как написал Лукас Мэтис (Lukas Mathis) в одной противоречивой статье на нашу тему под названием «Дизайнеры - не программисты» [1]:
Если дизайнер претворяет в жизнь собственные идеи, перед ним стоят две разные задачи: написать качественный код и создать приятный пользовательский интерфейс. Эти две задачи противоречат друг другу. Если вам необходимо самому воплощать свой дизайн, вам придется чем-то поступиться ради качества кода, а это повредит дизайну.
Дизайнеры, сами занимающиеся версткой сайтов, сталкиваются с двумя проблемами: они знают, когда новая замечательная идея может вылиться в неряшливый код, и они знают, где имеющийся код может повлиять на качество пользовательского интерфейса. Таким образом, две их задачи противоречат друг другу, поскольку пользовательский интерфейс включает множество мелких деталей, а эти мелкие детали приводят к нежелательному загромождению кода.
Отсюда вытекает нелегкое решение, принятое пуристами от веб-разработки. Они придерживаются старой школы, выступающей в защиту четкого разграничения между дизайном и разработкой. В самом деле, дизайнеры творят для людей, а разработчики программируют для компьютеров. Таким образом, дизайнеры, заботящиеся о восприятии пользователем, должны создавать максимально удобные пользовательские интерфейсы, а разработчики должны принимать оптимальные решения в программировании. Хотя в этом и есть разумное зерно, но сам я заметил, что безуспешно пытаюсь абстрагироваться от кода, работая над пользовательским интерфейсом, и, в конечном счете, удобнее иметь в виду ограничения, связанные с техническим воплощением и удобством использования.
Учитывая все сказанное, объем разрабатываемого проекта может, в конечном итоге, определять роли, которые отводятся в нем дизайнеру и разработчику. Небольшое приложение может с успехом контролировать менеджер проекта [2], в то время как обширной системой, определенно, должен управлять специализированный персонал!
[1] - Mathis, Lukas.”“.
[2] - Spolsky, Joel. ““.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Спасибо Роману Настенко за интереснейшую акцию по обмену трафиком для блоггеров. Суть очень простая: нужно установить у себя на блоге небольшой скрипт Google Reader, который будет отображать записи из блогов, на RSS которых вы подписаны. Затем отмечаетесь в комментариях на странице акции у Романа и попадаете в так называемый список “желанных блогов”, что дает вам преимущество получить новых подписчиков.
А теперь о бонусе :) Как установить блок Google Reader подробно написано на странице акции, я же хочу вам рассказать как можно этот блок стилизовать конкретно под ваш сайт с помощью CSS. Начну с того, что перечислю, какие стили используются для отображения блока:
#readerpublishermodule0 { } /* главный контейнер. В CSS для этого блока можно прописать нужную вам ширину, фон и границы; */ #readerpublishermodule0 .f { } /* блок с надписью "Читать еще"; */ #readerpublishermodule0 h3 { } /* заголовок вашего блока (у меня называется "Я читаю"); */ #readerpublishermodule0 ul { } /* блок списка с записями */ #readerpublishermodule0 ul li { } /* пункты с записями */ #readerpublishermodule0 ul li a.i { } /* ссылка на запись */ #readerpublishermodule0 ul li div.s { } /* блок, где размещается информация о том, какому сайту принадлежит запись */ #readerpublishermodule0 ul li div.s а { } /* ссылка на сайт, где размещена запись */ Важно! Чтобы прописанные вами стили “заработали”, в некоторых случаях, у правил придется приписывать !important, т.к. все стили прописаны в исходном коде и просто так не перепишутся.
Например, это потребуется, для переопределения цвета ссылки на запись:
#readerpublishermodule0 ul li a.i { color:#084C69 !important; } Теперь вам не придется лазить по исходному коду в поисках нужного элемента. Просто скопируйте нужные вам блоки в CSS файл и настраивайте на свой вкус и, конечно же, под дизайн вашего блога :)
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Релиз состоялся 10 июня. В новой версии, как и должно быть, довольно много нового. И обновление движка для пользователей будет очень полезно. Давайте обобщим наиболее важные обновления движка, а также рассмотрим несколько пунктов, которые вы должны знать, прежде чем обновить блог.
Есть 2 важных замечания, которые вы должны учесть, прежде чем обновить движок: совместимость плагинов и совместимость темы.
Это наиболее важный пункт, который вы должны обязательно проверить. Мы используем множество различных плагинов для расширения возможностей блога. Как минимум один из этих SEO-плагинов, не так ли? Если установленные плагины не совместимы с новым Wordpress 2.8, это может привести к некорректной работе всего блога! Wordpress 2.8 Codex составил плагинов, которые прошли проверку на совместимость с новой версией.
Кроме этого, проверить совместимость плагинов вы можете на сайте BraveNewCode, где выложен огромнейший . В настоящий момент список содержит около 5040 плагинов:
Если вы не нашли какой-либо плагин в списке, свяжитесь с автором плагина, прежде чем обновить блог.
P.S. Мой плагин помечен там как несовместимый, однако я уже исправила это и теперь вы можете и использовать его в версии 2.8.
После того, как вы убедились, что плагины будут работать корректно, необходимо проверить совместимость вашей темы с Wordpress 2.8. В большинстве случаев, темы будут полностью совместимы, но скорее всего, кроме тех, которые используют множество функций и фильтров. Вы можете посетив Wordpress Codex.
Тем, кто использует авторские и уникальные темы, советую обратится к их авторам.
Хотите профессионально изучать с преподавателями из-за рубежа?
On-line. Играй в Carnage!
Если вы уже убедились, что установленные плагины и темы полностью совместимы с новой версией движка, то вы совершенно уверенно можете обновить блог и наслаждаться новыми возможностями. Ниже мы рассмотрим 8 преимуществ Wordpress 2.8.
В версии Wordpress 2.7 был добавлен Установщик плагинов, который упрощает загрузку плагинов до пары кликов. Теперь, в Wordpress 2.8 добавлен Установщик тем.
Вы можете найти тему по ее специальным возможностям, цвету, количеству колонок и ширине. Вы также можете загрузить вашу собственную тему через встроенный загрузчик или проводник Установщика тем. В Wordpress 2.8 добавлена возможность установить тему в один клик!
В предыдущей версии, кликая на скриншот темы и после на ссылку активации мы могли увидеть тему в действии, т.е. превью. Однако не всегда это получалось сделать, т.к. возникали ошибки из-за плагинов.
И теперь, с новой системой управления темами, вы можете запросто активировать/просматривать/удалять любую тему.
Если вы уже использовали встроенный редактор в предыдущей версии, то теперь вы увидите насколько он стал еще удобнее. Взгляните на скриншот:
Теперь в редакторе есть подсветка синтаксиса и всплывающие подсказки с функциями согласно документации движка.
В Wordpress 2.8 появилась возможность редактировать комментарии во время редактировании записи. Комментарии расположены в отдельном блоке, который по умолчанию находится под блоком Обсуждение. Теперь комментарии можно запросто одобрять, запрещать, удалять, помечать как спам не покидая страницы редактирования записи.
В Wordpress 2.8 появилась новая улучшенная система управления тегами. Как и в управлении категориями, вы можете добавлять/удалять название тега, описание, метку. Главное отличие версии 2.8 и предыдущей в возможности добавлять описание к тегу, как в категориях.
Изменений в управлении виджетами не так много. Но в первую очередь удивляет новый интерфейс. Теперь сайдбары с виджетами находятся отдельно, в отличие от предыдущей версии, где их нужно было выбирать из выпадающего списка. Стало намного удобнее.
Кроме этого, в новой системе управления виджетами появился блок называемый Неактивные виджеты, в котором помещены те виджеты, которые были ранее активны - их настройки сохранились, на случай если пользователь захочет снова их активировать.
В предыдущей версии вы должны были вручную выбирать часовой пояс для указания летнего времени. В новой версии вам достаточно просто выбрать город, который находится в вашем часовом поясе и движок автоматически будет обновлять переход на летнее время. Для этого требуется PHP не ниже 5.1.0.
Новые опции позволяют выбрать то количество колонок, которые вы выберите для отображения на вашей рабочей доске.
Перевод статьи Wordpress 2.8 And 10 Things That You Should Know Before/After You Upgrade
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Прежде чем передавать готовую верстку заказчику, вы должны быть уверены, что все необходимые элементы учтены и изменение контента не приведет к “развалу” страницы. Поэтому хочу привести свой небольшой проверочный список пунктов, которые должны быть учтены при верстке.
Сервисы постинга в социальные закладки
В чем особенности дизайна блогов? Узнайте подробнее насколько это важно!
Даже если body не имеет никакого фона, обязательно прописывайте background, дабы избежать некорректного цвета, в случае если на компьютере изменена палитра.
body {background:#FFF} Если вы верстаете “резиновый” дизайн, вам необходимо напомнить заказчику, что должна быть минимальная ширина, при которой страница на развалится. Как правило, это либо 1004px, либо 780px. Если вы верстаете под IE6, то вам придется использовать специальную , либо воспользоваться JS скриптом, исправляющим многие недостатки IE6. Я использую скрипт IE7.js JavaScript library.
Здесь я имею ввиду правила для заголовков H1-H6, посещенных и активных ссылок (a:visited, a:active), списков (ol, ul), таблиц, форм. Все стандартные элементы, которые не присутствуют в дизайне, но процент их использования велик - должны быть прописаны в CSS. Не стоит лениться, воспитывайте в себе обязательство всегда выполнять полноценную верстку.
Этот пункт я вынесла отдельно, хотя он и относится к предыдущему. Не забывайте обнулять границы у картинок, которые обернуты в ссылку (если конечно, для таких картинок не предусмотрен отдельный дизайн).
a img {border:none} Как правило, это FF2/FF3, Opera 9, IE6/IE7, Safari. Я тестирую верстку для IE6 в IETester (там же есть и 7й, и 8й).
Следите за тем, чтобы ваш код был как можно более правильным и читабельным. Советую почитать об этом статью на моем блоге.
Важно помнить о том, что вес страницы должен быть как можно более минимальным. Постарайтесь избегать громоздких картинок и скриптов. Как оптимизировать вес страницы можно узнать из этого обзора.
И в заключение, не забудьте , впрочем как и CSS. Даже если это не обязательный пункт ТЗ, то сделайте это для себя, чтобы в будущем не делать ошибок.
А вы учитываете эти пункты при верстке? Буду рада вашим дополнениям к списку :)
Принимаю от и расскажу о железе своей машины :)
Работаю я на ноуте ASUS F7Z:
| Процессор | AMD Turion 64 X2 RM-70 2 GHz |
| Кэш L2 | 1 Mb |
| Экран | 17″ (43.2 см) |
| Разрешение экрана | WXGA+ (1440×900) |
| Видео | интегрированная ATI Mobility Radeon |
| Оперативная память | 3072 Mb DDR2 RAM (расширяется до 4096 Mb) |
| Привод | DVD-RW |
| Жесткий диск | 320 Gb (5400 об/мин) |
| Программное обеспечение | Windows Vista™ Home Premium |
| Порты и коммуникации | 5 x USB 2.0 Wi-Fi Bluetooth Выход на внешний монитор VGA IEEE 1394 (FireWire) Веб-камера HDMI ТВ-тюнер |
| Габариты | 403 x 299 x 32- 42 мм |
| Вес | 3.5 кг |
Передаю эстафету про железо , и .
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Заметили новую кнопочку-счетчик в правом углу записи? Хотите узнать как установить себе на блог такую же
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Многие задаются вопросом, что лучше – накупить книжек по SEO и сидеть зубрить или лучше все-таки заплатить за курсы поисковой оптимизации
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Спонсор месяца: Бухгалтер в собственном штате стоит дорого. Логос-Аудит - ведение бухучета для малого и среднего бизнеса
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Спонсор месяца:
Бухгалтер в штате стоит недешево! Логос-Аудит - бухгалтерское сопровождение предприятий для тех, кто понимает.
Перевод статьи How to Spot Quality within Web Design: Examples & Tips
Не забудьте почитать: Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1.
А сегодня поговорим о том, что такое хорошо продуманная типографика и как правильно организовать элементы на странице.
Хотя реальные тексты для сайта будет писать не дизайнер, они играют такую же важную роль, как и общее качество контента. Дизайнер должен потрудиться, чтобы тексты легко читались и удерживали внимание. Существует множество способов сделать текст легко читаемым и приятным глазу. По мере перечисления правил и норм того, что следует и чего не следует делать, я приведу несколько примеров сайтов, где рациональная типографика действительно работает.
Большые и красивые заголовки на сайте The Netsetter
Заголовки очень важны в веб-дизайне, особенно в дизайне блогов. Недавний тренд в веб-дизайне — использование крупных и жирных начертаний в заголовках. Этот тренд имеет ряд положительных последствий — при этом не только выделяются блоки, важные с точки зрения юзабилити, но и создается пространство и определяется структура страницы. Это замечательно иллюстрирует следующий пример с — здесь видно, как вокруг заголовка создается много пространства, и, естественно, он очень хорошо читается.
Интерлиньяж и разрядка в тексте
Сайт является очень красивым примером того, как важна типографика в веб-дизайне. На примере, приведенном ниже (взято из их портфолио), видно, как использование более крупного шрифта помогает создать свободное пространство. Даже при тонком, хрупком шрифте, который здесь используется, вы можете видеть, сколько пространства создается в этой области страницы. В самом деле, эта шрифтовая гарнитура очень изящна, и это отличный выбор. Еще одна вещь, которая бросается здесь в глаза — это внимание к высоте строки (интерлиньяжу). Расстояние между строками было увеличено по сравнению со значением по умолчанию, чтобы создать больше свободного пространства и сделать текст более удобочитаемым. Эту хитрость вы можете использовать в своей следующей работе.
Web Design Ledger — шрифты под настроение
Найти подходящий шрифт можно методом проб и ошибок, а можно выбрать шрифт на основании разных настроений, которые шрифты помогают привнести в дизайн страницы. Например, ресурс , обладая довольно невзрачным ретро-дизайном, при этом создает ощущение открытости и современности, так что выбор шрифта, вызывающего сходные эмоции, может стать залогом успеха сайта. Дизайнер Генри Джонс (Henry Jones) выбрал для заголовков популярный переходный шрифт с засечками Georgia, который очень хорошо соответствует «потертому» виду сайта. Современное звучание сайту придает еще один шрифт, в корне отличный от шрифта заголовков — основное содержание страницы напечатано шрифтом Helvetica, гарнитурой без засечек с очень плавными и открытыми очертаниями. Выбор гарнитуры в этом примере был очень разумным и, по сути, помог задать настроение всего сайта.
Краткий список требований по типографике в веб-дизайне
Определить хорошую типографику в веб-дизайне будет проще, если посмотреть на некоторые примеры (см. выше). Но чем же эти примеры так хороши и на что вам следует ориентироваться в типографике для своего следующего веб-сайта?Определить хорошую типографику в веб-дизайне будет проще, если посмотреть на некоторые примеры (см. выше). Но чем же эти примеры так хороши и на что вам следует ориентироваться в типографике для своего следующего веб-сайта?
Тут можно дать еще тысячу советов, но я не считаю себя экспертом в это области, я всего лишь научился ценить эффект хорошей типографики. Если вы хотите узнать о предмете больше и увидеть еще лучшие примеры, я настоятельно рекомендую почитать соответствующую в Smashing Magazine.
Дизайнерская деятельность многим кажется привлекательной из-за ее творческой составляющей, да и скучать тут, безусловно, не приходится. Сейчас я знаю, что слово «организация» звучит совсем не творчески и не весело, но если у вас сформируется привычка к хорошей организации, все будет не так уныло, как кажется на первый взгляд. Организация элементов веб-страницы всегда происходит по-разному, зависит от типа сайта и от того, насколько конкретные элементы важны для его содержания. Несмотря на то, что размещение элементов контента варьируется от случая к случаю, есть несколько приемов, помогающих значительно облегчить эту задачу. Во-первых, нужно решить, какую цель преследует данный дизайн. Например, вы создаете сайт, призванный повысить продажи, либо наполненный какой-либо информацией, либо создаете службу подписки или каталог ссылок и т.п. Дизайнерская деятельность многим кажется привлекательной из-за ее творческой составляющей, да и скучать тут, безусловно, не приходится. Сейчас я знаю, что слово «организация» звучит совсем не творчески и не весело, но если у вас сформируется привычка к хорошей организации, все будет не так уныло, как кажется на первый взгляд. Организация элементов веб-страницы всегда происходит по-разному, зависит от типа сайта и от того, насколько конкретные элементы важны для его содержания.
Несмотря на то, что размещение элементов контента варьируется от случая к случаю, есть несколько приемов, помогающих значительно облегчить эту задачу. Во-первых, нужно решить, какую цель преследует данный дизайн. Например, вы создаете сайт, призванный повысить продажи, либо наполненный какой-либо информацией, либо создаете службу подписки или каталог ссылок и т.п.
Дизайн коммерческого сайта: 37 signals
Глядя на популярный сайт 37 signals, легко заметить, что их продукция продается так хорошо неспроста. Создатели сайта сделали все возможное, чтобы вы увидели, что они продают, и помочь вам принять решение о покупке. Тут есть все, что требуется от сайта, предназначенного для продаж.
На картинке примера видно, что сайт обладает 4 ключевыми характеристиками, которые делают его идеальным для совершения покупок. Внимание привлекает первая деталь: они сделали очень темный блок с кратким содержанием и крупными заголовками, набранными жирным кеглем. Затем, они возбуждают интерес покупателя, перечисляя некоторые преимущества каждого продукта с симпатичной иллюстрацией. Следующая деталь — это желание купить, и оно подкрепляется цитатами и признаниями, даже приводится несколько видеороликов из серии «Нашим покупателям есть что сказать». И последняя характеристика — это динамичность. На сайте имеются разные динамические компоненты, и приятно, пролистывая довольно длинную страницу, увидеть, что внизу есть несколько динамических элементов. имеются разные динамические компоненты, и приятно, пролистывая довольно длинную страницу, увидеть, что внизу есть несколько динамических элементов.
Дизайн ради содержимого (блог): Well Medicated
Создание дизайна блога — это совсем другая сказка. Вам нет нужды тратить время на убеждение и переубеждение пользователей относительно продукции, ваша «продукция» уже на виду, ваш контент — вот ваша продукция. Сделайте так, чтобы пользователям было удобно просматривать и читать ваши записи, а также писать вам или в ваш блог.Создание дизайна блога — это совсем другая сказка. Вам нет нужды тратить время на убеждение и переубеждение пользователей относительно продукции, ваша «продукция» уже на виду, ваш контент — вот ваша продукция. Сделайте так, чтобы пользователям было удобно просматривать и читать ваши записи, а также писать вам или в ваш блог.
Содержимое должно быть главной или одной из главных вещей, которые есть в блоге. В данном примере симпатичный розовый заголовок в жирном начертании привлекает внимание прямо к контенту. Тут есть хорошего размера картинка для предварительного просмотра и добрых 2/3 абзаца текста, за которым следует ссылка «Читать дальше». Также имеется стандартная информация о том, когда и кем была сделана запись. По мне, это один из самых лучших примеров того, что я назвал бы качественным «дизайном ради содержимого». Внимание может быть привлечено ко всему, что вызывает интерес, здесь в фокусе находятся приятные крупные иконки оформления подписки, которые помогают пользователям следить за записями в вашем блоге. Кроме того, это несомненно увеличит количество подписчиков, так что этот прием работает на двух уровнях. Очень просто призвать пользователей просматривать другие разделы блога — для этого можно использовать все, от вкладки «недавние записи» или вывода популярных тем в боковое меню до организации выпадающих меню или простых и эффективных списков. Это легко осуществимо, но очень эффективно, особенно в блоге. Блоги обычно касаются личных вопросов, поэтому дать посетителям возможность связаться с вами различными способами будет очень полезно и поощрит людей узнать вас поближе и посетить ваш блог снова.
Конечно, бывает так, что приходится делать все иначе и ломать стандарты. Но есть несколько простых советов, которым вы можете следовать для создания прозрачной структуры и упорядоченного дизайна.
Читайте в следующей статье: “Что такое качество в веб-дизайне: примеры и рекомендации. Часть 3.” и вы узнаете как лучше всего использовать цвета и фоны в дизайне, а также о том, как можно придать дизайну изюминку.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Спонсор месяца:
Учимся заробатывать в сети или еще один SEO блог
Перевод статьи
Несколько выдающихся примеров и рекомендаций по созданию качественного дизайна веб-страницы или блога
Многие люди склонны описывать предоставляемые ими услуги по веб-дизайну как «качественные». Но что означает здесь слово «качество», как определить, является дизайн качественным или нет? Что ж, я вижу несколько способов определить качество применительно к сфере веб-дизайна. Ведь если однажды определить, что позволяет создавать качественный веб-дизайн, можно использовать эти же приемы для оттачивания собственного стиля.
Чтобы объяснить, как я понимаю качество в дизайне веб-сайтов, я собрал несколько рекомендаций и примеров.
Одно из главных достоинств хорошего веб-сайта - это рациональное использование расстояний между элементами дизайна. Если внимательно отнестись к тому, как расположены и выровнены определенные элементы на странице, можно значительно улучшить ее внешний вид в целом и создать у пользователя ощущение качественного дизайна.
Чтобы установить правильные расстояния между элементами дизайна, нужно, прежде всего, внимательно взглянуть на все объекты, составляющие веб-страницу. Глядя на общую картину, вы сможете лучше понять, как оптимально расположить объекты. Иногда очень помогает уменьшить страницу и посмотреть на ваш дизайн под альтернативным углом.
Отличное расположение элементов на сайте Good.is
Как вы можете видеть, эта страница создает очущение очень открытого и чистого пространства. Это получилось благодаря решению дизайнера оставить значительные расстояния вокруг блоков текста и картинок.
Очень удачные расстояния между элементами на сайте Digital Mash
Если правильно расположить элементы на странице друг относительно друга, они будут выглядеть намного привлекательнее и на них будут чаще кликать. Сайт Digital Mash - отличный пример очень дружелюбного дизайна.
Масса свободного места на сайте Creatica Daily
И снова - расстояния между объектами очень помогают выделить контент, чтобы он мог говорить сам за себя. Тут не так уж много содержания на странице, но создатели сайта не побоялись оставить большие свободные пространства. Если у вас на странице всего несколько строчек текста, это совсем не значит, что им нельзя отвести много места.
Много пространства на сайте Postbox
Если взглянуть на сайт Postbox повнимательнее, можно заметить, какие отступы тут сделаны по краям - на самом деле они по 60 пикселей. Казалось бы, это многовато, но в действии выглядит просто отлично.
Основная ошибка при определении расстояний между элементами контента - прижимание их к краям страницы. Неважно, насколько стильными являются сами объекты, - если втиснуть их на страницу слишком много, она сильно потеряет в стиле и качестве.
Пример недостаточных расстояний между объектами
В предыдущем разделе мы показали, какие удачные отступы сделаны на сайте PostBox, а ниже мы сами сделали его имитацию, чтобы показать, как бы он выглядел с недостаточными расстояниями между объектами. Теперь вы можете видеть, как сильно неправильное расположение объектов может испортить дизайн. В таком случае веб-страница сильно проигрывает, и ощущение качества пропадает.
Решение о том, сколько свободного места использовать на странице, приходится принимать заново в каждом конкретном случае. Поэтому нужно тренировать глазомер, чтобы уметь определять корректное расстояние, необходимое вокруг каждого элемента, и использовать это знание в дизайне. Это нелегко, но приходит с практикой.
- Использование в дизайне сетки с направляющими линиями
Использование сетки определенно помогает понять всю важность расстояний между объектами.- Пытаться снова и снова
Методом проб и ошибок вы сможете определить, какими должны быть отступы.- Свободное пространство - не значит потраченное впустую
Если у вас на странице есть пустое пространство, вовсе необязательно, что его нужно заполнять.- Лучше меньше, да лучше
Чем пытаться вместить на страницу побольше, сделайте на ней поменьше содержания, добавьте свободного места и размещайте только жизненно важную информацию.
Когда дизайн “довели до ума”, это видно сразу. Иногда все зависит от мельчайших деталей, которых многие могут даже не заметить. «Совершенством до последнего пикселя» я называю метод, когда пристальное внимание уделяется линиям, краям и границам. Можно вставить просто линию, а можно добавить небольшие детали, будь то легкие градиенты, простая тень шириной в 1 пиксель или блик - и ваша работа действительно будет выделяться. Некоторые дизайнеры, известные таким подходом: Коллис Таед (), Дэвид Леггетт () и Вольфганг Бартелме ().
Внимание к деталям на сайте Envato
Ниже я вырезал несколько примеров. В Примере 1 вы можете видеть, что у зеленой плашки имеется светло-зеленая граница шириной 1 пиксель. В Примере 2 использована легкая градиентная тень внутри блока и белая граница шириной 1 пиксель сверху. Умно - использовать тень, чтобы создать впечатление блика сверху. На зеленой поверхности на заднем плане имеется небольшая и очень легкая тень, которая позволяет привлечь внимание к чистым и четким деталям внутри белого блока, расположенного ниже. Хотя кажется, что таких деталей немного, они действительно помогают создать впечатление, что все на странице слегка блестит полировкой, создается чувство трехмерного реализма, словно предметы были помещены поверх страницы, а не на плоский статичный макет.
Внимание к деталям на сайте Tutorial9.net
Дэвид Леггетт знает толк в . Его недавний редизайн сайта tutorial9.net - это смешение множества методов сглаживания пикселей. В Примере 1 вы можете видеть, как он сделал, чтобы вкладки выглядели чуть более гладкими, всего лишь добавив наверх простой 1-пиксельный блик. В Примере 2 использован ряд методов. Падающая тень на иконке фотоаппарата, использование светотени на белом участке, 1-пиксельный блик наверху панели навигации.
Совершенные до пикселя кнопки и разделители на сайте RedBrick Health
Красивая панель навигации, созданная Райаном Шерфом () - это еще один пример использования пиксельного совершенства для создания качественного веб-дизайна. У розовой кнопки сделан 1-пиксельный блик, а разделительные линии между ссылками проработаны так же качественно и детально: как вы можете видеть, вместо того, чтобы использовать просто серые линии-разделители, Райан добавил вниз 1-пиксельные блики, чтобы все не выглядело плоским и двумерным.
Пиксельное совершенство не чуждо и гранжу: сайт AvalonStar
А вот прекрасный AvalonStar: безбашенный блог, оформленный в стиле гранж. Но даже в неопрятном гранжевом дизайне блики шириной в 1 пиксель выглядят эффектно. Если вы посмотрите на Пример 1, вы увидите, как градиентная тень используется на коричневой верхней панели, а у расположенного ниже зеленого блока, имеется 1-пиксельный блик сверху. Из-за сочетания темного тона вверху и блика шириной в 1 пиксель блоки выглядят слегка блестящими.
Здесь главное - практика. Как вы могли видеть в примерах, такая простая вещь, как высветленная линия шириной 1 пиксель может добавить стиля и глубины вашим работам, вам не нужно прибегать к умопомрачительным объемным деталям и градиентам, чтобы создать впечатление чего-то действительно объемного.
- Внимание к мелким деталям
Мелкие детали, дополняющие содержание страницы - ключ к успеху.- Мыслите в пикселях
Границы, градиенты, линии, тени и т.п. не должны быть огромными, чтобы производить должный эффект.- До и После
Сравнивайте результаты своей работы: как выглядит страница до и после применения различных эффектов. Тогда вы сможете увидеть, насколько они действенны.
P.S. Читайте в следующей статье: Что такое качество в веб-дизайне: примеры и рекомендации. Часть 2.
Поговорим о примерах хорошо продуманной типографики.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|
Вольный перевод статьи
Автор:
В данной статье автор приводит наглядные доказательства, почему не стоит использовать @import для загрузки стилей в документ.
Существует 2 способа загрузки файлов стилей. Использовать тег LINK:
<link rel='stylesheet' href='a.css'>
Или импортировать файлы с помощью @import:
<style> @import url('a.css'); </style> Я предпочитаю использовать LINK для удобства, т.к. вы должны помнить, что @import нужно размещать всегда в самом верху блока стилей, в противном случае они не импортируются.
Новости примадонны отечественного шоу-бизнеса, Аллы Пугачёвой.
Все еще ищите хостинг для своего проекта?
Я хочу рассказать о различных способах использования LINK и @import. В приведенном ниже примере прописаны 2 файла стилей: a.css и b.css. Каждый файл по загрузке занимает ровно 2 секунды, чтобы было удобно отследить влияние на скорость загрузки в дальнейшем. В первом примере используется @import для загрузки обоих файлов стилей. В этом примере, называемом , HTML документ содержит следующий блок стилей:
<style> @import url('a.css'); @import url('b.css'); </style> Если вы всегда будете использовать только @import для загрузки стилей, то проблем с производительностью не будет, хотя мы увидим ниже, это может привести к ошибке с JavaScript. Оба файла загружаются параллельно (см. рисунок 1) Но проблемы начинают появляться, если использовать @import внутри файла стилей, либо вместе с LINK.
Рис. 1.
В примере используется тег LINK для загрузки a.css, и @import для b.css:
<link rel='stylesheet' type='text/css' href='a.css'> <style> @import url('b.css'); </style> В IE (тестировалось в 6, 7, и 8), это привело к тому, что файлы загружаются последовательно друг за другом, как показано на рисунке 2. Соотвественно, время загрузки страницы в IE увеличится.
Рис. 2
В примере , файл a.css загружается через LINK, и содержит внутри правило @import для b.css:
В документе:
<link rel='stylesheet' type='text/css' href='a.css'>
в a.css:
@import url('b.css'); Этот способ также приводит к тому, что файлы загружаются последовательно (рис. 3.), а не параллельно, но теперь это происходит не только в IE, но и остальных браузерах. Если подумать - все логично: браузер загружает a.css и начинает парсить его. Обнаружив внутри правило @import, начинается загрузка файла b.css.
Рис. 3.
Незначительное отличие от предыдущего примера привело к удивительным результатам в IE. LINK используется для вызова a.css и для нового файла proxy.css, который содержит только @import для b.css.
:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'>
В proxy.css:
@import url('b.css'); Результаты эксперимента в IE показаны на рисунке 4. Первый запрос - HTML документ. Второй запрос - a.css (2 секунды). Третий - proxy.css. Четвертый - b.css (2 секунды). И вот что удивительно, IE не хочет начинать загрузку b.css, пока файл a.css не будет загружен полностью. Во всех других браузерах такого сюрприза не происходит, что приводит к более быстрой загрузке страницы (см. рисунок 5).
Рис. 4. Результаты в IE.
Рис. 5. Результаты в других браузерах.
Использование в IE приводит к тому, что файлы загружаются не в том порядке, в котором они указаны в коде. В этом примере используется 6 файлов стилей (каждый из которых загружается по 2 секунды), за которыми следует JS скрипт (4 секунды для загрузки).
<style> @import url('a.css'); @import url('b.css'); @import url('c.css'); @import url('d.css'); @import url('e.css'); @import url('f.css'); </style> <script src='one.js' type='text/javascript'></script> На рис. 6 вы увидите, что самый долгий по загрузке - это скрипт. Несмотря на то что он указан после стилей, в IE он загружается первым. Если в скрипте содержится код, который зависит от применяемых стилей (getElementsByClassName, и т.п.), это может привести к ошибкам работы скрипта, т.к. он загружается прежде чем стили.
Рис. 6.
Проще и безопасней использовать для загрузки стилей:
<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='b.css'>
Использование LINK обеспечивает параллельную загрузку файлов во всех браузерах (см. рисунок 7). Применение LINK также гарантирует, что файлы будут загружены именно в том порядке, который указан в коде документа.
Рис. 7.
Для нас особенно плохо то, что ресурсы могут быть загружены в другом порядке, нежели указано в документе. Все браузеры должны заглядывать наперед перед загрузкой стилей для извлечения правил @import и начинать их загрузку немедленно. До тех пор, пока браузеры не реализуют это, я советую избегать использование @import и загружать стили только с помощью LINK.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
|