Ответ
18 причин для перехода к адаптивному дизайну Опции темы
Старый 15.05.2013, 08:17
  #1
Alsu
 
Аватар для Alsu
Регистрация: 02.07.2012
Сообщений: 648

18 причин для перехода к адаптивному дизайну
Вы, наверное, устали от фразы "адаптивный дизайн" , но этот термин не зря усиленно мусолится в последнее время и мимо пройти этой тематики было бы крайне нелепо, так как в обозримом будущем мы ещё не раз будем ворошить эту тему.
Один из интересных моментов, связанных с адаптивным дизайном, это то, как заставить монолит пользовательского интерфейса и сам сайт растягиваться или сжиматься адаптируясь под конкретные устройства с различными размерами экрана?
Ответ очевиден, нужны практические инструменты, которые помогут справиться с этой на первый взгляд не простой задачей.

ТЕОРИЯ

1.Паттерны мульти-девайсов

С чего стоит начать? А, надо ли это нам? Да, да именно с этих двух вопросов и стоит начать. Ведь не каждому подойдёт адаптивный дизайн, а мы все любим, чтоб «костюмчик сидел». Поэтому определяемся: работаем по-старинке или налаживаем конвеер по производству сайтов по технологии Multi. Если вас заинтересовал второй вариант, то стоит рассмотреть уже рабочий дизайн разложив его на шаблоны и макеты. Мне же этого не пришлось делать, так как всё уже заботливо разкроено и свёрстано Люком Врублёвски. Он то и подогнал нам свою заботливо собранную коллекцию разметок страницы для адаптивного дизайна, где мы можем увидеть во всех тонкостях новую концепцию в сайтостроении перед тем, как сами шагнём на встречу новым веяниям. Основные адаптивные паттерны: Mostly Fluid, Column Drop, Layout Shifter, Tiny Tweaks, Off Canvas. Все паттерны дизайна схожи между собой, поэтому опишу их все сразу вместе, сайт образно разделён на три цветовые схемы, которые адаптируются слева направо или справо налево в пределах чёрной рамки(образно символизирующей размер экрана), растяжка идёт горизонтальная, вертикальная, вертикально-горизонтальная. Подробнее смотрим на скрине





2. Wireframing для адаптивного дизайна

После того, как мы увидели правильную разметку, посмотрим теперь на правильное расположение контента на странице сайта, учитывая при этом горячие зоны. Да, кстати где они будут, если у нас адаптивный дизайн? Ответ любезно предоставляет Ли Хoуэллс в личном букваре по адаптивному дизайну , где он без лишней скромности говорит, что при долгом тестировании его эксперименты показали следующий результат: «На странице для мобильных устройств на самом деле есть только две горячие области, верхний и нижний колонтитулы, оба из которых должны содержать основные элементы конверсии нашего сайта. Все, что между ними или всё оставшееся пространство умеренно наполняем дополнительным контентом.»





3. Определяемся с верной навигацией

Итак, кто думает, что мега-выпадающие менюшки отлично впишутся в адаптивный дизайн и круто будут смотреться на мобильных устройствах? Поднимите руки. Один, два, три, четыре… Ну, а я лучше воздержусь от этой затеи и посмотрю на менюшки, которые идеально заточены под мобильные платформы, а их поверьте, не мало, вот некоторые: The Multi-Toggle, The Ol’ Right to Left, The ‘Skip the Sub-Nav’, The Priority+, Off-Canvas Flyout, The Carousel+. Огласите пожалуйста весь список – пожалуйста





4. Насколько вы легки на подъём

Какое у вас сейчас настроение, дочитав до четвёртого пункта. Вы готовы продолжить или остановимся на полпути? Стефани Ригер экспериментальным путём на своих сайтах испытал освоение адаптивного дизайна или скажем витеевато «мобильную перезагрузку», так что ему слово: «Погружаясь в адаптивный мир дизайна, я открыл для себя идеальную возможность самообучения и экспериментирования. Мобильные сайты пробудили во мне давно угасшее стремление к самосовершенствованию, помогли второй раз войти в реку в которую не входят дважды. С каждым новым мобильным сайтом я увеличиваю свой багаж дизайнера и каждому кто читает мои записанные мысли я советую не бояться бремени реструктуризации, всё окупится с полна…»

5. Про CSS-разметку забыли?!!

Нет, не забыли. Как без неё родимой, особенно с «резиновыми» дизайнами. Дадим слово Бену Каллахану: «Для того, чтоб понять все премудрости CSS-разметки адаптивного дизайна, не надо переучиваться, всего лишь достаточно несколько уроков по адаптивному CSS!». Вот они





ИНСТРУМЕНТЫ

6.Опять Wirefy, нет теперь - getwirefy.com

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





7. Бонус фанам Адобе Иллюстратора

Как же обойти стороной этих фанов, которые с трепетом лелеют компанию Адобе за их дизайнерский инструмент Adobe Illustrator и Adobe Фотошоп. Подгоню вам для разгона векторный шаблончик, который ориентирован на три популярных размерчика экрана: биг(крупный) - 978px, средний - 768px и смал(маленький) - 320px.





8. Специально для партийных UXPin.ком

Онлайновый сервис по совместной разработке эластичного дизайна, подписка стоит от $ 12 в месяц. Выглядит многообещающим для удаленных/распределенных команд.





9. Фенички от Криса Баннистера

Самое время поделиться шаблончиками для Photoshop-перов. Не хилая концентрация этого графического пласта расположена dribbble.com.
Ассортимент многопрофильный – мульти, здесь и для обычных ПК, планшетов и мобильных экранов.





10. Але-ап gridsetapp.кom

