Flat but Fancy

I wanted to go along with the new “flat design” trend so you won’t see any rounded corners or gradients around here. But in order to retain some level of creativity, I set the site on top of a carefully crafted textured background. The contrast isn’t always the greatest, but I hope most of my readers will find it tasteful enough.

One of the funnest part of the design to me is the liberal use of icons made possible by the custom icon font I built with Ico Moon. I even went so far as to replace smilies with icons.

Peanut Gallery

I’ve tried to be as thorough as possible in testing everything, but it would be impossible for me to catch absolutely all the bugs on my own. If you notice anything that seems off, please let me know.

In this tutorial, we’ll go over how to use data returned from fetch_feed() to output a YouTube video page template.

Read the rest on WPTuts+

Me: It means they’re too lazy to debug it with other browsers.

add_filter( 'nav_menu_css_class', 'namespace_menu_classes', 10, 2 );
function namespace_menu_classes( $classes , $item ){
	if ( get_post_type() == 'event' || is_archive( 'event' ) ) {
		// remove that unwanted classes if it's found
		$classes = str_replace( 'current_page_parent', '', $classes );
		// find the url you want and add the class you want
		if ( $item->url == '/events' ) {
			$classes = str_replace( 'menu-item', 'menu-item current_page_item', $classes );
			remove_filter( 'nav_menu_css_class', 'namespace_menu_classes', 10, 2 );
		}
	}
	return $classes;
}

1. Review, Research & Strategize

   No matter the size of a project, it’s always a good idea to spend some amount of time researching target audiences, competitor sites, and design trends in the same topic or industry. It may be tempting to just jump right into a wireframe or design based off of a few details, but I’ve never regretted taking the time to learn as much as I can about the client and the project first.

   It’s also helpful to discuss with the client what the action items for the site should be and then strategize over how to make sure that happens as simply and repeatably as possible.

2. Sketch/Wireframe

   Not every project may require a full blown wireframe stage where I might use a tool such as Moqups or Balsamiq to draw out exactly how a website will work on every single page, but it never hurts to put my idea to paper first. Once I begin to commit to a layout in Photoshop it’s hard and often too daunting to turn around.

   I make a list of the most important elements for the landing page, and any other pages of major importance, and try moving them around in various sizes and positions until I find something I like and think will accomplish the goals I established in step one.

3. Look & Feel

   Now that I know what the project should do and it has a skeleton to give it a shape, it’s time to open up Photoshop and begin fleshing out the design. This is where I spend a lot of hours playing with different type treatments, colors, and textures. I recommend grabbing a copy of The Principles of Beautiful Web Design by Jason Beaird; it’s a great little read that has helped me focus on each part of the visual design.

   I agonize over the details. It is amazing how things like white space, contrast, and texture can have a huge impact on a user’s experience. One rule I have for myself is to never work on a major design such as the homepage and deliver it for review on the same day. It’s always good to take at least a few hours break from staring at something and come back later. I find myself able to make decisions I couldn’t before, finding little places to make big improvements, and more.

   There are lot of days, and sometimes weeks that go between this step and the next that will include client reviews, likely some revisions and quite possibly a lot of frustration. It’s important to listen to everything a client has to say, but not always take their exact direction. The old “make the logo bigger” issue sometimes boils down to something that can be solved in a different way. I try to focus on the problem, not the solution.

   Another frustration I often have is when a client just won’t budge on a revision they want. I tell myself, “I’m the chef! I know what side dish and which wine will best pair with this entrée!” But sometimes I just have to bite my tongue and put ketchup on someone’s honey braised duck. It’s okay. Let it go. Move on.

4. Markup, CSS, & Interaction

   Here’s a part where I find myself bouncing back and forth on a lot. A lot of times a design is kind of basic and typical. It will have a logo/masthead area, a horizontal navigation, a main content column, sidebar, and a footer. For these types of projects I will generally wrap steps 4 and 5 together. But when I’m working on something really unique or out of the box, I start with a blank HTML document and begin laying my markup down naked. Er… let me rephrase that. I write my HTML without any CSS or PHP code behind it. This helps me make sure my code is clean and semantic. It is especially useful for responsive layouts because I will probably have some markup that appears in some views that aren’t in another. I go ahead and put it all in there and then manipulate it as needed using dummy content  and a placeholder image site such as Placehold.it or Placekitten.com.

   Speaking of responsive design, if you’re not already in the “mobile first” persuasion, well… you should be. Writing CSS for mobile first and then building it up to work in each view as it gets larger is a lot easier than having to override styles going the other direction.

   Another nice tip on CSS would be to think in a taxonomy fashion. If there’s something I’m going to be doing a lot to a lot of different items, I create a basic class name and reuse it to my heart’s content. Don’t be afraid to have 5 classes on a single element if it helps you keep your CSS easy to manage and read.

   Now that I have everything styled up all pretty like, I use this time to add any flair the site requires Javascript for.

