№ 033: Пошук фотошопів - CSS-хитрощі

Anonim

На CSS-Tricks є багато вмісту. Це одна з речей, що робить його дизайн дещо складним. Хоча ми можемо залишатися чистою з дизайном, ми, мабуть, не можемо уникнути “мінімальної” кількості матеріалів, які заслуговують на увагу на сайті та роблять сайт таким, який він є.

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

Великий синій квадрат із збільшувальним склом (за допомогою нашого шрифту значків) прямо в голові - це те, що буде робити для нас. Синій на сірому дуже вражає і повідомляє про спритність.

Ми уявляємо, що при натисканні на лупу синє поле розширюється у вікно пошуку. Причиною його закриття для початку є те, що 1) ми могли б використати додаткову кімнату в заголовку для нашого найкращого спонсора і 2) лупа насправді може бути навіть більш очевидною, ніж поле форми.

У формі пошуку є те, чого ви очікували: поле пошуку та кнопка. Але він також має кілька посилань, за якими ви можете натиснути, щоб звузити пошук, який ви запускаєте. Ми змусимо це насправді працювати в майбутньому скринкасті.