Posted 01.28.2016

Posted 01.28.2016

Your Website Should be a Solution to a Problem

I had a potential client call me last week. Once we got past initial introductions and formalities, they told me, “We need a rebrand and a new website. Do you think you could help us?”

That’s an easy answer, “Of course, I can!” — because of course, I can. But, you and I both know there’s far more going on behind the scenes than just “we need a rebrand and a new website.”

There’s a pain point. Something happened that led them to call me. It could be a number of things. Sales hit a certain point (up or down)? They needed more visibility within the community? They needed online validation and social proof for their brick and mortar? Need I go on?

You know exactly what I’m talking about. You know because you’re right there with them. You think, “Maybe if I’m #1 on Google, I can attract more business.”

— And while that may be true, I think there’s a lot more that I have to offer your business than a shiny new website and a #1 spot Google ranking.

You see, at the end of the day, you’re not really buying a new website. Excuse

me? That’s right. I’ll say it again. You’re not buying a website. You’re buying a solution to a problem.

So, let’s address the real problem head on so I can deliver that solution. Be honest. What is your real problem, the pain point? What are your business goals for this project? What’s the bigger direction your company is moving in?

Hopefully you know: my goal is to make sure that you make more money on your site than I ever will.

My services are an investment, not a cost. What’s the difference, you ask? It’s more than semantics.

A cost is a reference to the total money, time and resources associated with a particular purchase or activity. On the other hand, an investment is a reference to the use of money for future profitability. Investments usually has more risk involved, but also could lead to more profitability (or reward) in the long run.

A cost is a one time transaction that is minimal. In the case of web design and development, get it done as fast and as cheaply as possible.

An investment, on the other hand, is a long term endeavor that offers future profitability. It evaluates processes holistically and delivers a complete strategy that fulfills your greater mission and purpose. Yes, the price tag may be greater, but in the long run the solution gives you far more room to grow and the ability to push forward and achieve greater success. Sounds like a no brainer to me.


So, I’ll ask you: What is your pain point? Whatever it is, I know it’s very real. It effects you every day — and the unfortunate truth: it will only continue to do so, unless it’s addressed. So, let’s talk about it…



Posted 02.23.2015

Posted 02.23.2015

Caught in the Wild – My Home Workspace

I’m always fascinated by other people’s workspaces. I’m not the only one. Plenty of posts and entire sites, even, have been devoted to this subject. You don’t have to look far on Tumblr, Pinterest, or Dribbble either.

I thought I’d share my own.

My Workspace


On the Wall

Soft Tiles

Behind my computer, I have a bulletin board for inspiration and mood boards. It’s made out of Soft Tiles, you know, the mats you put on the floor for kids to play on. We just hung it up on the wall with nails. Perfect.



Rode Podcaster

Rode Podcaster

On the far left, I have a Rode Podcaster
on a Swivel Mount in the corner of my desk. One of my goals for 2015 is to start a podcast with my friend Darrel Girardier. It’s coming.




Scanner

Epson V100 Perfection Scanner

Also on the far left (you can see the edge of it), I have a Epson Perfection V100 Photo Scanner. It’s not the latest and greater scanner out there, but it’s more than perfect for what I use it for: scanning in textures, photos, and hand drawn illustrations — things that need to be scanned at a higher resolution.


For on the go, scanning, I’ve been really pleased with Evernote’s new app, Scannable.

For scanning receipts and documents quickly, I have a Fujitsu ScanSnap Scanner.



Tablets

iPad Mini

I have an iPad Mini. I was an early adopted and started out with a 3G iPad 1. Eventually, it started having issues where apps would randomly crash. I upgraded to a wireless iPad mini for Christmas. I love the smaller size. I use it for reading (and testing websites), so the smaller size makes complete sense.

It’s sitting on a Twelve South HiRise.

I also have a Samsung Galaxy Tab 4
for testing websites. Even though I didn’t pay a ton of money for it, I know I don’t use enough to justify the purchase.




Monitors

Acer Monitor

I have two 21″ Acer Monitors
21” acer monitors that I bought at a really good price at a Black Friday sale. They’re mounted on Tyke Supply Dual LCD Monitor Stand, which is so much better than the stack of books I had them on before.


They’re connected to my laptop via a TripleHead2Go. (I wrote a post about the configuration.) I can keep the laptop open, and run in a T configuration, but lately, I’ve enjoyed keeping my laptop in clamshell mode. For whatever reason, I feel more productive instead of trying to manage more space.



