A super detailed journey through the redesign process of an entire website. This very website, in fact.
We look at the contact page and decide that it’s the kind of page on CSS-Tricks that is very generic and doesn’t need any particular special styling at all. Really the only difference between a generic page and a blog …
The videos archive page is the part of the site where people can browse all the free videos available to watch. It’s for browsing, must like the homepage for the snippets or the homepage for the demos.
These pages are …
We just finished an exciting part of this redesign where we got to throw away a bunch of gross markup in the video archives page and replace it with new, smart, clean, auto generated markup. But we have more work …
In this screencast we’re going to work on the “Demos” area of CSS-Tricks. It’s a rather popular area of the site, despite the fact that I don’t put as much time into it as I should. The point of it …
In this screencast we dig into designing another very important page. This is one of those pages I’ve been excited about designing since the beginning, because it’s a page that was particularly under-served by the last design. In this new …
In the screencast we dig into the HTML and CSS and WordPress template that is the single video page. We’ve already designed how we want this to look in our Photoshop document, so we just need to bring it to …
In this screencast we’ll finish up code-wranglin’ the template for single videos.
We start by getting organized in our CSS a bit. Some of the videos.scss file is global to video-related pages. Some is specific to the archival pages and …
In this screencast we’ll dig into the Deals section. The Deals section is essentially a “wall of ads”. It’s an area of the site that people would have to navigate to themselves, so I’m not worried about jamming ads down …
In this screencast we dig into adding some more modules to the homepage of the site. Fairly important stuff! At the moment, we only have a handful of them over there. We have a few hot links, a couple of …
The article archives page on CSS-Tricks is rather important. Rather than having paginated blog posts like most blogs have, I simply link to the archives. I figure it’ll save people the trouble of click-and-scrollbrowse, click-and-scrollbrowse, click-and-scrollbrowse… Instead, they go right …
In this screencast we set about building out a few more of the modules we plan to have on the homepage.
Just a little tweak and we’re showing three hot links instead of two. Copy and paste a bit of …
In this screencast we dive into an all new section of the site: The Forums! This is a huge area of the site. Perhaps not so much in traffic (I’ve always wished it could grow, traffic wise), but certainly in …
In this screencast we’ll actually dig into the code of the Forums area.
The “main” file of the forums, if there is such a thing, is default.master.php. It’s a bit like index.php in a WordPress theme, except literally every view …
In this screencast we continue to dig into the code of Vanilla Forums and get our theme going. We make the decision right away to do the wild-n-crazy move of nuking the entire set of CSS that comes from Vanilla …
We keep digging into theming the Forums area of the site. We’ve done good so far, but the deeper we dig the more difficult things are going to get. Partially just because I don’t have a ton of experience with …
We left off trying to decide if we can win the battle for a static login form or not. We probably could, but in more playing around with the forums, we see that it’s not just login that by default …
We jump right into styling the main content area of the homepage of The Forums. Arguably the most important part of the forums, since it’s the first thing people see when arriving to The Forums. This gives us the opportunity …
It’s been a bit of a long road wrestling control over all the parts we need, with a couple of struggles and surprises along the way. We can finally get started designing those modules on the homepage according to the …
You might argue that the homepage of the Forums is the most important page, but there are equally good arguments for individual thread views being the most important. Data suggests people land on these “deep links” in higher numbers than …
We’re still neck deep in the Forums area. In this screencast we look at the signup page. Another rather important page as we want the experience of joining the forums to be and easy and welcoming as possible.
We’re a …
In this screencast we take a little break from battling Vanilla Forums styling to work on setting up Restrict Content Pro (RCP), our WordPress plugin for managing subscribers to The Lodge, the private access area (that you are literally inside …
Along the right side of the forums there are a series of modules. “Modules” visually, “Modules” literally in code, and “Modules” in that the content they contain is a related group, separate/different from the content in other modules.
The first …
Don’t be mad, but I had to jump ahead a little bit because there was some grueling long boring work of overriding different views by putting the right files in the right places in our Vanilla forums themes. We’ve gone …
We’re trying to wrap up the styling of the forums here. One of the major navigation mechanisms on the forums is the pagination. At the bottom of the page, you can move on to the next page or jump to …
We’ve done a little prep for this new “Private Access Area” on CSS-Tricks. We’ve looked at WordPress plugins to help us, we’ve even decided on one and set it up. But now we need to get into actually building the …
In the last screencast we snagged that photo from iStockPhoto of the snowy cabin and forest. We dropped it in the background, behind the main content area and sidebar of our Photoshop document and it fit nicely up there, in …
In the last video we figured out how to serve different content within our templates based on the users’s login and subscription status. We use that ability in this screencast to work on the “Sales Page” – that is, the …
One of the reasons WordPress is awesome is that it comes with its own fully functioning user authentication system. Writing that from scratch these days would be pretty dumb if you don’t plan to bring a heaping pile of innovation …
In this screencast we look into how we can host files on Amazon S3 (Simple Storage Service) in such a way that we can link to an use those assets, but not make them entirely public. Only make them accessible …
We make a module for the general sidebar of the site that is just for the The Lodge. If you’re logged in, it will welcome you and provide relevant links regarding getting to the content and about your subscription. If …
Our “widget” for The Lodge in the sidebar of the site (shows on most pages, including homepage) has two states. One for when a user is logged out and one when a user is logged in. The logged out state …
The signup page for The Lodge is very important for obvious reasons: this is the page that collects the money and grants the access to the membership area. It needs to look good and work better.
Text is a part …
The homepage for The Lodge when you are logged in (i.e. /lodge/) will be kind of a “portal” page. This series, which we’ll call “The Big v10 Redsign Project”, will eventually be just one of the projects shown on this …
We are JUST ABOUT to launch this thing! It’s time to look over the last few little issues that need shoring up before we can launch. Bear in mind, the site is no where near perfect. But it’s close enough …
This is the big moment! We have a list of things we know that we need to do and we’re just going to start doing them and get this site live.
Perhaps the most noticeable change (last second thing before …
I shot the video just maybe 10 minutes after launching the site. Comments are starting to roll in and this is me kind of reacting to some of that. Like anything of this nature, there are reactions both positive and …
About a month after the launch we talk about how the v10 launch has gone.
We look through the document we set up at the very beginning of this process where we wrote down all the goals for the redesign. …
