I was pretty excited when I first started reading about Ethan Marcotte’s ideas on responsive design, and had really been itching to use some of those techniques on a project. After finally being able to try a few things out on a forthcoming project at work, I got comfortable enough to make my own site more responsive.
I started by tackling the way the site would be displayed on small screens like mobile devices. A lot of sites I’ve seen (mediaqueri.es is a great resource) use a stacked navigation menu for small screens, which I like a lot. I was worried that the stacked menu pushes content off the screen though, so I decided to move the navigation menu to the bottom of the screen, below the content. I also included a menu button that jumps down to the menu, for users to get there without scrolling through some of the longer pages like blog entries. As media queries recognize the screen getting larger, the menu icons spread out horizontally above the content, and eventually stack along the left side in their own column.
responsive layout for small screens
