Здравейте! Казвам се Рикардо Прието и работя (и пиша) по уеб дизайн, оформление и потребителски опит в SiloCreativo, откъдето помагаме на хората да разработват своите проекти с уроци, съвети и ресурси.
20% отстъпка
WordPress теми като Divi за $ 1 всяка
Преди няколко месеца преработихме уебсайта си и един от проблемите, които винаги ни изкарваха с главата надолу, бяха бутоните за социални медии за споделяне на съдържание. Дебатът винаги се въртеше около два въпроса, от една страна местоположение на партньорския барl (вертикален или хоризонтален, плаващ или статичен) и от друга страна социалните мрежи, които бихме включили в рамките на тази социална лента (twitter, facebook, pinterest ...).
Що се отнася до местоположението на социалните икони, бяхме категорични, че то трябва да остане възможно най-незабелязано, тъй като важното е потребителят да прочете съдържанието и ако му хареса и го види полезно, може да го сподели. Ето защо видяхме местоположението на мрежовите бутони интересно в края на статията, така че след като потребителят го прочете, той може да го сподели. Не забравяйте, че първо потребителският опит.
Но даването на възможност да използва бутоните за споделяне по всяко време изглеждаше като добър вариант и за нас. За това имахме проектирайте плаваща социална клавиатура Той ще се показва фиксиран във вертикалната част на екрана, когато сме на работния плот, и хоризонтално в долната част на мобилните телефони и таблети. Направихме няколко дизайна и тестове с HTML и CSS и тук споделяме една от опциите, които ни харесаха най-много.
Фиксирана лента за социални медии с HTML и CSS3
За този дизайн, ориентиран към мобилни устройства и таблети, ние избрахме хоризонтална лента, която останете фиксирани от вътрешната страна на екрана, заемащ 100% ширина. Избраните социални мрежи са Facebook, Twitter, Pinterest и WhatsApp, които са четирите, които ни дават най-добрите резултати за нашето съдържание. Също така сме добавили още два блока, един, който ни отвежда до формуляра за абонамент за бюлетин и друг, за да преминем към следващата статия.
HTML се състои от отделен контейнер със списък ul, където всяка от социалните икони ще бъде елемент от списъка.
Контейнерът настрана с класа .social-sharing ще бъде самата социална лента и ще бъде позициониран като фиксиран (въпреки че в примера го виждате като абсолютен, тъй като е само този, за да го позиционирате в примерния прозорец, създаден за тази цел ).
За да организираме социалните икони, ние избрахме flexbox, давайки иконите на четирите социални мрежи с фиксирана ширина (40px) и разпределяйки останалото пространство между блока на бюлетина и връзката за преминаване към следващата статия.
По отношение на социалните икони, ние следвахме стъпките и принципите, обяснени тук. Използването на същия шрифт на икони (FontAwesome в случая), който вече използвате на уебсайта си в иконите на менюто на хамбургер или търсене на иконите на Twitter, facebook и други мрежи, е положителна точка, тъй като не добавяме изображения и не заплащаме допълнително към нашия уебсайт. Използването на CSS псевдо елементи ни позволява да генерираме тези социални икони без изображения и да се виждат правилно на екраните на ретината.
Този CSS се прилага глобално за цялата мрежа, но ако искате да го ограничите така, че да се показва само на мобилни телефони и таблети, тогава трябва да използвате мултимедия и да съдържате всички правила на CSS в нея.
Приставки с плаваща социална лента и други опции
Може да ви се стори странно, че в случай на проект, реализиран в WordPress, сте избрали да проектирате социалната лента с HTML и CSS и да не използвате един от многото приставки, които съществуват, за да създадете панел с бутони. Истината е, че във версия 2.0 на SiloCreativo използваме приставката Jetpack с нейния модул за споделяне, но взехме решение да спрем да я използваме.
Причината е много проста. Повечето плъгини използват свои собствени библиотеки с икони, нови стилове и някои други JS файлове. Това е за увеличаване на натоварването на мрежата, за да се наложи най-накрая да модифицира стилове, за да ги датира към нашия дизайн. Единственото нещо, което загубихме, беше да можем да преброим колко пъти е било споделено в мрежи, но честно казано, това не изглежда като достатъчно силна причина за качване на 3 или 4 допълнителни файла, в допълнение към съответните повиквания за преброяване броя на акциите.
Затова избрахме нещо по-леко (само HTML и CSS) и адаптивно, където можете да добавите, както сте виждали абонамент за бюлетина, в допълнение към навигацията към следващата статия. Какво мислите за това решение? Как имате социалните икони, внедрени на вашия уебсайт?