By shifting my perspective, literally, I was able to see the design in a different way. Here are some practical exercises to literally shift your perspective:

• Turn the entire design upside down. While it may look funny to turn a laptop upside down, it’s totally doable and allows you to see how a design flows vertically.
• Look at the design on the screen from an extreme angle left or right to see how the design flows horizontally.
• Zoom way in and pixel-peep design. I did this to confirm the baseline was consistent by zooming in and literally holding a ruler to my screen.

Do you consistently use any of these tricks to help you look at design?

--------- Thanks for reading One simple trick to find design issues on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

I decided that instead of ordering cards, I’d attempt to hand make them in small batches. This will allow me to tweak, update, or even switch designs as often as I need.

These cards have a special QR code on the back and my logo heat embossed on the front in either ninja black or line green. They are 2″ square with rounded corners.

--------- Thanks for reading New Business Cards on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

Widget
The progress bars can now be displayed easily in a widgetized sidebar. It’s a basic implementation using just a text-box to take a comma separated list of progress bar IDs, but it’ll work for now.

New Colors!
Two new colors, Black and Silver:

Compatability fixes
Mark Ayers (@Philoserf) let me know via github that there was an incompatibility with the CSS of this plugin and, well, other things. In this released I’ve prefixed all my CSS classes so that won’t be an issue. Also filing that away as a best-practice.

--------- Thanks for reading New version of TDD Progress Bars on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

Why this occurs:
Specifically, I’ve no idea. Generally this is because the WordPress query is determining what template to show before it ever gets to the page template. The query takes the number of taxonomy terms to show for a given taxonomy, looks at the blog option posts_per_page and then determines what template to serve (404 or your custom one).

How to fix:
The solution I found was to filter the blog option posts_per_page if viewing the custom taxonomy. It’s pretty simple and looks like this:

add_filter( 'option_posts_per_page', 'tdd_tax_filter_posts_per_page' );
function tdd_tax_filter_posts_per_page( $value ) {
	return (is_tax('custom-taxonomy')) ? 1 : $value;
}

The filter attaches to the posts_per_page filter hook. It then returns a “1″ for one post per page if it’s the taxonomy archive I’m concerned about, otherwise it returns the default value.

--------- Thanks for reading Taxonomy Archive Pagination 404 on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

At the time of writing, I was running a VPS with guaranteed 600MB per month. The aforementioned websites consisted of approximately 15 WordPress sites of which three had an anecdotally “intensive” amount of plugins installed. The server is running PHP5/fcgi and I had enabled x-cache support (but had no idea if it’s actually running).

My sites aren’t popular. Based on my analytics, I’d estimate about 50 hits per day against my server. Yet, once every few days my server was being automatically restarted because it was using too much memory. Once a client started getting the same thing on their single WordPress site on their server, I decided to start poking around.

First, I started by looking at the currently running processes and memory usage on my server. I SSH’d in and — after reading some DreamHost documentation — found these commands:

top -c

watch free -m

The first gave me a running list of the processes on my server. The second just gives a running and easy to see display of total/used/free memory available to my virtual server. So I started opening websites to see what happened. Basically, new processes were spawned every time I refreshed or opened a website and they stayed there, running, for quite some time. I then found this command:

ab -n 1000 -c 20 -t 5 http://websitesthatdontsuck.com/

This code allowed me to simulate high traffic. In this case, 1000 visitors, 20 at a time, wait no more than 5 seconds for a response. Suffice it to say, my server didn’t handle it well. If I recall, about 10 requests completed, with the remainder failing.

So I had established the problem, what did I do to fix the problem? W3-Total-Cache.

Setting up W3 Total Cache

--------- Thanks for reading My server doesn’t hate me anymore thanks to W3 Total Cache on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

Note: If you’ve implemented some type of HTML5 video solution, a simple video{ max-width:100%; height:auto; } will be sufficient and will work wonderfully.

Luckily, the Web Designer Wall published a method that we’re going to use. It’s a fancy bunch of CSS. I’d just grab it and throw it in your stylesheet.

The CSS

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
/*	overflow: hidden; */
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

