#043 Responsive-izing Search

Running Time: 16:32

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 …

Watch the Screencast

#044 Responsive Tweaks on Real Emulator

Running Time: 18:23

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 …

Watch the Screencast

#045 Hot Link Modules

Running Time: 13:12

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 …

Watch the Screencast

#046 Flexible Sidebar Ads

Running Time: 11:50

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 …

Watch the Screencast

#047 Building the Poll Module, Part 1

Running Time: 22:01

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 …

Watch the Screencast

#050 Building the Gallery Grid

Running Time: 12:45

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 …

Watch the Screencast

#051 Smooth Loading Gallery, Part 1

Running Time: 8:24

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 …

Watch the Screencast

#052 Smooth Loading Gallery, Part 2

Running Time: 2:41

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 …

Watch the Screencast

#054 Tap-to-Show Mobile Navigation

Running Time: 25:05

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 …

Watch the Screencast

#063 Mocking up BuySellAds Zones

Running Time: 5:56

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 …

Watch the Screencast

#065 Adding BuySellAds Sidebar Ad

Running Time: 12:15

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 …

Watch the Screencast

#066 Photoshopping the Footer, Part 1

Running Time: 9:44

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 …

Watch the Screencast

#067 Photoshopping the Footer, Part 2

Running Time: 7:50

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 …

Watch the Screencast

#068 Photoshopping the Footer, Part 3

Running Time: 10:50

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 …

Watch the Screencast

#069 Photoshopping the Footer, Part 4

Running Time: 13:17

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 …

Watch the Screencast

#070 HTMLing the Footer

Running Time: 15:26

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 …

Watch the Screencast

#071 CSSing the Footer, Part 1

Running Time: 9:36

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 …

Watch the Screencast

#072 CSSing the Footer, Part 2

Running Time: 10:25

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 …

Watch the Screencast

#073 CSSing the Footer, Part 3

Running Time: 9:50

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 …

Watch the Screencast

#074 CSSing the Footer, Part 4

Running Time: 9:22

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 …

Watch the Screencast

#078 Moving to WordPress, Creating a Theme

Running Time: 8:54

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 …

Watch the Screencast

#079 Moving the Live Database Local

Running Time: 3:49

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 …

Watch the Screencast