Pixel Perfect

What to Know Before You Submit / Upload a Photo Images can make or break a small business website. Whether you’re a contractor, hairstylist, dentist, or restaurant owner, the photos you upload should build trust, highlight your work, and make your business look professional. Most business owners aren’t photographers. They're using iPhones or Androids, often snapping pictures during the workday. That’s fine — as long as you follow a few simple best practices. This guide covers what you need to know before you add images to your site, including: The right image sizes and formats for web What types of images help convert leads How to take better photos of your team and your work Tips for lighting, composition, naming, and consistency When to not use images at all The tips here work for any type of business — we’ve just included examples from home service contractors since they make up a large number of Hibu sites. Let’s get everything in frame.

Pixel vs. Percentage Units: Why They Matter in Responsive Web Design When you're building websites that need to work across all screen sizes—from wide desktop monitors to narrow mobile phones—how you size elements matters. At Hibu, we design for everyone. That means every element must display correctly on every device. If your content is misaligned, crammed, or floating awkwardly, users won’t stick around—and they won’t convert. One of the most important layout choices you’ll make is whether to use pixel or percentage units for sizing.

How to Use the Contrast Checker Text needs to be easy to read—on every device, for every visitor. At Hibu, we aim to make every website as easy to read as possible. The HWP Contrast Checker helps with that by showing whether your text color has enough contrast against the background. You’ll find it inside the color picker whenever you're selecting a text color.

Training Overview: Initial Build Setup vs. Editor 2.0 & Collection Site We're moving from the current initial build setup to a new approach with Editor 2.0 and the Collection Site . This transition is more than just switching editors—it changes how we structure content, manage data, and ensure consistency across sites.

Overview For these steps, assume you are building a residential general contractor website . You need to add stock images for the hero sections of the following pages: Homepage (general home-related image) Roofing page Siding page Gutter page Additionally, the hero images from all core pages (roofing, siding, gutters) will also be displayed as the homepage copy block image . These steps will guide you through finding, downloading, renaming, and uploading stock images to the website.

Website Page Counting Process It is important for all production teams to follow the same process when determining what pages on a client’s website are considered countable. This helps ensure that workloads and turn times are properly accounted for. Please note that “page count” as defined here is not the same thing as the page count that a client is allowed. There are several site pages that do not count against the client’s allotted page count, but we need to account for them in production as they take time and skill to create. To get an accurate Production page count, start with the following: Preliminary Review • Gather the site map, questionnaire, or any documentation indicating the intended structure of the website • Identify visible and hidden pages based on the provided documents Easy Way to See All Pages Select the Media Manager in the content library Click on All Alt Text Go to Page SEO Click on All Pages Scroll down to manually count the pages Note: You may have the occasional template page slip in, but this method reliably includes all the necessary pages without omitting any Categorizing Pages Service Pages: Count all service pages (e.g., individual services, home, about, contact, etc.) Include any services listed as part of the questionnaire FAQ and Blog Pages: Always count the FAQ and Blog pages, regardless of their visibility or creation status: o If they are visible or created, they count under standard pages o If they are not yet visible or created, they count under Hidden Pages Hidden Pages: Other than FAQ/Blog, include only pages intended for future use or required but not visible/created yet Exclude asset-only pages used for functionality (e.g., "First-Last," assistant banners, unused forms) DO NOT COUNT Third-Party Link Pages in the Navigation: Identify pages that link offsite (e.g., financing pages directing users to external platforms) Exclude these pages from the count as they do not require building

Site Link Audit Tool HWP has a powerful new link-checking tool. This will automate and simplify the process of checking internal and external links on Hibu websites. The link checker is accessed by navigating to SEO and Settings > SEO > SEO Overview 

Guidelines for Using White and Black with Recent Colors When designing a site, it’s essential to make strategic use of theme colors for consistent, quick, and efficient design updates. To maximize the flexibility of your site's color palette, we recommend leveraging the locked Recent Colors pure white (#FFFFFF) and pure black (#000000) for foundational design elements, such as text, backgrounds, icons, and other structural components.

Discover how to boost engagement with two key website tools: callouts and coupons. Built with the Swiss Army Widget, these elements help you highlight key information and drive conversions through strategic promotions. Learn the essential differences and best practices for maximizing their impact on your site.

As digital marketing evolves, state privacy laws are becoming increasingly stringent. For businesses working with third-party marketing services, having an up-to-date, compliant privacy policy isn't just good practice—it's essential. Our streamlined process helps clients implement custom privacy policies that meet these requirements while maintaining their website's professional appearance.