edit: The overflow:hidden style was causing my site to cease scrolling (everything outside the viewport was… hidden?) It didn’t really make sense, but deleting the line didn’t seem to have an adverse effect… for now..

In fact, that’ll work just fine as long as you wrap some sort of container (such as a <div>) around your oEmbed URL… But that’s too much work, the point of oEmbeds is to be super quick and simple.

Filter the oEmbed

oEmbedding actually runs the URLs it finds through the shortcode and just before it outputs HTML, it applies the embed_oembed_html filter. We can make use of this to very easily wrap a container (as required by the above CSS) and add a layer of semantics by using the HTML5 <figure> tag.

add_filter( 'embed_oembed_html', 'tdd_oembed_filter', 10, 4 ) ;

function tdd_oembed_filter($html, $url, $attr, $post_ID) {
	$return = '<figure class="video-container">'.$html.'</figure>';
	return $return;
}

--------- Thanks for reading fluid width oEmbed videos in WordPress on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

The result is version 0.1.2 of my progress bar plugin. It’s somewhat basic for now, but I have plans! For now, you can manage your progress bars and include them, using shortcode, into posts or pages. There are some basic settings to control colors and whatnot, but that’s about it. In the near future, I hope to add the ability to pull the current progress of any public GitHub project using their API and it would be nice if I could do the same for Trac (though I’m not sure it’s possible…).

Get TDD Progress Bars

--------- Thanks for reading Post showing off this bar on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

Here’s the deal: I wanted to add a submenu to an existing custom post type. Right away, when creating a custom post type with public or show_ui set to true, WordPress will create a new top-level menu item, with a submenu item of “Add .” I wanted to be able to hook into that, and add a new sub-menu item called “settings”

Already in the plugin, I had created a custom post type:

register_post_type( 'tdd_beans', 'tdd_beans_register_post_type' );

The details of my beans post-type are unimportant. What is important is the handle. In all cases, it’s the first parameter that you pass to register_post_type() — in this case, beans.

function tdd_beans_menu(){
	add_submenu_page( 'edit.php?post_type=tdd_beans', 'Beans Settings', 'Settings', 'manage_options', 'tdd-beans-settings-menu', 'tdd_beans_view_settings' );
}
add_action( 'admin_menu', 'tdd_pb_beans_menu' );

The add_submenu_page() function takes these parameters:

1. $parent_slug: The magic is that it requires that whole edit.php whatnot in order to work. At least right now, although I believe that may be a bug in WordPress. Future versions may only require the slug (tdd_beans). In any case, it’s the slug for the parent page
2. $page_title: This is what goes between the <title> tags
3. $menu_title: What shows up in the menu (keep it short)
4. $capability: This maps to a WordPress capability that will be required to access this sub-menu. It should probably map to whatever the capability is for your custom post type. Sub-menus will continue to display even if their parent menu is unavailable due to permissions
5. $menu_slug: Put your own menu slug here for referencing this menu item elsewhere.
6. $function: Lastly, this is the function that will echo stuff to the page.

function tdd_beans_view_settings(){
 echo '<div class="wrap"><h2>Hello World (inc. beans)</h2></div>';
}

--------- Thanks for reading Adding a sub-menu to a custom post type on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

]]> http://websitesthatdontsuck.com/2011/11/adding-a-sub-menu-to-a-custom-post-type/feed/ 0 http://websitesthatdontsuck.com/2011/11/wireframe-stencils-full-of-old-school-win/?utm_source=rss&utm_medium=rss&utm_campaign=wireframe-stencils-full-of-old-school-win http://websitesthatdontsuck.com/2011/11/wireframe-stencils-full-of-old-school-win/#comments Mon, 14 Nov 2011 12:37:17 +0000 tddewey http://websitesthatdontsuck.com/?p=1226 There are tons of online wireframe and mockup tools, but putting together a wireframe in any of the many online wireframing tools has one, big problem for me...

--------- Thanks for reading Wireframe stencils full of old-school win on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

]]> I joke about these awesome metal wireframe and mockup stencils being old school like anyone was designing websites in the hayday of engineering stencils and whatnot. But putting together a wireframe in any of the many online wireframing tools has one, big problem for me…



