STB’s design has served us well over the past few years, but it was limited by an inability render well on mobile devices (which now account for 20% of visits and rising). Our mobile site was an unattractive short-term patch that got us by for a little while, but wasn’t a viable solution for the long term. So we’ve redesigned the site using a responsive template that should render well on phones, tablets, and desktops.

The site now supports Gravatars in the comments for those of you who would like to make use of them (I know several commenters already do). I don’t have the resources to test the site on every phone, tablet and internet-enabled doodad under the sun, so please do let me know if you’re having trouble viewing content on your particular device and I’ll do my best to fix it. Bear with me as I’m sure there will be some wonkiness in the short term.

Also, due to popular request, we’ve added an event calendar, which we’ll be populating with transit-related events over the coming weeks.

Those of you visiting on desktops will notice a beautiful background photo courtesy of Dave Honan. Many thanks to Dave for the image.

Update 6/4/13: Due to some performance issues, I’ve disabled the background image. I really liked it, but it was causing some erratic behavior on mobile. I’d like to bring it back, but only if I can do so without making performance compromises.

74 Replies to “New Design”

  1. Nice. Looks good on my desktop, at least. Will check the mobile look out later. I’m looking for a new theme for the Beacon Hill Blog — what do you think of this framework?

    1. I’m a huge fan of the Genesis framework. There are a ton of great plug-ins and it makes WordPress much snappier overall.

      1. What type of hosting environment are you in? If you can install memcached, it will speed things up more than you can believe.

  3. Hopefully cookies will stay now! Kept having to fill out the form every time I commented.

    Would be nice if this box and the three above it could be darker; say #555. Currently, contrast is too low.

    1. Thanks for the feedback. I’m aware of the cookie issue, I hope this fixes it.

    2. My iPhone always kept my cookies when I accessed the site in Safari, but not in my Google Reader third-party client app. We’ll see if this fixes it, but I’m not optimistic. Actually, I may go back to following you on Twitter since the recent tweets seem to all be blog reposts.

    1. Looks good to too, but I would like a way to navigate to other posts without having to scroll all the way to the top. If you’re at the bottom of a long comment thread, and are using a mobile browser, scrolling up to the top can take a surprisingly long amount of time. (on desktop, it’s easy – just hit ctrl+home)

  6. The FeedBurner link shows posts in chronological order, starting in 2008. Reverse it perhaps? :)

    1. Derp, looks like it actually shows only the old seatrans.blogspot.com articles?

  7. The new colors make links much more visible, before they were sometimes invisible.

    Overall, it looks great. Much more modern looking.

    Now we just need comment editing :)

  8. Viewing the site on my MacBook Pro, OS X 10.7.5, using Safari 6.0.4—at the very top and bottom of the page (the main page or an individual post page), I can see a narrow band showing that there is indeed some kind of background image, but it’s almost entirely covered up by a single continuous white background for posts and the sidebar. If you hadn’t said anything in the post about a “beautiful background photo” I might not have even realized there was such a thing lurking beneath the white background.

      1. 1440 x 900, which is the max for my model (it’s 6 years old). And now that you ask that question, I see that if I make the window go full-screen, then I can see more of the photo around the edges. So it’s not a bug in the site design, it’s just not a meaningful feature unless you’re using a screen resolution and window size big enough to see it.

  10. I love it! Great job to the re-designers. Looks great on my MacBook running Chrome.

    I kinda miss the countdown feature. Any chance that makes a comeback?

  11. Very nice.

    I’ll miss the cleanness of the old design, but this new one really blows it out of the water for both looks and organization.

  12. Looks wonderful on Firefox on Windows 8. Also looks great on iPhone 4S. However, on iPhone: it does try to load the background image, then hides it (meaning the image appears to flash on then off). Just looks a bit odd.

    1. Sounds like your CSS renderer is not doing things properly. The only way to fix this issue would be to remove the image all together.

  13. I’m getting peekaboo half second flickers of the background on my iPhone 4. Kinda like it, but Thought I’d give feedback.

    3. Ditto (half second flickers) of the background image. iPhone 4S running iOS 6.1.3, NOT Jailbroken.

  14. Maybe I’m missing something, but the way Gravatar works makes me really nervous. As far as I can tell, the only “shared secret” needed to make your picture show up is… your email address. Effectively, this means that anyone who knows my email address — which is something that hundreds of people have, *by design* — is able to spoof my comments.

    Now, I’m not saying this was meaningfully better before. Anyone could just post something using my name. But somehow, the presence of my picture makes it seem much worse.

    How hard would it be to link comments with some kind of single sign-on (like WordPress.com)? I would really appreciate having the extra security.

    2. Actually, I think it makes this more secure, because as long as you don’t share your email (and if you did, make a new one!), everyone that tries to impersonate you can’t show your picture, so they seem less authentic than you.

      1. Or I could just sign up with my own email address and use Aleks’ photo. There’s nothing stopping me from doing that besides the fact that it’s blatant copyright infringement.

      2. because as long as you don’t share your email (and if you did, make a new one!

        Since when are email addresses supposed to be secret? Everybody I’ve ever sent an email to knows what my email address is. That’s probably thousands of people. I’m sure it includes several people here on STB.

        You make an interesting point, in that I can use + to embed a password in my email address. But that’s still a far cry from actual authentication.

  15. Looks good, although the background image seems a little too busy and distracting. The text in the comment box and the like could also be darker, such as black.

  16. I think the new design is really busy, the older one was much cleaner. Maybe it’s just the distracting background image? I would get rid of that.

    Also, as I type this comment, the text is almost the same color as the background.

    2. I’m not sure if I liked the old one better because it was really better or because it was what I was used to. One of those things that only time will tell…..

  17. Neat, but the background scrolling is choppy when I use touch to scroll on IE10 (I’m using a Surface Pro).

      2. IE has gotten a lot better in IE9, and now, immersive IE10 is the best choice on tablets. I used to prefer firefox, but I use IE almost exclusively, and it works great except for that odd choppy scrolling problem. This problem is only present when I scroll by sliding the screen (it’s smooth when I use a mouse or the trackpad on the type/touch cover, or the surface pen).

    2. This turns out to be the same problem as the “half-second flicker” that was previously reported above.

      1. Actually, I think there are page transitions/bg image animations. Remove that and the “flicker” goes away.

  18. Looks great, although I find the background a bit distracting.

    My only other complaint is that light grey text on slightly lighter grey background makes it hard to see comments as I type. Apologies in advance for typos.

    Also can’t sign up for Gravatar, but that’s not your fault… :)

      1. The confirmation email vanished into the ether (not in any spam folder) but then a helpful support person emailed me with another confirmation link.

  23. Great work! The only thing I was disappointed not to see was an overhaul of the comment system. It would be nice to have a system where users could cast votes, and if there were more sorting options.

  24. New site is MUCH slower on Slacko Puppy Linux 5.5 (what my desktop currently uses).

  26. So, why exactly is a background image that I can only see a tiny bit of a good thing? Why exactly do I want to be downloading 270kb for every post that doesn’t add to the content?

    I mean, it’s a nice picture and all, but it’s not necessary.

  27. Looks great, but then I can’t see the background image (1366×768 max resolution) except for a band at the top. Probably a good thing.

  29. The new background image is cool. I do wish that the font size and margins weren’t quite so huge. Right now, three one-word comments fill the whole screen (running Chrome on Mac OS X at 1440×900 screen resolution). Everyone else seems to like it this way though, so I may just install my own stylesheet.

    1. I just counted and I have to hit “page down” 25 times to get from the top of this comment thread to the bottom. That’s a lot of scrolling.

      1. Here’s another voice that doesn’t like the big font size and all the white (gray actually) space in the new style. Give me more text on each page.

      2. I assume every platform has a way to change font size internally, besides changing pixels.

        On my IE7, it’s View–>Font Size–>Smaller.

      3. But the font size isn’t the problem; that’s showing up at just the right size. The problem is all the blank space between comments and the humungous margins that’re making me scroll down to see the rest of the text.

    2. Thanks. it’s a balancing act. Squeeze everything together and the site starts to look too busy (which many people already think it does). I might be able to narrow it a bit, though.

Comments are closed.