Redesigning my blog for adaptive layout
| CommentsMy blog runs on Subtext which has a pretty good skinning model (albeit a tad outdated) and allows you to customize whatever you want. I’ve had my own custom theme since 2009. I figured I was due for an update. I was further strengthened by a post from Jon Galloway last week.
There wasn't a vote, but if there was: I don't like narrow, fixed width web designs. Use media queries, scale intelligently on widescreen.
— Jon Galloway (@jongalloway) March 30, 2012
Now when I saw this I figured it was another nudge. I did also have some time this weekend without any distractions so I took it as an opportunity to do some ‘work’ on this here blog. Now a while back I was inspired by what Scott Hanselman had done on his site with a designer. I reached out to a few designers that I admired, but frankly never heard back :-(. I figured that was okay as I wasn’t in a position to really pay what I know it is worth for a good designer. So I went looking for things on the web that I could do myself. I did want some subtle design tweaks to represent some things I’m currently passionate about.
Bootstrap your CSS
After some digging I saw a ton of pointers to Bootstrap. This is an Open Source Javascript/CSS library that sets your site up for styling success and layout goodness. The documentation was some of the better docs I’ve seen for a library. Each aspect of the library/styles where in the docs that I could visually see, interact with and see the code that produced the behavior. I liked what I saw and went to work.
When I got all the styles configured (using the basic setup from Bootstrap) I went to work on some of my own minor tweaks. One of the things I really liked is the responsive layout options, not only for the grid but also for different screen sizes. By adding a simple class I can specify certain aspects that shouldn’t be displayed when viewing the site on a tablet or phone. There were other cool responsive options for this such as the main menu will switch to a drop-down approach when on a smaller device. Using Firebug, IE F12 tools and real devices I was able to get the precise tweaks that I wanted. Here’s what my site looks like on an iPhone as an example:
Notice the menu at the top is gone but replaced with a little icon (which is a drop-down). Also notice the sidebar area is no longer visible (it is on the bottom of the site in this device view). I like this subtle configuration that was really easy to do with just adding a class name to the area I wanted to collapse.
The other thing I wanted was to implement my primary navigation links in a little-more-than-text style. I used the CSS sprite method by creating a single image that I would then define styles that used clips within that image to pull out the right area. Here is the image in entirety:
Notice how the normal and hover states are the same image.
NOTE: I put this on a black background so you can see them but it is actually a transparent background so the theme’s background shows through.
What I do then is just define a style for the <a> tag like:
1: #follow {
2: background-image: url("navbarglyphs.png");
3: background-position: -195px 0px;
4: }
5:
6: #follow:hover {
7: background-image: url("navbarglyphs.png");
8: background-position: -195px -70px;
9: }
Now I was having a bit of difficulty with this because I was misunderstanding the background-position value in CSS. A quick set of second eyes with Shawn Wildermuth (who is doing a bunch of HTML dev posts right now) helped me realize my math was wrong and I needed to use the negative value instead of what I was using. Once that forehead-slap moment was done, I was set.
I still have a few tweaks to go (need to re-work the comments sections but didn’t have the time to think about a design more) but I’m happy with the quick re-design. It is very simple for sure, but I like it. I tried on a few different screen sizes and I think I have met Jon’s challenge to adapt to the available space for the screen. If you are working with a new site and aren’t a CSS/JS guru I highly recommend looking at Bootstrap as a solid starting point for your efforts.
Please enjoy some of these other recent posts...
Comments