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.
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.
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.
- Responsive Web Design article on A List Apart by Ethan Marcotte
- Responsive Web Design book by Ethan Marcotte
- Mobile First book by Luke Wroblewski
- Creating a Mobile-First Responsive Web Design by Brad Frost
- Responsive Web Design Patterns by Brad Frost
- Head First Mobile Web book by Lyza Danger Gardner, Jason Grigsby