#041: Building the Top Treehouse Ad, Part 2

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 might be cool because it will look sharp and be of small file size. Watch me flail around in Illustrator …

Play

#042: Responsive-izing the Top Treehouse Ad

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 match up with those existing breakpoints. No problem, we can easily make one-off breakpoints just for this.

We make some …

Play

#043: Responsive-izing Search

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 that space with absolute positioning.

We have a bunch of tweaks to do to make this somewhat drastic shift in …

Play

#044: Responsive Tweaks on Real Emulator

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 here, not other curious designers squeezing their browsers down =).

In this screencast we open up the iOS simulator …

Play

#045: Hot Link Modules

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 that show themselves on the homepage.

We label each section on the homepage with header tags. For instance "Latest Blog …

Play

#046: Flexible Sidebar Ads

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 people in them, so we pick out one of those to use for the graphic in the module.

When we …

Play

#047: Building the Poll Module, Part 1

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 with. We fiddle with some spacing stuff to make the module look better for the type that they are. For …

Play

#048: Building the Poll Module, Part 2

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 what might make a fun background for the Polls module. Each poll answer has a different percentage of people that …

Play

#049: Stubbing Out Headers & Sections

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 spend just a few minutes fleshing out those pages so that they feel more like real web pages. Not …

Play

#050: Building the Gallery Grid

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 this time.

We're going to make the gallery layout nothing but a big grid of images. That's what other galleries …

Play

#051: Smooth Loading Gallery, Part 1

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 a moment to load and don't have a width/height to use yet. So when they do pop in, the columns …

Play

#052: Smooth Loading Gallery, Part 2

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 (which holds aspect ratio all by itself). Then apply a CSS class to make the "fade in" work (changing opacity …

Play

#053: Responsive Columns for the Gallery

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 up and have been re-using all over.

At our mama-bear breakpoint we go down to 3 columns, then we make …

Play

#054: Tap-to-Show Mobile Navigation

We have a good start on the responsive design. The menu at the smallest screen sizes breaks down into a 2x4 grid. It fits nicely on the screen, but between that and the the branding it takes up an awful lot of space. We open it up on the iOS simulator and see that in some cases you can't see …

Play

#055: Getting Static Mockup into Version Control

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 see what it was before in case it causes problems we only find out about later?

There are so many …

Play

#056: Updating Versions of jQuery Mid-Stream

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 upgrade stuff like this. We test it on a page that has the most jQuery on it as of yet …

Play

#057: Custom Header for The Gallery, Part 1

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 the gallery section of the site and it's done by Erica Sirotich.

We jigger around the HTML and CSS …

Play

#058: Custom Header for The Gallery, Part 2 (with Reverso Media Queries)

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 was resized, the people would stay put as the gallery wall moved behind them, so it looks kinda like they …

Play

#059: Custom Header for The Forums, Part 1

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, we do a few things differently. For one thing the row of heads really makes sense to repeat on the …

Play

#060: Custom Header for The Forums, Part 2 (Rapid Media Queries)

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 page load) would probably be mega-annoying for heavy forums users. Instead we'll make it an Easter egg, that is, a …

Play

#061: Custom Header for The Forums, Part 3

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 fan of Impact) and replace it with something more hand-written which I feel like works with the site better.

Just …

Play

#062: A Look at the Current BuySellAds Setup

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 integrated into the site in a way that wouldn't be practical through an automated service. But other ads on the …

Play

#063: Mocking up BuySellAds Zones

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 the Treehouse sidebar ad, a module with an image inside it with the padding removed.

We do something similar with …

Play

#064: Implementing BuySellAds Zones

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 up. We copy and paste that over.

We attempt to shut off the CSS that BSA injects onto the site …

Play

#065: Adding BuySellAds Sidebar Ad

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 sidebar ad already in place so we can take queues from that.

We run into a dumb little roadblock where …

Play

#066: Photoshopping the Footer, Part 1

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 a link on the site (e.g. social media links, contact links, other projects I work on, etc) and the footer …

Play

#067: Photoshopping the Footer, Part 2

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 to do visual exploration.

We go back through the inventory of content we took in the very first video. …

Play

#068: Photoshopping the Footer, Part 3

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 important aspect of design. The copy is accompanied by big logos of the projects themselves (which are converted to black …

Play

#069: Photoshopping the Footer, Part 4

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 right? We decide that you know what people understand and are easy to use? Lists of links.

Visually the stuff …

Play

#070: HTMLing the Footer

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 "part" that we include on all pages called "footer.php". This is the perfect place to include our footer markup for …

Play

#071: CSSing the Footer, Part 1

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 just makes sense to keep modularized and that's what we've been doing for everything else. We @import it into the …

Play

#072: CSSing the Footer, Part 2

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 sense in the main Photoshop file. We make it bigger than it is on the web so than we can …

Play

#073: CSSing the Footer, Part 3

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 the size and position they need to be.

We colorize the line with a gradient using the simple background Compass …

Play

#074: CSSing the Footer, Part 4

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 along the bottom (logo, text, logo, text) would make sense to be a series of inline block elements that are …

Play

#075: Custom Header for the Almanac

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 section of the site. We resize the original artwork to the size we need it.

We play around with the …

Play

#076: Custom Header for Video Section

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 what. We save a copy of the file so as not to mess with the original.

We ultimately have four …

Play

#077: Custom Header for Snippets

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 need and also quite wide.

The implementation of this one is simple. Nothing really needs to move around, it just …

Play

#078: Moving to WordPress, Creating a Theme

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 of CSS-Tricks I have (css-tricks.whatup).

We start by just duplicating the existing WordPress theme in the wp-content/themes/ folder and renaming …

Play

#079: Moving the Live Database Local

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 a database, but the CSS-Tricks database is just too big for that. So instead we SSH into the site and …

Play

#80: Updating Local Content by Running the SQL

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 we've long been running CSS-Tricks locally through MAMP (one of those M's being MySQL).

We connect to MySQL with the …

Play

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag