№ 103: Площа фрагментів фотошопінгу - CSS-хитрощі

Anonim

Час зануритися в район Сніппетів! Тобто фактична область його вмісту. У нас вже є заголовок на місці. Область фрагментів досить популярна. Не заглиблюючись в аналітику, я переглядаю соціальні мережі та чую від людей у ​​реальному житті, що вони знаходять багато корисного у цій галузі.

У v9 дуже поширеною та законною критикою було те, що переглядати її було важко. Це був сильно забарвлений акордеон, і кожен фрагмент був “міхуром” (за відсутності кращого дескриптора), який відповідав основному кольору цього підрозділу фрагмента. Гірше того, вони були вирівняні виправдано, що, на мою думку, було б акуратним способом дати їм трохи місця і трохи пострибати, але в підсумку це виглядало просто дивним і неакуратним.

Давайте викупимось тут і зробимо область фрагментів приємнішою для перегляду. Хоча, знову ж таки, більшу частину цього вмісту можна знайти за допомогою пошуку. Тим не менше, це могло б також зробити його приємним для перегляду.

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

Що стосується дизайну, ми йдемо з двоколонковою річчю. Зліва - основні категорії фрагментів, кожна з яких має унікальний колір. Веселковий час! Ми переглядаємо нашу власну галерею для натхнення.

У правому стовпці буде просто список фрагментів цієї категорії. Просто, легко переглядати. Подібно до посилань нижнього колонтитула. Люди знають, як сканувати та використовувати списки посилань. Це найбільш ідеально простий шаблон дизайну, який є.

Хоча ми возимося з деякими дизайнерськими рішеннями. Посилання повинні відповідати кольору розділу або просто сірим? Чи повинні ми «зеброю смугувати» посилання з вицвілим варіантом основного кольору? Чи ми повинні включати дату публікації чи дату оновлення чи ні те, ні інше? Про цікаві та важливі речі, про які слід подумати, але ми завжди можемо приймати такі рішення, коли потрапляємо до браузера та працюємо з реальними даними.