Твиттер не нуждается в представлении. Он давно стал способом связываться с некоторыми людьми и компаниями, или же просто поболтать с друзьями. Размещение фида Twitter на веб-сайте стало практически обязательным действием. Интегрировать фид на сайт можно довольно просто – с помощью стандартного виджета Twitter, однако некоторое разработчики стремятся к тому, чтобы создать свой собственный виджет, который можно будет профессионально внедрить в существующий дизайн.
Благодаря стремительному росту популярности мобильных устройств, новое поколение дизайнеров и CMS (подсистема диалоговой обработки) разработчиков начали ориентироваться на новое направление – структурированный контент. Сторонники семантической разметки и информационные архитекторы начали создавать модели структурированного контента как основу большинства многоканальных, ориентированных на большое количество устройств веб-проектов.
На Lullabot мы часто работаем со средствами массовой информации, издательствами и корпоративными клиентами. Наши клиенты производят столько контента и управляют таким огромным количеством каналов публикаций, что сохранение представления и специфической дизайн-разметки контента является абсолютным требованием. К сожалению, это не означает, что редакторы и создатели контента довольствуются жесткими, предсказуемыми конструкциями для материалов, которые они публикуют.
Адаптивный веб-дизайн превратился в особый способ проектирования и построения веб-сайтов. Именно благодаря этому направлению дизайна мы начали думать о классификации устройств и использовании информационных запросов для адаптации шаблона сайта под размер экрана браузера. Этот процесс, однако, отличается от иерархического структурирования CSS и характеризует элементы относительно окна, а не их контейнера.
Широкое использование информационных запросов может быть ответом на ряд существующих на сегодняшний день проблем, но этот подход не является настолько эффективным и долгосрочным решением. Информационные запросы нельзя использовать для многоразовых модулей, которые адаптируются в зависимости от размера своих контейнеров.
Пожалуйста, обратите внимание на то, что эта статья рассчитана на новичков в сфере веб-дизайна, а не на опытных дизайнеров и разработчиков. Смысл статьи заключается в описании общих руководящих принципов для создания оптимизированных веб-сайтов будущего уже сегодня. Также в этой статье вы найдете описание стратегий, методов и инструментальных средств, которыми сегодня пользуется большинство веб-дизайнеров. — Ред.
Давным-давно где-то далеко, далеко в галактике… молодой дизайнер начал своё эпическое путешествие, полное опасных проблем с планировкой, постоянными трудностями с быстродействием, неуловимых JQuery ошибок и смертельно опасных ошибок Internet Explorer. Это именно тот обряд посвящения, который должны пройти все начинающие дизайнеры для того, чтобы гордо стоять в одном ряду со своими коллегами в этом большом мире под названием интернет. Да, я говорю о создании собственного веб-сайта портфолио.
Процесс создания положительного опыта взаимодействия мобильных пользователей вышел на новый более зрелый уровень. Чтобы убедиться в этом, достаточно просто посмотреть на имеющиеся в нашем распоряжении инструменты. Прототипы таких инструментов, как Balsamiq, Axure и Fireworks позволяют нам создавать шаблоны страниц и макеты кнопок, а также помогают объяснять пользователям назначение имеющихся функций. Кросс-браузерные фреймворки, такие как PhoneGap, Zurb Foundation и jQuery Mobile помогают нам создать прототипы, используя базовые веб-языки: HTML, CSS и JavaScript.
Мне кажется, что сегодня в плане возможностей мы находимся в лучшем положении, чем когда-либо. Разработчик может создать что-то грандиозное за очень короткий промежуток времени. Однако в такой ситуации появляются скрытые опасности: обилие инструментальных средств искушает нас пропускать ключевые шаги, связанные с необходимостью тщательной проработки продукта, которая требует обязательного выделения времени для того, чтобы разобраться в сложившейся проблеме.
Как профессионал в области создания положительного опыта взаимодействия, я всегда преследовал цель продвижения и развития своей профессии. У меня было множество возможностей реализовать свою цель причем самыми разнообразными способами — написание книг и статей, выступление на конференциях по всему миру, проводя обучающие тренинги для крупных компаний, и просто делая работу для очень многих клиентов.
Если бы мне было суждено запомнить всего лишь одну вещь, я бы хотел, чтобы этой вещью было понимание особенностей создания опыта взаимодействия. Это именно те знания, которые дизайнеры и компании должны стремиться осознать и понимать, ведь именно они раскрывают природу опыта взаимодействия как профессии, цели, идеи. Мне потребовалось целых 13 лет, чтобы иметь возможность сказать, что это действительно правда.
Это история о том, чему мы научились за время редизайна, выполняемого для наших самых требовательных клиентов — нас самих! В этой статье я объясню, на основе собственного опыта по обновлению сайта нашего агентства, почему мы отказались от отдельного мобильного веб-сайта. Мы также рассмотрим процесс создания нового адаптивного дизайна.
В агентстве Cyber-Duck в течение нескольких лет мы разрабатываем адаптивные веб-сайты и веб-сайты, ориентированные под мобильные устройства. У обоих вариантов, конечно, есть свои плюсы и минусы. Используя отдельный мобильный веб-сайт, у вас есть возможность соединять отдельные части контента и даже контролировать взаимодействия пользователей с сайтом. В то время как адаптивный сайт требует использования только лучшего контента для пользователей и поддержку одного типа веб-сайта.
Вы только что создали лучшее пользовательское взаимодействие. У вас была идея. Вы сделали ее схематическое отображение. Вы приступили к ее реализации. Но у вас уже появилась проблема, поскольку вы кое-что забыли: уменьшенную копию. Она носит название микрокопия.
Микрокопия — это текст, о котором не так уж часто упоминается. Это метка на поле формы, крошечная часть пояснительного текста или слова на кнопке. Это маленький текст, который может оказать огромное влияние на формирование положительного опыта взаимодействия.
Примечание редактора: обратите внимание, что в этой статье рассматривается чисто гипотетический сценарий, и с некоторыми представленными мнениями вы можете не соглашаться. Тем не менее, все представленные мнения основаны на текущих тенденциях, статистике и особенностях существующих технологий. Если вы из разряда тех дизайнеров, которые заинтересованы в будущем развитии отрасли, то настоятельно рекомендую вам ознакомиться с дополнительными материалами, которые будут приведены в течение статьи.
Благодаря Leap Motion контроллеру, выход которого состоялся 27 июня, и программе Google Glass Explorer, которая уже находится в пользовании, стал очевидным тот факт, что наша зависимость от мыши или даже монитора для веб взаимодействия в конечном итоге станет менее ощутимой.
Сегодня очень много говорят и пишут об адаптивном веб-дизайне (RWD – responsive Web design), но почему-то очень мало внимания уделяется веб-приложениям. Правда, до сих пор многие проблемы RWD по-прежнему остаются нерешенными. Тем не менее, многие люди полагают, что адаптивный дизайн – это перспективное направление и нужно работать именно в этой области. Так почему бы нам не расширить эту тему и для HTML5 приложений? Создание адаптивных веб-приложений (RWA) открывает огромные возможности, но в то же время является очень сложной задачей, поэтому я хотел бы более подробно изучить данное направление.
Возможность создания RWA более реальна, чем вы думаете. В этой статье мы рассмотрим существующие идеи и решения. В первой части, мы рассмотрим несколько важных понятий. Мы будем опираться на них во второй части, где, собственно говоря, и описывается разработка RWA. Затем изучим особенности масштабирования и портативности, предлагаемые данным методом.
