A well-designed and responsive website will help improve your user experience. Not only is user experience important for SEO but also for attracting customers. From catching a user’s attention to leading a customer to take an action, we’ve covered 6 more CSS tricks to help boost your user experience.
In case you missed our first 6 CSS tricks:
6 CSS tricks to help spice up your web design
What is CSS?
To recap briefly, CSS is a style sheet language to specify the design and presentation of a website. While HTML works to create and structure a webpage, it is through CSS that a website can become more dynamic and appealing.
At a basic level, CSS can be used to change the colour and sizes of objects, as well as customise text and images through their layout on a page. Using different CSS tricks can help to create a more visually appealing site and a better user experience.
6 more CSS tricks to boost your user experience
1. SVG and animations
Graphics are an essential part of a well-designed website and help boost the user experience. Without them, your site can look bland and uninteresting. While many will upload raster/bitmap images (with file types such as .jpg, .png, and .gif), these images are pixel-based.
That means the images are dependent on their resolution. When these images become enlarged without enhancement, the images can become blurry and pixelated. When your website becomes filled with pixelated images, it will negatively impact your user experience.
One solution is to create higher-quality images with more pixels, however this can lead to large file-sizes. The other solution is creating scalable vector graphics (or SVG). Unlike raster images, these are made using algorithms as opposed to pixels, making them infinitely scalable. SVGs are ideal for responsive websites too.
You can also use CSS to add animations to your SVGs, to create interactive icons. When interactive elements are incorporated successfully, they can help improve your user experience. Check out this tutorial for how you can get started animating your SVG images:
2. Hover effect
In our previous CSS tricks, we covered how you can create custom dynamic and responsive buttons using CSS. As well as being able to craft well-designed buttons, you can also implement hover effects to text links, icons, and much more.
Using the hover effect on your site makes it clear to users when moving a mouse over by either changing colour or displaying a transition. Not only does the hover effect help indicate key elements on your site that are clickable, but it also helps improve your user experience.
You can start implementing the hover CSS into your site by using the ‘:hover {‘ CSS property.
Then you have the option of changing the colour, font size, background, font, or underline for customising your hover option. Here’s an example to showcase the different options:
a:hover {
background-color: red;
text-decoration: underline;
font-size: 150%;
font-family: calibri;
color: green;
}
You can also add a transition that doesn’t make the hover effect quickly snap. For this, just add:
transition: [insert transition duration];
For a whole range of different hover effect options, check out these examples.
3. Create useable checklist
Everyone uses a checklist at some time or another, right? If you use a checklist on your site, chances are you will have probably created a downloadable PDF. Well, now you can incorporate these checklists directly into your site thanks to CSS.
Using the checkbox input allows you to create checklists that can tick and cross different items. If you have a lot of how-to articles on your site, implementing these usable checklists can be a great way to create an interactive element that will boost your user experience.
To successfully implement usable checklists into your site, you need to use the :checked subclass with the checkbox class and the transform class to get the checklist to work its magic by ticking off the checklist item. You can find the code to get you started with usable checklists on Stackdiary.
4. Responsive images
We mentioned earlier how blurry images can dampen your user experience. Fortunately, there’s a solution you can implement into your website for adjusting image sizing according to the screen size. This CSS trick is great for responsive web designs to help scale images according to screen size.
To create responsive images, we use the .responsive class.
First, you want to add the class to your HTML. Inside your image tag, add class=”responsive”. This will go after your alt-image code. Next, in your CSS, you can add:
.responsive {
Max-width: 100%;
height: auto;
}
Setting the max-width to 100% means the image will never scale up larger than the original width dimensions but will adjust the height of the image according to screen size. The same can also apply to videos too.
Note: If you want to apply this style to all images, just replace .responsive with img.
Consider the mobile-first approach to responsive web design
5. Shadow effects
Ever found elements in your website to be illegible or difficult to read? Or maybe you want to create a contrast between two similarly coloured elements? Well, with CSS shadow effects, you can do exactly that.
You can apply shadow effects to text using the text-shadow property and to elements using the box-shadow property and adjust the horizontal and vertical offset. You could even get creative and add a glow to the shadow.
Let’s look at an example.
H1 {
text-shadow: 2px 2px 1px grey;
}
To adjust the offset of the shadow, you’ll need to adjust the pixel numbers. The first is the horizontal offset with the second being the vertical offset. The third number is to adjust the blur of the shadow. With the CSS code above for shadows, you should get something like this:
For box shadows, you would use the following code after your box code:
{
box-shadow: 2px 2px 1px grey
}
And there are plenty more customisation options for shadows. Find out more about CSS shadow effects. With more legible elements in your web design, users will be able to see things much clearer, helping to improve your user experience.
6. Cursor
Did you know that you adjust the cursor according to a given situation? You can adjust the cursor to change specific to a site element. There are lots of options for customising the cursor using CSS to help users better interact with your site and improve user experience.
Whether it’s to resize an element, indicate something that can be copied, indicate loading, or prevent clicking a certain element, you can change your cursor accordingly. To change the cursor using CSS, all you need to add to your code is:
}
Cursor: [value such as ‘copy’];
Find the full list of cursor CSS values here and how it changes your cursor.
With these 6 CSS tricks, you will be in a better position to provide a more valuable and memorable user experience. With interactive elements, such as useable checklists, you can help to shape a personalised experience that is sure to attract and keep users engaged! Have fun implementing these CSS tricks in your web design.
Download our free infographic on the psychology of colour in web design