Improving user experience is one of the key objectives of web design today. As new trends are shaping up and demand for better UX gets higher and higher, it is up to web developers to craft a website that doesn’t just look good but also performs well under heavy load.
There is also the fact that good user experience affects other things about the site, including its digital marketing success and SEO performance. Fortunately, there are a lot of things you can do to deliver better user experience in general, starting with these next few CSS tricks we are about to discuss.
SVG Animations
Adding tactile animations to web pages is the hottest trend on the market right now. There is something about animated elements that really engages the audience on another level. Tactile animations provide that satisfying feel you get when interacting with the site.
Even better, you no longer have to rely on GIFs or worse, Flash animations, to deliver that tactile feel. CSS animations are far more robust today than ever before, especially when combined with SVGs. You can use regular CSS tags like transitions and transforms – even keyframe animations – to animate SVG elements on your pages.
SVG is based on lines of code, giving you even more control over how it can be animated. You can, for example, take a particular part of the SVG and animate it independently of the other elements in the file. The possibilities are endless.
Advanced Scrolling Effects
Until very recently, messing with how a user scrolls through your site was considered taboo. While there are some interesting frameworks that offer smooth scrolling, they don’t always work in all browsers and may hamper mobile user experience in particular.
Today, however, there are a few things you can do with scrolling. Yes, you still want to avoid messing with the speed at which users scroll to your pages and how the scrolling itself behaves, but you can add advanced scrolling effects to make your pages come to life.
WSI Digital Web, a prominent web design Belfast company, did a very good job of utilising advanced scrolling effects on its company website. You can see from the company’s past projects that there are a lot of interesting effects that can be triggered by scrolling.
Drill Down with Selectors
CSS3 also comes with new ways to style specific elements as well as to add styles globally. The * selector, in particular, is handy when you want to style elements across the entire site; you can, for instance, use *p selector to change how paragraphs are displayed.
Child elements, especially in a list, are targetable using the :nth-child(n) selector. You can use :before and :after to add elements – and even content – to specific parts of the site. You also have @support, which is handy for checking browser support.
It is easy to see how CSS3 is more robust than ever. You have more selectors to work with, more elements to add to your site, and new ways to improve user experience – and how users interact with your site – in general.
Top comments (0)