Speakers

Harman/Kardon SoundSticks III Wireless Speaker System

I just have a cheap pair of $35 speakers from Target. They seem to do the job just fine. Although, I’m not going to lie, I do have my eye on these (Harman/Kardon SoundSticks III Wireless Speaker System).




Wacom Tablet

Wacom Intuous 5 Tablet

I have a Intous 5 Touch Wacom Tablet. It’s fantastic when I do any heavy masking in Photoshop or Illustration work.




MacBook Pro

Macbook Pro

I have a 15” MacBook Pro (Retina), 2.6 GHz Intel Core i7, 16GB of Memory, with a 1TB Solid State drive. It’s been a great machine. It’s the 3rd Mac Laptop I’ve owned in the last 11 years. I ran its predecessor into the ground.

Even though I know I need the real estate and power for print projects…and I can’t imagine trying to run Chrome Inspector tools on a smaller screen, I still eye the Air. I can’t get over how small and light it is!


I have a wireless keyboard and trackpad. I try to get away with as few wires as possible. The track pad and I have a love hate relationship, so I’ll still pull out my Magic Mouse (It’s not the track pad’s fault, it’s all me. I’m just old school like that.)



Desk

ikea vika fagerlid

My desk is an Ikea desk top (hollow) with Vika Fagerlid legs (apparently, they don’t sell them anymore).



Moleskine

Moleskine

Lastly, you’ll see my moleskine. I do all design work, there, first. – ideas, wire frames, illustrations, everything. — And I’m kind of a pen snob, too. Pilot G2 0.7.




In the Comments

What are some of your favorite pieces of your workspace?



Posted 02.20.2015

Posted 02.20.2015

A Modular Approach to WordPress Theming, Using Flexible Content

I do a lot of WordPress Development. I wouldn’t necessarily consider myself a WordPress developer, I have experience on other platforms, but I use whatever tool will meet the client’s needs best. Recently, that means WordPress.

One of the things I’ve started doing is coding custom themes so they’re modular. What does this mean?

I just launched billseaver.com. On the home page, each “stripe” is considered a module. This gives Bill the freedom to rearrange the elements on the home page on the fly. If he has a podcast release that day, he can move the podcast stripe to the top, increasing its visibility.

ACF Flexible Content Demo

As a designer, I don’t feel like the design of the site is being compromised because I’ve designed how each section should look. It’s just providing more flexibility and more value to my customers accommodating their digital strategy.


So, how did I pull this off?

The trick is the Advanced Custom Fields (ACF) plugin. — It’s one of those WordPress Plug Ins I could not live without.

Let’s walk through the setup.


Within WordPress

I have the ACF Pro Plugin installed. Once it’s activated, it gives you a Custom Fields nav item in the left sidebar. Click on that and then the Add a New Field button.

Add a New Field within the Advanced Custom Fields plugin

Let’s call this field group “Home Page” but you can really call it anything you like. This label is will be displayed on the “Edit Home Page” above our form fields.

Naming the Field Group within ACF
On the new Field Group screen

Naming Flexible Content Field

How the field will be displayed on the Edit Home Page screen


Before we start adding fields, let’s adjust our Location rules. I want this field group to display on the home page only. Meaning, Bill will have to click on Pages and then find the Home page to edit. There are several ways I could set the rules.

I could say if the Page is equal to Home.

Locations within ACF

or I could say if the Page Template is equal to Home.

Locations Options within ACF

Personally, I prefer the second option since the template itself is really dependent on these fields.

Then, in the Options box, below that, we can control the display and the other elements on the page. I try and hide all the elements I don’t need to minimize confusion:

  • Content Editor (all content is within the stripes, no need for body copy which all means, no need for an Excerpt)
  • Excerpt
  • Comments
  • Author (don’t need to set an author for the home page)
  • Featured Image
  • Send Trackbacks
  • Custom Fields (this refers to the WordPress built in Custom Fields, not the Advanced Custom Fields we’re creating)
  • Format
  • Categories
  • Discussion
  • Tags

Options within the Advanced Custom Fields

Now for the fun part, the actual fields. Click the Add Field button. I’m going to name this “Home Page Content”, but call it whatever you like.

The Flexible Content label within the Edit Page Screen

On the new Field Group screen

Label on the Edit Home Page

How the field will be displayed on the Edit Home Page screen


NOTE

If you’re looking at my screenshots, I have a few other fields on the home page (background, subheading, and tertiary heading), in addition to the flexible content fields we’re creating. I don’t go into details about those fields, here, since our focus is on the flexible content.

