The Lodge

Table of Contents For The Series

Building a Mobile-First WordPress-Powered Artists Website

#001 – Intro to the Series

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. We’ll still walk through every step of the building process, it will just happen a bit quicker and with more focus since I’ve already gone through it once. In fact, in doing it a second time, I suspect we’ll …

#002 – A Look at the Old Site

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. Even if we weren’t, we should be well acquainted with what came before in order to move forward.

There is quite a bit about the site that is falling apart. It’s hard to read. It’s hard to manage. It’s hard …

#003 – Initial Client Communication

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. There doesn’t always have to have fancy business reasons for everything, that natural feeling o wanting to redesign is fine. However, there likely is a lot of specific things we can hone in on. One major example is that he …

#004 – A Photoshop Canvas

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, and we’re going to start figuring out the design in Photoshop. We won’t linger there, but the creative tools in Photoshop are great for creative thinking at the start of a design project.

We open up the iOS simulator that …

#005 – Photoshopping Mobile, Part 1

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 to pick a font straight away. This kind of thing can be very difficult. We have a legacy font to deal with (the font used on the last site) and Jeff’s brand and personality to consider. Fonts can bring so …

#006 – Photoshopping Mobile, Part 2

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. Essentially a set of links (“main navigation”) will serve us well.

For instance, we need to showcase Jeff’s writing. A link to the blog makes good sense. No sense in making it tiny. We’re working with small screens here so …

#007 – Setting Up the Local Development Enviornment

We want to be working locally while working on this project. Just a few reasons:

  • It’s fast.
  • We wan work offline from anywhere.
  • We’re working on a complete redesign that will take many days, we can’t leave a live site half-cocked.
  • There is no risk working locally.
  • We can use version control, giving us a record of what changed when and making future team work easier.
  • We can use preprocessors.

To work locally, we use MAMP to create a local …

#008 – Giving Ourselves a Fresh Start with a Clean Theme, Part 1

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 WordPress theme down to bare bones nothing and build up from there.

We start by duplicating the theme, calling the folder “JeffCampanaTheme2″ this time. But we leave the old theme in place. Then we go to the WordPress admin area …

#009 – Giving Ourselves a Fresh Start with a Clean Theme, Part 2

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 the cleanest most data-only theme we can get to start with.…

#010 – CodeKit For Great Success

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 project. This gives us the ability to use CSS3 mixins provided by Compass, instead of having to create our own, which we should surely do a worse job.

Perhaps most importantly, Compass (through CodeKit) now watches our project folder and …

#011 – The Header & Custom Fonts via TypeKit

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 can use it on the web. We go through the process of adding the scripts and CSS and stuff needed to use that font.

We use the iOS simulator to look at the header we create with Jeff’s name …

#012 – Slider Foundations

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 bit long in the tooth these days not supporting touch events or fluid width environments very well. The RoyalSlider is nearly as powerful (API wise) and also supports touch and fluid-ness.

We have a bunch of photos from Jeff as …

#013 – Tweaking the Slider

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 to turn off some things that we don’t need.

We look at how you can remove certain files from showing up in search in Sublime Text.

We implement a very simple CSS reset, which came up when the slider didn’t …

#014 – Positioning the Slider

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 with the slider and clean house! Some of the sizing and positioning we also do in the JavaScript in the settings we pass the the plugin. …

#015 – Home Page Navigation, Part 1

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 bit much to use on every internal page, the way it’s designed now. Point being, we can put this into our home.php template.

We write a bit of simple semantic markup according to our design, and then begin to style …

#016 – Home Navigation, Part 2

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 alter the fonts and colors of the elements we used to match our Photoshop design.

This was the first time we’ve altered header elements, so we style them right in our _typography.scss file, hoping that these styles can set …

#017 – Home Navigation, Part 3

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 you. We struggle with figuring it for quite a while, showing off troubleshooting steps along the way. We ultimately figure out the specific CSS reason why things are the way they are, but the values are being all set with …

#018 – Footer

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 copy-and-paste) and social media links. The year will auto update so it never looks out of date.

<footer class="site-footer">
&copy;<?php echo date('Y'); ?> Jeff Campana

-

<a href="https://www.facebook.com/JeffCampanaCeramics">Facebook</a>

-

<a href="https://twitter.com/jeffcampana">Twitter</a>

</footer>

This goes in the footer.php file that gets …

#019 – The Blog, Part 1

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 Reading setting to make that page the blog homepage. This way we have very specific control over that page and what it shows. In that template, we use a custom WP_Query loop to give us exactly what we want.

We …