Марк Болтон по натуре новатор и рационлизатор, именно эти черты его характера дали толчок к разработке мобильного приложения, которое позволяет маштабировать и адаптировать макеты страниц под широкую «линейку» мобильных экранов. Стоит эта разработка $ 18 / £ 12 в месяц.

11. Эстетам Твиттера Jetstrap.кom

Ещё один онлайн-сервис с загагулинами ХТМЛ 5.0 и Twitter заманухой. Со слов разработчиков именно этот сервис сам по себе уже залог успеха, так как он офигительный генератор вирусного трафика за счёт того адаптивного дизайна, который рождается благодаря Джетстрапу(что-то внутри меня наводит на ассоцииации с созвучием словосочетания - Джедай стартап, прям как инкубатор юных падавинов). Стартап этот правда не из бесплатных, стоимость одного проекта / под три экрана бесплатно, в противном случае нам стоит подумать о приобретении подписки по цене от $ 8 в месяц.

12. Вход только для лайв стиля

thismanslife.кo.uк/projects/lab/responsivewireframes/#desktop - Если репозиционирование для вас смысл жизни, то вы точно зашли по адресу. Этот интерактивный инструмент максимально упрощён, поэтому интуитивно понятен для усвоения любому. Перед нами два варианта рабочей области будущей страницы сайта: настольная версия и мобильная, что позволяет мгновенно увидеть, как элементы контента будут перемещены в соответствии с размером экрана. Главное не забывать переключаться в верхнем правом углу между Desktop/Mobile.

13. Каркасы rwdwire

Ну и ещё один каркасец от lifeishao.com, чтобы мало не казалось. Каркас несёт обычные стандартные опции по планированию с дальнейшим позиционированием медиаконтента на адаптивные сайты.

OLD SCHOOL

14. Отзывчивый Sketchbook Дизайн

appsketchbook.кom/products/responsive-design-sketchbook - Всем кто обожает блокноты разных форматов имеется блокнотная версия разработки «каучуковых изделий» для мобисайтов. Внешний вид тутелька в тутельку идентичен блокноту в клеточку.

15. Версия для печати

sneakpeekit.кom/browser-sketchsheets/#tab-32-3 - Все отлично знают, что правилом хорошего тона является обязательная версия страницы для печати. Взгляните на эти замечательные шабики для печати Wireframing страниц. Руки так и чешутся, чтоб заюзать это в деле.
Вдохновения!

16. Media Queries

mediaqueri.es - Как же без наглядных примеров от тех кто уже успел успешно перейти на новые «рельсы». Выигрывают они от этого или нет? Судить вам.





TEST

17. Тестовая лаборатория

Как же без тестов и обкатки новоиспечённого. Первым делом испытываем на себе, перед тем как всё пойдёт в массовое употребление. Не плохой инструмент, который позволяет нам проверить свои веб-страницы на наличие изъянов, просчётов или недочётов внешнего вида на различных размерах экранов - resizemybrowser.кom





18. Дизайн тест на designmodo.кom

Тестовый инструментов должно быть несколько, вот ещё один для затравочки, который также способен растянуть наши страницы на различные мобильные дисплеи. Просто добавляем URL, а затем выбираем из десятков устройств в правом верхнем меню нам необходимое и всё.
Пока писала статью нашла ещё один важный элемент,который добавила в статью, но саму статью переименовывать не стала. Встречайте. Как работать на перспективу и учитывать технические тенденции в мобилостроении, которые несомненно надо переносить в Веб-дизайн. Как думаете сколько сейчас поколений мобиэкранов? Три, четыре, пять? Правильный ответ шесть, кто не верит пусть проверит. Вот здесь все шесть Layouts под которые можно маштабировать обычный сайт.





Если я что-то упустила, велкам – добавляйте в своих комментариях. До новых встреч друзья.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 15.05.2013, 19:03
  #2
0pium
 
Аватар для 0pium
Регистрация: 04.01.2012
Сообщений: 600

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

P.S. Сергей Жуков и Элтон Джон в молодости.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 15.05.2013, 19:22
  #3
Alsu
 
Аватар для Alsu
Регистрация: 02.07.2012
Сообщений: 648

0pium -
да не, этот дуэт гармонистов типа символизируют процесс вайфрэминга
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 15.05.2013, 21:20
  #4
0pium
 
Аватар для 0pium
Регистрация: 04.01.2012
Сообщений: 600

Alsu, эти гармонисты такие гармонисты
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 16.05.2013, 06:13
  #5
Alsu
 
Аватар для Alsu
Регистрация: 02.07.2012
Сообщений: 648

Я краснею, я бледнею,
Захотелось вдруг сказать -
Партизанский молдаванский
Собираю я отряд.....
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 18.05.2013, 00:32
  #6
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Адаптивный это хорошо, но в рунете он все еще не пользуется популярностью. Может через годик дорастем?
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 18.05.2013, 17:35
  #7
Alsu
 
Аватар для Alsu
Регистрация: 02.07.2012
Сообщений: 648

Матрос - ага и встретим хлебом с солью, ведь мы уже готовимся
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 19.05.2013, 18:14
  #8
krok0
 
Регистрация: 24.11.2012
Сообщений: 140

для валдельцев сайтов на WP плагин
http://www.bravenewcode.com/wptouch/
поможет если не знаете CSS / HTML
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 19.05.2013, 18:35
  #9
Alsu
 
Аватар для Alsu
Регистрация: 02.07.2012
Сообщений: 648

krok0 - спасибочки за дополнение
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
8 причин, почему Google считает ваш сайт СПАМом Матрос Статьи 0 02.02.2013 16:53

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


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 20:11. Часовой пояс GMT +3.