A new pre-designed "Left Logo" header section is now available to make it easier to accommodate client requests for left-aligned logos. No need to start from scratch—this ready-made section ensures consistent, high-quality design for desktop views.

Hibu has developed a streamlined process for converting RevLocal microsites to Hibu one-page websites. Their guide covers essential steps including image management, color adaptation, content transfer, and quality assurance. This efficient approach maintains the client's brand identity while leveraging Hibu's platform strengths, ensuring a seamless transition for clients

We've added new forms to make your work easier, including enhanced contact forms and job application fields. Plus, we'll walk you through how to replace your old forms with the new ones in just a few steps.

When customizing the "Why Choose Us" section for certain templates / PBNs, it's important to replace the default frog icon with a check mark. Why Use Check Marks? Check marks are clear and easily recognizable, even at smaller sizes. In contrast, non-check mark icons can be difficult to identify due to their reduced size, which may lead to confusion for users. How to Select the Right Check Mark Open the List Icons Widget: Navigate to the Content tab. Choose Icon: Select the "Choose Icon" option. Search: Enter "check mark" (without quotes) in the search bar. You'll find a wide variety of check marks available. Here's how to select the best one: Opt for Simplicity: Choose check marks that are straightforward and easily identifiable. This includes simple check marks or those contained within a circle, shield, starburst, square, or similar shapes. Avoid Complex Icons: Steer clear of check marks that are overly complicated or integrated into other elements, such as a clipboard, home, car, or tool (like a wrench). These can be harder to recognize. Keep It Varied When updating a site that features the "Why Choose Us" section, it's essential to vary the check marks used. Avoid using the same check mark repeatedly—mix it up to keep the design fresh and engaging. By following these guidelines, you'll ensure that the "Why Choose Us" section is both visually appealing and user-friendly, helping to clearly communicate the key motivating factors to our client's audience.

We're excited to announce a major improvement to our video splash widget. We've replaced the static PNG play icon with a versatile SVG icon. This simple change opens up a world of customization possibilities for your video splash. Why This Matters Flexible Design: Easily adapt the play icon's color, size, and even its overall style to seamlessly integrate with your website's look and feel. Crisp on Any Screen: SVGs are resolution-independent, meaning your play icon will look sharp and clear on everything from high-resolution displays to mobile devices. Brand Consistency: Make sure your video previews reinforce your brand identity by using a play icon that complements your other visual elements. Updating Your Widget: A Quick Guide If you're updating an existing video splash widget, you might encounter a broken link for the old play icon. Click Choose Icon and search for a new "play" icon. Choose an icon that is clear, recognizable, and conveys the action of "play." Remember , the primary goal of a play icon is to signal that your visitors can click to start a video. Choose an icon that's instantly recognizable. Avoid overly complex designs that might confuse your audience.

This post is part of our Website Update Wrap-Up series, showcasing a collection of recent small product and feature improvements.

As a website designer - which includes copy writers offshore designers, DPS , ensuring that a website is polished and professional before handing it off to QA or a client is crucial. Here's a comprehensive checklist to help make sure all essential elements are in place and functioning correctly:

Vibrant Gradients In 2024, vibrant gradients will be a major trend in website design. Gradients are color transitions where one color slowly changes into another. Think of a sunset where the sky shifts from orange to pink. They can make websites look more interesting and lively. Why are gradients so popular? Bright, bold colors are in style right now, and gradients use these colors in creative ways. They can make any website feel deeper and more dynamic. What's great about gradients is that they can fit any brand. You can mix and match colors to create endless combinations. Whether your brand is fun and energetic or elegant and sophisticated, there's a gradient that will work for you. So, if you want your website to look modern and stand out, try using vibrant gradients in your next design project. They can give your site a fresh and stylish look that grabs attention.

Blog Bio Page Build Instructions If Bio page already exists, use that and supplement or update content if necessary (ie - if length is short) If no Bio page exists, follow the steps below: Click on the Pages icon on the left hand side of the platform Click on arrow next to "About" to expand the menu items below Click on the gear icon next to "First Last" (this is the Bio page template) and select "Rename" Rename: Enter the owner's first and last name, along with any relevant titles or prefixes, using the title case format of site (ie - if other pages are all caps in nav, make owner's name all caps) Example - Dr. Regina Phalange, MD

