Незнание — Сила

Грид

Когда-то на заре Интернета сайты разрабатывались под определённое разрешение и тип монитора, количество цветов, и конечно же — под вполне конкретный браузер. То есть, скажем, страничка должна была выглядеть хорошо под последними версиями IE, Firefox и Opera. К сожалению, во многих студиях и компаниях до сих пор практикуется такой подход. И очень зря, ведь время сейчас такое, когда фраза «разработка сайта под ... (подставить нужный девайс, браузер или разрешение)», полностью утратила свой смысл. Количество устройств, с помощью которых пользователь может смотреть сайт, уже сейчас зашкаливает за тысячи. Это и планшеты всех мастей, смартфоны распространённых и не очень операционных систем, часы со встроенными браузерами, телевизоры, холодильники с выходом в Интернет, древние телефоны с Java браузерами — перечислять можно бесконечно.

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

Мы не знаем, какой браузер и компьютер используется пользователем для посещения сайта

Поэтому у нас есть стандарты, которым мы следуем, что позволяет нам делать один код для всех возможных устройств. Мы используем фрэймворки, такие как HTML5 Boilerplate, чтобы с самого начала иметь надёжную точку опоры и не делать работу, которая уже сделана за нас. Мы используем готовые JavaScript библиотеки (например jQuery), чтобы успешно справляться с кросс-браузерными проблемами.

Мы не уверены в возможностях браузера, который заходит на наши страницы.

Возможно, у него отключён JS, или это древний браузер, маскирующийся под последнюю версию Chrome, а возможно пользователь фанат расширений, каждое из которых пытается навесить на страницы свои стили. Поэтому мы проверяем работу всех фич в старых браузерах, и используем Modernizr для решения большинства проблем. Мы очень осторожно используем HTML5 теги, столь модные нынче, и всегда заботимся об обратной совместимости.

Мы не знаем точный размер окна браузера и разрешение монитора

Поэтому мы используем media queries и responsive layout, для того, чтобы сайт выглядел одинаково идеально во всех возможных ситуациях.

Мы даже не можем представить, какая скорость соединения с Интернетом у нашего пользователя

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

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

Поэтому мы постоянно делаем тесты, потом правки, потом опять тесты и опять правки — до тех пор, пока мы не будем уверены, что пользователи получают именно те вещи, и именно в тех местах, где они ожидают их увидеть, а не там, где их разместила лёгкая рука проджект менеджера. Также помним, что дизайн должен быть ориентирован на конечного пользователя — человека, а не валидаторы и автоматизированные системы тестирования.

Мы не знаем географическое положение пользователя

К счастью, где надо, проблема решается с помощью HTML5.

Мы не знаем родной язык посетителя сайта.

Вполне вероятно, что сайт, предназначенный для культурного просвещения жителей Беларуси захотят просмотреть носители языка басков. И хотя мы не точно не собираемся вручную переводить весь контент, но почему бы не использовать API Google Translate, или Smartling?

Мы не можем предсказать, насколько технически подкованным окажется наш пользователь.

Поэтому постоянно держим в голове усреднённый среднестатический портрет простого сельского труженика, которому по долгу работы или по интересу пришлось нанести вам виртуальный визит. Сможет ли он сориентироваться в навигации, найти справку, нужные кнопки и т.д. — все эти вопросы нужно решать на самом раннем этапе проектирования. А ещё лучше доверить это UX профессионалу.

Мы не знаем, какие физические ограничения, связанные со здоровьем, присутствуют у нашего юзера

Возможно, у него проблемы со зрением, или со вводом информации. Поэтому наш дизайн должен быть максимально доступным. На самом деле это целая наука, но всё стало намного проще с появлением HTML5.

На многие из этих вопросов можно получить ответы с помощью Google Analytics и подобных инструментов, но помните — что эта информация будет уже пост-фактум. Пользователь уже зашёл на сайт, уже не получил то, что хотел. И если вы уверены, в том что вы всё знаете - вы уже его потеряли.

По материалу CSS-Tricks