The complete process of designing an artist’s website from a mobile-first perspective using WordPress as a CMS.
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…
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. …
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. …
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, …
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 …
We have the “header” of the design in place, we just need to figure out the rest of the page. We have a list of the most important goals we’re trying to accomplish, so that will help us guide us. …
We want to be working locally while working on this project. Just a few reasons:
We’re going to stop looking at the old site here soon. This is the last time! Our plan now that we have a proper local dev environment is to give ourselves a completely fresh start. We want to strip the …
We in the midst of stripping down our WordPress theme to about as bare-bones as we can get it. We’re not worried about the design we’re trying to get to, we’re concerned about stripping away the old and giving us …
In this screencast we have CodeKit start watching our project. This makes lots of developer tasks much easier.
The first thing we do is us it to losslessly optimize an image. Easy one click.
Then we install Compass in the …
We’ve picked out Proxima Nova as the main font to be used for Jeff’s site. It’s darn popular these days, but it looks great with Jeff’s work. Simple, clean lines, doesn’t force too much personality. We use Typekit so that …
We decide to go with the RoyalSlider for the slider on the homepage. I’ve long been a fan of the AnythingSlider, because I was part of it’s creation and I think it’s very powerful. However, I think it’s a …
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 …
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 …
We have a plan for the home page navigation, we just need to get it done in code. Home page navigation, I say specifically, because this is likely only going to be used on the homepage. It would be a …
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 …
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 …
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 …
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 …
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 …
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.…
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 …
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 …
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 …
We can really extend the “CMS” abilities of WordPress with just a couple of plugins: Advanced Custom Fields and Custom Post Types UI.
With these installed, we can create brand new content types that make more sense for the …
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 …
We have another post type that needs the proper custom fields applied: the homepage slides. This is the kind of thing that would be easy and tempting to hard-code into the template, but we’re going to go the extra mile …
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. …
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 …
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.…
When the browser window gets larger, the slider at the top of the homepage gets ridiculously big. This is a mobile first series, but since the mobile version of the slider is already working well (perhaps we should load smaller …
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 …
As we were desktop-izing the site, we moved the homepage navigation over to the right side of the page to open up a hole on the left side for more content. We’d like to add this content only when the …
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");
}
})
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 …
On larger screens, we have more room on all our pages. We’ve dealt with this on the homepage, but we can do better on the other subpages as well. A single blog post page is an important one.
By default, …
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 …
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 …
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 …
It’s time to bring this series to a close. It’s been a fun ride!
There are some difference between what we covered and what is actually on JeffCampana.com. As is usually the case, some stuff ended up nicer the …
