Мир веб-дизайна наполнен азартом и опытом, креативностью и мастерством. И в наши дни, рост в индустрии дизайна фрилансеров означает, что даже новички имеют возможность получить оплату за дизайн своего сайта.
Вот 5 ключевых приемов, которые каждый профессиональный дизайнер использует при разработке клиентского сайта. Давайте посмотрим, как вы, начинающий фрилансер, можете быстро и легко внедрить их для своих клиентов.
1. Борьба с интернет-спамом
Часто костлявый, долговязый черный паук ползает по Веб-сайту, взволнованно покачивает маленькими ножками, собирает все адреса электронной почты на сайте и хранит их рядом с его пинчерами. Затем, когда он вернется к своему хозяину, он будет неукоснительно добавлять все собранные данные в огромное гнездо адресов электронной почты, которое он может использовать в качестве приманки для намотки своих клиентов — фирм прямого маркетинга.
Эти маленькие чёрные пауки — это программные утилиты, которые скользят под поверхностью вашей страницы, чтобы присмотреться к основному HTML-коду, в частности, для поиска адресов электронной почты стандартного формата ([email protected]). Это может быть наиболее эффективным методом сбора адресов электронной почты — и его необходимо предотвратить! Есть несколько методов, которые мы, веб-дизайнеры, можем внедрить, чтобы защитить наших клиентов от этих жутких раздражений. Вот три, которые могут хорошо работать.
1. Используйте символы HTML
Чтобы предотвратить захват пауками адресов электронной почты, внесите несколько изменений в форматирование, чтобы обмануть программное обеспечение. Все адреса электронной почты используют символ (@), и пауков учат их искать. Символы HTML — это символы, которые, хотя и записаны непосредственно в код HTML, браузером интерпретируют их действительное значение. HTML-символом знака @ является @ Итак, как мы можем реализовать что-то вроде этого? Просто:
<a href="mailto:name@domain.com">
Все, что мы делаем, это заменяем знак @ на символ HTML, который его представляет. Тем не менее, это не верное решение: хотя большинство пауков недостаточно развиты, чтобы интерпретировать символы HTML, некоторые так и есть. Как нам преодолеть это препятствие? Давайте попробуем немного Javascript.
2. Используйте Javascript
В этом методе мы просто разбиваем адрес электронной почты на четыре разных раздела:
- имя
- знак
- домен
- расширение
Вот простая реализация Javascript для выполнения этого действия.
<script type="text/javascript">
name ="you";
domain ="domain";
extension =".net";
document.write('<a href="mailto:' + name + '@' + domain
+ extension +' " ' +' >e-mail link here ');
</script>
Приведенный выше код довольно понятен. Мы определяем три переменные: имя, домен и расширение, и просто объединяем эти переменные внутри оператора document.write Обратите внимание, что мы используем HTML-теги привязки в операторе write, чтобы браузер пользователя правильно интерпретировал ссылку на электронную почту.
Есть еще одна проблема с использованием этого метода … вы можете понять это? Javascript — это технология на стороне клиента, которая означает, что, хотя пауки могут быть не в состоянии интерпретировать ваш адрес электронной почты, браузеры с отключенными возможностями Javascript тоже не будут. В этом случае ваш адрес электронной почты не будет отображаться пользователю.
Как мы можем решить эту проблему? Можем ли мы отказаться от показа любого адреса электронной почты? Да, мы можем, но мы все равно должны предоставить пользователю способ связаться с владельцем сайта. Решение представляет собой довольно простую форму электронной почты.
3. Используйте формы
Третий может быть единственным надежным способом защиты владельцев сайта от спам-пауков, а именно просто отказаться от отображения любых адресов электронной почты. Вместо этого, если ваш сервер поддерживает обработку на стороне сервера, такую как Perl, ASP, Cold Fusion или PHP, просто создайте форму обратной связи и вызовите сценарий на стороне сервера для обработки данных за кулисами. Пауки не могут копать так глубоко!
Я большой сторонник PHP, но выбираю любой язык, который поддерживает ваш хост. Обратите внимание, что если ваш сервер не поддерживает какой-либо серверный язык программирования, вам не повезло — вам придется выбирать между двумя вышеупомянутыми методами.
2. Пройдите типографский тест
Веб-сайт — это ничто без контента, и большая часть контента состоит из простого текста. Многие веб-дизайнеры не обращают внимания на их типографику, и это видно. Правильная типография зависит от того, где находится текст на странице и для какой цели он служит. Хотя в камне нет никаких правил, есть несколько общих, а в некоторых случаях и элементарных, техник, которым следует следовать, но которые часто игнорируются.
Заголовки
Очевидно, что заголовки должны быть больше вашего основного текста на 1 или 2 размера шрифта. Вы можете считать жирным шрифтом, но знать ширину буквы. Например, Arial Black может создавать слишком толстые буквы на ваш вкус или письма ваших клиентов. При использовании цветных шрифтов убедитесь, что цвета хорошо контрастируют с цветом фона сайта. Черный и темно-серый не очень хорошо контрастируют, тогда как черный и белый (или светло-серый) могут работать довольно хорошо. Иногда даже простое изменение цвета может создать полезные заголовки.
Также обязательно каскадируйте свои заголовки. Например, основной заголовок будет больше, чем подзаголовки. Этот эффект создает ощущение акцента и потока внутри информации.
Не выделяйте курсивом ваши заголовки. Курсив предназначен для подчеркивания конкретного содержимого, но, поскольку текст в любом случае является заголовком и имеет больший размер, курсив является избыточным и часто затрудняет чтение текста.
шрифты
По умолчанию это Times New Roman, который отлично работает, но многие считают скучным. Я экспериментировал с Arial, Georgia и Verdana и нашел Verdana самым читаемым из них. Это личное предпочтение, но шрифты должны быть ограничены вышеуказанными четырьмя, чтобы обеспечить совместимость между всеми пользователями сайта. Если браузер вашего посетителя не поддерживает ваш выбор шрифта, его браузер вернется к значению по умолчанию.
Так как браузеры имеют расширенную поддержку CSS, по возможности используйте таблицы стилей для определения ваших шрифтов, а не <font> Кроме того, убедитесь, что размер шрифта достаточно велик, чтобы его могли прочитать посетители всех возрастов и визуальных способностей.
Стили стресса
Избегайте использования всех заглавных букв в тексте, так как это затрудняет чтение и подразумевает, что вы кричите на читателя.
Чтобы выделить слова в основном тексте, выберите один формат и придерживайтесь его. Некоторые используют жирный шрифт, другие выбирают курсив или подчеркивают. Мой личный фаворит — курсив, но любой из них может работать хорошо. Будьте осторожны при использовании подчеркивания, так как этот формат можно принять за ссылку. И убедитесь, что вы не злоупотребляете этими стилями стресса.
Весь ваш основной текст не должен быть жирным. Жирный шрифт, как и курсив, должен использоваться для выделения слов, и обычно весь текст должен говорить сам за себя в регулярно оформленном тексте. Мне нравится использовать CSS, чтобы немного увеличить объем текста, чтобы улучшить читаемость — попробуйте.
3. Метатеги делают вашу поисковую систему дружественной
Содержимое Metatag по-прежнему используется многими поисковыми системами для создания для каждого сайта списка, который будет отображаться, когда пользователи выполняют поиск по определенным ключевым словам. Обычно профессиональные дизайнеры включают в свои сайты как минимум три метатега: заголовок, описание и ключевые слова.
<META NAME="Title" CONTENT="Title here">
<META NAME="Description" CONTENT="Description here">
<META NAME="Keywords" CONTENT="Keywords here">
Самое замечательное в метатегах заключается в том, что их так легко реализовать: просто введите соответствующий контент между соответствующими тегами. Хотя существует бесчисленное множество способов повысить рейтинг сайта по определенным ключевым словам в списках поисковых систем, метатеги абсолютно необходимы в процессе поисковой оптимизации.
4. Предоставьте метод контакта
Всегда, всегда предоставляйте какой-либо способ общения, с помощью которого пользователи могут связаться с владельцами сайта. Многие веб-разработчики размещают на своих сайтах ссылки по электронной почте и формы обратной связи. Этот подход служит двум целям:
- он говорит пользователям, что люди, которые управляют сайтом, заботятся о своем мнении
- это побуждает посетителей делиться своими мыслями и задавать вопросы, что, в свою очередь, дает владельцу сайта возможность установить взаимопонимание со своей аудиторией.
Убедитесь, что ваши клиенты часто проверяют свою электронную почту. Для пользователя нет ничего более разочаровывающего, чем ждать неделю или больше, пока владелец сайта ответит на его электронную почту.
Если сервер поддерживает серверный язык, такой как Perl, ASP, Cold Fusion или PHP, вы можете создать форму обратной связи или загрузить ее из репозитория сценариев, например:
5. Дизайн с маленьким парнем в уме
В наше время все, о чем мы думаем — это навороты, особенно когда дело доходит до изящных новых дизайнов. Мало того, что эти новые технологии часто используются не по назначению, они могут значительно снизить скорость вашего сайта, особенно если вы используете большие анимированные GIF-файлы и сложные Flash-фильмы.
Хотя правда, что в настоящее время пользователей широкополосного доступа стало больше, чем когда-либо, не делайте ошибку, проектируя специально для этой небольшой аудитории. По-прежнему существует 28,8 тыс. Пользователей модемов, и если для доступа к странице потребуются более 10 секунд для тех, кто использует низкоуровневые соединения — вероятное большинство посетителей сайта, они быстро отправятся к конкуренту.
Как веб-дизайнеры, мы должны сохранять наши сайты простыми. Слишком многие, особенно новые дизайнеры, смотрели на золото, когда еще не освоили серебро. Используйте графику только там, где она вам нужна. Никогда не используйте анимации .gif, если они абсолютно, неизбежно необходимы. И не используйте большие, сложные фоны на своих страницах: они только ухудшат читабельность текста и увеличат время загрузки.
Мораль этой истории такова: дизайн, ориентированный на конечного пользователя. Предположим, что ваши пользователи подключены через 28,8 модем с 15-дюймовым монитором с разрешением 800 × 600 с помощью Netscape. Поверьте, ваши посетители будут любить (и поддерживать) сайт за него.
Завершение
Мы рассмотрели 5 советов, которые необходимо учитывать каждому дизайнеру, когда мы делаем любимую работу. Хотя общение имеет важное значение, можно предпринять шаги для уменьшения количества спама, который получает владелец сайта.
Как дизайнеры, мы также должны убедиться, что наша типография легко читаема и логически разработана. Более того, сайты, дружественные поисковикам, часто являются популярными сайтами, и те, кто занимается дизайном для маленького парня, значительно улучшают совместимость для всех потенциальных пользователей — что только порадует ваших клиентов!
Использование этих советов поднимет ваши сайты на новый уровень и гарантирует, что каждый посетитель получит контент, который ищет, и каждый из ваших клиентов доволен работой.