Here’s one thing you should know about web development…
The Details Matter.
Small details can make a big difference between a functional website and a truly great user experience. Most modern websites incorporate smooth loading or animation effects by using CSS transitions. CSS3 transitions are highly effective and can have a dramatic impact on the look and feel of a site. When CSS3 transitions tag team with a couple of lines of jQuery we can begin to delve into programming interactivity on the web.
#1 – Shrinking Navigation Header
The lion’s share of websites online today utilize a sticky navigation header. When a user loads a page on the site the navigation header oftentimes has a larger vertical height so the branding logo and navigation become more prominent. As the user scrolls down the page the nav header decreases in size vertically so the focus is moreso on the content on the page yet visiting other pages on the site is and immediate action.
See the Pen zMyeZR by Aaron (@squarehippo) on CodePen.
#2 – Toggling Expander
Accordion expanders are a useful way to hide secondary or tertiary content on a page. Numerous frontend frameworks such as foundation or bootstrap include an accordion expander but sometimes I prefer something that i can have more control over and leaves the design free of styles to overwrite.
See the Pen Toggle Down Expander by Aaron (@squarehippo) on CodePen.
#3 – Modals and Overlays
Overlays and modal windows are another type of design pattern that, when used sparingly, can add impact and lead users on a concise experience. Again you will find modal functionality in many frontend frameworks. There are cases when rolling your own can allow for fewer roadblocks in customizability.
See the Pen eQbwQw by Aaron (@squarehippo) on CodePen.
Engaging Your Users is Important
After getting your content setup in HTML it’s important to look for ways to let users interact with that content in an intuitive and captivating way. By using simple CSS and JavaScript we can display various types of content in an engaging way based on the users needs. Another consideration for a web ranking site is SEO strategy. We will cover that in another article.
