My Site Now Fits on Your Phone (and Your Tablet)

Posted in Mobile, News, Responsive Web Design, Web Standards, WordPress

mpgilbert.com on multiple screens

That’s right! I’ve re-written all of the HTML and CSS code on this site so that it’s now fully responsive. In other words, if you’re looking at this on a desktop computer, you can slowly resize your browser (i.e., click the lower-right corner and drag it to the left) and watch all of the website’s content shift around as the window gets smaller and smaller until you reach the approximate size of a mobile phone. The overall layout, all of the text, and even the images will respond to the size of the browser at all dimensions. As the browser gets smaller, the site shrinks to properly fit. If you’re looking at this site on your mobile phone, you’ll just see a simple, clean, and performance-oriented website. The HTML code and all the content throughout the entire site are the same for all devices and screen widths.

There are several methods of doing responsive web design, but after much research and agonizing, I decided to take the mobile first approach. I did quite a lot of reading and experimenting over the last several weeks and decided to use my own website as the test. I must say, I had serious reservations about being able to make the mental shift to thinking about the mobile experience at the beginning, but I was pleasantly surprised with the process when I actually started coding. When you break it down, it’s really just an extension of the concept of progressive enhancement which I’ve been a big fan of for many years. I generally try to separate the underlying structural markup (HTML) from the presentation (CSS) and behavioral layer (JavaScript) when building any website, but this seemed like taking it to a whole new level.

The other thing that I was surprised about was how comfortable I’ve become over the last few years at designing in the browser. I had a pretty clear mental picture of the final desktop layout, but I made numerous adjustments to the CSS in reaction to what’s happening in the browser at various widths. Also, I didn’t sit down with Photoshop and create design comps of the three typical browser widths (CSS media query breakpoints). For me, it’s much easier to see what’s going on in the browser and make adjustments to the code along the way.

I’ve always supported the “content is king” way of thinking, so the whole mobile first approach made a lot of sense to me—it places the content front and center from the very beginning. This may seem like an obvious thing to do, but you may be surprised to find out that it’s far from the norm in the field of web design. Websites are usually designed with fake content (called greeking in the industry). This approach has always confused me… how can you design a site without any of the content? What happens if the content that eventually gets written doesn’t fit into the neat, tidy, conveniently designed spaces? Well, it often doesn’t fit. That’s the problem.

I’m not primarily a visual designer, so when I decided to do this redesign (really it’s more of a rebuild), I needed a visual design to start with, so I maintained the basic look and feel of the existing WordPress theme that I bought a couple years ago (Elefolio by WooThemes). I like the simplicity of the design with the neutral colors and overall non-intrusive approach that features the portfolio items nicely. Working with an existing visual design also closely matches the way that I normally work—partnering with a visual designer—so that was a familiar and comfortable starting point. I made several enhancements to the original design, but some visual elements are still present.

Additional Reading

Interested in reading more about responsive web design and mobile first? Look no further… here’s a short list of online resources that I found extremely useful while I was doing all of my research, experimentation, and development.