Создание адаптивного сайта

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

Здесь мы рассмотрим как технические инструменты и  приемы по созданию адаптивных сайтов, так и  поговорим об особенностях проектирования.

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

Первый критерий, который нужно учитывать - это кроссбраузерность, то есть то, как ваш сайт будет смотреться в большинстве известных современных браузерах и на старых платформах (в основном относится к IE). Здесь в первую очередь нужно проработать префиксы для свойств объектов в CSS. Важно помнить, что свойство без префикса пишется последним. Для чего придумали префиксы сказать сложно, так как на практике большинство верстальщиков проклинают эту работу, держа в голове все многообразие браузерной палитры. Тем не менее, лениться здесь не стоит. Помните, чем больше браузеров вы охватите красотой и правильной версткой, тем больше ваша аудитория (потенциально).

Следующий показатель - это девайс с которого вы просматриваете страницы вашего сайта. Тут надо учитывать сразу несколько вещей. Первое, на что нужно обратить внимание - это на расположение основных больших блоков контента. Прежде, чем накидывать контент, определите для себя основные секции и контейнеры и их положение и варируемые значения ширины и высоты (теги section и div). Рассмотрим пример стандартного блога. При прочтении статьи некрасиво если весь текст статьи расположен по всей ширине экрана. Более того вторая колонка как правило служит рекламным блоком, либо блоком дополнительных сопряженных постов. Соответственно мы имеем две колонки (одна под текст статьи, вторая - какой-то дополнительный функционал или реклама). Здесь лучше всего определить какой из блоков будет иметь приоритет при фиксации. Например, если рекламный блок оставить фикированным (допустим 300px), то ширина основного блока при нормальных условиях использования всей ширины окна будет вычисляться как calc(100% - 300px). Этот метод использования свойства CSS3 calc крайне полезен при верстке, так как позволяет работать с разными величина (допустим вычитать пиксели от процентов) и задает уже некую вариативность ширины окна, давая ту самую адаптивность. Но на практике этого мало, так как если у вас сайт просматривается с laptop или ноутбука со стандартным разрешением, то в целом неплохо, но при просмотре Full HD (1920 пкселей по ширине или того более) часть-контейнер под текст статьи будет по ширине calc(100% - 300px), где 100% = 1920 и того получаем 1600 пикселей под текст, что не так удобно читается, да и вообще не красиво. Поэтому в таком случае для полной нормальной адаптации нужно учитывать еще и media свойства. @media в CSS3 позволяет отрисовывать элементы вашей верстки согласно описанному условию.

Kinect сканирование пространства. Самая ближняя точка.

Начинаем программировать под kinect v2

Leapmotion. Начало.