Tackling Mobile First Design | Web Design
A couple months after I completed my first website, I was itching to take on a new project. The more I had learned about responsive design, the more frustrated I had become with my previous website. “If only I had done that!” and “This would have been perfect for that page!” I would think. Tempting though it was to update my previous site, I instead decided to start fresh—it would give me a point of comparison.
This time around, I decided to base my website on something that would be easy to source images for, the Dunder Mifflin paper company of The Office. I looked to real world paper companies for a few examples and began my work. My number one focus was on having a site that would display well on mobile devices, perhaps to the point of my detriment. Still, I am largely happy with the result, the CSS driven hamburger menu was quite an effort (and one that I reused for Gopher Gaming!) and the products and about us pages both looked great on mobile without sacrificing the desktop experience. In contrast, the community page shakes things up with a nifty interactive image gallery for larger displays and some integrated Google maps. This page is well worth looking into!
Reviewing the site now, I can’t help but think the margins can be quite slim at some resolutions. The product descriptions could also do with one less horizontal rule, the prices feel too disjointed. The contact form is also rather barebones and would benefit from another pass. But don’t just take my word for it; have a look for yourself!