Why make this update?

Currently the way we allow “hiding” content for rows, blocks, and columns have always been through adding a class to the HTML element, and then we style that class and make that respective element visually hidden from the user (depending on which option was selected i.e. hide on mobile or hide on desktop).

Handling the hidden content this way is not optimal as far as performance goes. This is because when you are visually hiding an element with just CSS, the element still gets rendered in the DOM (document object module) therefore the browser still needs to render these elements that may never be visually accessible to a frontend user.

Moving forward, we are now able to determine which elements are suppose to appear on desktop & mobile and can handle this on the backend. If a site decides to hide a block, row or column then we can intercept this and decide whether or not that block should ever get rendered on the frontend at all.

Making this change should make a huge difference in load speeds and overall performance of a site (especially if that site has a lot of hidden elements that get rendered via desktop/mobile). We ran a test to gather some data of the benefits of this change here.

What changes will you see?

Besides decreased page load times, there shouldn’t be many noticeable differences on your web pages. For the most part, your content should appear on mobile or desktop devices as set on the rows, columns, and blocks. But here are some more details about different scenarios:

While you are logged into your FH Site

This feature does not apply to your front end while you’re logged into wordpress (you can tell if you’re logged in by the admin bar at the top of the screen). This means all content renders, and you won’t see speed improvements while logged in, so that you can still see what your site will look like at any width in your desktop browser. Feel free to increase and decrease your screen size to see what your mobile site will look like and to build your site responsively!

While logged out and visitors on desktop

When you are logged out on a desktop device, only desktop content will be added to the page, instead of hiding mobile content with CSS. This means that you can resize your browser window to as large or as small as you want, but you will still only see the desktop layout since you are still viewing from a desktop device. All mobile and responsive styles still apply, so your desktop layout will still look good on small desktop screens. It is important to note, however, that a visitor to your site that is using a desktop device will never see blocks or rows that have been set to ‘hidden on desktop.’

While logged out and visitors on mobile

When you are logged out on a mobile device, you will only see mobile content, and no content that is ‘hidden on mobile’ will be added to the page. This includes any device defined as mobile, no matter the pixel density or the orientation of the device, so a phone held horizontally may have a much larger pixel width, but would still see mobile content only. Knowing that most internet traffic happens on mobile devices, it is safe to assume that this will be the most common scenario for your site visitors, so make sure to include all important information on mobile layouts, and check mobile devices for good design and accessibility!