Как изменить дизайн веб-сайта, чтобы он выглядел невероятно на мобильных устройствах
Опубликовано: 2016-01-24[ Proto .io — это инструмент для создания прототипов мобильных приложений, используемый предпринимателями и стартапами для создания полностью интерактивных реалистичных прототипов, которые выглядят и работают как настоящие приложения.]
Пятнадцать лет назад редизайн веб-сайта был гораздо более простой задачей — вы просто решали, как будет выглядеть ваш рабочий стол, соответствующим образом организовывали свой контент и создавали веб-сайт. Невероятно, но некоторым веб-сайтам по-прежнему не хватает настоящего мобильного интерфейса, будь то отдельный редизайн веб-сайта или хорошо спланированный адаптивный дизайн.
Иногда дизайн может показаться бесконечной игрой в догонялки, но эти эксперты по мобильным приложениям могут помочь вам в процессе редизайна вашего веб-интерфейса, чтобы он отлично выглядел на любом устройстве, настольном компьютере или мобильном телефоне.
Как изменить дизайн веб-сайта, чтобы сделать его удобным для мобильных устройств
Handsome (@HandsomeMade) — дизайнерская и технологическая компания, основные ценности которой включают «ориентированное на человека мышление на всех уровнях» и «намеренно красивое и восхитительное программное обеспечение». Креативный директор Брэндон Термини и технический директор Алекс Зуб объясняют, как они применяют эти принципы при редизайне мобильных веб-сайтов:
По словам Термини, ключом к редизайну красивого веб-сайта является использование «подхода к дизайну, ориентированного на мобильные устройства», что делает пользовательский интерфейс максимально элегантным и простым в использовании. «Один из способов применения дизайна, ориентированного на мобильные устройства, — начать с экранов меньшего размера, что вынуждает нас максимально упростить интерфейс и отображать на экране только то, что действительно важно».
Зуб добавляет: «Использование технологий и лучших практик, таких как отзывчивый дизайн и адаптивный дизайн, с их совместимой технической реализацией — это ключ. Для многих продуктов имеет смысл придерживаться адаптивных сеточных систем, которые упрощают усилия, необходимые для их создания, сохраняя при этом великолепный внешний вид на всех типах экранов».
Как изменить дизайн сайта, чтобы он выглядел красиво на мобильных устройствах
Мы попросили Термини поделиться некоторыми из его лучших практик визуального дизайна. «За эти годы мы собрали сотни правил, которые можно и нельзя делать», — говорит он. Вот три лучшие практики, которые он применяет в красавчиках:
- Тщательно продумайте иерархию макетов. «Успешный макет означает, что пользователь должен иметь возможность провести вас через то, что он видит/читает, в том порядке, в котором вы задумали. Правильное использование пустого пространства, теория цвета, типографика и т. д. играют в этом ключевую роль».
- Правильно используйте цвет. «Выберите цвета, подходящие для вашего бренда, и убедитесь, что они хорошо гармонируют друг с другом. Используйте основной цвет, который вы связываете с важными элементами пользовательского интерфейса, такими как кнопки призыва к действию. Убедитесь, что вы экономно используете цвет в нужных местах, чтобы ваш пользователь проходил через интерфейс и не застревал».
- Типографика должна быть приятной для глаз. «Убедитесь, что ваша типографика соответствует бренду и читабельна на устройствах, для которых вы разрабатываете дизайн, и экономно используйте орнаментальный шрифт».
Тестирование редизайна вашего мобильного сайта
Конечно, после того, как вы создали мобильный сайт, вы должны протестировать его, чтобы обеспечить удобство работы пользователей. Термини говорит: «Частое тестирование и корректировка имеют решающее значение. Начните тестирование, как только вы покажете потенциальным пользователям первые нарисованные от руки эскизы, и продолжайте тестирование на протяжении всего процесса, вплоть до полностью построенных спроектированных систем. Возможность слышать, синтезировать и повторять отзывы очень важна для успеха любого продукта».
Рекомендуется для вас:
Что означает положение о борьбе со спекуляцией для индийских стартапов?
Как стартапы Edtech помогают повысить квалификацию рабочей силы Индии и стать готовыми к будущему ...
Технологические акции нового века на этой неделе: проблемы Zomato продолжаются, EaseMyTrip публикует...
Индийские стартапы срезают путь в погоне за финансированием
Цифровая маркетинговая платформа Logicserve Bags Финансирование 80 CR INR, ребрендинг как LS Dig...
Отчет предупреждает о возобновлении нормативного контроля над Lendingtech Space
Зуб добавляет: «Обеспечение качества — неотъемлемая часть создания продукта, который используется на различных типах устройств. А поскольку иметь в офисе все возможные устройства практически невозможно, мы используем онлайн-сервисы, которые предоставляют доступ к десяткам «виртуальных» устройств в облаке, максимально автоматизируя это. При надлежащих инвестициях в автоматизацию можно легко и быстро выполнять кросс-девайсное тестирование в будущем».
Мы хотели узнать еще больше о том, как тестировать и контролировать качество редизайна мобильного веб-сайта. Об этом мы узнали от Саймона Папино, генерального директора Crowdsourced Testing(@crowdsourcingqa). Папино создал краудсорсинговое тестирование, чтобы устранить некоторые болевые точки, с которыми он столкнулся в своем опыте тестирования многочисленных мобильных приложений, веб-сайтов, игр и многого другого.
То, что работает на ПК, не всегда работает на мобильных устройствах — и наоборот
Папино говорит: «Одна вещь, которую разработчики склонны забывать, это то, что вам не нужна такая же глубина или тот же контент на вашем мобильном сайте, который вы бы отображали на своем настольном сайте. Намерение, мышление и цель мобильного пользователя совершенно другие. Посетители не будут тратить 20 минут на телефон, читая историю вашей компании и ее мелкий шрифт.
Вместо этого дайте им то, что они хотят, прямо и как можно быстрее. Если это ваша контактная информация, разместите ее прямо на главной странице без лишних слов».
Одна из проблем, по словам Папино, заключается в том, чтобы убедиться, что редизайн вашего мобильного веб-сайта будет хорошо выглядеть и хорошо работать на множестве устройств: «Тестирование, чтобы увидеть, реагируют ли веб-сайты, может быть очень трудоемким и дорогостоящим. Лучшее, что может сделать компания, — это сосредоточиться на 15-20 самых популярных устройствах, на которые приходится большинство ее посещений. Всегда найдется мобильное устройство, на котором сайт будет выглядеть не идеально. Но если это устройство представляет 0,05% ваших посетителей, возможно, оно не стоит дополнительных усилий по разработке».
Как изменить дизайн сайта с помощью адаптивного дизайна
Боб Бенц является президентом ATS Mobile (@atsMobile), агентства мобильного маркетинга с полным спектром услуг, которое курирует редизайн веб-сайтов для клиентов из разных отраслей. Бенц стремится к тому, чтобы веб-сайт выглядел и воспринимался так же хорошо на мобильном устройстве, как и на настольном мониторе с высоким разрешением, и одним из основных способов, с помощью которого ATS Mobile достигает этого для своих клиентов, является использование адаптивного дизайна.
Почему адаптивный дизайн? Букварь
«Отзывчивый веб-дизайн (RWD), чаще всего разработанный с использованием HTML5, будет вероятным выбором почти во всех новых мобильных веб-сборках», — говорит Бенц. «Его также можно разработать с использованием CSS3 и Javascript. Отзывчивый дизайн имеет поразительное преимущество в том, что он очень гибкий, поскольку он плавно меняется, чтобы приспособиться к любому устройству. RWD работает, отправляя один и тот же код независимо от устройства, а затем перестраивая его на стороне клиента, что позволяет отображать одну и ту же веб-страницу на любом устройстве».
Чтобы увидеть адаптивный дизайн в действии, откройте этот пост в блоге на экране рабочего стола, если вы еще этого не сделали (мы подождем!). Вы заметите, что существует несколько размеров окон, при которых пользовательский интерфейс «ломается» и перестраивается, так что страница выглядит по-разному в зависимости от того, какое устройство вы используете (и насколько велико окно внутри этого устройства).
Так как же именно работает адаптивный дизайн и почему вы должны использовать его для редизайна своего сайта? «Адаптивный редизайн веб-сайта использует один и тот же HTML-код по одному и тому же URL-адресу, независимо от того, является ли устройство пользователя настольным компьютером, планшетом, фаблетом, смартфоном, мобильным телефоном или носимым устройством (например, Apple Watch)», — говорит Бенц. «Он также может реагировать по-разному в зависимости от размера экрана сайта. Разработчики могут решить, какая графика и контент будут использоваться для пользователей мобильных устройств и планшетов. Текст и изображения можно настроить в зависимости от любого браузера или размера экрана».
Благодаря адаптивному дизайну вы страхуете себя от необходимости делать новое обновление каждый раз, когда что-то меняется в статус-кво мобильного устройства. «Когда новое устройство выходит на рынок и получает доступ к вашему веб-сайту, дополнительное программирование не требуется, если сайт построен на адаптивном дизайне», — говорит Бенц. «Однако наиболее важно то, что адаптивный дизайн — это рекомендованная Google передовая практика дизайна. Для многих веб-сайтов RWD обеспечивает разумный баланс между удобством использования мобильных устройств и простотой внедрения».
Лучшие практики адаптивного визуального дизайна
По словам Бенца, принятие во внимание следующих передовых практик поможет сделать редизайн вашего адаптивного веб-сайта наилучшим образом:
- Простой, эффектный заголовок. «Заголовок и шапка должны быть простыми, чтобы не отвлекать внимание от ключевых моментов продажи. Логотип является ключевым имиджем бренда; чрезмерно горизонтальный логотип может не очень хорошо смотреться на небольших вертикальных экранах».
- Удобная навигация. «Навигация намного сложнее на маленьком экране. Часто дизайнеры используют кнопку навигации, представленную тремя горизонтальными линиями, обычно в правом верхнем углу сайта. Это называется «гамбургер-меню», потому что оно выглядит как бургер, окруженный булочкой. На некоторых сайтах используется левосторонняя навигация, которая может расширяться наружу и занимать большую часть экрана».
- Множество изображений. «Трудно разместить слишком много изображений на экране мобильного устройства, но слова могут быстро перегрузить пользовательский интерфейс. Поэтому дизайнеры часто используют карусели изображений, которые позволяют пользователям пролистывать несколько изображений продукта, вместо того, чтобы загромождать экран копиями».
- Разумное использование нижнего колонтитула. «Потребители привыкли использовать нижний колонтитул в качестве инструмента навигации, и он не занимает такого ценного места, как верхний колонтитул. Он также должен включать очень важную ссылку «Свяжитесь с нами».
Великолепный редизайн веб-сайта начинается с великолепного прототипа
Научиться редизайну веб-сайта для мобильных устройств — это немалый подвиг, но наличие мощного инструмента быстрого прототипирования, который поможет вам протестировать опыт, имеет большое значение. После обрезки копии, сокращения элементов и выяснения схемы навигации вы можете быстро получить отзывы пользователей о том, по-прежнему ли ваш редизайн мобильного веб-сайта удобен и интуитивно понятен. Затем, как предложил Термини, продолжайте повторять до тех пор, пока у вас не будет прототипа, которым вы действительно будете гордиться.