SiteFarm Redesign Overview

The life cycle of user stories for development. Photo credit to Gerd Altmann on Pixabay.com

Beginning March 22, 2021 we will be giving SiteFarm users with live, published sites the opportunity for a sneak peek at how their site will look in the new design. Copies of the live sites will be added to our Dev server environment and, via email in our SiteFarm mailing list (please subscribe to receive updates if you haven't already!), we'll provide the URL to access your site(s).

This overview is intended to give you a roadmap to the changes to be implemented in the redesign. What you see in the Dev environment at this time is not necessarily the final version to be implemented between now and our tentatively forecasted deployment date of late April or early May. The list of new, changed, or deprecated elements is presented below and will be updated between now and a week before our launch date when announced.

 

What’s with everything looking so… Big?

The old way

The old design had a very interesting problem in that the design had a tendency to not look so great at different screen sizes. This was problematic for editors creating layouts that looked good for them on their specific screen without realizing that it was creating an unpleasant experience for others with different screen sizes. For example, when looking at the current design with a screen size of 1100px vs a 4K screen, there can be a stark difference in readability.

Before, to make sure that layouts and designs worked well for everyone, the editor would have to remember to shrink and grow their browser window to see how things looked at other screen sizes and try to adjust accordingly. This is tedious, error-prone, and honestly… who remembers to do this?

The old design gave many editors a false sense of security in thinking that their site looked good when many people received a very different and unpleasant experience.

A better way

The new design seeks to make layouts and sizing predictable and consistent across the majority of screen widths. So what you see at 1100px should be very similar to what someone on a 4K screen sees. This is accomplished by progressively scaling the size of fonts and spacings relative to the screen width.

So now, if your site looks good, it likely looks good for everyone. However, if it looks bad, now you know and something can be done about it. That’s actually a good thing! You get instant feedback about whether a design or layout decision on your site is actually going to work or not.

Your visitors are much more likely to see the same thing you do.

What can I do to prepare my current site before the new redesign is launched?

Design at 1100px

Try looking at your site at a width of 1100 pixels. If unsure about how to do that, try making the browser window small so that the mobile menu appears. Now slowly stretch the browser's width until the mobile menu disappears and the horizontal menu appears.

If the site looks good at this point, then you’re probably in decent shape for when the redesign launches. The new design essentially grows everything from this point on.

Adjust your layouts and blocks so that everything looks decent at this small screen size. 

Use fewer columns

Large screens make it tempting to use 3 and 4 columns. However, text becomes very difficult to read on smaller screens when having this many columns. Try reducing the number of columns to 2.

Also, ensure that paragraph text has sufficient horizontal space so that as that horizontal space reduces, the text doesn’t get squished into 2 or 3 words per line.

Try to limit the use of 3+ columns to when those columns are all the same width and span the width of the page. Content that is all similar looks best in this layout such as 3 Marketing Highlights.

  • Avoid using too many columns
    Limit the use of 3+ columns
  • Minimal use of columns is ideal
    Limit to 2-3 columns

Try thinking about content vertically

Rather than putting all your content on the same horizontal line. Place your content in a vertical alignment. Visitors are used to scrolling vertically and it is very natural. Your site has unlimited vertical space, but it is very limited horizontally.

Consider using concise Title and Menu text

It’s tempting to shove 12 words into a title or menu link. Think about if there is a shorter way to say the same thing. This actually helps your visitors who are used to quickly skimming titles and headings to efficiently find what they are looking for.

  • Avoid using overly long title text
  • Be as succinct as you can with your title and menu tet

 

List of New, Modified, or Deprecated Elements in the New Design

For Content Editors

  • Site body
    • Style updated: the background color is now white.
    • Bounding boxes around blocks are no longer clearly visible as most block backgrounds are white.
  • Header background
    • An alternate white/gray background, especially helpful if a logo image works poorly against a dark background. Set in the Manage » Appearance » Color Styles section.
  • Column Layout widget
    • a new feature available from the WYSIWYG, via the widget menu, that will create up to four columns within the body of your content. Documentation to follow.
  • Blockquote Style
    • The new design for a blockquote is very obviously a quote. If you used the blockquote style for anything other than a quote, you might want to change that to another style. If it's not a quote, then it's not good semantics and it will cause accessibility issues anyway.
    • Blockquote now also includes right and left aligned quotes to float alongside body text.
    • If you would like to style a citation or author credit at the bottom of the quote, add a new line and apply the Italic format to your text.
  • Tables
    • Table cell text to be aligned vertically to the top of the cell.
  • Feature box
    • New: ability to insert an optional image or a video at the top above the Title section.
  • Article content type
    • New checkbox: Hide Primary image (Hide the primary image from being displayed on the Article body, but will show on teaser)
    • New field: Subtitle
    • New field: By line
    • New multi-line field: Quick summary
    • New textarea: News resources
    • New under Categorizing, second Taxonomy option: Secondary category
  • Person content type
    • New field: Preferred Pronouns
    • New field: Related Unit(s)
      • The old unit field is now under Categorizing in the sidebar as Custom Unit.
  • Marketing Highlight block
    • Style is updated
    • New configuration option: Apply featured styling to the block
  • Marketing Highlight - Horizontal block
    • Style is updated: title bar appears at the bottom of the block instead of across the bottom third of the image
  • Focal Link block
    • While it may feel that the Focal link block is different, no changes have been made. The change to the site's background body color to white and the lack of a bounding box around the Focal link gives the illusion the block itself has changed.
  • Focus Box block
    • Style is updated - title background still has a palette color applied, but the body does not
  • Image Banner block
    • Style is updated
    • Default width now slightly exceeds the width of the content region.
  • Hero Banner block
    • Edge-to-edge in Pre-title Region
    • New video link button style: via checkbox round option
  • Media Library
    • Added: SVG media type
    • Added: Audio media type

For Sub-themers

  • Search Form
    • The new design includes a modified search form that needs to be in the "Search" region. If you have a subtheme, you'll have to add two new regions to your subtheme's ".info.yml" file. The full region list should look like this: (note new regions in bold)
      • header: Header
        navigation: Navigation
        quick_links: Quick Links
        search: Search
        pre_title: Pre Title
        page_title: Page Title
        pre_content: Pre Content
        link_grid: Link Grid
        top_content_first: Top Content 1
        top_content_second: Top Content 2
        top_content_third: Top Content 3
        top_content_fourth: Top Content 4
        content: Content
        sidebar_first: First Sidebar
        sidebar_second: Second Sidebar
        bottom_content_first: Bottom Content 1
        bottom_content_second: Bottom Content 2
        bottom_content_third: Bottom Content 3
        bottom_content_fourth: Bottom Content 4
        footer: Footer
        footer_credits: Footer Credits
    • If you add these regions to your subtheme and deploy it to Live, your site will have the right blocks moved to the right places during the roll-out. If you wait until after the roll-out to add these new regions, you'll have to move the blocks manually.
    • Zoom recording from Shawn's presentation regarding subtheming and the redesign, Thursday, February 11, 2021