New Design at MacSparky.com

I’ve spent the last week fiddling with the knobs in Squarespace and now unleashed a new, simpler, design for MacSparky.com. What do you think?

18 Likes

I like it! One thought: is there a way to add some sort of background colour to code snippets? Looking at an article like this one, it’s hard to recognize that the monospace lines can scroll horizontally. If you were able to give code blocks a background colour (something like #f2f2f2 or #e8e8e8), and a slightly darker border (even #ccc would do), that would help them stand out from the rest of the text and perhaps make the ability to scroll more obvious.

Just my two cents, but I think otherwise your site remains a sterling example of what’s possible using Squarespace as your blogging platform.

3 Likes

I like minimalist themes, but I would echo @snelly ‘s remark on code blocks :slight_smile:
Also, on my 27’ screen, text is relegated to a tiny column using only a third of the real estate. Without using the whole width (which would be ridiculous), would there be a way to increase the column size a little bit in desktop browsers?
Also… I am fervently against any text color on a white background that is not black. I know it’s very fashionable but grey is less legible :slight_smile:

Apart from that, very modern redesign!

5 Likes

As suggested by @anon85228692 please darken text colour. Black preferred.

3 Likes

Both @rms and @anon85228692 are on to something with the dark text thing.

If you are interested in following their advice, I might humbly suggest the following:

  • a text colour of #404040, #333, or #222 is better than pure black for most people. They typically cause less eye strain. (This is also why dark themes were rarely pure black before OLED iPhones)
  • your orange link colour on hover is nice. To distinguish the links from dark text, you could make orange the default colour and add an underline on hover

Sorry if I come off strong on this. Web design is my day job. This is all fun for me, and I like your new site overall.

2 Likes

I’ve darkened text … but I’m going to have to do some research about modifying code blocks. I expect that will take some code injection. I do see your point though.

1 Like

You’re totally right that very dark grey will work as well :slightly_smiling_face:

1 Like

I like the design, and the trend elsewhere to build simple, crisp designs for this sort of thing. The text width for me in Safari on a 27" monitor is about 60/40 text/whitespace. That’s OK. I don’t like to read wide columns.

Like the minimalist theme… and the subtle sponsor tagline…

The Studio section needs an update … unless these are 3 Pro displays XDR :wink:

Don’t know if this is true everywhere you use code, but the HTML for the code block on at least that post is:

<pre class="source-code">

So if that’s universal, you should be able to just define some CSS:

pre.source-code {background: #EEEEEE;}
1 Like

It’s been awhile since I used Squarespace, but it looks like they still support custom CSS:

So @webwalrus’ suggestion “should” be a relatively easy “tweak”.

@webwalrus Thank you! Already implemented.

2 Likes

@simonsmark

Yup. I need to completely redo that page.

1 Like

What do you guys think about those drop down menus? I could alternatively just have that lead to a separate page with a blurb on each Field Guide instead of that drop down. The same for podcasts.

Thanks for the darker text, much easier on the eyes :slightly_smiling_face:

I think the menus become overwhelming when the items become too numerous. The podcasts one is fine, the field guides one becomes quite crowded being in all caps (no leading of the eye through the sentences) and with that many items. I own all your field guides and yet that menu immediately overwhelms me. I think it needs some separation between items (a line or even more whitespace), a bullet, a small image for each item for a dlash of color, any trick really, but it would help a lot guiding the eye in. As you know, people scan pages on the Internet, they don’t read unless you help them inviting them in. :slightly_smiling_face:

@anon85228692

I think I’m going to turn that “MacSparky Field Guides” entry into a link to a separate page instead a menu. I’ve just got to build the page first.

1 Like

I know this goes against the minimal design idea, but… I quite liked the sidebar. I think they have a place when you are trying to sell something alongside blogging for pleasure. That’s a conundrum I’m facing myself as I’m trying to convey “hey, I write cool books, learn about the latest one” even though I like producing and sharing quality content on my blog for free. I’ve myself made peace with the sidebar, but YMMV of course. :slightly_smiling_face:

1 Like

As a web dev person, I’d say do both. Personally, I’m a huge fan of drop-down menus that let me find things quickly. I think it makes the site much easier to navigate. But if they mouse over the main menu bar item and click on it it should take them someplace useful.

2 Likes

Another option for that is in the footer of the site. On the homepage that footer will almost never be seen, but in the case of a post the user will be actually scrolling to the bottom, so it’s a possibility.

The advantage that David has, marketing-wise, is that his site isn’t always the entry point for his work. I’d never been to the site before I heard him on MPU, and went to the site afterward. So he has different ways for people to get there, which makes some of the on-site promo stuff less important.

But for the person that finds MacSparky articles on Google and clicks through, a footer that promos some of the most current (or important - take your pick!) work could be cool.

1 Like

Hmmm. Food for thought, thanks for the tip. I’d always go for “sidebar” because that’s what my older, desktop-oriented mindset sees but that’s definitely something I should myself consider…