#001 – Intro to the Series

Running Time: 4:02

Hello everyone! Welcome to the complete series on building a mobile first artist website with WordPress. This is slightly different than the last series where we recorded as we built. In this course, the “final” website is already built: JeffCampana.com

Watch the Screencast

#002 – A Look at the Old Site

Running Time: 3:30

In this screencast we take a look at Jeff’s existing website. This series isn’t so much “redesign” focused as the v10 series was, but there is an existing website here and we will be using some existing content from it. …

Watch the Screencast

#003 – Initial Client Communication

Running Time: 8:52

In this screencast I talk about what the communication was like between me and Jeff when he first emailed me about wanting to redesign the site.

The overall vibe from Jeff was “It’s time.” It’s time to redesign the site. …

Watch the Screencast

#004 – A Photoshop Canvas

Running Time: 3:59

From the last video, we know we have five major points to consider when starting into the design of this site. We’ll keep those at the top of our mind as we move forward.

We’re starting “mobile first” of course, …

Watch the Screencast

#005 – Photoshopping Mobile, Part 1

Running Time: 10:54

We start out with our Photoshop file open. The rather silly looking “elongated” iPhone screenshot, which simply just gives us a canvas in the mobile first context.

We start out as simple as can be: with Jeff’s name. We need …

Watch the Screencast

#013 – Tweaking the Slider

Running Time: 10:31

The slider is implemented and works, it just doesn’t look like how we have designed it. We go through the process of stripping away HTML and CSS that we don’t need. We also look at the settings for the RoyalSlider …

Watch the Screencast

#014 – Positioning the Slider

Running Time: 11:06

The slider works! But it’s not placed quite exactly as we have designed in our Photoshop file. We need more room below it to expose more of the main navigation.

In this screencast we dig into the CSS that comes …

Watch the Screencast

#016 – Home Navigation, Part 2

Running Time: 14:33

We have a good start on the homepage navigation, but there is some styling stuff that still needs to get done. We start by completing the content itself, adding a few more nav links for a total of five. Then …

Watch the Screencast

#017 – Home Navigation, Part 3

Running Time: 11:16

We’re almost done with the homepage navigation, but there is some weird space below our slider and above the navigation itself. We dig into finding out why.

For those of you who like to watch exact solutions, this isn’t for …

Watch the Screencast

#018 – Footer

Running Time: 3:17

This will be about the simplest footer ever on a site. It will be a copyright symbol with Jeff’s name (It’s always nice, I think, to have the name of the site in the footer in plain text for easy …

Watch the Screencast

#019 – The Blog, Part 1

Running Time: 10:25

We start to work on the blog area of the site. We want to have the blog area of the site at /blog/ – so we end up making a page template for that called page-blog.php and using the Settings …

Watch the Screencast

#020 – The Blog, Part 2

Running Time: 12:34

The blog is outputting what we want it to, but the typography and layout of it isn’t quite there. We add a bit of markup here and there as needed to give us better semantics and elements used just for …

Watch the Screencast

#021 – The Blog, Part 3

Running Time: 9:06

The typography still isn’t quite right, so we spend a little more time making adjustments to it. This is worthwhile doing here, because header and body copy typography will server just about everywhere on the site well.…

Watch the Screencast

#022 – Blog Archives

Running Time: 12:10

There is only one way to get to the blog area of the site from the homepage, and that’s by clicking the “Lastest Writing”. But that takes you to the most recent blog post. We’ll also need a way to …

Watch the Screencast

#023 – Page Template

Running Time: 7:17

In pretty much all WordPress themes there is a filed called page.php. This is the template that controls “Pages” – one of the default type of content that all WordPress sites have. Pages differ from Posts in that they don’t …

Watch the Screencast

#024 – Subpage Navigation

Running Time: 9:33

The homepage navigation is meeting our needs well, but having that huge chunk of navigation on every page of the site isn’t practical. We’ll need something more understated for the sub pages of the site.

In this screencast we create …

Watch the Screencast

#026 – Super CMS, Plugin Setup

Running Time: 12:40

With our two workhorse CMS-extending plugins installed, we spend a bit of time setting them up.

“Events” on Jeff’s site is a perfect example. An “Event” should have a title and description, so those default fields are fine, but it …

Watch the Screencast

#028 – Events, Admin and UI

Running Time: 9:19

We learned how to do a custom loop and output custom data from our custom post types and custom fields in the last video. This time we need to do it again, only for the slightly more complex Events section. …

Watch the Screencast

#029 – Events Wrapup

Running Time: 6:17

I thought we could scoot by Events which what we talked about in the last video, but as I fleshed out the Events area enough code had to be written I thought it was worth a wrap-up video.

In some …

Watch the Screencast

#030 – The Contact Form

Running Time: 4:13

One of the five major areas of the site is the contact page. It barely requires any covering at all though, because we simple built it in Wufoo and embedded the code for it as a page and published it.…

Watch the Screencast

#032 – Moving the Home Nav, Media Queries

Running Time: 7:50

We working on fixing up the site so that on “desktop” (i.e. larger) screens the site still looks good. The homepage navigation is another thing that gets a littler ridiculously large on desktop. So instead of doing that, we shift …

Watch the Screencast

#034 – Ajaxing in a Blog Post

Running Time: 11:03

We end up with a really simple test which loads in an article from the blog to display if there is room:

// Load additional content if enough room
enquire
  .register("(min-width: 700px)", {
    match: function() {
      $("#home-article").load("/blog/ #main-article");
    }
  })
  
Watch the Screencast

#035 – Desktop Hover States

Running Time: 7:47

Just because this is a mobile-first series doesn’t mean we can ignore the interactions of desktop/laptop computers. We spend a bit of time making sure there are :hover/:focus/:active states for “clickable” things like links. We use the Sass ability to …

Watch the Screencast

#037 – Color Manipulation

Running Time: 23:50

Back when we were messing with giving CMS abilities to the homepage slider, we gave a custom field to each homepage slide a color picker. That gives us access to that color wherever we need it. In the template, we’ll …

Watch the Screencast

#038 – Comments Cleanup

Running Time: 13:00

WordPress powers the comment area of Jeff’s site. This will be super easy to clean up with our CSS superpowers. We make a .scss file just for comments (the perfect example of where a Sass partial is appropriate). We include …

Watch the Screencast

#039 – Cross Device Testing

Running Time: 5:53

For the most part so far, we’ve used the iOS simulator to test the mobile version of our site. That’s pretty good, a lot better than testing a narrow browser window, but it is also not nearly comprehensive.

We use …

Watch the Screencast