Design Audit: mayankkhera.com

Date: January 17, 2025
Auditor: AI Design Review
Site Status: Jekyll site using Minimal Mistakes theme (dirt skin)

Design approach: Keep as much as possible from the theme out of the box. Custom overrides have been removed so the site uses theme defaults for layout, footer, page titles, and typography.

Executive Summary

Your site has a clean, minimal foundation with good content organization. However, there are several areas where design consistency, user experience, and visual polish can be significantly improved. The main issues center around inconsistent styling, accessibility concerns, and opportunities to better showcase your work.

Overall Grade: B- (Good foundation, needs refinement)

1. Visual Design & Aesthetics

✅ Strengths

⚠️ Issues & Recommendations

1.1 Inconsistent Styling Approach

Problem: Heavy use of inline styles mixed with theme styles creates inconsistency.

Examples:

Impact:

Recommendation:

1.2 Typography Hierarchy

Problem: Page titles are hidden globally (page__title { display: none; }), which hurts navigation and SEO.

Current Code:

.page__title, .archive__item-title {
  display: none;
}

Impact:

Recommendation:

Problem: Footer is hidden globally with !important, removing potential navigation and social links.

Current Code:

.page__footer {
  display: none !important;
}

Recommendation:

1.4 Color Consistency

Problem: Hardcoded colors (#007acc, #f9f9fb, #eee) don’t match theme variables.

Recommendation:

2. User Experience & Navigation

✅ Strengths

⚠️ Issues & Recommendations

2.1 Homepage Content

Problem: Homepage (index.html) is nearly empty - just a hero image with no content.

Current State:

Recommendation:

2.2 About Page Layout

Problem: Image floats right, which can cause issues on mobile and creates awkward text flow.

Current Code:

<img src="..." style="float: right; ...">

Issues:

Recommendation:

Problem: Links use inline styles with hardcoded colors instead of theme styles.

Recommendation:

2.4 Missing Search Functionality

Problem: Search is disabled in config (search: false).

Recommendation:

2.5 Resources Page Structure

Problem: Resources page uses plain markdown lists - could be more visually engaging.

Recommendation:

3. Content Structure & Readability

✅ Strengths

⚠️ Issues & Recommendations

3.1 Missing Meta Information

Problem: Some pages lack proper front matter (e.g., resources.md has empty title).

Example:

title: " "  # Empty title

Impact:

Recommendation:

3.2 Readwise Page

Problem: Very basic list presentation - could be more engaging.

Current:

Recommendation:

3.3 Blog Post Formatting

Problem: Posts lack visual hierarchy and engaging elements.

Recommendation:

3.4 404 Page

Problem: Very basic 404 page with no helpful navigation.

Recommendation:

4. Responsive Design

⚠️ Issues & Recommendations

4.1 Inline Styles Break Responsiveness

Problem: Fixed widths and margins in inline styles don’t adapt to screen sizes.

Example:

<div style="max-width: 750px; margin: 0 auto; padding: 2rem 1rem;">

Recommendation:

4.2 Image Sizing

Problem: Fixed image dimensions may not work well on all devices.

Recommendation:

5. Accessibility

⚠️ Critical Issues

5.1 Missing Alt Text Context

Problem: Images may have alt text but context could be improved.

Recommendation:

5.2 Hidden Content

Problem: Hidden page titles hurt screen reader users.

Recommendation:

5.3 Color Contrast

Problem: Need to verify color contrast meets WCAG AA standards.

Recommendation:

5.4 Keyboard Navigation

Recommendation:

6. Performance

⚠️ Recommendations

6.1 Image Optimization

Problem: No evidence of image optimization.

Recommendation:

6.2 Font Loading

Problem: Loading multiple Google Fonts may impact performance.

Current:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Merriweather:400,400i,700,700i|Inconsolata:400,700" rel="stylesheet">

Recommendation:

6.3 CSS Organization

Problem: Custom styles mixed with theme styles.

Recommendation:

7. Branding & Consistency

⚠️ Issues

7.1 Inconsistent Styling

Problem: Mix of inline styles, theme styles, and custom CSS creates inconsistency.

Recommendation:

Problem: Social links in config but not visible (footer hidden).

Recommendation:

7.3 Author Profile

Problem: Author profile shown inconsistently across pages.

Recommendation:

8. Specific Technical Issues

8.1 Typo in About Page

Issue: “food deliver” should be “food delivery”

Location: _pages/about.md line 14

8.2 Empty Portfolio Page

Issue: Portfolio page exists but is empty

Recommendation: Either add content or remove from navigation

Recommendation: Verify all internal links work (e.g., /resource-head-page/ vs /resources/)

8.4 Missing Favicon

Recommendation: Add favicon for better branding

Priority Recommendations

🔴 High Priority

  1. Remove inline styles - Move to CSS classes
  2. Show page titles - Fix accessibility and SEO
  3. Add homepage content - Engage visitors immediately
  4. Fix responsive design - Test and fix mobile layouts
  5. Enable search - Improve navigation

🟡 Medium Priority

  1. Improve About page layout - Better responsive design
  2. Enhance Readwise page - Add images and descriptions
  3. Optimize images - Improve performance
  4. Add social links - Make them visible
  5. Improve 404 page - Add helpful navigation

🟢 Low Priority

  1. Create style guide - Document design system
  2. Add favicon - Branding polish
  3. Enhance blog post formatting - Better visual hierarchy
  4. Add meta descriptions - SEO improvement

Quick Wins

  1. Fix typo: “food deliver” → “food delivery”
  2. Add proper page titles to all pages
  3. Remove display: none from page titles (or use sr-only)
  4. Show footer on most pages
  5. Add homepage introduction text
  6. Enable search functionality

Next Steps

  1. Review this audit and prioritize fixes
  2. Create a design system document
  3. Refactor inline styles to CSS classes
  4. Test responsive design on multiple devices
  5. Run accessibility audit with tools like WAVE or axe
  6. Performance audit with Lighthouse
  7. User testing - Get feedback from real users

Tools for Testing

This audit was conducted by reviewing code, configuration files, and site structure. For a complete assessment, visual inspection of the live site and user testing would be beneficial.