Adding Third-Party Code to Your Website Adding third-party code to your website can enhance its functionality with features such as tracking, chat, and other customizations. This guide will walk you through the steps to safely and effectively add this code to your site without requiring any coding knowledge. Steps to Add Third-Party Code Before making any changes, it is a good idea to use the Site Backup Feature to create a backup of your current site. This ensures you can easily revert to the original version if something goes wrong. Adding code to the Header HTML Header HTML () or Body End HTML () In the left panel of your website editor, click on Settings . Select Head HTML from the options. There are two main sections where you can add the code: Body End HTML : This section is for adding custom HTML or JavaScript just before the closing tag of each page on your site. NOTE: Unless specifically instructed otherwise , all third-party code should be added to the Body End HTML section. This practice is recommended because: Improves Page Load Speed: The main content of the page loads first, enhancing the user experience. Reduces Rendering Delays: Ensures the page's content is visible sooner. Better Browser Performance: Avoids issues like flickering or layout shifts during the page load. Fewer Script Conflicts: Minimizes conflicts with other scripts or styles. NOTE: Don't be concerned if the code doesn't appear to work immediately after you add it. Often, the code will function only after you republish. Head HTML : This section is for adding content to the head section of your site. It's uncommon to add code to this section. Always add it to Body End first. If the code still doesn't work after republishing, then add it to Head HTML.  Once you've added the code, click Save . Adding Comment Tags When adding third-party code, it is helpful to include comment tags to indicate where the code starts and ends. This improves readability and makes future maintenance easier. An HTML comment tag consists of three components: Opening tag:3rd-party code Closing tag:Here’s how to do it: In Head HTML or Body End HTML add empty rows betweenand the code that immediately follows it. Enter(ex) On next line enter the code On next line enter(ex) NOTE: It it's necessary to add comment tags when adding code via the HTML Widget.

Divider Widget The Divider widget’s layout library has been reramped and it now includes 6 new and sleek design styles for you to choose from. Here they are: 

Why "Learn More" May Not Be Your Best Option Buttons play a crucial role in guiding users through a website, serving as key touch points for interaction and engagement. In the context of callout or copy block buttons, their purpose extends beyond mere navigation—they act as invitations to explore, discover, and take action. The button text must therefore be carefully crafted to align with the surrounding content and the user's expectations. “While "Learn More" is a common choice and often the most logical option when the copy block or call-out is specific to a product or service , it can sometimes fall short in providing the specific guidance and motivation needed to drive deeper engagement – especially for out or norm pages.” Here’s why "Learn More" may not always be the best option and what to consider instead: Menu Information: "View Menu" Contact Page: "Contact Us" Event Registration: "Register Now" Request a Free Estimate: "Request Now" Product Features: "Explore Features" Case Studies: "Read Case Study" Testimonials: "Read Testimonials" Career Opportunities: "View Job Openings" Blog Posts: "Read Article(s)" Special Offers: "View Offers/Specials/Discounts, etc" Membership Information: "Join Now" Course Enrollment: "Enroll Today" Demo Request : "Request Demo" Newsletter Signup: "Subscribe Now" Downloadable Content: "Download Guide" Project Gallery: "View Projects" Virtual Tour: "Take a Tour" FAQs: "Read FAQs" These alternatives are merely suggestions that can provide clearer, more specific calls to action, aligning better with the user's intentions and the context of the surrounding content. Implementing these suggestions can enhance both usability and engagement.

Overview The Before/After image widget allows you to present two images in a dynamic and interactive manner, using a customizable slider to seamlessly transition between the two. This can create a compelling visual comparison that engages users. Why You Might Not Want to Use the Before/After Image Widget: Mismatch in Image Quality or Angles: If the "Before" and "After" pictures were not taken from the same angle, or if there's a significant difference in lighting, quality, or resolution between the two images, the slider effect might emphasize these inconsistencies rather than the intended changes. Text Labels in Images: If the images already have "Before" and "After" labels or other text overlays, using a slider can create visual clutter and make it difficult for users to focus on the actual differences. If the images are well-matched and free of text, the designer is free to use the widget to create an engaging visual comparison.

Icon Widget Library The Icon Widget Library has been upgraded and now includes over 5 million icons! This means designers can find icons for virtually anything they think of, thus eliminating the need to search for and convert vector files into SVG format. If designers can't find the desired icon, they can upload their own icon SVG files and easily access and reuse these icons throughout the site-building process. Uploaded icons are categorized as either Site Icons or Free Icons, distinguishing between assets uploaded by users and those already available in the library. Icons typically come in two main styles: outlined or filled. Consistency is crucial, so designers should refrain from mixing outlined icons with filled-in ones. It's best to use only one style of icons throughout the entire site. If designers choose filled-in icons, they should make sure that template sections and widget default icons are adjusted accordingly to maintain consistency. Furthermore, designers are encouraged to replace template and widget placeholder icons with those that align with the vertical, callout, or offer. For example, using a coupon icon solely because it's a coupon may not be necessary—choose icons that best reflect the content or function they represent.