#020 – The Blog, Part 2

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 styling reasons. For instance, our .page-wrap is a div because it doesn’t impart any semantic value, it’s just to push in the site from the edges a controlled amount.

We peak through some of the authored content (the HTML that …

#021 – The Blog, Part 3

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.…

#022 – Blog Archives

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 get to older blog posts. Jeff doesn’t write super duper often, so outputting a list of every single blog post isn’t that out of the question. So that’s exactly what do.…

#023 – Page Template

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 go to the RSS feed, they don’t use the permalink URL structure you choose for Posts, and they are able to have a parent page, creating nested structure.

Pages are great for “timeless” content like an about page or contact …

#024 – Subpage Navigation

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 that subpage navigation, just a row of links we can place underneath the header. The only big consideration is how we handle “Store”, which is an external link to Etsy.com.…

#025 – Super CMS, The Plugins

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 sites we work on. No sense being stuck with “Posts” and “Pages”. On Jeff’s site, we could really use “Events” and “Homepage Slides” – and give those types the fields that make sense. …

#026 – Super CMS, Plugin Setup

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 also has a bunch of other data that make way more sense as structured fields than as just text data dumped into the description field. If we apply new custom fields like “Start date” and “End date” – that a …

#027 – Admin Control of Homepage Slides

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 here and allow Jeff to control everything about the homepage slider. Post new photos of work as a new slide. Delete old ones. Re-order them. Whatever else we want him to have control over.

We take things a bit farther …

#028 – Events, Admin and UI

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. We’ll need a custom page template just for the events area so we have a place we can write all this custom code.

The query:

$the_query = new WP_Query(array(
'post_type' => 'events', // This is the name of our custom …

#029 – Events Wrapup

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 cases, we have to check for the presence of a custom field before outputting it. Namely if the field isn’t required. It may be best practice to do this all the time since the required-ness of a field may change. …

#030 – The Contact Form

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.

Worth noting is that Wufoo integrates with MailChimp, which Jeff uses to send a newsletter to people interested in keeping up with what he’s up to lately. Wufoo makes that trivially easy.

We also look at how if you have …

#031 – Limiting the Slider Height for Desktop

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 images, but functionally it’s cool) we can focus on making it better for desktop now.

With some simple CSS, we can limit the height of it (literally setting a max-height). But we can also limit the height by limiting …

#032 – Moving the Home Nav, Media Queries

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 it over to the right side exposing a space on the left.

We take the opportunity to talk about media queries and nesting in Sass, and even taking that step further and using a custom @mixin for handling them smartly.…

#033 – Media Queries in JavaScript

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 screen is large enough. Not just load it all the time and hide it on mobile. That wouldn’t be very mobile-first thinking, would it?

We essentially need to test the windows width, then if it is wide enough, ajax in …

#034 – Ajaxing in a Blog Post

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");
}
})
.listen();

jQuery makes Ajax super easy, and even easier with the .load() function. The only little trick here is where we’ve added #main-article to the end up the URL which limits what it injects onto the page to that CSS …

#035 – Desktop Hover States

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 darken/lighten colors to make altering the colors on these states very easy.

It’s this easy:

a {
color: $linkColor;
&:hover, &:focus {
color: darken($linkColor, 15%);
}
}

Sorry about the not-great sound on this one =(.…

#036 – Large Screen Single Blog Page

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, we output a list of all older blog posts below the current article. On mobile we show that below the current article. We can use that as a right column on desktop, conjuring up a bit of a grid. We …

#037 – Color Manipulation

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 wrap each slide in a <div> with a data-* attribute where we plunk that color value courtesy of Advanced Custom Field’s API.

<div class="rsContent" data-main-color="<?php the_field('color'); ?>">
<a data-value="hi" class="rsImg" href="<?php echo $slideImage[url]; ?>"></a>
</div>

Royal Slider also gives us …

#038 – Comments Cleanup

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 that in the global stylesheet. Then we tweak up the look of the comments by giving them space, adjusting the typography, invoking styles from elsewhere on the site, and removing stuff like the Gravatar which doesn’t have much use on …

#039 – Cross Device Testing

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 BrowserStack to test the site on some other devices, through their official simulators. Everything was looking good on the Samsung Galaxy III, but there were plenty of issues on older versions of iOS.

We also look at Parallels, which …

#040 – Series Wrapup

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 first time I did it, and some stuff ended up nicer the second time. I’ll try to put the “best of both worlds” version here for download.

We do a little bit of wrap up stuff like:

  • Talk about favicon

*May or may not contain any actual "CSS" or "Tricks".