Is WordPress Twenty Seventeen a robust business theme?

Updated 28 May 2017.

WordPress 4.7 has just been released with the new Twenty Seventeen theme.

This theme is designed more for business than bloggers. I decided to take a deep dive into what it can do.

Twenty Seventeen Design

Twenty Seventeen was designed by Mel Choyce of Automattic.

(WordPress.com user?  Twenty Seventeen became available on WordPress.com on 13 April 2017.)

It’s intended to have more of a business focus than the previous yearly themes released with WordPress.

When installed on a fresh site, Twenty Seventeen looks like this on desktop:

The image takes up the full screen. WordPress has jumped upon the popular trend of themes with full-screen images.

As we’ll discover later. there is the option to use a fullwidth video background instead of an image.

On tablet and mobile, Twenty Seventeen looks like this:

 

Scrolling up and down highlights the parallax scroll effect on the image. This is most evident on mobile devices.

Typography

Twenty Seventeen uses the Libre Franklin Google font, with Helvetica Neue as the main fallback font.

If neither are available, Arial, Helvetica or a sans-serif font will be displayed.

Most headings are styled in uppercase.

Body font size is the same as Twenty Sixteen – 16px or 1 rem.

The line-height is set at 24px for paragraph text, but somehow the text looks quite cramped compared to headings.

Menus

Twenty Seventeen doesn’t show menus by default. You need to create them in Appearance > Menus or in the Customizer.

The two menu areas are the Top Menu and Social Links menu.

The Top Menu position varies dependent on which page you’re on and where you are on the page. On the homepage, it sits at the bottom of the screen until you scroll

On the homepage, it sits at the bottom of the screen until you scroll down, when it moves up to the top. On other pages, it is just under the header bar and moves up on scroll.

The Social Links menu is right at the bottom, in the page footer.

You can add further social links in the same manner as for Twenty Fifteen theme.

Theme Options

The Theme Options section in the WordPress Customizer (Appearance > Customize) is where you’ll find a new feature, starter content.

You’ll only see this option if you are on the homepage in the Customizer.

The theme suggests a homepage layout with 5 new pages:

• Home
• About
• Blog
• Contact
• A homepage section – this is a page in its own right. It shows up on the homepage but not in the menu.

The instructions say:

Select pages to feature in each area from the dropdowns. Add an image to a section by setting a featured image in the page editor. Empty sections will not be displayed.

You can adjust the positioning of the sections in the Customizer and preview them in the right-hand pane.

Nothing is added to your site until you save and publish the content.

One further option is to have the page titles and content in one column or two.

Here’s what the theme looks like with starter content added in a one column layout (click for the full size version):

If you want to add your own pages, each will need a featured image.

The featured images added in starter content are 2000 x 1200 px, so that is the size I would recommend. Make sure that you optimize your images before upload to keep the file size low.

Other Customizer Options

Site Identity – Add a Logo

You can upload a logo to Twenty Seventeen. The recommended shape is a square logo 250 x 250 px. Any other size will be cropped to fit.

The logo size and positioning depends if you want to show the site title and tagline.

• No? The logo shows alone, 200 x 200 px on the home page and smaller on other pages.

• Yes? A smaller version of the logo (80 x 80 px) shows to the left of the site title.

Logos with strong typography or symbols seem to work best.

Header Media

This is the exciting part, where you can add a full-screen header video.

The snag is that only the home page supports video.

Also remember that there will be no sound!

To look good you’ll need a hi-res video. I downloaded one from Pixabay’s stock video library (free and public domain).

Video adds to your site’s download time. The video I chose was 5MB, even though it was a short clip.

I found that the video showed on my laptop and iPad, but not on my smartphone. Sensibly, on a phone the header image you set is used as a fallback. Ideally, choose an image that is similar to your video content, maybe a video still.

YouTube videos are an option too, but make sure you use an HD video – and you have permission.

This feature is tailor-made for certain types of videos e.g. product demos, event videos and so on. Talking heads are not so exciting!

Colours

After being spoiled for choice in Twenty Sixteen, its descendant has gone back to basics with two colour schemes – Light and Dark.

Here’s what the theme looks like with the Dark scheme.

The third option, Custom, is essentially the Light colour scheme, but you can change the colour of some of the links on the page with the colour slider.

Theme Layout and Widgets

Post layout

Posts have a right sidebar layout. You can’t change the position of the sidebar from right to left.

Posts are navigable with previous/next links.

Minimal post metadata is shown on the blog page – just the date.

Each post has the date and author at the top, and categories and tags below.

Featured images show under the top menu and above the post. If they’re not wide enough you’ll see a pale grey background behind them. Not a great look!

 

This theme has the same issue I flagged with Twenty Sixteen; there’s no Customizer setting to choose between full posts and excerpts on the blog page.

Page layout

Like Twenty Sixteen, there are no page templates.

The width of content on the page depends on whether you have the one column or two column layout enabled.

With the one-column layout, your content will be 740 px wide on the page.

With the two-column layout, content will be approx 525 px wide, which does seem quite narrow to me.

Twenty Seventeen has enabled featured images on all pages (most themes don’t do this). Of course you’re not obliged to add them!

Widgets

There are three widget areas in this theme:

1. Sidebar – a right sidebar area, showing only on the Blog page and individual blog posts.
2. Footer One – left footer area, takes up one-third of the footer space.
3. Footer Two – left footer area, takes up two-thirds of the footer space.

If you enabled starter content, the theme auto-fills widgets for you.

Accessibility

As it’s built from the same base as the previous themes in the Twenty series, Twenty Seventeen is also an accessibility-ready theme.

It has skip links and keyboard accessible dropdown menus. The focus style for most links is a dotted outline with a black underline.

There’s also a pause control built in for video, on the top right.

Personally, I find some of the heading text quite small at 11px. With headings in uppercase text, they may be read more slowly by some people.

You might run into colour contrast issues with the site title and tagline not being clearly visible if you choose a very light coloured header image or video.

Twenty Seventeen Demo

You can see a demo of Twenty Seventeen customised for a cafe here.

Verdict

Is Twenty Seventeen a decent stab at a theme for business? Yes and no.

The plus points are:

• Fullwidth images and video backgrounds give an eye-catching, modern and professional feel.
• Starter content helps users get a site up and running quickly.
• The theme design is fresh and clean.
• Simplicity: extra functionality like a contact form can be added through plugins.
• The theme has good accessibility built-in.

The negatives:

• A small number of customization options. I don’t believe in having too many, but a few more might have made all the difference e.g. being able to alter the sidebar position. Also, some might find the sidebar on posts but not pages leads to an inconsistent look.
• There’s a lot of whitespace, maybe too much. I think this is most noticeable on the two-column page layout.
• The theme is fairly devoid of colour, unless you change the link colour or add photos.
• The lack of page templates  – a landing page or a sales page would have been a good idea for a business theme.
• It might have been good to have the option a call to action button on the homepage.

If you’re used to themes with multiple options built in like Avada or Divi, then Twenty Seventeen won’t be for you. If you want a simple theme which you can customise quickly, then Twenty Seventeen is worth a try.

What do you think of Twenty Seventeen? Will you use it for your site? Let me know in the comments.

Category: WordPress Tags: twenty seventeen