×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

My 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.

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:

timheuer.com on an iPhone

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.

tags: , , , ,

This work is licensed under a Creative Commons Attribution By license.


4/2/2012 7:50 AM | # re: Redesigning my blog for adaptive layout
Nice. I'm in the process of doing something similar to my blog, but I didn't publish anything yet.

One thing I noticed in your new layout is that your document margins are bigger in the smaller layout, where websites usually go the opposite way, since screen real state on the phone is precious. Did you do that intentionally? If so, why?

Another nice trick that I think is usefull in this kind of design is to set the max-width of all images to 100% (or smaller), to avoid horizontal scroll in smaller devices.
4/2/2012 2:16 PM | # re: Redesigning my blog for adaptive layout
The overall design is a nice upgrade. However you need to do more work on the "scale intelligently on widescreen". On my 24" display the blog post text was 2 A4 (or Letter) pages wide making it next to impossible to read. If it stays like that I would stop reading your blog :(
4/3/2012 5:53 AM | # re: Redesigning my blog for adaptive layout
The site looks good, and the link (Bootstrap) is pure gold. Great work.
4/3/2012 4:05 PM | # re: Redesigning my blog for adaptive layout
@Jason, can you send me a screenshot? I am looking on my 24" monitor and don't suee what you are describing...and I want you to keep reading my blog ;-)
4/9/2012 8:15 PM | # re: Redesigning my blog for adaptive layout
I've been a lurker for quite a while now Tim, but I had to let you know this new upgrade is flat out awesome. Glad to see one of my favorite big name bloggers continuing to improve & adapt (something that I can't say about others)!
4/22/2012 6:08 AM | # re: Redesigning my blog for adaptive layout
Hi Tim,

I've been looking at using a framework to speed up the process of making my client's websites responsive. So far I've tried 320 and up, foundation and the 1140px grid system; however, in each case I have discovered that I end up changing the design to fit the framework. Is this something you have found with Bootstrap?
8/8/2012 9:57 PM | # 
A blog or sharing must contain that points which are helpful for others in many ways,your blog have that qualities,we also have some fine source of Eid Text Messages

 
Please add 3 and 7 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.