Over 250,000 websites are launched every day. With this, it’s essential to use CSS practices that elevate your page and frontload your services. With the right guidelines, you can translate your unique offering to digital consumers who are quick to dismiss subpar websites. If you look at Yahoo Finance’s ranking of the most visited websites in the world, the top 10 is littered with social media platforms. Beyond that, users visit websites built for search aggregation, personalized recommendations, shopping, and content generation.
What all these have in common, in terms of the biggest CSS lessons to learn, is that there is a focus on responsive design, frameworks hinged on optimizing performance, and modular design. Given that there is currently an accountant shortage in the US, with almost 130,000 roles waiting to be filled yearly, we can expect that finance sites and accounting software providers, in particular, will soon be in huge demand. That said, in order to stand out from the growing competition, it’s important that accounting software sites optimize the abovementioned assets along with a few more tailored for their sector. Here are a few examples:
UX-Focused Video Elements
Websites tend to implement videos following studies that say they make sites more visually interesting and engaging. However, video integration shouldn’t be taken lightly for something as intricate as accounting software. CSS practices here should be focused on the user experience (UX) first and foremost.
Gone are the days of a simple YouTube hyperlink sufficing. If you look at the SOFTRAX website, its homepage immediately comes with a video explanation of its software and core functionality without using intrusive pop-ups. There is also a clean, collapsible drop-down with the video transcript, aiding users who need an extra reference to SOFTRAX’s complex revenue management design, history, and features for RMS billing, various financial models, history, controlled environments, and compliance. Furthermore, the video container itself comes with pause/play functionality, volume control, a full-screen option, and, most crucially, a picture-in-picture mode so users can watch the video while exploring the rest of the homepage. This enables users to learn more while having direct access to the site’s demo sign-up section, the downloadable RMS data sheet, other customer feedback, and deeper insights into the software.
A likely CSS container could be coded like so:
.video-container { background-image: url('video.mp4'); background-size: cover; background-position: center center; height: 500px; }Crisp Anchor Groups
Anchors are meant to be noticeable, but they shouldn’t disrupt the flow of your website. Instead of an endless scroll, you want to create crisp indicators that lead people to the most relevant information. After all, the average user leaves a web page in 10 to 20 seconds if they don’t find any point of interest.
Wave Financial shows users its available tools using a tool tab or button group, which allows the reader to navigate to an overview without leaving the main page. Most interesting to note from a CSS perspective is how every section uses the same font but just changes its thickness and color. This directs the reader’s eye with ample separation of sections without looking too messy for the sake of stylization. Part of our CSS Guides on fonts dives into its role in sections like this, where variable fonts allow you to customize the weight, slant, width, and slant of a typeface within a single font file. This works well not only for visual clarity but also for conforming to various screen sizes and orientations.
The HTML code for a button group should look something like this:
<div class="button-group"> <button onclick="scrollToSection('section1')">Section 1</button> <button onclick="scrollToSection('section2')">Section 2</button> <button onclick="scrollToSection('section3')">Section 3</button> </div> <section id="section1"> </section> <section id="section2"> </section> <section id="section3"> </section>Modular Design for Complex Interactivity
Modular design is great because it uses reusable elements that not only make your site look streamlined but also make it easier to maintain on the backend. It can also help keep loading times optimized while still providing feature-rich web design for visitors.
For example, the main site for QuickBooks’ software packages highlights various plans and pricing, but the most notable feature here is the questionnaire. It has various tabs and multiple-choice checkboxes that don’t take you out of the homepage but end in a link to one of their various accounting products based on what matches your answers. This also marks a practical solution for ever-changing live elements, considering developer Intuit announcing pricing changes and strategy shifts that will impact both existing and new subscriptions featured on the site. Certain desktop versions are actively sunsetting, so its website must reflect those adjustments accordingly.
Proper software can be a serious advantage for tasks as complex as accounting for business, which is why websites for this industry need to match such innovation and reliability.
For more CSS, check out our other guides on CSS3.
Leave a Reply