Сделали адаптивный дизайн для сайта студии


В преддверии осени адаптировали дизайн студийного сайта под мобильные платформы.

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

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

Мы не стали делать сайт подо все возможные размеры, а пошли более оптимальным путем, используя только несколько размерных рядом на нашем сайте.

 

адаптивная версия сайта для планшетов

 

Для настольных компьютеров мы используем набор размеров больше чем 767 точек и при этом для планшетов с подобным разрешением включаем автомасштабирование с базовой шириной в 960 точек. Это позволяет комфортно просматривать сайт при горизонтальном и вертикальном экране на современных планшетах.

 

адаптивная версия сайта для смартфонов

 

Для смартфонов мы используем набор  @media screen с максимальной шириной в 639 точек. Это дало нам возможность покрыть как вертикальный, так и горизонтальный просмотр на современных смартфонах с относительно большим экраном, например, на Nexus 4, и не забыть маленькие экраны стандартных iPhone 3, 4.


Максим Груздев

Уже пора адаптировать ваш инернет-магазин под планшет.

Ширина экрана у планшета близка с ширине мониторов ноутбука/компьютера, а значит сайт влезет на экран и нет смысла его менять. А ведь это очень серьезное заблуждение так как работа с Touch Screen сильно отличается от работы с мышкой/монитором.