A super detailed journey through the redesign process of an entire website. This very website, in fact.
We have the markup in place for the Treehouse ad on the top of the page, but we have some styling work to do. We start with the tree graphic itself.
We’re thinking that using vector and outputting as SVG …
The ad we have in place is great for large/desktop size screens, but it starts to fail pretty quickly on smaller screens.
We have some breakpoints already in use in this design, but where this design starts to break doesn’t …
The search design works fine until we get down to our “baby bear” (small mobile) size break. We have to do something different there. We make some room for it below the navigation area and then move it down into …
Squeezing down a desktop browser very narrow can give you a vague sense of how a responsive design works, but it’s not an accurate representation of an actual small screen device. And actual small screen devices are what we’re designing …
For I think the first time in this series, we’re going to add some new things to the design directly by working in the browser (not starting in Photoshop first). Our goal is to design up the “Hot Links” modules …
The top module in the main sidebar of the site belongs to Treehouse, as the main sponsor of CSS-Tricks. Based on a conversation I had with Ryan Carson, some of the best converting ads they have are the ones with …
There is a long tradition of polls on CSS-Tricks. They are fun, gather good important data, and increase people’s connection to the site. Engagement FTW!
We go grab the markup from the live v9 site for some stuff to work …
We left off with a totally decent poll widget. The typography is clean and everything perfectly usable. However, it wasn’t exactly compelling or fun. We quickly look at the multicolor area of the Gallery as a bit of inspiration for …
We’ve already spent a little time stubbing out pages so that our navigation works (Video #030) and you can click around the site, but what is on those sub pages isn’t enough to feel like a real page. …
We start to dig into the layout of the Gallery area, which is something that has been on my mind since the beginning of this redesign process. Mostly because… the gallery in v9 kinda sucked. We’re going to do better …
We have the grid layout for the Gallery going. Unfortunately the loading of it is a bit abrupt and wonky. This is because CSS3 columns are designed to split content among each of the columns evenly, but images sometimes take …
In which we figure out the issues we were having with getting the column layout to load in nicely. The fix was to remove the CSS that was making the aspect ratio abiding placeholder boxes work once the image loads …
We add in some responsiveness to the grid we have set up for the Gallery. At the widest screens, we have it set at four columns. Then we start adding in breakpoints via our super easy @mixins we have set …
We have a good start on the responsive design. The menu at the smallest screen sizes breaks down into a 2×4 grid. It fits nicely on the screen, but between that and the the branding it takes up an awful …
Up until now, we’ve been making code changes locally without using any sort of version control. With the complexity of this site rising, that’s becoming more and more irresponsible. What changed and when? Why did it change? How can we …
As I was working on this design, jQuery 1.8 was released. This is just a quick video to rely the fact that this kind of thing happens as you develop sites and during pre-release development is the perfect time to …
There are seven different main areas of the site beyond the homepage. So, I hired seven different illustrators to do designs. This is the first one we are going to dig into and get implemented into the site. It’s the …
We have the basic gallery header in place, but it’s missing the little blue people that Erica put in the original illustration. We had talked about it in advance, and decided it would be pretty cool if when the screen …
We just got the custom header for the Gallery in place, so while we’re at at, let’s keep going on adding another custom header. this one was done by Erica’s brother, Nick Sirotich.
Because this is a different illustration, …
Nick’s illustration had three different layers for the heads. They are just slightly different variations. We could swap out the images with an animation or with JavaScript or something but having an always-running animation (or even one that runs every …
The only thing missing now from our customs Forums header is the part that actually says “Forums”!
Nick illustrated a hand holding a sign that was meant for that area. We remove the text that was there (not a huge …
As you know, some of the ads on CSS-Tricks are kind of “self managed”, like the main Treehouse sponsor. I took that on because it’s just a single advertiser and we have a very specific relationship and the ads are …
Now that we know exactly what zones we’re working with, we go back to Photoshop and mock in how we want these ad zones to look.
We have a precedent for the sidebar ad. It will be essentially just like …
We have a mockup of how we want our BuySellAds zones to look like, so let’s get on building it for real. The BuySellAds website provides the code we need to put on our site for the ads to show …
We have another BSA zone to get integrated into the site. This one should be a bit easier because we already have the JavaScript in place and it’s just one ads in one module. We’ve actually have that top treehouse …
We embark upon the great journey that is the footer! CSS-Tricks has always had a big fancy footer and this design will be no exception. It’s not purely gratuitous though. We have lots of things that really deserve at least …
We’re working on creating a design for the footer in Photoshop. Quick reminder: I work in Photoshop because I feel more creative there before I jump over to the browser. I don’t linger in Photoshop but that’s where I like …
We get down to some more Photoshoppin’ business in this screencast, laying out the bottom-most footer with links to my two biggest other projects, CodePen and ShopTalk.
We write some copy live in the screencast, which of course is an …
This is the last of the Photoshop work we’ll do specifically about the footer before we jump over into actually building it.
In this screencast we essentially put in the list of links that surround the “Photostar”. Nothing too fancy …
With our design for the footer all ready to go in Photoshop, we can start building it out into our static HTML and CSS mockup. The first step is giving ourself some HTML to work with. We already have a …
With the HTML structure for the footer in place, we have what we need to start styling and getting this footer looking like what we designed in Photoshop.
We create a new SCSS file just for the footer, because that …
In this screencast we largely deal with the orange “Photostar” the dominates the footer.
We make the star in a separate file in Photoshop, so we can make it the correct size the web needs, not what makes the most …
In this screencast we focus on the lines underneath the the links in the top part of the footer. We kinda stumble around figuring out which things should have relative positioning and what shouldn’t so we can get these lines …
In this final screencast of building out the footer, we work on the bottom footer where the CodePen and ShopTalk areas are.
We have to change the HTML a bit as come come to the realization that the four chunks …
The header for the Alamanc has come in, this time from Giovanni Difeterici.
We use a lot of techniques that we have already established to get started with this. We create a new .scss file just for the Alamanc …
The custom header illustration for the videos section has come in, this time from Alyssa Nassner.
We spend a little time organizing the Photoshop file and naming layers and stuff just so we can stay organized and understand what’s …
The snippets head has come in, this time by Reagan Ray.
We spend a little time in Photoshop this time shuffling things around a little bit to make sure we have a background that is the exact height we …
We’ve already been working locally at a local domain (v10.whatup). Now it’s time to get started moving into WordPress. We’re going to keep working locally at a local domain, but we’re going to start using the already working local install …
As we get started working in WordPress it will be best if we snag an exact copy of the live database to work with locally. Some websites have things like phpMyAdmin installed which provide a GUI for things like exporting …
We have an .sql file now thanks to exporting it and downloading it as we did in the last video. Now we just need to run it and overwrite our currently existing local database. This local database already exists because …