Rules to Better Websites - Layout and Formatting

If you want users to take action on the web page content, add a "banana" - something that makes it obvious what the user is supposed to do.

For example, if your page is selling software, make it easy for your users to make a purchase. People don't have a lot of time to read your entire page and find the right link, so it is important to grab their attention by using a "banana".

When resources are limited, companies often blur the lines between design and development roles in an attempt to maximize efficiency. However, maintaining a clear distinction between disciplines is crucial for creating cohesive and effective user experiences.

For many developers, especially those early in their careers, the risk of making design decisions that negatively affect the overall user experience is high. When Product Owners delegate design work to developers, they may unintentionally accumulate significant UX debt. UX debt, like tech debt, accumulates when design shortcuts are taken, leading to user experience issues that need to be fixed later—often at a greater cost.

Ensure your websites and apps are responsive (mobile-friendly). While you might have a high-resolution monitor at your workstation or home, it's important to remember that many users access content through their mobile phones or tablets.

Your goal should be to create designs that seamlessly adapt to various screen sizes, from small mobile displays to large desktop monitors.

"An image is worth a thousand words" is a timeless saying that underscores the power of visual communication. Images can convey complex ideas, emotions, and information more efficiently and effectively than text alone. They capture attention, enhance understanding, and improve retention.

Therefore, whenever possible, replace text with images to create more engaging and impactful content. By doing so, you can simplify your message, appeal to visual learners, and make your communication more memorable.

The best way to emphasize your point is to show the pain first, and then the solution. Use "Bad example" and "Good example" with crosses and ticks, respectively, in captions.

When you add images/videos to websites/applications, it is helpful to add a caption underneath them, describing and including extra information to users.

It's a convenient way of catching users' attention to your content. When people are scanning a newspaper, they often check out the pictures first, then read the accompanying description, and if it sounds interesting, they'll go back and read the article. Users read websites in a similar fashion.

Efficient programmers do not re-invent the wheel. That's why we use the best Web UI libraries.

Bootstrap is a NuGet Package that provides a jump-start for HTML-based projects. It includes the HTML, CSS and JavaScript framework used to build the Twitter site.

Making CSS changes can range from straightforward tweaks to complex adjustments that impact multiple elements or pages. Knowing when to handle changes yourself and when to seek a developer's input can save time and reduce risks.

When creating or editing CSS or HTML, it's important to avoid adding unnecessary classes and IDs.

It can be tempting to add classes to elements, as it's often the most obvious solution to CSS problems. However doing so can lead to cluttered code and overly specific solutions. When working with CSS, it's almost always better to reuse existing classes rather than adding new ones.

Callouts, or UI boxes, are often used to highlight alerts, warnings, and other key information. They work best when they span the full width of the screen, making the message clear and hard to miss.

Full-width callouts use space effectively, pull focus to the content, and add a strong, immersive feel to the page.