• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » Food Blog Design and Appearance

    Horizontal scrolling

    Published: Mar 7, 2022 · Modified: Mar 18, 2022 by Skylar · Leave a Comment

    We do not recommend horizontal scrolling.

    This basically amounts to a slider, which are a poor user experience and Yoast thinks sliders should be banned.

    We agree.

    Jump to:
    • Mobile
    • DOM nodes
    • Pagespeed
    • Design principle
    • Accessibility

    Mobile

    Horizontal scrolling seems to be a good concept for mobile, allowing you to cram in more things into the page, but it fails in a major mobile-first way.

    There is already a widely accepted user-first experience for displaying additional items: vertical scrolling. This is how ever site and mobile app behaves, and how your site should behave as well.

    DOM nodes

    Each item hidden horizontally off-screen still adds DOM nodes to the page, which contribute to the "Avoid an excessive DOM size" pagespeed warning:

    avoid an excessive dom nodes warning in Google's pagespeed insights

    Pagespeed

    In addition to adding DOM nodes that aren't immediately visible to the user, the browser has to run through your CSS and calculate which items to display and not display.

    It has to spend time calculating and rendering these items, even though they're not visible. This contributes to the "Minimize main-thread work" warning in pagespeed insights:

    minimize main thread work warning in Google's pagespeed insights

    Design principle

    In general, anything that isn't important enough to be statically displayed (eg. sliders, carousels), isn't important enough to be on the page at all.

    This means that if you have 12 items that you want to cram into a 4-item width, those last 4 items shouldn't even be on the page.

    If they are important enough to be on the page, then they should be static on the page and always visible without requiring user interaction.

    Accessibility

    While a sighted user can simply skip over the 4 elements visible on screen if it's not what they're looking for, an accessible user with a keyword or screen reader has to navigate over each of the 12 items in order to get past it.

    Image taking 12 times longer to get through a section of the website that you're not even interested in.

    This creates a worse user experience for accessible users.

    More

    • Subscribe button
    • Favicon
    • FSRI Block
    • Design

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.