Варианты дизайна сайта для разного класса мобильных устройств

дизайн мобильного сатйа

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

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

Распространенные ошибки веб-дизайна

создание сайта

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

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

Хорший код решает проблемы

программный код

Задача программиста, кодера – убедиться, что его код в каждой строке служит какой-то цели. Качество кода не зависит от привлекательности формы, либо теоретических преимуществ. Код должен решать определенные проблемы. Поясним эту мысль — HTML5 позволяет опускать закрывающие теги абзаца элементов списка. Некоторых передергивает при мысли об этом, но это совершенно правильный код. Так что если исключение лишних тегов помогает тому, чтобы ваш код стал компактнее и быстрее, то вы решаете проблему, и это делает его хорошим кодом. Знаки препинания, тире, переносы, подчеркивания – все становится более понятным и удобным для чтения, когда символов становится меньше.

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

Зачем Firebug и Google Analytics нужны начинающему веб-разработчику

В этой статье я хочу посоветовать два важных инструмента вебмастера, использование которых в работе является стандартом в сфере разработки и продвижения сайтов. Если вы только начали осваивать веб-технологии и никогда раньше не слышали о возможностях плагина Firebug и аналитической системы Google Analytics – эта статья для вас.

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

Что нового в HTML 5: Video, Аudio, Canvas и многое другое

HTML 5 ещё долго будет совершенствоваться до окончательного релиза, но он уже очень эффективен во всемирной паутине. В самом деле, некоторые элементы HTML 5, такие как видео и Canvas уже вовсю используются в современных браузерах Internet Explorer, Firefox, Chrome и Safari.

HTML 5

Apple и Google уже ввели стандарты для более продвинутых веб-разработок. Конечно же, это плохие новости для компаний подобных Adobe, чья популярная платформа Flash будет конкурировать с элементами видео и Canvas.

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

Как окружить фото текстом и задать отступы текста от картинки

Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.

Способ 1: Вписываем код отступа текста для отдельной картинки или фотки

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.

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

1
2
3
4
<img src="здесь_веб-адрес_картинки" alt="" /> alt="Здесь_подсказка_если_картинка_не_загрузлась" title="Здесь_встплывающая_над_картинкой_подсказка" width="ширина_ картинки_в_точках_числом"
height="высота_ картинки_в_точках_числом"
align=”left”
style="margin: 3px 12px 0px 0px;" /&gt;

Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:

1
2
3
4
5
<img src="http://www.web-article.com.ua/wp-content/uploads/2009/12/otstup-kartinka-tekst.jpg" alt="" /> alt="Задаем отступ текста для фото"
title="Задаем отступ текста для фото"
width="300" height="350"
align="left"
style="margin: 3px 12px 0px 0px;" /&gt;
Читать полностью »