First article is mostly written
Just a quick update on a couple of interesting things.
The first article is almost done being re-written and updated.
I added some functionality to the slide-out menu and am still thinking about the best icon to use.
I also had a nice epiphany when I realized that the styling I had already written to make big videos works great for images as well.
The first article is almost done being ported and formatted. For anyone who’s curious, it’s a long post from the five part series I did on B&W conversion using GIMP (originally published on my blog).
The writing is going a bit slow because I am also feeling out the formatting and a couple of other minor visual things as they relate to a full-blown article. Of course, it doesn’t help that it’s also a really, really long article…
For those of you bothering to read this blog, and who want to take a look at the state of that article, it can be found here: Pixls.us: Digital B&W Conversion (GIMP). Just don’t forget to let me know if anything looks funky, or with any suggestions/comments/criticisms.
Speaking of which, one of my first conundrums while working on it was a question of load times vs. convenience. The original article was written as five separate blog posts which kept everything in reasonably bite-sized chunks to digest. The problem is that as a reader I am sometimes annoyed at having to click through multiple pages to read an article and I thought that most readers here might feel the same way.
One of my concerns was load times and rendering speed of large pages.
I think I have all the assets set to load as quick as possible above the fold.
I’ve tried to optimize all images as much as possible and am making sure to define discrete
height attributes in the html to help the browser render and not have to reflow (hopefully).
So my current thought is to keep the articles to a single page, even if they are long. I am also 100% open to other ideas as well so if you have one feel free to hit me up!
Long pages can be a bit cumbersome to navigate, though. To help make it easier to target relevant information in the page, all of the headings in a page should have a unique id attribute. This means that users will be able to link directly to sections of a long page (this seems to have fallen out of favor with many websites - why?!).
For instance, I can link directly to the previous section of this post by including the id of the element in the url:
I’m still thinking about the easiest/best way to present this capability to users, but the groundwork is there for the future.
I’m also considering a re-working of the icon to possibly make it more obvious that it opens a menu. Perhaps something like the “hamburger menu icon” is in order?
The first set of links are the main ones for navigating the site Home, Blog, Articles and Software. Just below that will be the navigation links for the contents of the current page.
For no other reason than I thought it was neat, I also made it so that the background of each of the Table of Contents entries will be a slightly darker color relative to how far along you are in the page/section. In the example above, I have already read Getting Closer and First Test Article, and I am ~75% of the way through the Speaking of Long section of the post.
At the moment I am using a combination of serving up the images directly from my host, and using Google+ photos. Mostly because I have limited space on my webhost, and I’m not quite sure what the impact will be just yet. I also gain the distributed Google infrastructure for image hosting, which helps I think as images are by far the biggest files to serve for these pages.
I also get on-the-fly image resizing when hosting the images on Google, which is handy while I build things out.
One of the downsides is that the on-the-fly resizing doesn’t produce progressive jpegs, which I thought might help with rendering speeds of large pages (images loading progressively at least show that something is there…).
I think I mentioned it in the previous post The Big Picture that I had done the styling to get images to span the entire width of the page. In that same post I also demonstrated a means for making embedded videos bigger as well. It turned out that the same styling worked great for images as well.
Here is the lede image wrapped in a