A super detailed journey through the redesign process of an entire website. This very website, in fact.
Welcome! This is going to be quite the journey, and like all journeys, this one starts with a single step. Our first step is to take inventory of bit of content on CSS-Tricks. Starting with this means that we won’t …
This redesign isn’t a redesign just for the sake of redesigning. I want to improve the site in every conceivable way you can improve a site. One of the big things is that the design should serve the different types …
This is an audio recording of a Skype call between Erin Kissane and myself. Erin wrote the book on content strategy so I was lucky to get her help and analysis.
By starting out with content strategy, the things that …
Designing in the browser is cool and all, but starting in Photoshop keeps me at my most creative when I need it the most: when facing the blank canvas. One way to fight against the painful glare of a white …
We add some extra layers beneath the main header/branding box to give the “stack of papers” look. No big metaphor or anything, it just adds some visual interest and gives us something to work with as we move to other …
We start designing the top level (main) navigation of the site. We’re starting with the desktop size screen (at an admittedly arbitrary width) but we’re not worried that the navigation will have any problem adapting to a small screen.
We …
We start dropping the text into the main navigation, just to see how it will fit, work on sizing, colors, etc. Some of the text is fitting pretty tight but that’s OK, we’ll make room, especially once it turns into …
The entire site is going to based on “modules.” Each little thing is going to be literally be in a box (both visually and in the code, ultimately). We start with a module for the most recent blog post on …
We certainly aren’t “done” in Photoshop forever for this design, but we have enough to work from to get started creating this design in the browser. After all, this is a website we’re building not a picture of a website …
While looking at our Photoshop mockup, we write start writing HTML to describe what we are looking at. We are of course using HTML5 whenever it makes sense to staying as absolutely semantic as possible. For example we use the …
Removing the user agent (default) CSS from most elements is usually a good idea. This has long been done by “universal” resets or things like the Eric Meyer Reset. I think the best option today is Normalize.css.
One …
So far the actual web site doesn’t look much at all like our Photoshop design. In this screencast we dig into doing just that, starting at the top with our header and logo area. It feels good to have a …
We using some positioning tricks to line up the left edge of the logo and the main content area, while still having the header touch the left edge of the page.
The navigation blocks, at the widest width, are 1/8 …
We set up a new Kit in Typekit for v10. For branding, we’ll use Proxima Nova Soft for now and some other fonts that look as close to the HF&J fonts in our mockup as possible.
We’re a little worried …
We start by tweaking the logo type a bit, but then jump into adding icons into the main nav. When we were designing the navigation in Photoshop (Video #007) we used the icon font Entypo. Now we’ll …
We introduce the concept of @media queries in CSS.
A lot of what using Sass on this project allows us to do is stay DRY (don’t repeat yourself). We did that setting color and size variables. We did that with …
In this super quick screencast, we use MAMP to set up a URL we can use for local development. This is useful for a bunch of reasons:
background: We could write our own Sass @mixins to help with CSS3 stuff (like gradients), but there is a Sass framework that already exists called Compass that already has that stuff ready to go. It takes a bit of a …
The site design is shaping up to be very grid-like. Our modules will lay out very cleanly into a grid. But aren’t grids complex and weird? And maybe we should go use some fancy framework out there? Nah. They’re easy. …
Continuing the concept of “Don’t Overthink It Grids”, we get gutters going on in the grid by just using some simple padding. We keep the padding number consistant by reusing our global $padding variable. You’ll find that we use …
Now that we’re running a custom local domain, we can use PHP. The “P” in MAMP is for “PHP” =). Using PHP means that we can use includes. For instance:
<?php include("header.php"); ?>Our goal is to make a static …
Before we do some typography work, I thought we would fix the annoying thing where the images are busting outside of the article area and the grid. Using some simple CSS rules to override inline image attributes and style, we …
I think it’s very nice to have an individual file (.scss) that is for the vast majority of typography on the site. Normalize has quite a bit of typography related stuff in it already, so let’s remove that and move …
Typecast (in beta at the time of this filming) is a really neat web app for playing with web typography. It gives you a great interface for playing around with the basics of typography, like what your headers and body …
Now that we have a blog post area to work with, we can really get into blog post typography. Arguably the most important typography on the site as it’s the place a reader will be spending the most time looking …
We’ve done a little bit of work on headers, but we’ll dig in more on those in this screencast. Headers are a darn important aspect of any site. Done well, our friends h1 through h6 should serve just about every …
As far back as I can remember, I used Google Code Prettify to apply the syntax highlighting on code block on CSS-Tricks. You know, where in a line like <div>test</div>, the <div> part is a different color than the …
We’ve just installed Prism.js and got it working.
In this screencast we find a theme called the Tomorrow Theme and ingrate it’s colors into the syntax highlighting. We make a little color key at the top of the file for …
Images aren’t the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an <img> and override its height value to auto, the image will …
We have this eight top-level navigation tabs, but Home is the only one that “works.” Just so we have some pages to work with, we stub out some pages for the rest of all the tabs.
Because we were smart …
In this super quick video we add in all the CSS necessary to make sure the current page item in the main navigation gets highlighted when that page is active. Turns out we kinda already did this, since we’re so …
We start out with playing with our blog post module, fiddling around with spacing. We also add the little colored square in the upper left of the module, a visual signifier of the type of content that it is.
The …
There is a lot of content on CSS-Tricks. That’s one of the things that makes it’s design a bit challenging. While we can stay clean with the design, we probably can’t get away with “minimal” with the amount of stuff …
Now that we’ve Photoshopped what we hope to accomplish with the search area, we set about building it with HTML and CSS. We already have our icon font loaded up, so we place that on the page. Font Explorer X …
We take a little break from working on search to solve a little niggling issue.
“FOUT” being “Flash of Unstyled Text”. This is phenomenon where @font-face fonts take a little bit to load and thus you see the fallback …
We pick up where we left off in Video #034 and continue building out the search area.
This time we’re focusing on the “open” state of the search, building the actual form elements themselves. The search field itself uses the …
We have a little more work to do to finish up the search area.
We get sidetracked for just a second as I notice we didn’t add the three-dimensional stacking affect to the page wrap yet, so we do that …
We’ve created the look of a button in it’s regular state, but a 3D button like that is begging for a “pushed” state. What we do is add a darker color to the button on :hover and :focus. Then …
We’ve left a big amount of open space in the header. From the very start, I knew this would be be for CSS-Tricks primary sponsor, Treehouse. In this screencast we start designing what the advertisement for them will be …
We start out with the intention of jumping into HTML & CSSing the Top Treehouse Ad that we just designed, but of course get derailed as soon as we start with fiddling around with the logo and how it behaves …
