Как да създадете плаваща социална лента с HTML и CSS3 • Silo Creativo
Здравейте! Казвам се Рикардо Прието и работя (и пиша) по уеб дизайн, оформление и потребителски опит в SiloCreativo, откъдето помагаме на хората да разработват своите проекти с уроци, съвети и ресурси.
20% отстъпка
WordPress теми като Divi за $ 1 всяка
Преди няколко месеца преработихме уебсайта си и един от проблемите, които винаги ни изкарваха с главата надолу, бяха бутоните за социални медии за споделяне на съдържание. Дебатът винаги се въртеше около два въпроса, от една страна местоположение на партньорския барl (вертикален или хоризонтален, плаващ или статичен) и от друга страна социалните мрежи, които бихме включили в рамките на тази социална лента (twitter, facebook, pinterest ...).
Що се отнася до местоположението на социалните икони, бяхме категорични, че то трябва да остане възможно най-незабелязано, тъй като важното е потребителят да прочете съдържанието и ако му хареса и го види полезно, може да го сподели. Ето защо видяхме местоположението на мрежовите бутони интересно в края на статията, така че след като потребителят го прочете, той може да го сподели. Не забравяйте, че първо потребителският опит.
Но даването на възможност да използва бутоните за споделяне по всяко време изглеждаше като добър вариант и за нас. За това имахме проектирайте плаваща социална клавиатура Той ще се показва фиксиран във вертикалната част на екрана, когато сме на работния плот, и хоризонтално в долната част на мобилните телефони и таблети. Направихме няколко дизайна и тестове с HTML и CSS и тук споделяме една от опциите, които ни харесаха най-много.
Фиксирана лента за социални медии с HTML и CSS3
За този дизайн, ориентиран към мобилни устройства и таблети, ние избрахме хоризонтална лента, която останете фиксирани от вътрешната страна на екрана, заемащ 100% ширина. Избраните социални мрежи са Facebook, Twitter, Pinterest и WhatsApp, които са четирите, които ни дават най-добрите резултати за нашето съдържание. Също така сме добавили още два блока, един, който ни отвежда до формуляра за абонамент за бюлетин и друг, за да преминем към следващата статия.