A New Weekly Web Design Roundup
Every day new HTML, CSS, and JavaScript tutorials are posted to the growing Solodev Web Design Blog! Here is a list of what was added the week of March 20th!
Adding a Filter to your Search Input using Bootstrap
Search on the web has gone far beyond simply going to search engines to find information. In order to dig deeper and find content more relevant to search queries, website visitors are increasingly searching through actual websites themselves for that right piece of content they’re looking for. To take that a step further, it is possible to add filters to your search inputs so your website visitors can further specify the content they are looking for. This allows you to deliver a better web experience that provides the visitor with the content they are looking for at a much faster rate.
Adding an Animated Scroll Down Anchor
Contemporary web design is all about providing a simplified and direct user experience. For many websites, this means having clear actions that you expect users to undertake. One such action is the arrow that indicates a user should scroll down to continue reading. This type of UI elements is typically associated with large hero or sectional containers that are often full-width and full-height. The arrow indicates to the user that more content lies below the fold and that, by clicking on the anchor link, they will be taken to next appropriate section.
How to Add a Social Share Grid to your Website
Social share online is fairly standard. A majority of websites have the ability to share content to your respective social networks. This functionality usually comes in the form of a few small buttons in the website’s navigation or a few icons under a breadcrumb. And while that approach has already proven to be successful we’ve decided to take it a step further. If your business is trying to gain a traction on social media, perhaps you want to add a social share grid to your homepage. Doing so gives social share more prominence, explains what content site visitors can expect from each respective network, and also provides your standard social share functionality.
Understanding CSS3 Animations
Animations, and movement in general, have come a long way in terms of web design. Animations that were once ostensibly limited to gifs, JavaScript, and flash designs are now possible with CSS3. This helps designers and developers build unique elements while cutting down on clutter and page speed. That being said, there are a number of things to understand regarding CSS3 animations and their use. With a little bit of knowledge, however, you can use properly placed animations to encourage user interaction and direct the user flow.
Originally posted on the Solodev Web Design Blog
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
