Feedback for new theme - Carmack


(Ben) #1

Hi there - here’s a link to the demo for my latest theme. Would love to get some feedback on it!

I’m looking for feedback on the design, and any usability or technical bugs you might find.


(Leland Fiegel) #2

I’m liking it so far! Especially like that subtle triangle with the translucent backgrounds. It adds a nice touch.

I also think it’s interesting how pairs featured posts are mixed in with the latest posts. It solves the problem of featured content being relegated to normal chronological post status when it’s pushed off of the “main” featured content display (however many posts it contains).

The way there’s a fixed bar when you scroll down on single posts is also pretty cool.

Here are some things that could use some improvement:

Continue reading button

I’m wondering if it would look better with more of a button-style “Continue Reading” link, instead of a blue text link.

Featured Posts vs. Latest

I think it would be best if this just said “Featured” instead of “Featured Posts.”

While “Posts” makes sense to us WordPress people, it may not be the preferred nomenclature of the site operator, especially on a magazine-style theme like Carmack who may prefer “Articles” instead.

But to keep things simple and consistent, I’d just keep it as one word, like what you did with the “Latest” heading.

Hyphens

I’m not a big fan of CSS hyphens, because they randomly hyphenate words that don’t really need to be hyphenated. For example:

I know you’re doing that to prevent super long words from overflowing past the container, but I’ve found that using white-space: nowrap; is a better compromise because it only affects words that really need to be cut off, leaving short words like “number” and “broken” alone.

It’s a tricky situation because nowrap doesn’t hyphenate the words, it just shoves the extra letters to the next line, which might be confusing for readers.

In the Owari theme, I used overflow: auto; to add a scrollbar when words that are too long are used. It might be ugly, depending on how the browser treats scrollbars, but it prevents layout issues and unwanted/confusing word breaks. Might be something to consider as well.

Slider usability, especially on mobile

I noticed the featured images in the slider are clickable. This might pose a problem to mobile users trying to navigate between slides with these:

If they miss the target, they’ll inadvertently get directed to a page they didn’t intend to go to, or another slide they didn’t intend to go to.

I haven’t checked on a mobile device, but swipe support on slides would be nice if it’s not there already.

Time ago format

I noticed you had some “time ago” date formatting (for example: 5 days ago) in some parts of the theme.

I originally had this in Adaline, but the WordPress.com reviewer asked me to change it to a “normal” date format due to internationalization concerns.

Redundant menus

While I really like the design of the hamburger icon flush against the site title and the menu above, especially when it breaks down to mobile…

…I feel it would be confusing for both the site operators and site visitors to “decide” where to place/find certain menu items.

I’m wondering how it would look if the top menu was just cut out altogether.

Also, the mobile menu looks like it could use some polishing, like some additional styling for submenus:


Feedback on new theme - Label
(Ben) #3

Hi @leland - thanks a lot for the feedback - really appreciated. I’m going to make some tweaks based on it! :slight_smile:

A couple of points. Regarding the ‘time ago’ code - I’ve already got about 10 themes on wp.com that use that, so I’m not sure why they would ask you to change it. The code I use is the same in all the themes. Looks like this: https://gist.github.com/BinaryMoon/5794dd423d30c44bc7880dac4bb6e9cd

Regarding the menus - both are optional - so the user can use 1, both, or neither. Since the theme is a magazine theme I felt the top nav would be good for listing categories and things related to content, and the hamburger would work for the things like about, and contact. Perhaps that’s not clear though. I might change the demo to make that clearer.

The slider uses a custom slider js that I wrote (again, used in a lot of themes). Plus, it’s more of a slideshow (fades between images) so not sure if swiping would be a good behaviour. I like the idea though so might experiment with it.

Thanks again!


(Leland Fiegel) #4

Hmm, good to know. I didn’t offer any additional commentary on that point because I wasn’t quite sure what the internationalization problem with it was.

Ahh, that makes sense. For some reason it didn’t cross my mind to have the categories at the top and static pages in the hamburger. But yeah, consider that more feedback for the demo then, not the theme itself. :smiley:

Right. Now that you mention the fading effect, swiping would be a bit weird.


#5

I really like the contrast and overall design :slight_smile:

One thing that you might want to change is the font size for the first post (homepage, latest section), try and make it bigger. Also, add font-weight: 900 :slight_smile:


(Ben) #6

that’s an interesting idea - thanks! :slight_smile: That post uses the image post format so a larger font size for the wider text space could work nicely.


(Nate Wright) #7

I checked a few of the basic technical things that so many themes fail completely (screen reader text, proper heading structure, a label for that subscribe input field) and you nailed each one of them. Nice work!

The only thing I would recommend is to consider the accessibility of the slider and the nav menu hidden under the hamburger menu. If you can use a technique that doesn’t hide them from screen readers (eg - not display: none) that’d be great.

Accessibility’s not always an easy problem to nail 100% though. I’ve certainly got a theme or two I wouldn’t want people to look too closely at. :wink:

Also, on a mobile device, the post titles can really overwhelm the slider image, taking up >50% of the space. Might want to think about dropping the post title down a bit further on really small screens (<480px).


(Ben) #8

Thanks for the feedback!

Accessibility isn’t easy but I try my best. I plan to go through and set some aria properties for things that show and hide so hopefully that will help with the menu and slider.

Good catch on the post titles on mobile view also - I’ll drop down the font size quite a bit there I think.

Thanks again


(Nate Wright) #9

I find aria really difficult to get right, and I’ve heard it’s not very well supported by screen readers anyway. I bet if you just used absolute positioning to shift hidden elements off canvas you’d probably get a reasonably easy win on the accessibility front.

Since you’ve got good heading structure, a screen reader will probably be able to quickly jump past the content they’re not interested anyway.


(David Artiss) #10

Looks really nice actually. However, I’m viewing this on a laptop and I’m sure about the hamburger menu appearing in the top left - what resolution do you have to have for this to not appear in this form?

The only other question I have is how it handles sticky posts and asides.

David.


(Ben) #11

Hi David

The hamburger appears at all resolutions - however this is an optional secondary menu for supplemental navigation. When you get down to mobile resolutions the hamburger and the top nav merge into one.

The big post at the top with the star on it is an image format sticky post. Other post formats will also have the star. The theme doesn’t support asides (or link posts). It supports normal posts, images, galleries, videos, audio, and quotes.


(Ben) #12

That’s interesting to know. I’ve only recently started using the aria properties - I don’t know how well they’re supported. They were suggested to me by the wordpress.com team when they reviewed my previous theme and did an accessibility review. I’ll do a bit of research into it before deciding exactly what to do.


(David Artiss) #13

Thanks. Not sure about the hamburger menu. Not the fact that it’s there at all resolutions but more how the menu is then presented - the large front items on a black background seems a little stark.


(Andy McIlwain) #14

Do single posts make use of featured images? I clicked through from the homepage slider expecting to see those images repeated on the single post pages.


(Ben) #15

No - fraid not. pages will show them in the header but posts don’t display featured images on the single post view.

Might add that to the todo list though as it could be a nice thing to see on blog posts.