Как правильно спланировать мобильный веб-сайт электронной коммерции.

Магазин O’Neill Clothing получил почти 600% увеличение прибыли от выполнения адаптивных преобразований, а на Skinny Ties увидели 377,6% увеличение выручки, в основном благодаря пользователям iPhone, за счет введения адаптивных технологий. Даже транзакции Think Tank Photo на смартфонах и планшетах увеличились более чем на 96% … вот тебе на!

В этой статье мы рассмотрим все наиболее важные шаги при планировании высоко конвертируемого мобильного веб-сайта электронной коммерции. Ниже представлены наиболее важные вопросы, которые вы должны задать:

Читать далее

Как адаптировать ваше приложение к новым динамическим взаимодействиям iOS 7.

Angry Birds screenshot

Для того чтобы анимировать компоненты вашего iOS 7 приложения и сделать их похожими на реальные объекты, необязательно нужно усердно штудировать учебник физике. Благодаря появлению у iOS 7 нового Dynamics API (интерфейс прикладного программирования) в различных представлениях стала возможной реализация различных эффектов, например, симуляции упругих сил. Создается впечатление, что между двумя объектами как бы находится пружина и если их свести, а потом отпустить, то они отпрыгнут вверх относительно границ и относительно друг друга.

Физические движки довольно хорошо знакомы разработчикам компьютерных игр. Будь то идеальная параболическая траектория, вызванная гравитационным влиянием в Angry Birds или качающаяся конфета в Cut the Rope (Перережь веревку). В играх мы привыкли взаимодействовать с объектам, которые во многом напоминают реальные. Чтобы получить этот эффект разработчики компьютерных игр не пишут специальный код, в котором бы вручную выполнялась установка положения каждого объекта. Вместо этого они используют физический движок, который при симуляции воспринимает эти элементы в качестве тел, и который использует законы Ньютона для расчета траектории движения, учитывая временные показатели.

Читать далее

Как создать управляемый Magento модуль для брендов.

Magento Brand Admin Grid

В этом уроке мы рассмотрим, как правильно создавать новый «брендовый» модуль в Magento, которым можно управлять через панель администрирования. После прочтения этой статьи вы самостоятельно сможете создавать, обновлять и удалять бренды, которые имеют независимое представление в программах пользовательского интерфейса (клиентская часть системы). Таким же образом вы можете взаимодействовать с уже существующими логическими объектами, такими, как например «продукты» и «категории».

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

Читать далее

Создание информационного отчета по веб-сайту: три уровня разделения.

Data report for our fictional widgets website

Иметь подробный информационный отчет по веб-сайту — это все равно, что использовать Розеттский камень (программа-оболочка) для управления процессом принятия решений в течение всего жизненного периода веб-сайта.
Читать далее

Четыре способа построения мобильного приложения, часть 4: платформа Appcelerator Titanium.

FasTip application on iOS.

В трех предыдущих статьях мы рассмотрели, как создать приложение-калькулятор для расчета чаевых на базе родной iOS платформы, родной Android платформы и PhoneGap. В этой статье мы рассмотрим еще один кросс-платформенный инструмент для разработки под названием Appcelerator Titanium.
Читать далее

Использование Composer для улучшения системы управления WordPress проектами.

To start, clone a copy of the dummy project that I’ve created.

С момента своего появления в 2003 году WordPress прошел долгий путь развития.

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

Создание кликабельных прототипов для поддержки целостности дизайна.

Prototyping tools

Как профессионалы в области UX (опыт взаимодействия — это ощущения, возникающие у человека при непосредственном взаимодействии с объектами окружающего мира), мы часто приводим проектные обсуждения со всеми заинтересованными сторонами, в том числе членами команды и непосредственно заказчиками. В процессе мозгового штурма участники пытаются выявить возможности для улучшения дизайна, тем самым, дополняя общее видение в развитии и ожидания от проекта.

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

Читать далее

Переосмысление адаптивной SVG графики.

All Icons combined in a single SVG file.

Если вы еще не знакомы с технологией адаптивных иконок Джо Харрисона, то в ходе прочтения этой статьи наверняка узнаете много интересного и откроете для себя множество новых функциональных возможностей данного подхода. Я говорю это, опираясь на свой опыт и вспоминая свои первые впечатления от знакомства с данной технологией. В этой статье я хотел бы исследовать возможности, которые становятся доступными при использовании SVG и выходе за рамки «традиционной» масштабируемой векторной графики, которая используются для замены растровых PNG файлов. На самом деле, мы можем рассматривать SVG в качестве независимого модуля, который инкапсулирует CSS для настройки представления, а также адаптивного поведения, которое также инкапсулирует JavaScript для логики взаимодействия.

Теперь давайте более подробно рассмотрим эту технику.

Читать далее

Подробный анализ Пользовательских элементов.

Gorillas are great apes... Look, it was either this or a screenshot of some JavaScript.

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

Веб-компоненты представляют собой набор взаимосвязанных технологий, направленных на создание элементов, пригодных для многократного использования в интернете. Большая часть обсуждений была связана с Shadow DOM. Однако наиболее функциональной технологией пакетирования являются Пользовательские элементы (Custom Elements). Данный метод связан с использованием ваших собственных элементов, с их специфическим поведением и свойствами.

Читать далее

Организация вложенного контента в адаптивном дизайне.

Video breaks the layout in a responsive website on iPhone

Некоторые HTML элементы не могут функционировать в адаптивных шаблонах. Одним из таких элементов является хорошо известный вам iframe, который многие из вас наверняка использовали при вставке контента с внешних источников, например, таких как YouTube.

В этой статье мы расскажем вам о том, как организовать адаптивный вложенный контент с помощью CSS. Этот контент, например, видео и календари, сможет изменять свой размер в зависимости от области отображения браузера. Для тех случаев, когда размещением видео на вашем веб-сайте будет заниматься человек, который не знаком с написанием и отладкой текстов программ, и если вы не хотите доверять ему организацию дополнительной разметки, вместо CSS мы рассмотрим решения, которые основаны на JavaScript.

Читать далее