В этой статье мы рассмотрим 5 полезных решений по написанию кода. Все эти решения помогут не просто улучшить код, но и развить идею дизайна веб-сайта. Они влияют на пользовательский интерфейс и взаимодействия интерфейса с пользователем посредством дизайна, а также, при помощи этих решений, вы сможете создавать более удобные и интерактивные веб-сайты.
1. Эффект столбиковой диаграммы (гистограммы) для нескольких элементов
Данный эффект (на изображении ниже) может быть отличным решением по добавлению чувства энергичности дизайну, к тому же, людям гораздо легче понять наглядную диаграмму, нежели большие объемы текста. Но стоит заметить, что функция данной техники заключается не только лишь в опрятности дизайна. Посредством организации любых элементов (тэгов, категорий, комментариев, товаров) в упорядоченный список, дизайнер может расширить взаимодействие веб-сайта с пользователем, а также предоставить гораздо больше информации в более удобном для понимания виде. Посетитель, ознакомившись с тэгами или типами продуктов, может сразу понять, что из себя представляет веб-сайт. Такая техника отлично способствует повышению числа посетителей, причем посетителей именно той аудитории, на которую нацелен веб-сайт.
Посредством нумерации комментариев, пользователи могут с легкостью найти текущий этап обсуждения. Подсветка комментариев и сообщений с большим числом комментариев также улучшает взаимодействие пользователя с веб-сайтом.
Изображение ниже отображает два примера данного дизайна. С левой стороны мы видим отсортированные тэги, а справа можно увидеть сообщения с наибольшим числом комментариев. Посетите оба веб-сайта для того, чтобы увидеть функционирование эффекта в полную силу.
Слева веб-сайт Dribbble (нумерация тэгов). Справа веб-сайт Engadget (подсветка постов с наибольшим числом комментариев).
Каким образом это реализовано?
Данный эффект вполне легко реализовать. Нам нужно будет сделать три вещи:
1. Выложить полный список свойств,
2. Создать эффект посредством простого кода CSS и (X)HTML,
3. Внедрить динамический счетчик в нашу статичную версию.
Теперь у нас есть направление, в котором следует продвигаться. Конкретные этапы разработки помогут нам в создании данной функции.
Перечисление свойств диаграммы
Для того чтобы приступить к первому этапу, давайте посмотрим на то, что представляет собой дизайн. Составляя список этапов, мы можем отсортировать их относительно правил написания кода.
1. Внедрение динамических счетчиков (тэги, комментарии, категории и так далее);
2. Определение элементов с наибольшим числом (10 наиболее прокомментированных категорий);
3. Создание горизонтальной панели с отсчетом (или вертикальной, как вам будет угодно);
4. Сортировка панелей относительно числа.
Разработка дизайна (статичного)
Теперь давайте займемся разработкой дизайна (без каких либо автоматических или динамических элементов). Сейчас нам нужно отвлечься от номеров из базы данных или другого источника, и создать собственные. Нам также не нужно определять результат поста с наибольшим числом комментариев или сортировать их по убыванию. Нам просто нужно сделать собственные числа, вручную отсортировать их и использовать только 10 для начала. После этого, мы сделаем то же самое в коде CSS и (X)HTML, а затем уже займемся динамикой.
(X)HTML:
<div class="block">
<a href="#" style="width: 100%">Web Interface Design (27)</a>
<a href="#" style="width: 92.59%">Photoshop Tutorials (25)</a>
<a href="#" style="width: 74.07%">CSS Tricks (20)</a>
<a href="#" style="width: 66.66%">Showcases & Inspiration (18)</a>
<a href="#" style="width: 51.85%">WordPress (14)</a>
<a href="#" style="width: 48.15%">javascript (13)</a>
<a href="#" style="width: 37.04%">Free Resources (10)</a>
<a href="#" style="width: 29.63%">Reviews (8)</a>
<a href="#" style="width: 29.63%">Interviews (8)</a>
<a href="#" style="width: 25.93%">Typography (7)</a>
</div>CSS:
html, body {
background: #eee;
font: normal 13px/1.5em Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
.block {
width: 400px;
margin: 100px auto;
}
a {
display: block;
padding: 5px;
margin-bottom: 2px;
background-color: #666;
color: #fff;
text-decoration: none;
}
a:hover {
background: #9764a0;
}Код, представленный выше, отвечает за статичный набросок:
Учтите, что мы добавили немного стилизации лишь для проверки работы эффекта при наведении курсора мыши. Вы можете применить какие хотите стили.
CSS и (X)HTML-коды, должно быть, понятны и так, но давайте, все же, разберем их. Что касается наших каскадных таблиц стилей, мы создали стандартные стили и превратили каждую ссылку в столбик, используя функцию display: block. В данном примере у нас на странице есть только эти ссылки, но чтобы посмотреть, как их можно использовать на практике, некоторым столбиковым ссылкам задали класс, посредством которого можно отличить их от других ссылок на странице. С другой стороны, можно использовать селектор :nth-child() CSS3 без определения нового класса.
Далее перейдем к коду (X)HTML и отдельно укажем ширину каждого столбика посредством атрибута style. В коде, представленном выше, мы указывали ширину в процентном соотношении. Для начала мы определили наибольшее значение в категории «Web Interface Design (27)» - 100%. Отсюда далее отсчитываем остальные значения.
Например: «Photoshop Tutorials (25)»
25 * 100 = 2500
2500 * 27 (наши 100%) = 92.59%
<a href="#" style="width: 92.59%">Photoshop Tutorials (25)</a>Воссоздаем дизайн (динамическая часть)
Теперь у нас есть математический и статический коды, нам осталось просто соединить их вместе, извлекая код из базы данных и автоматически сортируя и создавая столбики.
В данном примере мы работаем с количеством записей в каждой категории движка WordPress, но и та же логика применяется в других целях и в других языках программирования. Код, приведенный ниже, может показаться длинным, но не стоит беспокоиться: большая часть текста там – комментарии, в которых объясняется процесс динамического вычисления процентного соотношения и внедрения результата в статический код CSS/(X)HTML.
<!-- In our example, we get a count of categories in WordPress.
Let's first find the category with the most posts.
-->
<?php
$highest = 0; // Initialize our “highest count” variable
foreach((get_the_category()) as $category) { // for each category
$cat_count = $category->category_count;
// If this category’s count is higher than what we have so far
// for the highest number…
if($cat_count > $highest){
// then re-declare our highest value according to this
// category’s count
$highest = $cat_count;
}
}
?>
<!-- Below we go through an array of the categories, and for each one
get its name and then its count. We've saved this data in
the $cat_name and $cat_count variables, respectively.
(Because we will get a new category each time the loop runs,
we'll have to process all of our other (X)HTML/CSS code within the loop
for each turn.)
-->
<div class="block">
<?foreach((get_categories(‘orderby=count&order=desc’)) as $category) {
$cat_name = $category->cat_name;
$cat_count = $category->category_count;
// Let's calculate this category’s width
// (our “100%” is our highest category count number, $highest)
$width = ($cat_count * 100) / $highest;
// Finally, echo out our link HTML, including our variables
// to dynamically bring in the content for the width,
// category name and count.
echo '<a href="#" style="width: .'$width'.%">
.'$cat_name'. (.'$cat_count'.)</a>';
}
?>
</div>Демо-файлы и файлы для скачивания
Вы можете ознакомиться с демо-файлом и скачать готовые файлы с нашего сервера.
2. Анимация при наведении курсора на статью
Стоит сразу отметить, что это достаточно оригинальный эффект, к тому же, он очень привлекательный. Посмотрите на изображение ниже, или посетите CSS Tricks. Все статьи выглядят вполне опрятно и простенько, а между ними просто звездочки. Когда вы наводите курсор на одну из статей, сразу же отображается дополнительная информация: комментарии, дата, а также ссылка для перехода к развернутой версии.
Основная «фишка» здесь заключается в том, что эффект при наведении работает не только для изображения, но и для контента. Этот трюк вполне привлекателен и ему можно найти практическое применение. Дизайнер может сделать акцентирование на важной информации посредством скрытия информации второстепенной важности. Веб-сайт может быть минимально оформлен, сохраняя при этом функционал.
Этот трюк также позволяет выделить важную информацию. Судя по информации на CSS Tricks, когда пользователь наводит курсор мыши на сообщение, запускается действие, которое отображает пользователю ссылки, которые помогут ему взаимодействовать с блогом.
Когда вы наводите курсор мыши на сообщение на домашней странице CSS-Tricks.com, вы можете наблюдать эффект открытия дополнительной информации и функций.
Каким образом это реализовано?
Возможно, данный эффект выглядит немного сложнее, нежели простое развертывание изображения, но здесь применяется та же техника. Мы можем реализовать это, используя немного кода CSS и основы javascript.
Давайте поближе рассмотрим сам эффект. Таким образом, мы можем понять процесс реализации решения.
* Эффект запускается при наведении курсора мыши на любую часть сообщения.
* Отображается две части содержимого: на изображении слева направо: дата и область с комментариями, а затем секция со ссылкой перехода к развернутой версии статьи.
* Если вы уберете курсор мыши с сообщения, все становится на свои места.
Теперь гораздо легче понять то, насколько этот эффект приближен к развороту изображения. В том случае мы используем javascript для того чтобы изменить код для событий onmouseover и onmouseout. Здесь мы делаем то же самое, но используем div’ы вместо изображений. Также, в случае с прокруткой изображений, мы зачастую заменяем одно изображение другим, а здесь нам нужно лишь отображать и скрывать контент.
Код (X)HTML:
Нам нужно облачить целую статью div-элементом, и мы можем реализовать это посредством отдельного этапа. Затем можно добавить события javascript: MouseOver и MouseOut. Для каждого события мы просто устанавливаем параметр отображения содержимого (определяемый id в коде CSS) на none или inline. Вместо применения атрибутов inline, лучше разделить коды javascript и css посредством jQuery.
<div class="post">
<h2>A Blog Post Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim est ultrices neque fermentum convallis. Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus. Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt lorem nec nisl egestas gravida vel et massa. Donec arcu nisl, venenatis ac suscipit dignissim, egestas auctor lectus. Quisque vulputate fermentum felis sed tristique. Ut enim felis, faucibus ac fermentum rutrum, posuere id nulla. Duis lectus dolor, eleifend in tincidunt eu, sagittis sed sapien. Duis id purus id magna facilisis luctus. Mauris sodales arcu ut arcu laoreet id pulvinar ligula hendrerit.</p>
<!-- This is what appears when not hovering -->
<p id="postimg" class="center">
<img src="triangle.png" alt="Triangle" />
</p>
<!-- This is what appears on hover; hidden otherwise. -->
<p id="hiddencontent" class="center">
Posted on 9/15/10 | <a href="#">23 Comments</a>
<img src="triangle.png" alt="Triangle" />
<a href="#">Continue Reading…</a>
</p>
</div>
<script type="text/javascript">
$('.post').mouseover(function() {
$('#hiddencontent').css('display', 'inline');
$('#postimg').css('display', 'none');
});
$('.post').mouseout(function() {
$('#hiddencontent').css('display','none');
$('#postimg').css('display', 'block');
});
</script>CSS-код
Здесь нам нужно реализовать простенькую стилизацию: центрировать наш div, отформатировать тэг H2, обыграть шрифты и так далее. Здесь стоит обратить внимание на div «#hiddencontent». Так как нам нужно спрятать содержимое при загрузке страницы, нам нужно установить параметр none в коде CSS.
html, body {
background: #eee;
font: normal 14px/1.6em Arial, Helvetica, sans-serif;
}
#hiddencontent {
display: none;
}
h2 {
margin-bottom: .5em;
}
.center {
width: 500px;
text-align: center;
}Ниже вы видите набросок нашего дизайна (сверху до наведения курсора, снизу – при наведении). Все это реализовано посредством простенького кода CSS и javascript, с которым крайне просто разобраться и научиться вставлять его в WordPress или куда-нибудь еще.
Демо-файлы и файлы для скачивания
Вы можете ознакомиться с демо-файлом и скачать готовые файлы с нашего сервера.
3. Цвет для каждой категории
Данная техника позволит вам раскрасить категории сайта в разные цвета (пример можно посмотреть на сайте Emprnt). Таким образом, можно повысить уровень комфортности при обращении с веб-сайтом и навигацией сайта. Давайте попробуем добиться того же эффекта, который мы видим на сайте Emprnt.
Тот же эффект можно применить и к другим типам на сайте: должностям (авторы будут раскрашены в один цвет, а редакторы в другой); авторам (цвета будут присуждаться, руководствуясь числом написанных постов, забитых тэгов и так далее); подсветка популярных записей (подсветка записей, которые просмотрели 150-200 раз, в один цвет, а записей, просмотренных 75-150 раз – в другой). В общем, все зависит от типа приложения, в котором вы хотите реализовать данный эффект. Например, посредством раскраски категорий в разные цвета, вы помогаете пользователям быстрее искать то, что им нужно. Выделяя популярные статьи, вы помогаете пользователям отобрать для себя только самое интересное.
На сайте Emprnt использован CSS и немного кода, посредством чего реализована закраска каждой категории в отдельный цвет.
Каким образом это реализовано?
Для того чтобы реализовать это, нам нужно подобрать цвет для каждой категории, определить каждой категории отдельный id, а затем связать id с классом CSS, который будет определять цвет и остальное основное форматирование. Для начала, давайте посмотрим на коды (X)HTML и CSS:
Воссоздаем эффект (статический)
(X)HTML-код:
<div class="block">
<div class="post cat_1">
<h2>A Blog Post Title</h2>
<small>Category 1</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque dignissim est ultrices neque fermentum convallis.
Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
venenatis ac suscipit dignissim, egestas auctor lectus.</p>
</div>
<div class="post cat_2">
<h2>A Blog Post Title</h2>
<small>Category 2</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque dignissim est ultrices neque fermentum convallis.
Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
venenatis ac suscipit dignissim, egestas auctor lectus.</p>
</div>
<div class="post cat_2">
<h2>A Blog Post Title</h2>
<small>Category 2</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque dignissim est ultrices neque fermentum convallis.
Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
venenatis ac suscipit dignissim, egestas auctor lectus.</p>
</div>
<div class="post cat_3">
<h2>A Blog Post Title</h2>
<small>Category 3</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque dignissim est ultrices neque fermentum convallis.
Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
venenatis ac suscipit dignissim, egestas auctor lectus.</p>
</div>
<div class="post cat_1">
<h2>A Blog Post Title</h2>
<small>Category 1</small>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque dignissim est ultrices neque fermentum convallis.
Nulla libero lacus, accumsan sed porta quis, pulvinar in lectus.
Sed id justo lorem, eu ullamcorper sapien. Nullam tincidunt
lorem nec nisl egestas gravida vel et massa. Donec arcu nisl,
venenatis ac suscipit dignissim, egestas auctor lectus.</p>
</div>
</div>Как вы можете видеть, мы задали каждому сообщению два класса: post и cat_#. Данный пример использует только три категории, с присвоенными классами cat_1, cat_2 и cat_3. Учтите, что эти номера будут меняться в соответствии с id категории.
CSS-код:
html, body {
background: #eee;
font: normal 13px/1.5em Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
h2 {
margin-bottom: .5em;
}
small {
font-size: 9px;
line-height: 1.4em;
font-weight: bold;
text-transform: uppercase;
}
.block {
width: 500px;
margin: 50px auto;
}
.post {
padding: 15px 0 15px 15px;
margin-bottom: 2px;
}
.cat_1 { border-left: 10px solid #cb005b; }
.cat_1 small { color: #cb005b; }
.cat_2 { border-left: 10px solid #0064cb; }
.cat_2 small{ color: #0064cb; }
.cat_3 { border-left: 10px solid #cb7700; }
.cat_3 small{ color: #cb7700; }Сверху у нас основное форматирование, а ближе к нижней части, у нас указана стилизация категорий. Мы задали каждой категории уникальный класс с раскрашенной границей и определенным именем. В (X)HTML и CSS у нас должно получиться нечто вроде этого:
Воссоздаем эффект (динамический)
Сделать данный эффект динамическим очень даже легко в WordPress:
<div class="block">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post cat_<?php foreach((get_the_category()) as $category)
{echo $category->cat_ID . ' ';}
?>">
<h2><?php the_title(); ?></h2>
<small><?php the_category(', ') ?></small>
<?php the_content(__('Continue reading', 'example')); ?>
</div>
<?php endwhile;?>
<?php else : ?>
<h2 class="center">Not Found
<p class="center">Sorry, but you are looking for something that isn't here.
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>Для нужного нам кода, нам просто нужно динамически распределить номер Id категории внутри
<div class="post cat_#">Примечание: с такой техникой, если сообщению присуждено сразу несколько категорий, то сообщение автоматически будет окрашено в первый по счету цвет.
Демо-файлы и файл для скачивания
Вы можете ознакомиться с демо-файлом и скачать готовые файлы с нашего сервера.
4. Интересные заголовки изображений
Эта техника достаточно простая, но ее почему-то зачастую упускают из виду. В веб-дизайне позиционирование и стилизация изображений играют очень важную роль, и привлекательные заголовки также немаловажны. По факту, не существует единого стандарта создания заголовков в HTML, поэтому придется немного проявить смекалку.
Слева - Boagworld. Справа – Uxbooth.
(X)HTML
Для того чтобы сгруппировать текст и изображения, нам нужно поместить их в div. Далее мы отформатируем стиль div’а и его компонентов.
<div class="image-caption">
<img src="images/testimage.jpg" alt="Test Image" />
<p>Here is the image caption text, and a <a href="#">link</a>.</p>
</div>Помните, что div должен быть идентифицирован классом, так как нам нужно отображать несколько различных изображений и текстов на сайте. Код, приведенный выше, может быть отличной точкой отсчета для нескольких решений. Ниже представлено несколько опций и примеров CSS.
Примеры CSS
.image-caption {
width: 240px;
background: #fff;
padding: 3px;
border: 1px dotted #aaa; }
.image-caption img {
border: 1px solid #aaa; }
.image-caption p {
clear: both;
font: normal 9px/1.45em Verdana, Tahoma, sans-serif;
color: #444; }
.image-caption a {
color: #444;
text-decoration: underline; }
.image-caption a:hover {
font-style: italic; }Ниже приведена очень простая стилизация заголовка изображения: простенькая, минимальная и организованная. Если вы позволите, можно назвать это стилем «Polaroid».
.image-caption {
width: 240px;
position: relative; }
.image-caption img {
border: 1px solid #333; }
.image-caption p {
position: absolute;
bottom: 5px;
width: 232px;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
background: #000;
padding: 5px;
color: #fff;
clear: both; }
.image-caption a {
color: #fff;
text-decoration: underline; }
.image-caption a:hover {
font-style: italic;
}Ниже вы видите простой способ наложения для заголовков. Наиважнейшими свойствами здесь являются: position: relative под .image-caption и position: absolute, bottom: 5px и width: 32px под .image-caption img. Теоретически, нижняя страница должна быть установлена на 0px, но в нашем случае мы добавили 5px, так как у нас добавлено наполнение ячеек. Кое-что переходит в ширину: мы отображаем её для размещения добавленного наполнения и границу изображения.
.image-caption {
width: 240px;
background: #fff; }
.image-caption img {
border: 1px solid #aaa; }
.image-caption h1 {
padding: 0 5px;
font: bold 10px/1.4em Arial, Helvetica, sans-serif;
color: #cc0000; }
.image-caption p {
clear: both;
padding: 0 5px 10px;
font: normal 9px/1.45em Verdana, Tahoma, sans-serif;
color: #444; }
.image-caption a {
color: #444;
text-decoration: underline; }
.image-caption a:hover {
font-style: italic; }Для того чтобы добавить другую стилизацию (примерно как заголовок изображения здесь), а затем добавим их в CSS под классом .image-caption, а далее не забудьте добавить
<h1>Image title</h1>Здесь нам потребовалось немного креативного CSS, и у нас получился достаточно привлекательный эффект. Экспериментируйте и с другими свойствами, типа закругленных углов или различным позиционированием, стилизацией границ и так далее. Ниже представлены другие ресурсы и способы реализации заголовков изображений, некоторые из них реализованы посредством простого кода (X)HTML и CSS, для реализации других потребуется javascript и Wordpress.
Демо-файлы и файл для скачивания
Вы можете ознакомиться с демо-файлом и скачать готовые файлы с нашего сервера.
Другие подходящие техники реализации
* Заголовки изображений при наведении посредством CSS
* Как сделать простой, стильный и меняющийся заголовок изображения
* Создание простого заголовка с помощью CSS
* Как без труда отформатировать заголовки изображений в WordPress
* Дизайн заголовков изображения: способы и тенденции
5. Шаблоны веб-сайтов в печатном стиле
Шаблоны веб-сайтов в печатном стиле могут быть отличным решением для отвлечения внимания от приевшихся веб-шаблонов. Этот вид шаблонов очень привлекает внимание, хотя и подходит не ко всем типам веб-сайтов. Конечно же, веб-дизайн основывается на правильном коде шаблона, но как можно реализовать шаблон, который больше смахивает на печатное издание и при этом сохранить грамотность структуры и написания кода, выдержанных в основе веб-дизайна.
Шаблон этой страницы больше напоминает нечто из печатного мира, нежели традиционный веб-сайт.
Так как веб-сайты с шаблонами в печатном стиле могут сильно различаться, существует несколько различных вариации написания кода. Ниже мы предлагаем вам несколько вещей, на которые стоит обратить внимание.
Веб-дизайн должен быть подвижным и гибким, а печатная продукция нет
Единственная причина, почему печатный дизайн может быть настолько креативным, заключается в том, что здесь не нужно адаптировать содержимое под различную ширину или длину. В веб-дизайне, тем временем, изображения, текст и другие элементы всегда вынуждены изменяться, что порой может привести к деформации шаблона. Есть несколько решений, которые помогут вам избежать этого. Для начала, как видно на примере, приведенном выше, если содержимое выставлено и не должно быть изменено (например, сообщение в блоге), то вы можете дать свободу дизайнерской мысли вокруг текста. Толщина линии, промежутки между символами и другие элементы, типа фоновых изображений и т.д., могут помочь вам.
Если дело касается не статичного содержимого, то тут есть над чем подумать:
* Конечно, лучше всего использовать фиксированные дизайны, если это возможно. В таком случае, дизайнеру придется предусматривать лишь вертикальное изменение наполнения (с другой стороны, вы можете зафиксировать высоту и тогда уже беспокоиться о горизонтальных изменениях содержимого).
* Если изначально грамотно и аккуратно сформировать структуру кода и его форматирование, то и в дальнейшем с ним не возникнет проблем; правда, что касается дизайнерских решений, здесь можно воспользоваться техникой мозгового штурма.
* Научитесь правильно использовать CSS и (X)HTML вместе, старайтесь избегать лишних div’ов, и всегда старайтесь искать пути наименьшего использования кода.
Порой бывает крайне сложно позиционировать элементы и писать код шаблона в стиле печатной продукции. Но нет ничего невозможного. Несмотря на изменения в объемах содержимого, оно всегда будет оставаться в нужных разделах. Например, текст на странице «О компании» никогда внезапно не увеличится с 200 слов до 1000, но порой может немного добавить к высоте общего текста.
Организованный CSS, с возможностью повторного использования
Старайтесь делать классы и id в коде, которые можно повторно использовать в максимальном количестве случаев на странице. Далее, старайтесь применять стили, предназначенные для определенных областей на странице, конкретно в этих областях. Всегда думайте о том, как можно более грамотно составить код и использовать его в разметке. Без правильно организованного и отформатированного кода, вам будет крайне сложно разобраться в разметке.
Получайте вдохновение
На самом деле, разработать уникальный и по-настоящему профессиональный шаблон в стиле печатной продукции крайне сложно. И вдохновение, полученное от изучения успешных и лучших вариантов реализации данной задачи, может действительно помочь вам в этом. Ознакомьтесь с подборкой, приведенной ниже.
Heart Directed представляет собой подборку с дизайнами в стиле печатной продукции, а также другие веб-дизайны.
На сайте Coldheat вы найдете множество различных примеров дизайнов, а также есть отдельный раздел с уникальными шаблонами.
В данном посте на сайте WebdesignerDepot собрано множество дизайнов в стиле печатной продукции.
Дополнительные источники
Ниже собраны статьи по данной тематике. Некоторые из них от команды Smashing Magazine и некоторые собраны со всей сети Интернет. Во всех них есть отличные идеи и варианты экспериментов.
* 50 полезных способов разработки кода (CSS-шаблоны, визуальные эффекты и формы)
* 50 великолепных шаблонов CSS3/javascript-кодинга
* 5 полезных CSS/JQuery-техник для разработки динамических веб-сайтов
* 21 впечатляющий способ разработки CSS, о которых вам следует знать
В заключение
Нам дизайнерам не обязательно изучать основы веб-разработки для того, чтобы суметь добавить некоторые впечатляющие эффекты в шаблон. Все эти эффекты не так уж и сложны, но каждый из них может значительно улучшить внешний вид веб-сайта. Некоторые привлекают внешне, а другие повышают уровень взаимодействия и комфорта для пользователей. Неважно, какая у вас цель, каждый эффект можно использовать по особому назначению.
Нам хотелось бы как можно чаще делиться с вами уникальными и интересными вариантами реализации эффектов. Если у вас на примете есть еще какие-либо интересные эффекты, пожалуйста, опишите их в комментариях или поделитесь ссылками. Надеемся включить их в наши последующие статьи.
