8 Ключевых инструментов для оптимизации трафика на ваш сайт |
Ангел Бэби Новые серии - Игра окончена (29 серия) Поучительные мультики для детей
Оглавление:
- 8. Adobe Edge Inspect
- 7. Skeleton
- 6. Отзывчивый каркас
- 5. Стиль плитки
- 4. Адаптивный калькулятор
- 3. Wookmark
- 2. ProtoFluid
- 1. Foundation
8. Adobe Edge Inspect
Обновленный и выпущенный в 2013 году с новым брендингом, связывающим его с Creative Cloud, Adobe Edge Inspect позволяет просматривать ваши веб-проекты, чтобы посмотреть, как они будут выглядеть на разных платформах. Главной привлекательностью Edge является его способность экономить ваше время, видя изменения на разных платформах в реальном времени.
Этот инструмент позволяет синхронизировать ваш компьютер и мобильные устройства. Делая это, вы можете одновременно просматривать и проверять веб-дизайн на нескольких платформах. Кроме того, когда вы вносите изменения в веб-дизайн и отлаживаете его, ваша работа появляется сразу на вашем устройстве, если вы работаете с Java, CSS и HTML-кодированием.
7. Skeleton
Этот набор пакетов CSS-файлов обеспечивает бесшовную разработку веб-сайта, которая выглядит элегантно, независимо от того, отображается ли она на настольном мониторе или на маленьком светящемся экране в руке. Рассматриваемый простой в использовании шаблон для гибкого веб-дизайна, Skeleton удачно назван, потому что он создает фреймворк, который расширяется и сжимается в соответствии с размером пользовательского устройства. Хотя он содержит базовые элементы дизайна, он достаточно гибкий, чтобы позволить дизайнерам создавать более сложные стили.
6. Отзывчивый каркас
В качестве экспериментального инструмента, использующего гибкие методы веб-дизайна, адаптивный каркас использует HTML / CSS для создания сетки с наложением, которая позволяет просматривать рабочий стол и мобильные представления вашего дизайна. Идея с этим инструментом заключается в том, чтобы упростить проектирование в браузере. В то время как некоторые дизайнеры могут утверждать, что эти каркасы сокрушают творчество, другие говорят, что это быстрый и простой способ создания проектов, которые работают на разных платформах. Использование этого инструмента экономит ваше время, когда вы тестируете проекты с помощью адаптивных каркасов, чтобы посмотреть, как они будут выглядеть на ноутбуках, настольных компьютерах и мобильных телефонах.
5. Стиль плитки
Более конкретный, чем плита настроения, но менее статичный, чем реальный макет, Style Tiles позволяют дизайнерам показывать клиентам разные макеты веб-сайтов. Представляя плитки, дизайнеры не должны делать несколько готовых версий.
Эти каскадные плитки демонстрируют проекты, не приспосабливая их к любому устройству, что делает их простым способом создавать проекты и делиться ими с клиентами, прежде чем принимать во внимание многие связанные с этим соображения с отзывчивым дизайном. Другими словами, этот подход дает разработчикам свободу от ограничений по размеру. Сестринский продукт Style Tiles, «Руководство по стилю компонентов» предлагает советы по дизайну и работе с такими платформами, как iPhone и новый смартфон Blackberry 10.
4. Адаптивный калькулятор
Используя проценты, этот калькулятор дает вам данные, необходимые для преобразования дизайна PSD в элемент для вашего адаптивного веб-проекта. Вы вводите шесть полей, а затем нажмите «Отправить запрос». Выбирайте границы, поля и отступы на вашем PSD с помощью этого калькулятора.
3. Wookmark
Это плагин jQuery, который принимает компоненты веб-страницы и помещает их в столбцы. Расположение столбцов основано на размере окна браузера. Этот удобный инструмент - отличный способ заставить сайт реагировать на различные размеры экрана.
2. ProtoFluid
Имея преимущество, потому что это веб-интерфейс, этот инструмент делает безболезненным видеть макеты вашего дизайна с различными разрешениями и размерами. Наслаждайтесь возможностью использования Firebug, когда вы проверяете свои проблемы с HTML, CSS, JS и другими элементами. Ярлыки клавиш, быстрый переход между различными видами и чистый код обеспечивают скорость, когда вы используете этот инструмент, чтобы проверить, насколько хорошо ваш дизайн выглядит на разных размерах экрана, включая Nexus, iPhone и iPad.
1. Foundation
Эта интерфейсная инфраструктура обеспечивает возможность более умного и быстрого кода. Среди его возможностей этот инструмент позволяет начать с разработки небольших экранов. Когда вы работаете над созданием своего дизайна для больших экранов, Foundation помогает вам активизировать элементы дизайна. Кроме того, этот инструмент приносит вам классные HTML-шаблоны, которые дают вам начало перехода на дизайн сайта.
Воспользуйтесь гибкой сеткой этого инструмента, гибкими макетами и быстрым производством прототипов. Эффективность и достоверность Фонда очевидна в списке используемых на нем сайтов, в который входят National Geographic, Pixar и Los Alamos National Laboratories.
Как вы смотрите на максимизацию вашего гибкого веб-дизайна, каковы самые большие проблемы, с которыми вы сталкиваетесь? Какие инструменты вам наиболее полезны?
[Изображения с помощью]
