Say hello to a brand new website!


#1

https://mutable-instruments.net


#2

Really nice layout and visuals, more info on the same page is cool and the new modules’ pictures too !


#3

I had a great time working with @pichenettes and @Papernoise (who provided great and very-detailed mockups!) on this site and am super excited to see it go live!

If anyone has any questions about the technical/implementation side of things feel free to reach out in this thread/pm/whatever.

Also, if you notice any thing weird, please let me/@pichenettes know :slight_smile:


#4

It looks very nice. Well done :slight_smile:
So far it all looks to be working just fine here.


#5

Very very nice job guys! Very beautiful and fresh!


#6

Do you want feedback?

  • it might be nice to limit the height of the masthead depending on the height of the viewport (with @media min-height rules for example) so that you always get some content even on wide viewports:

  • The dealers thing looks weird in its initial state on wide viewports.

  • The dealers thing is cool, but it doesn’t make much sense in terms of information architecture because Europe it the only “continent” with more than 3 countries with a dealer and 3 out of 6 “continents” only have a single country with a dealer so you have to click twice even when there’s only a single option available. I’d get rid of all the clicking and just create an overview listing them all nicely grouped.

  • Centering text makes it really really hard to read and only works well for short snippets when the line length is not too long and also not too short. It might be better to just left-align the text in the “What makes our modules different?” section.

  • Tweak the breakpoints for when the navigation switches to the hamburger menu. This does not look cool:

Another option would be to limit the number of items; most people assume that the top-left logo will function as the “Home” button. You can also leave the hamburger menu out altogether and use a horizontally scrolling element instead.

  • The spacing of the menu items is weird on medium-width viewports. Check out the CSS flexbox specs for a way to make the spacing responsive in a more naturally distributed way. Also for the love of all that’s good please make the baseline of the logotype and the labels of the navigation align please.

Feel free to ignore all this, obviously. :wink:


#7

Thanks for the feedback!

Re: top nav–we just recently added the community link in the top nav, and I hadn’t checked the breakpoints since we added that change. Adjusting the media query (and some compensation padding I added to make things centered) should fix the layout stuff.

The hamburger menu, aspect ratio stuff of the video header, about section on the home page, and dealers UX is all valuable feedback.


#8

Looking good! :+1:


#9

I am well aware I have no idea about the constraints on the project, so please consider my feedback as if I am a random guy screaming on the internet.


#10

@t2k: thanks for the detailed feedback! Some thoughts of mine on the matter:

masthead: this very much boils down to schools of thought. It’s a bit like with making the logo the link to the startpage (which is a good suggestion btw.). People know that they have to scroll. On the other hand if we reduce the height of the video (it’s a video btw… but don’t tell anybody) it will look very awkward.

Centering text makes it really really hard to read and only works well for short snippets

It’s only used on the startpage for what basically is very short snippets of text. I had them aligned left at the beginning, but it was looking really awkward.


#11

You’d be surprised how often people don’t pick up on that when there’s no clear indication there’s more content lower down on the page. With a the full-screen example I posted a screenshot of that’s the case here IMHO.

I don’t see what would look awkward about reducing max-height of the masthead container to 50% or 60% of the viewport height as long as you keep this visual anchored to the bottom so that any cropping only happens at the top and the sides.

I would also replace the video with a still image on mobile devices; the experience on my iPhone is weird with this.


#12

I’ve also noticed about the video looking weird on phones… I’m looking for a solution now!


#13

These days you can autoplay a video inline on iOS, but only if no audio track is included in the MPEG-4 container.

Still recommend falling back to a static image on mobile devices though.


#14

The video has no audio track, but it did not autoplay on my iOS device. Maybe because I used chrome instead of safari?

Anyway, the fallback to an image for small screens is now live!


#15

Possibly. Here are the full details: https://webkit.org/blog/6784/new-video-policies-for-ios/


#16

Possible, but then, even if some people don’t scroll down, both the module grid and the dealers list are available through the menu, as individual pages.
Still… we’re looking into possible solutions. It’s always hard to find the sweet spot, with all the viewport sizes and hardware+OS+browser combos around these days.


#17

You most certainly shouldn’t look into this if you don’t believe it’s needed. :slight_smile:

Just to be sure, you do realize you can put the video inside a dynamically sizing container to get the cropping I described, right? You can see an example of that in the masthead video on https://tube.switch.ch (resize the browser window and see how the aspect ratio changes as you make the window narrower).


#18

The final decision is @pichenettes’

Yes, totally. But I’ll leave the coding to @jlmitch5


#19

though we could also just add one of those “please scroll down” buttons, as on most pages that have a full-screen masthead.


#20

Is there any way to collapse or close the pictures of modules across the top on the module pages?

I find it frustrating to have significant screen real estate essentially wasted when for instance I’m trying to read a manual.

Otherwise it looks really nice.