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

В противном случае мы могли бы еще жить в пещеры, опасаясь погоды и поклонение солнцу.It’ с недовольство и curiosity которые управляют нами, чтобы исправить то, что ain’ т сломанные .

Еще весной 2013 года, Smashing Magazine носил <select> menu как его мобильной навигации.Это wasn’ т считается анти-паттерн тогда и я все еще думаю it’ са жизнеспособным решением сложной проблемы, как построить accessible ¹ и функциональный навигации крест-устройство.Брэд Фрост написал несколько слов о плюсах и минусах этого pattern __15 | | 2__8 на своем блоге, и я couldn’ т согласиться .

В то время как это работало хорошо, оно также было несколько проблем.Главным образом, это wasn’ т самых красивых части интерфейса на веб- and мы должны были пролить JavaScript на нее, чтобы сделать опыт как-то стоящее. Восстановление этот мобильный navigation был одним из первых задач, возложенных на меня с Smashing Magazine после того как я начал работать здесь, в январе 2013 года .

Заменить все вещи Link

Мой первый шаг к новой и блестящей мобильной навигации было пнуть <select> меню в мусорное ведро и посмотреть вокруг в Интернете для вариантов и передовой практики.Некоторые articles ³ о отзывчивым design ⁴ и целой партии круглого ups ⁵ , Кодexamples ⁶ и Git repos ⁷ позже я пришел кэтот вывод:

Запишите основной HTML, чтобы иметь прочную базу, то позаботиться о стилизации, и когда that’ ы сделали вы можете посмотреть возможные JS дополнений, если это необходимо.И, наконец, тестирование, тестирование, тестирование

!

Still ⁸ прогрессивного улучшения запуска игры .

Для этой статьи я пошел так далеко, чтобы восстановить один из прототипов от тогда с упрощенной HTML и CSS в CodePen (без СМИ, запросов нет сброса, просто код из верхней части моей головы).JQuery часть пришла в дальнейшем, после того как мы поняли, что некоторые люди были смущены, когда переключателями didn’ т становятся неактивными и weren’ т заменил после нажатия / нажав их.После короткой, но интенсивной фазы испытаний и регулировок, мы решили развернуть его на живой блог в середине июня 2013 .

Note: стесняйтесь взять код и возиться с ним.Вы также можете использовать его в качестве отправной точки для проекта самостоятельно или продаже или что угодно.Там нет лицензии или авторские права на него.Это, как говорится: | __54 никаких гарантий или поддержки Я wouldn’ т рекомендуем скопировать и вставить код в проекте и просто оставить его там, как это .

При Хорошо не является достаточно хорошим Link

Вы могли бы признать это чувство, ползет вверх по позвоночнику над нескольких дней или недель, что некоторые ваши работы просто doesn’ т чувствовать себя 100% право — может быть 97% или 98%, но, безусловно, не весь торт.Это то, что случилось со мной после того, как прошло некоторое время, а я продолжал взаимодействовать с нашей новой навигации.Кнопки закрытия чувствовал себя месте и часть JQuery хранится беспокоит меня, так как в то время он служил своей цели хорошо, она не должна быть частью опыта, а просто повышение.Без включен Java-Script,пользовательский опыт я предполагал рассыпался на куски.Так что я начал снова, настройки и регулировки и перезаписи и пробуя различные решения той же проблемы снова и снова, каждый раз, когда я нашел время .

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

В декабре 2013 года, сразу после Рождества и в то время я был в отпуске, Виталий принял решение и пошел для решения CSS-только следуя колонтитул якорь pattern __11 | | 12__10 .Он переехал навигации и мобильного поиска в колонтитуле сайте, но сохранил кнопки на верхней.Таким образом, он wouldn’ т быть проблемой, если кнопки выглядят одинаково после щелчка / крана, потому что они будут вне поля зрения.Как we’ г была “ Вернуться к top” ссылки в журнале с первого дня, там уже было решение проблемы, что люди, возможно, захотите вернуться назад к заголовку страницы .

Да, но нет, но Да, но нет Link

На этот раз мы получили несколько писем с обратной связью на нашем решение изменить навигационную модель.Когда я вернулся к своему столу в январе 2014 года, несколько пользователей подала отчеты об ошибках чувство полностью потерял после прыжка вниз всю страницу журнала.Другие пользователи сообщили нам, что в то время как кнопки уже оказана на свой мобильный телефон, они постучал их, но didn’ т никуда идти, как сноски hadn’ т загружен вследствие их медленном соединении .

Еще один поднятый вопрос в том, что некоторые пользователи didn’ т найти “ Вернуться к top” ссылке.Они посадку в мобильном меню и не было видно вариант просто вернуться к заголовку: ссылка была вне поля зрения, над навигации.Опять же, мы закончили в том месте, где у нас было что-то, что wasn’ т точно сломана, но это wasn’ т полного решения, а также. Два шага вперед, один шаг назад .

Так мало времени, так много предстоит сделать Link

В период между 2013 и июне 2014 Fall, я был полностью занят много различных tasks __16 | | 13__11 .Я don’ т хотите, чтобы это звучало как оправдание, но, будучи единственным разработчиком на Smashing Magazine означает, что я работаю на много разных проектов, в то же время.Я должен оставаться в курсе с внешними разработчиками и, по крайней мере один глаз на Trello, один на Basecamp и один в моем почтовом ящике, в то время как я всегда нужны оба мои оставшиеся глаза для Skype и натяжные (наши постоянные конференц-залов).Я думаю, вы понимаете, теперь, что there’ S проблему анатомия, связанные .

Это, как говорится, я работал на сайте Smashing Magazine и нашей Конференция | websites__11 __24 | | 14__11 .У нас был редизайн для shop __30 | | 15__11 за кулисами, где я был, участвующих время от времени, и у нас также было несколько проектов, которые никогда не видели дневного света.Некоторые landing ¹⁶ pages ¹⁷ необходимо разработан и и другой sites ¹⁸ нужен полныйобновить .

Короче говоря: прототипы для навигации остались лежать нетронутыми около полутора лет, пока я не был, наконец, сможет вернуться к ним .

Апрель дождь Принесите Майские цветы Link

В апреле этого года, Виталий открыл запрос на наш Trello борту, чтобы заменить значок позорный гамбургер со словом “ Меню .” Это звучало как прекрасную возможность, наконец, получить свои руки на мобильное навигационное снова .

Первыйчто я сделал, было задачей под рукой.Значок гамбургер пошел в тот же отсек В <select> меню сразу сделал, и теперь мы были “ | Menu__78 отображается в виде текста .

Следующим шагом было думать о возможных улучшений и решения механизма закрытия.Поставленная цель была: нет JavaScript — легкий достаточно задача, но то, решение CSS-только редко в качестве сексуальных одного.Последнее решение было построено кнопки закрытия внутри элементов, которые я сделал видимыми с :target техники.Для получения более подробной информации о :target псевдо-селектор, я рекомендую вам прочитать Крис Coyier’ S мыслями о DOS, don’ ц и возможность использования cases __11 | | 19__10 .В случае, если Вы задавались вопросом, поддержка этого selector __17 | | 20__10 идеально подходит в мобильном ландшафте .

Веб-разработка никогда не бывает легким Link

Это выглядит слишком просто, чтобы быть правдой, не так ли?И да, это так.Техника проста и эффективна, но есть две проблемы с этим:

1. Вам нужен второй якорь, чтобы скрыть то, что вы показали .
2. Вы добавляете к истории браузера с каждым нажмите .

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров