Color Strategy and User Experience
When a website first lands in front of a visitor, the first thing that grabs attention is the color palette. For TheFeltSource.com the initial impression leans heavily toward pastel blues and yellows, a choice that feels inviting to the target market of crafters and hobbyists. Yet, the application of those hues is inconsistent, and that inconsistency erodes the visual hierarchy that users rely on to quickly locate the content they need.
The core issue lies in the absence of a clear color coding system. Links, headings, call‑to‑action buttons, and even background accents should serve a purpose beyond decoration. In a well‑structured site, every color shift signals a change in context: perhaps a navigation link turns bright orange to indicate the current page, or a red button signals a critical action. TheFeltSource’s design does not follow such conventions. As a result, a user scrolling down a page filled with overlapping colors can’t distinguish between interactive elements and decorative ones, which creates cognitive overload.
Beyond functional color cues, visual harmony matters. The design currently mixes pastel shades with saturated neon accents on the same page. This clash of temperaments is distracting and strains the eyes, especially on lower‑resolution displays. A more effective strategy would be to narrow the palette to no more than three dominant colors - perhaps a muted teal, a soft amber, and a neutral gray. Each of these could be used in different roles: one for background, one for primary buttons, and one for highlights.
Consistency also extends to saturation and brightness. The website sometimes applies a very light background color to a section that contains dark text, creating a subtle but unsettling contrast. Adjusting the text color to a darker tone in those areas would improve legibility without changing the overall aesthetic. Additionally, the use of color on images, especially product shots with embedded text, should be evaluated. Often the background of an image is altered with a color overlay to match the page’s scheme, but when the overlay does not match the brand’s primary colors it feels like a broken link between design and commerce.
Beyond the visual experience, the color choices have direct implications for accessibility. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Many of the pastel combinations on the site fall below that threshold, which could make content unreadable for users with visual impairments. A quick color contrast check can reveal problematic areas; a small adjustment, such as darkening the text or lightening the background, can bring the site into compliance and broaden its audience.
Finally, color consistency aids brand recognition. A single, recognizable palette that appears across product images, the header, the footer, and marketing materials builds trust. Customers who return to the site or see an advertisement can instantly identify the brand, which strengthens loyalty. TheFeltSource’s current design, however, makes the brand feel fragmented. Streamlining the color usage would create a more cohesive experience that encourages repeated visits and higher conversion rates.
In short, color on TheFeltSource.com is a powerful tool that is under‑utilized. By simplifying the palette, enforcing consistent usage, ensuring sufficient contrast, and aligning with brand identity, the site can transform visual appeal into a competitive advantage.
Typography Choices and Readability
Typography may seem like a minor element in web design, but the way text is presented can either invite readers or push them away. TheFeltSource’s current approach features a sprawling array of fonts and sizes that dilute readability and weaken brand cohesion.
The design uses more than five different typefaces, ranging from playful script fonts to sharp sans‑serifs. Each font appears in several weights, and the selection of sizes shifts dramatically across the site. When users scan a page, they expect a predictable structure: headings stand out, body text is easy on the eyes, and calls to action are immediately noticeable. The current arrangement muddles that expectation, forcing users to decipher which elements are meant to be read, which are decorative, and which are interactive.
One effective solution is to reduce the font family count to two or three. A common practice is to pair a clean sans‑serif for body text with a distinct serif or display font for headings. For example, using Montserrat for body text and Playfair Display for titles would provide contrast without visual chaos. Maintaining this pairing across every page would give the site a polished look.
Font sizes also need standardization. A typical hierarchy might involve five levels: h1 at 36px, h2 at 28px, h3 at 22px, paragraph text at 16px, and footnote text at 12px. This structure helps users quickly differentiate content. TheFeltSource currently mixes 12px headings with 22px body text in some sections, which defeats the purpose of a hierarchy. Consistent sizing also ensures that mobile users can comfortably read the content without excessive zooming.
Weight and style should reinforce this hierarchy. For instance, bolding all h1 and h2 titles gives them immediate prominence, while keeping body text regular weight keeps the page light. Italics can be reserved for quotes or product descriptions. Avoid using decorative fonts for large bodies of text; these are hard to read and may slow down page rendering on older browsers.
Line spacing, or leading, is another often overlooked factor. The current design uses tight line spacing for body paragraphs, making reading feel cramped. A 1.5x line height for 16px text is typically comfortable for most users. Adequate spacing reduces eye strain and improves comprehension.
Color also plays a role in typography. While the overall color scheme has its issues, within the typographic system, consistent use of color for headings and links further enhances readability. For example, setting all links to a consistent blue that stands out from the text, and keeping hover states visible, helps users navigate more effectively.
Lastly, font rendering quality should be considered. Many browsers use subpixel rendering to smooth fonts; however, if a font is used at an odd size, it may appear blurry. Selecting web‑optimized fonts from services like Google Fonts or Adobe Fonts ensures that they are rendered consistently across devices and browsers.
By trimming the font family count, enforcing a clear size hierarchy, using consistent weights and line heights, and selecting web‑friendly fonts, TheFeltSource can improve readability, strengthen its visual brand, and ultimately keep visitors engaged longer.
Visual Content, Images, and Performance
High‑quality product imagery is the heart of any craft‑focused e‑commerce site. Yet, the current presentation at TheFeltSource feels overloaded with graphics, many of which do not serve a functional purpose and instead add weight to the page load time.
The main page is a visual collage featuring dozens of product thumbnails, banner images, and decorative overlays. While variety can showcase breadth, the sheer volume overwhelms the visitor. When every corner of a page is filled with an image, the eye struggles to locate the product that is actually for sale. This problem is compounded by the fact that many of these images include text, which competes with link color for visual attention.
Reducing the number of images on the landing page to a focused hero section, a handful of featured products, and a short slideshow would keep the user’s focus on key items. Images that merely fill space could be replaced with concise text links that describe the categories or best‑sellers. If imagery must be used, each should have a clear purpose: to highlight a new product, to illustrate a crafting technique, or to convey a seasonal theme.
Beyond visual clutter, performance is a real concern. The current page loads around 300KB of data, which is heavy for a 56k modem and can take a minute on a slow connection. Even on modern broadband, the page takes longer than average to fully render. This delay can frustrate users and increase bounce rates. Optimizing images for the web is essential: compressing JPEGs to 70–80% quality, using PNG for images with transparent backgrounds, and employing modern formats like WebP can cut file sizes dramatically.
Lazy loading is another technique that can improve perceived performance. By deferring the loading of images that are not immediately visible, the browser can render the visible content faster. Many modern frameworks support lazy loading natively, and a simple JavaScript implementation can bring noticeable gains.
Alt text should not be overlooked. Every image should have descriptive alt attributes for screen readers and SEO. TheFeltSource’s current alt text is often generic or missing entirely, which hurts accessibility and search engine visibility. Adding concise alt tags that include product names or descriptions can help both visually impaired users and search engines understand the content.
Image placement should also respect responsive design principles. On mobile, images that are too wide can break the layout or force horizontal scrolling. Setting images to a maximum width of 100% of their container ensures they scale gracefully across devices.
When product images do appear, they should have a consistent style: clean background, centered focus, and uniform resolution. This uniformity not only looks professional but also speeds up rendering because the browser can cache image dimensions. Using a dedicated product image service that handles resizing and optimization on the fly (for example, Cloudinary or Imgix) can simplify the workflow and reduce load on the primary web server.
Finally, the redundancy of repeating the same “felt kids” image twice on the home page is a clear design flaw. Duplicate content confuses the user and can be flagged by search engines as low quality. Removing or replacing one instance with a different image that showcases another product line would improve variety and relevance.
By tightening the image selection, compressing files, implementing lazy loading, and ensuring responsive behavior, TheFeltSource can deliver a cleaner, faster, and more accessible experience that aligns with user expectations and modern web standards.
Navigation, Sitemap, and User Flow
Effective navigation is the backbone of any e‑commerce platform. For TheFeltSource, the primary navigation structure exists but feels unintuitive and difficult to explore, especially for users who rely on the sitemap for direction.
The top navigation bar uses stacked links that read like a sentence: “Shop All • New Arrivals • Featured Crafts • Store Locator.” While the idea of grouping items in a sentence is creative, it is not how most users interpret navigation. Typically, users look for a straightforward menu with distinct categories. The current layout makes it hard to quickly discern where each link leads, and the visual separation between items is minimal, causing a visual merge.
Rearranging the navigation into clearly labeled categories would improve usability. A two‑tier menu with primary items such as “Products,” “How to,” “Inspiration,” and “Contact” provides a predictable path. Each primary item could reveal a dropdown with subcategories. For instance, “Products” might list “Felt Shapes,” “Felt Kits,” “Accessories,” and “Custom Orders.” This hierarchy gives users a clear roadmap and reduces the cognitive load of guessing where to click.
In addition, the site’s current back‑to‑top links are non‑functional, which frustrates users who scroll down long pages. Implementing smooth scroll or anchor tags that return to the top of the page would restore this common navigation aid and improve the overall experience.
The sitemap, which is the most effective page for navigation, is a valuable asset. However, its placement on the bottom of the page may make it less visible to users who are only on the home page. Moving the sitemap to a prominent footer area and providing a link in the header can make it easier to find. In addition, each link in the sitemap should point to a meaningful page, not just a placeholder or duplicate of the same content.
Product discovery is another critical area. The current design places product images within a cluttered grid, but does not provide a robust search experience or filter options. Adding a search bar that supports autocomplete and category suggestions would let users quickly find what they need. Filters for size, color, and price can also reduce the number of clicks required to find a product.
On the technical side, navigation should be built with semantic HTML elements (nav, ul, li) and ARIA labels where necessary. This approach improves accessibility for screen readers and enhances SEO by providing a clear outline of the site’s structure.
Finally, mobile navigation is often overlooked. A hamburger menu can collapse the navigation for small screens, but it should remain intuitive. Tapping the hamburger icon should reveal a vertical list of categories with clear spacing. The mobile menu should also preserve the dropdown hierarchy so that users can drill down into subcategories without confusion.
By refining the main navigation, improving the sitemap’s visibility, adding functional back‑to‑top links, and enhancing search and filter capabilities, TheFeltSource can make the shopping journey smoother and encourage customers to spend more time exploring the site.
Cross‑Browser Compatibility and Accessibility
In today’s fragmented web environment, a website’s ability to render correctly across browsers and devices is essential. TheFeltSource’s current implementation works flawlessly in Internet Explorer 6, but falls short in other modern browsers such as Safari and potentially older Netscape versions.
Safari’s layout issues, where page spacing becomes disfigured and links appear with unintended paragraph breaks, indicate that CSS is not being applied consistently. This is likely due to vendor‑specific prefixes or older layout techniques that have since been deprecated. Updating the stylesheet to use modern CSS3 features, removing outdated floats, and ensuring that elements are styled with relative units (em, rem) rather than absolute pixels can resolve these inconsistencies.
Testing on legacy browsers, while perhaps not critical for the target audience, is still worth addressing. If the site is meant to be accessible to users who still rely on Netscape 4.7 or other early browsers, the markup should avoid modern HTML5 elements that those browsers cannot interpret. In practice, most users no longer use such old software, but having a graceful degradation strategy is prudent.
Accessibility extends beyond browser quirks. TheFeltSource currently lacks sufficient semantic markup. For example, product titles should be wrapped in h1 or h2 tags, and descriptive alt attributes should accompany every image. These small adjustments can make a huge difference for screen reader users. Additionally, ensuring that color contrast meets WCAG standards is critical for those with visual impairments.
Keyboard navigation is another accessibility requirement. The current navigation design does not indicate focus styles, meaning users who rely on the Tab key cannot easily track where they are on the page. Adding visible focus outlines or custom styles will help these users navigate the site more effectively.
Responsive design is also a key factor. The FittedSource layout should collapse gracefully on devices ranging from phones to large desktops. Media queries that adjust font sizes, image scaling, and navigation layout will maintain usability across screen sizes.
Testing frameworks such as BrowserStack or Sauce Labs allow developers to preview how the site looks on a wide range of browsers and devices without needing physical hardware. Running automated accessibility audits (e.g., axe, Lighthouse) can highlight issues early in the development cycle.
By systematically addressing these compatibility and accessibility concerns - updating CSS for modern browsers, adding semantic markup, improving color contrast, ensuring keyboard navigation, and implementing responsive design - TheFeltSource will offer a consistent, inclusive experience to all visitors.
Jacob Weaver
Webmaster – Capitol District Law Offices
editors@www.murdok.org
No comments yet. Be the first to comment!