You can see that the Field Name gets filled in automatically based on how you name the label field. I usually keep the default name unless it adds in dashes (“Home – Page” becomes home_-_page).

Select Flexible Content from the Field Type dropdown menu.

You can add instructions if you’d like. I usually leave this blank unless it’s a link (I’ll remind people to include the http://) or an image (I’ll include the image dimensions).

Within the Layout Row let’s start naming our stripes. We have 5.

Let’s name the first one “Receive Email Updates.” We don’t need any additional fields here since it’s simply a MailChimp Signup Form.

Click on the Add New link under Layout to add another row.

Add New Layout Row

Name this one “New Podcast”. It will automatically pull in the most recent podcast. The only additional fields we might need is a background image. Click on the Add Field button. Name it (Podcast Background Image) and select Image from the Field Type dropdown menu. In this particular case, I’m going to select the Image URL radio button, but the Image Array option is useful when you want to grab a particular size and include the alt text.

Podcast Background Image within ACF

Click on the Add New link under Layout to add another row. You get the idea. I went through the same process for the “Testimonials” (no input fields), “From the Blog” (no input fields), and the “Services” stripe with the following input fields:

  • Column 1 Heading
  • Column 1 Content
  • Column 2 Heading
  • Column 2 Content
  • Column 3 Heading
  • Column 3 Content

Within the Code

Within my WordPress theme folder, I have a subfolder called partials. This includes smaller elements that I can reuse in other places on the site. In the case of Bill’s site, that folder contains a file for every stripe:

  • stripe-email.php
  • stripe-podcast.php
  • stripe-services.php
  • stripe-testimonial.php
  • blog-excerpt.php
Wordpress Theme Folder Structure

You’ll see the folder structure in the left pane and the code for the services stripe on the right.


NOTE

You’ll notice the “From the Blog” stripe is not prepended with “stripe”, that’s because that element is not only used on the home page, it’s also used to display a blog excerpt on the archives, categories, and tags pages.

My page-home.php template has this code. I tried to include comments, explaining what each section does:

<main class="main" role="main">
<?php // open the WordPress loop
if (have_posts()) : while (have_posts()) : the_post();

	// are there any rows within within our flexible content?
	if( have_rows('home_page_content') ): 

		// loop through all the rows of flexible content
		while ( have_rows('home_page_content') ) : the_row();

		// EMAIL UPDATES
		if( get_row_layout() == 'receive_email_updates' )
			get_template_part('partials/stripe', 'email');

		// NEW PODCAST
		if( get_row_layout() == 'new_podcast' )
			get_template_part('partials/stripe', 'podcast');

		// SERVICES STRIPE
		if( get_row_layout() == 'services' )
			get_template_part('partials/stripe', 'services');

		// TESTIMONIAL
		if( get_row_layout() == 'testimonials' )
			get_template_part('partials/stripe', 'testimonial');

		// FROM THE BLOG
		if( get_row_layout() == 'from_the_blog' )
			get_template_part('partials/blog', 'excerpt');

		endwhile; // close the loop of flexible content
	endif; // close flexible content conditional

endwhile; endif; // close the WordPress loop ?>
</main>

NOTE

You’ll notice that my if statements do not have brackets ({ and }). They’re not needed since there’s only one line of code after the condition. However, if you need to add additional lines within the statement, be sure to insert those brackets!

If you see the have_rows() and get_row_layout() functions, that’s all ACF. You can get additional documentation for the Flexible Content fields on ACF’s site.

The get_template_part() function is built into WordPress (more information within the WordPress Codex). The first parameter of the function is the folder name (partials) and the first part of the file name before the dash (remember I named my files stripe-email.php?). The second parameter is the fiel name after the dash (email).

The get_template_part() function is great for other places in your WordPress themes, not just within Flexible Content. I mentioned the blog-excerpt.php snippet is also used within the archive.php template:

<?php if (have_posts()): while (have_posts()) : the_post(); ?>
	<!-- article -->
	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<?php get_template_part('partials/blog', 'post'); ?> 
	</article>
	<!-- /article -->
<?php endwhile; ?>

The beauty in this method is if I need to change the way the blog excerpt is being displayed, I only have to change one file! I don’t have to remember every place that a blog excerpt is being implemented.


Other implementations

This modular method is also useful for formatting content. I used it on the portfolio section of my site.

I knew each page would need a different format depending on whether it was a website or a print project and what assets I have for each.