Responsive!
I know, I’m terrible at updating my blog, and I hope to get better at it and just use it for a nice journal, even if I’m the only one who reads it. I’ve been using WordPress as a blog for about 4 years now, and it’s amazing to me to go back in time and read about what I was doing. And it’s so easy to do it.
Recently I learned about Responsive Web Design and have been itching to build and or retrofit a current site of mine to utilize that technique. What exactly is that technique? Well, you build your sites to be much more fluid.
For years now my general practice in designing a website was to make it a fixed-width layout, typically 960 pixels wide. This allowed the site to fit perfectly in 1024×768 screens, and still look just fine as they got bigger. However, this also meant horizontal scrolling for smaller (800×600) screens. Thankfully, not many folks are stuck with such small screens.
Also, if I built the site good enough, iPhones, iPads etc would display the site just fine, albeit smaller (zoomed out) on the screens. This is an acceptable enough practice as well. However, mobile is taking over, quickly. For the past few years websites have answered by building mobile-specific version of their website to be served up instead of the desktop version, depending on what accessed the website. While it’s a good solution, it’s also a time consuming double-designing solution.
The new answer is to make your site responsive, use a more fluid percentage based structure and then shrink the site until it breaks. At that breaking point you add a new rule to the CSS (via Media Query) and fix the design. Then, you shrink it again until it breaks and create a new fix. (Another approach is going opposite, or, design smaller and then make it bigger).
Anyway, I’ve retrofitted unculturedswine.net to now have a responsive design that grows and shrinks no matter what screen you’re using to view it. iPhone, iPad, Android, Desktop, Laptop etc this site is now built to scale and stretch. Very exciting, I know.