The tagline on the home page of this site reads “It’s fine tuning down to the smallest detail”, and that’s certainly how I approached this project.
Since this is an elite brand, it was important to Lee that the website look good on smartphones and tablets, as that is how many of his executive clients would access it. The design concepts I received from Switch adapted admirably to smaller sizes. For tablets I reduced the width to four columns (logo, plus two rows of three menu items), for mobile to one column. At all sizes I made sure to align all the elements to the grid both horizontally and vertically. For the menu at mobile sizes I was able to achieve a pleasing design pattern by stacking the menu items vertically. The resulting block was the same height as the logo, which meant I didn’t have to use a drop-down or off-canvas menu.
There were a number of places where I spent extra time on the CSS to get things looking just right. For example, on the “About Lee” page at tablet sizes the blue quote slides over the logo as you scroll down the page. Since the quote has to have a transparent background (it lies partly over an image) the resulting combination of the text of the quote and the text in the logo was somewhat jarring. To smooth this out I added a semi-transparent background to the left-hand half of the quote only, and added soft edges via a
box-shadow. This makes the quote and logo more obviously appear as separate layers, for a more aesthetically pleasing effect. As another example, the blue line below the image on the home page could not be a fixed length or it would collide with another quote, but to get the correct vertical alignment, it had to be implemented as the bottom border of the containing
div. I solved this by using the
:after pseudoelement to make generated content stretching 75% of the width of the
div, to which I applied the blue border, then prevented this colliding with the quote by adding a 1px-wide black bottom border to the quote (again via
:after generated content) which was offset in such a way as to “erase” the last part of the blue line.
In terms of the infrastructure, this website was a custom-built, mobile-first, responsive design, implemented as a Genesis child theme, which used normalize.css as the basis for my stylesheet. The font was specified by Switch as Gotham, which I implemented as a webfont using the Cloud Typography service from Hoefler & Frere-Jones.