Tabs Widget The Tabs widget serves as a valuable tool for organizing and presenting content efficiently on websites. With Tabs, visitors can seamlessly navigate between different sections of related content by clicking on designated tabs, streamlining the browsing experience without the need for extensive scrolling. Tabs offer an elegant solution for showcasing various types of content such as Services, Plans, or Team members, presenting information in neatly organized sections while conserving space and maintaining a clean layout. While the product preference leans towards displaying content through copy blocks or unique rows for improved accessibility and SEO, there may be specific scenarios where the Tabs widget proves beneficial. In instances where clients insist on integrating a Tabs widget into their Hibu Site, a set of instructions, rules, guidelines, and considerations have been outlined to ensure its effective utilization.

Sections → Icons / Logos Many clients wish to display a row or grid of brand logos or accreditation / affiliation badges on their website. This guide will provide instructions and tips on how to integrate the hWP "icons-logos" section to achieve this. Begin by inserting the section into the preferred area on the page, usually positioned above the footer, following the usual procedure. You can find these sections conveniently located in the Sections→Brand Logos/Awards/Badges folder. Designers have the flexibility to replace the PBN logo row with any of the six pre-designed sections available. Furthermore, they have the liberty to customize background colors as per their preference.

Optimizing Logo Design When dealing with a transparent header where you have the freedom to incorporate a text-based logo, executing it with a white version for the main header and a colored version for internal pages is a fantastic strategy. This approach ensures consistency and enhances the visual appeal of your website. Similarly, if you happen to receive multiple versions of a logo, including one in all white, you can definitely apply the same principle. Utilize the white version for the transparent header to maintain a clean and elegant look, while employing the colored version for internal pages to inject vibrancy and personality into your design. By adopting this approach, you not only maintain a cohesive branding identity but also ensure flexibility and versatility in your website's visual presentation. It's a win-win solution that enhances both aesthetics and functionality, catering to the needs of both your design and branding requirements.

Elements to Bold for Enhanced Web Design Headlines that are two or three lines deep can create a tricky problem -- line breaks, or the place where one line ends and another begins. Avoid bad breaks caused by dangling verbs, adjectives or propositions. Review all heads and subheads and to make manual line "breaks for sense." Breaking for sense means breaking a line where one might logically pause when reading it aloud. When breaking for sense, strive to: Keep important phrases together Avoid hyphenations Break a line after punctuation Pair adjectives with their nouns Keep proper names together  Group color and typestyles together

When Too Much White Space is Too Much White space, often referred to as negative space, plays a crucial role in website design for several reasons. It's not just empty, unused space; it's a powerful element that helps to create a more refined and professional look. Here's why white space is beneficial: Clarity and Readability: White space makes content more legible by reducing visual clutter. This helps users to focus on the text, making it easier to read and understand. Think of it as giving your content room to breathe, which in turn makes the visitor's experience more pleasant. Attention and Focus: By strategically using white space around important elements such as call-to-action buttons or key messages, you can guide the viewer's attention to those areas. This selective use of space can significantly improve the effectiveness of your website's communication. Overall Aesthetic: A clean and uncluttered layout conveys a sense of professionalism and elegance. Websites that effectively utilize white space often appear more thoughtful and deliberate in their design, which reflects positively on the brand's image. However, like all good things, too much white space can have its drawbacks. Overuse of white space might: Create a Disconnect: Excessive space between elements can disrupt the flow of information, making it harder for users to navigate the site or understand how elements relate to each other. Appear Unfinished: An overly sparse design might give the impression that the website is incomplete or lacking in content, which can undermine the trust and confidence of visitors. Reduce Engagement: If users have to scroll excessively or can't easily find what they're looking for due to the vastness of the layout, they may become frustrated and leave the site. The key is finding a balance. Effective web design uses white space to enhance usability and aesthetics without compromising the site's functionality or the user's experience. A seasoned designer knows how to strike this balance, creating spaces that are both beautiful and functional.

Text Span Width on Desktop For optimal readability on desktop screens, it's generally recommended that the maximum width text should span is about 60 to 75 characters per line, including spaces and punctuation. This guideline is rooted in typographic research, which suggests that lines of this length are most comfortable for the human eye to follow without straining. When translated into web design terms, this typically equates to a width of around 900 pixels, depending on the font size and typeface used. To effortlessly alter the width of your text on the screen, you can adjust the text container directly . Just click on the text box and drag the handle at the bottom right corner to modify the width. As you make adjustments, keep an eye on the height and width indicators. Aim for a width of approximately 900 pixels, though a variation of plus or minus 10 pixels is perfectly fine. This method offers a simple way to ensure your text spans an optimal width for readability.

