In our eighth week of our mini-checklists designed to help website developers and do-it-yourself website-operators, we are going to focus on tidying the last bits of your design elements.
#15: No Flash Elements Used
While Flash was awesome in its day, it has no place in today’s responsive web. It is hard on the mobile processor and does not respond to the size of the browser. And while it was supported on some Android devices for some time, it was never supported on any mobile browser available from Apple.
If you are hanging on to a website with Flash, you absolutely need to update to something more current. Today’s websites can still look amazing with CSS animation and micro-interactions.
#14: Testimonial/Reviews Showcased
Tell the world how your customers love you! Unless you’re just coming out of the gate with a brand new idea/organization, you’ve probably received reviews or testimonials. Showcase them on your home page, with a link to view more on a dedicated testimonials page.
#13: CSS Animations Used Where Appropriate
As we mentioned earlier, Flash has no place in the modern responsive web. Instead, today, we use CSS animations. If you’ve purchased a modern website template, it likely has built in animations that animate sections of content in and out, as the user scrolls.
A warning about using this type of animation however: do make sure how it looks in all device types. Sometimes, background parallaxing images do not respond in quite the same way as they do on desktop, so you may need to disable some of this functionality for small mobile devices.
#12: Engaging Micro-Interactions In Place
A great article from web designer depot, shares some secrets for enhancing UX with micro interactions.
Micro-interactions are little animations that happen when the user hovers or clicks on something. It’s when the page interacts with the user to enhance the UX (User Experience)
#11: Correct Icons Used Where Relevant
So you have some page headings, and menu items. You want to use something that helps make that item stand out, right?
Well, you need to use the right icon for the right heading. There are thousands of icon packs to choose from, however we recommend using a vector icon system called Font Awesome — it’s free, and there are 675 icons at the time of the publishing of this article.
Implementing the Font Awesome set of icons in your site is a piece of cake. Just include the Font Awesome stylesheet reference in your page, and then where ever you want an icon, use the syntax:
<i class=’fa [font awesome icon class name]’></i>
Where [font awesome icon class name] refers to something such as fa-superpowers or fa-bolt — the font awesome class name for each icon, found here.