New design

Saturday 25 November 2017

I’ve just updated the design of this site. The goal was to make it responsive, so that it would work well on small screens, but I made other changes along the way. The body type is now serif rather than sans, and much larger. I made lots of other tweaks as I worked on pages.

Making a responsive design was fun: it meant working out mechanisms for the layout rather than just a static design.

Of course, it’s easy to get carried away. Take a look at what happens to my name in the header when the screen gets below 300 pixels: Ned Batchelder becomes nedbat to save space. This was accomplished with the help of a span with class “chelder”...

It took me a long time to make this design. I started it 15 months ago, but stopped work on it for more than a year. I picked it up again two weeks ago, and powered through the remaining work.

Behind the scenes, I changed only one thing: using Sass to generate the CSS. The rest is still as janky and difficult as always.

For comparison (and posterity), here is the design I just replaced. If anything seems amiss with the new design, just let me know.

Comments

[gravatar]
GrumpyMcGrumpface 1:53 AM on 27 Nov 2017

The Star in the upper left is the a 17,6 KB jpeg file, 640×640 pixels, 228 different colors, with jpeg artefacts … do you have access to the original version? You should re-export it as 8-bit png file … or even better, re-create it as SVG: higher quality, fully responsive and probably smaller :).

[gravatar]
Ned Batchelder 2:14 AM on 27 Nov 2017

@GrumpyMcGrumpface: true, I have not tried to optimize the images. That is on the TODO list. It's raytraced with a shadow, I don't think SVG would do it justice :)

[gravatar]
Naihonn 8:46 PM on 29 Nov 2017

Yes, it indeed looks more sassy. :0D And the REST still being as Djangy and difficult as always is probably alright. :0)

[gravatar]
Matt 7:07 PM on 2 Dec 2017

The bitcoin link in the footer is 404 at Coinbase.

[gravatar]
Ned Batchelder 7:25 PM on 2 Dec 2017

@Matt thanks, fixed! :)

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.