Background Overlay Background overlays are employed to improve text readability on top of background images, ensuring that the message is clear and legible. However, an overlay might be too dark if it adversely affects the user interface or the overall design. Consider the following when evaluating the darkness of an overlay: Text Legibility: If the text is difficult to read against the overlay, suggesting that contrast is insufficient, then the overlay may be too dark. Design Balance: An effective overlay complements the content; it should not be so dominant that it becomes the main focus unless intentionally designed that way. Visibility of Background: The overlay should be light enough that the background image is discernible. If the image details are lost, the overlay is too dark, defeating the purpose of using an image instead of a solid color background. An overlay should strike the right balance, providing sufficient contrast for legibility while still allowing the background image to support the design narrative. If the overlay obscures the image to the point where its presence becomes irrelevant, adjusting the darkness or considering a different design approach might be necessary.

The Importance of Pixel-Perfect Header Alignment Ensuring a consistent user experience on a website means header elements like the geo-location, phone number, reviews widget, and logo must align perfectly across all pages. This prevents any disruptive 'jumping' of elements as users navigate from the homepage to internal pages. Precise alignment of these elements not only upholds a professional appearance but also reinforces user trust by providing a smooth, predictable browsing experience. Consistent positioning of the logo, for example, reaffirms the user's confidence in the brand with every click. In short, pixel-perfect header elements are crucial for seamless navigation, maintaining user engagement, and showcasing a commitment to quality in web design. This attention to detail reflects positively on the brand's reliability and professionalism.

Logo Quality Enhancing a client's logo quality is crucial for a professional image and effective brand presentation on their website. A high-quality logo creates a positive first impression, essential for website credibility, and ensures brand consistency across platforms. Assess the quality of the logo — does it appear pixelated or blurred? If so: Confirm if the logo's dimensions on the page exceed its intended height and width. Verify if a higher-resolution logo is available for use: Search for a High-Quality Logo: Conduct a Google Image search using the name of the business (NOB) or "NOB logo" to locate a better-quality version of the logo. Use the "Tools" under the Google search bar, then "Size," and select "Large" to filter for high-resolution images. Evaluate Available Logos: Compare any logos you find with the one provided by the client, ensuring they match in style, color, fonts, and overall design. Only choose a logo that is identical to the one provided. Handling Additional Elements: If the high-quality logo includes additional elements not part of the original logo (like a phone number or tagline), see if these can be easily cropped out without compromising the logo’s integrity. Use graphic design software for precise cropping. Replace the Logo on the Website: Update the website with the new, high-quality logo, ensuring it aligns with the site’s design standards. Replace both the main and mobile versions of the logo to maintain consistency across all devices. By following these steps, you can enhance the client's website design, contributing positively to their brand's online presence. 

Choosing the Right Color for Review Stars When selecting a color for review stars on a website, it is important to adhere to specific guidelines to ensure visual consistency and effectiveness. The primary color choice for review stars should be variations of yellow, as this is generally the default and most suitable option. Default Color Choice: Variations of yellow, such as gold, should be used as the default color for review stars. This choice aligns with the common practice of using vibrant and attention-grabbing colors that stand out against most backgrounds, contributing to a cohesive and polished appearance. Alternative Color Choices: Designers have the option to use variations of blue or green for review stars, but only if these colors are present in the client’s brand palette. If yellow is not an option or if there are specific brand guidelines that include blue or green, these colors can be used. However, blue and green should only be selected if they are part of the client's established brand colors. Colors to Avoid: To maintain the effectiveness and visibility of review stars, avoid using the following colors: Pale Tones: These can lack sufficient contrast and pose accessibility issues. Colors Close to the Row Background: Such colors may not draw adequate attention to the review stars. Psychology of Star Colors: Understanding the psychology behind star colors can help in making informed decisions. According to a December 2021 survey by ReviewInc, blue stars were the most trusted, with 28.4% of U.S. consumers preferring them. Blue’s association with security and permanence contributes to its positive perception. Green stars were preferred by 25.8%, while yellow stars were chosen by 25%. Red stars were least favored at 11.6%, and orange stars had an even lower preference at 9.3%. Men generally trust yellow stars more, whereas women show a preference for red stars. Despite this, yellow, blue, and green remain the most reliable choices for review stars based on overall trust and visibility. Conclusion: For review stars, use variations of yellow as the default color to align with common practices and ensure design consistency. Variations of blue and green are acceptable only if they are part of the client’s brand colors. Avoid colors that may be perceived negatively or that lack visibility. Adhering to these guidelines will contribute to a positive online presence and enhance the overall effectiveness of review ratings.