5. Moving Parts

   Okay, my site looks great, has all the calls to action in the correct places and is ready to be fitted with an engine: WordPress. Since I already have all of my markup in place, this should be pretty quick for basic sites. I start replacing bits and pieces of the markup and dummy content with the WordPress loop and other template tags. I go on to create any custom widgets and perhaps a theme options page. If my design requires a lot of custom data for various post types, I like to use my Meta Box class as it is an easy way to create custom meta fields.

   Shotgun spray of tips: Don’t be a hacker and cut any corners. Create functions that you can reuse for doing repeat operations. Use a unique name space so that you don’t bump into core functions or plugins that may get installed along the way. Don’t “cowboy code”; work on a local dev environment. Use versioning with a Git or SVN repository and use descriptive commit messages so you can go back and figure out what happened and why if something breaks. PHP Doc everything so that you know what it does when you come back to the project 3 months later or have to share some code with a friend.

6. Test, Debug, & Improve

   If I’m working on a team or have a buddy that can help, it’s a good idea to have someone go through all my code and make sure that the code I’ve been staring at for dozens of hours doesn’t have any major bugs in it. In this case, two heads are better than one, because like it or not, I’ve probably made a mistake a three. At 10up, where I am a Design Engineer, this is a required step in our projects and is part of what makes our team strong and educated and insures stable, reinforced code.

   I always set WP_DEBUG to true and use the Debug Bar plugins to fix warnings and notices. But I don’t just test and debug code, though; I test behaviors such as clicking from page to page, using any special functionality the site may have such as a shopping cart or members area. I test in multiple browsers if possible, and have the client working on this as well. I test breaking things on purpose to see what kind of error management I may need to setup. And I don’t forget to play with the 404.php template and make sure the page is useful to users.

   When you’re going through this process, try to remember to not look at major issues as setbacks, but as challenges to improve upon the work that you’ve already done.

7. Launch & Enjoy

   Finally, I’ll get to a launching point in the project. We may be working in phases and iterations with a “ship early and often” philosophy, or I may be working on small project to a normal completion. I always find bugs after launch that I just couldn’t foresee in all my testing. But I try to bask in the work I’ve done and make notes and snippets of anything that can be used again in the future. I like to find some way to share what I’ve done with others, whether it be a post on Dribbble, an open source project on Github, or just tweeting, “Hey check this out!”.

Question: What do you do differently in your process? Do you add or take away a step or two?

var topLink = $('.top_link');
var showTopLink = 500;
topLink.hide();

$(window).scroll( function(){
	var y = $(window).scrollTop();
	if( y > showTopLink  ) {
		topLink.fadeIn('slow');
	} else {
		topLink.fadeOut('slow');
	}
});

topLink.click( function(e) {
	e.preventDefault();
	$('body').animate( {scrollTop : 0}, 'slow' );
});

The only two things you’ll need to make sure to adjust are the two variables at the top of this snippet. “topLink” is for the link itself, and “showTopLink” should be an integer of how many pixels to scroll before showing the link.

I wish I would have saved a copy of my comment, but I can at least share the same passage of scripture:

11 Now no chastening for the present seemeth to be joyous, but grievous: nevertheless afterward it yieldeth the peaceable fruit of righteousness unto them which are exercised thereby.
12 Wherefore lift up the hands which hang down, and the feeble knees;
13 And make straight paths for your feet, lest that which is lame be turned out of the way; but let it rather be healed.
14 Follow peace with all men, and holiness, without which no man shall see the Lord:
15 Looking diligently lest any man fail of the grace of God; lest any root of bitterness springing up trouble you, and thereby many be defiled;
16 Lest there be any fornicator, or profane person, as Esau, who for one morsel of meat sold his birthright.
Hebrews 12:11-16

In the end, they’ve created nothing but an echo chamber and won’t really do anything for the cause of America. Nothing gained, so nothing lost.

Michael: Your “McLovin it?” argargarg. lol

Terry: I have thought for years that when we finally perfect teleportation, that they ought to put portals in each McDonalds. Financially, it would benefit McDonald’s & since there are so many, it would be quicker to get to a McD’s than an airport, etc.

Michael: You can be the first vic…person to test that.

Terry: If they’d give me a lifetime supply of mcnuggets, qtr.pounders, & filet-o-fish… DEAL!

Michael: they would figure out a way to still charge you to use the supersized version after you can no longer fit eating all that free food!

Terry: If we truly perfect it, we can limit how much of you teleports… 2 problems solved: quicker travel & easier weightloss!

Michael: I would NOT want to be the guy cleaning that up!!!

Michael: But if you were that accurate, you would cure cancer and the like as well!!

Terry: Oh, it would be that accurate. & it would do your taxes for you.

Michael: Turbo Macs

Zing!