They’re online, in front of a computer screen. (That’s actually two problems, but whatever). That’s a problem (for me) for a number of reasons. Distractions is one obvious one, online/offline is another, and my last “issue” is somewhat of an intangible.

I can easily find myself distracted by Facebook, email, and the 27,000 open browser tabs. It’s not a question of willpower — when I’m doing there is no issue. The distraction pops up when I’m thinking, trying to solve a problem, drawing inspiration. Once that happens… In fact, I’m working in the WordPress distraction-free mode right now, with my browser full-screened. So, working with a stencil kit, on grid paper, will help ideas flow more easily.



The second issue is the need to be online. One of my favorite places to draw inspiration is the outdoors, nature. Or maybe that’s just where I can breathe easy. Whatever the case, it is somewhat inappropriate to pull out a laptop. Hippyism aside, it’s also much more conference-table, dinner table friendly.

Finally, while it may be a bit hipster, I think working a wireframe on a computer isn’t limiting enough. The constraining medium of paper allows me to just work, moving from element to element, jotting quick notes in the margin, free-form random arrows from place to place. Not only can I work in a way that mirrors how I think, but also in a way that frees me from perfection. It’s impossible to be pixel perfect on wood fiber… even recycled ones.

So I’ve purchased the UI stencil kit for browsers, iPhone (to represent mobile in general), and some of their sketch books from UIStencils.com. I’ll try to revisit this post after I’ve had some time with them and see if what I’ve written here still holds true.

--------- Thanks for reading Wireframe stencils full of old-school win on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

]]> http://websitesthatdontsuck.com/2011/11/wireframe-stencils-full-of-old-school-win/feed/ 0 http://websitesthatdontsuck.com/2011/11/h5bp-a-fancy-acronym-a-fancy-way-to-design/?utm_source=rss&utm_medium=rss&utm_campaign=h5bp-a-fancy-acronym-a-fancy-way-to-design http://websitesthatdontsuck.com/2011/11/h5bp-a-fancy-acronym-a-fancy-way-to-design/#comments Wed, 09 Nov 2011 18:30:46 +0000 tddewey http://websitesthatdontsuck.com/?p=1156 The HTML 5 Boilerplate is a fantastic bit 'o code to get started designing modern websites. Combined with the 320 and Up "mobile-first" development ideas, it's quite powerful. Unfortunately, it doesn't work well as a WordPress theme starter -- especially not if you intend on using the included (and awesome) build script. So, while designing this site, I created my own version of H5BP that *does* work well with WordPress.

--------- Thanks for reading H5BP a fancy acronym, a fancy way to design on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

]]> H5BP is a weird pseduo-acronym for the HTML 5 Boilerplate. It’s a way to get started designing a site in a way that utilizes the most forward (and backward) compatible code possible and has an ear to some extreme optimization. It’s also what I used to design this site, well, sorta.



If you’re not familiar with H5BP, part of its deal is that it has what’s called a build script included. This build script runs through your stylesheets, html (or php) files, javascript, and images and compresses the heck out of them. In fact, it also combines javascript and stylesheets so that you can minimize HTTP requests. You run the build script once, from the command line, which results in a “publish” folder that you can upload.

Thing is, it doesn’t work well with WordPress themes. At least not right away. WordPress expects files (like style.css) to be in certain places and include certain information. WordPress also has some default styles that should be included, and it requires some extra work to play nicely with jQuery.

So, while creating this site, I’ve started building my own theme starter based on H5BP. You can check it out on GitHub — feel free to download your own copy, clone it, or contribute. It’s not really a “regular” WordPress theme, so it’s unlikely I’ll ever offer it through extend.

My version of the H5BP also includes some concepts from 320 and Up — in that I think a mobile-first development cycle makes sense. The default stylesheet (default-styles.css) is designed to set the styles for a 320px wide browser (i.e. iPhone in portrait) with more styles included as the screen size gets bigger.

--------- Thanks for reading H5BP a fancy acronym, a fancy way to design on Taylor D Dewey - Designing Websites That Don't Suck Since 1998

]]> http://websitesthatdontsuck.com/2011/11/h5bp-a-fancy-acronym-a-fancy-way-to-design/feed/ 0