1. Would I be a better designer to work with if I knew coding myself? Do developers appreciate knowledgeable designers?

The designers at EMU Marketing code our own pages in XHTML and CSS this takes the pressure off of the developers to make things “look right” and lets the designers have control over the entire visual appeal of the site.

I think developers appreciate designers who have at least some knowledge of how difficult a certain feature will be to implement, or know roughly what the process will be in creating the development back end.

2. Designers: Developers don’t like you because you represent Work and don’t see why said work is wholly necessary. Developers: Designers are scared of you because you are the gatekeeper. This is the dynamic. Discuss.

Because the designers and developers work in the same room and we critique and review each other project regardless of experience with that area it gives our designers a sense of the development process and a general understanding of how the websites work. It gives the developers a chance to see how the design process works and eliminates this problem.

3. How can stronger communication be developed not only between designers and developers, but also between designers, developers, and creative teams (art director, copywriter)? How can a team bring them into the fold more effectively?

Strong communication is one of the great things about EMU Marketing we are always looking at each others projects and keeping up on how things are working. Bringing developers into the project early to help work out features and to give them an overview of the site is always helpful.

4. To developers: if there was one thing ― an ability, a bit of knowledge, an understanding ― that you could instill in all designers with the wave of a magic wand, what would it be?

I would be very interested to know what this is.

5. How do you keep the goal of the project front and center so that design and development can keep a “common good” as their primary function?

The goal is always to give the client a site they can be proud to show off to people. It is up to both parties to do thier part. Designers need to make the site flow well and the information easy to access. Developers need to make the site easy to use and the information flow out the databases and into a readable format. Everyone has the same goal, I think once everyone understands that its easy to keep it front and center.

6. What’s the most helpful thing a designer can do before handing over design files?

Here is the checklist that the developers wrote.

1. Discuss site functionality with programmers.
2. Code XHTML and CSS.
3. Look at site with no styles, does it make sense?
4. Recode CSS from scratch if necessary (should be much quicker the second time).
5. Once site is valid, get approval from programmers.

That makes it pretty clear what the developers want valid and understandable XHTML and CSS from the designs to plug into the framework.

7. How soon should a developer be engaged to sense-check a design? At design brief? Before it goes to the client?

As the list above makes clear sense check occurs after meeting with the client but before the design goes to code.

8. Is it a mistake to make the lead developer the project manager?

Probably not but that might be a mistake and take away from the visual appeal of the site. Just the same and making the lead designer a project manager might create a mess for the developers. The best solution is to have someone outside the web design and development process. In this case it is our boss Lee who has a background in print design.

9. How can I get the developer to give me an absolute answer on whether something is doable?

Do your research and know their skill level. See if an open source project exists that does what you want or have an example ready. I find myself say “you know like how Wordpress does it.” when I’m explaining a feature to the developers.

Its also good to know what the developers know how to do. In my case there is nothing it seems our developers cannot do. See this post on what was going to be the tag cloud for Cultural Forum.

10. It seems that designers are under pressure to design an exceptional and unique experience and developers are under pressure to produce sites with high performance and little/no errors. Designer’s goals add pressure to developers and vice versa. How can our goals work together instead of causing pressure on each other?

Exceptional user experiences and high site performance are not mutually exclusive. These problems are problems of experience and dedication. Because designers are in charge of the front end code developers are not responsible for that area. They are free to focus on performance issues and creating error free applications. designers and focus only on the user experience.

Widgetized Sidebars (Dynamic Sidebars)

This was the single biggest help to me. The site design called for a links area at the bottom to link to other groups and departments and organizations related to this one. It also called for contact information at the bottom.

The solution is to use widgetized “sidebars” and then tweak the css to to turn your sidebar into a footer. To add a sidebar insert this code into your functions.php file in your theme.

<?php
 if ( function_exists('register_sidebar') )
 register_sidebar(1);
?>
</php>
 
You can repeat this code for as many sidebars as you need. Just make the "1" into a different number.
<span id="more-397"></span>
Now insert this code where you want your  sidebar to appear.
 
<pre lang="php">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

This will make your dynamic sidebar appear. For me i just fixed the widths of the widgets and floated them left with this code.

#footer .widget{
width:290px;
float:right;
}

By setting the width of the widgets and floating them to the left of my footer I made an editable content area the didn’t interfere with the post or page structure using widgets and dynamic sidebars.

Custom Loops

For the site i was making there wasn’t going to be a blog but rather a news section and an events section so i needed to split the posts be category and query them individually.

<?php
 $news= 'category_name=news&orderby=date&order=DEC&showposts=3';
 query_posts($news); // run the query
 ?>

This snippet created a new query called news ($news) grabs 3 posts from the news category and orders them descending by date. You then set up The Loop normally below this code. My completed loop looked like this.

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<?php
		if ( $news%2 ) {
    		echo "<li class='news_even'>";
			} else {
    		echo "<li class='news_odd'>";
			}
			?>
			<h3 class="smallindent"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
			<p class="posted smallindent"><?php the_time('m-d-y') ?> </p>
			<div class="smallindent"><?php the_excerpt(); ?></div>
		</li>
		<?php $news++ ?>
	<?php endwhile; ?>
	<?php else : ?>	
	</ul>
	<?php endif; ?>

Drop Down Menus

The clients wanted the website to have a drop down normally i would oppose it but they had quite a bit of content they wanted to put on the site. After looking around for several hours and testing various methods for dropdown menu. I found this, it turned out to be the holy grail I was looking for and cross browser to boot. and it worked out of the box with the markup generated by wp_list_pages function.

Simplify the Admin Panel

After the first meeting and training session I wanted a way to hide various parts of the admin panel that were going unused. The theme was stripping Wordpress back to the core. No tags, no need to manage categories, or the media library. The solution was wplite. This nifty plugin lets you disable panels in the admin screen. It also lets you limit the post metadata fields (i.e. excepts, post tags, page order, templates, slugs ect.) it turned out to be the magic bullet I was looking for the make managing the site simple and easy. It can even strip the dashboard so the default page is writing a new post.

The next challenge

the next large project I have is to rebuilding the ASDA website with wordpress. With all the bells and whistles and more. The current proposal is.

• Multi-author blog
• Post by email for the discussion mailing list.
• Possibly hosting an ezine
• membership directory for the group
• links feed
• member portfolios

I’ll be publishing more on the development of the site once the group who is designing it throws more at me to code and when we get more ideas.

DinPattern

Free Pattern From Din Pattern

DinPattern is a collection of patterns (and a few free wordpress themes.) from Evan Eckhard. There are a ton of high quality free patterns on this site and they are free for commercial and non-commercial use. Even better.

easy CSS sprites

This is a CSS Sprite.

CSS sprites are something I’m always told is a great idea because it lets you make less requests to the server by grouping images together and then useing sections of the images to display. Its a little like making CSS image rollovers.

CSS Dropdown menu framework

CSS Dropdown Framework

Dropdown Menus have always thrown me for a loop. Everytime I need one I have to go search for one to hack apart until I get what I want. At least I wont have to do anymore searching and I can just go here.

Thesis Theme for Wordpress

Thesis Theme For Wordpress

Always alert for new wordpress frameworks to work from I was delighted when I found Thesis. It looks slick and stylish and forms a basic background for you to use for your theme.

Bonus Link : Doctype declarations

How many web designers honestly know how to code a perfect doctype declaration. I sure don’t so the next best thing is copying all of them down from here.

Until Next Week

So I figured it would not be terribly difficult to hack the NETTUTs tutorial to make my own Twitter badge with PHP by reading the RSS feed that Twitter provides.

The Function

Here is the code for the function I wrote. It uses Curl instead of file_get_contents. After a little research file_get_contents requires allow_url_fopen = ON in the php.ini file, Which as this and this will tell you is a security risk>

Switching from file_get_contents to Curl wasn’t hard after a simple Google search turned up this post and it worked like a charm.

So here is the function I wrote by mashing up these two tutorials and a few extra if statements.

Update

My friend Aaron Parecki commented here about how I could improve this script with a few lines of RegEx code to simplify searching for twitter usernames (@) and links (http://). Its whole lot less code and a whole lot easier. You can read his addition to this here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<?php
function DisplayTwitterFeed($feed_url, $num=10) {
 
$ch = curl_init("$feed_url");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	$data = curl_exec($ch);
	curl_close($ch);
 
	$x = new SimpleXmlElement($data);
 
	echo "<ul class='twitter'>";
 
	$i = 0;
 
	foreach($x->channel->item as $entry) {
        	if($i == $num) break;
			$i++;
 
		//get the content and cut out the first word which is always @whatever
		$tweet = $entry->title;
 
		$tweet = explode(' ', $tweet);
 
     	$tweet = implode(' ', array_slice($tweet, 1, 140));
 
		$tweet = explode(" ", $tweet);
			echo "<li>";
 
			foreach ($tweet as $words)	
 
				if ($words[0] == "@") {
					echo "<a href='http://twitter.com/" . substr($words, 1) . "'>" . $words. "</a> ";
				} elseif (substr($words, 0, 7) == "http://") {
					echo "<a href='". $words . "'>" . $words. "</a> ";
				} else {
					echo $words." ";
				};
 
			};
 
			echo "</li>";
 
	};
 
echo "</ul>";
?>

Starting from the top. We define a function and pass it two variables, our Twitter RSS URL which you can find here.

Get your twitter RSS feed here.

The second variable will tell the function how many tweets to display.

After defining the function I dropped in the Curl code from here.

$ch = curl_init("$feed_url");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HEADER, 0);
	$data = curl_exec($ch);
	curl_close($ch);

From what I have read this starts the curl session and fetches the data from the RSS feed and writes it to the $data variable. Next comes a bit of code from the NETTUTs tutorial.

	$x = new SimpleXmlElement($data);

From my research SimpleXmlElement turns XML data into easy to use arrays in PHP. So now we have a variable $x that is an array that contains the data we passed to it from our RSS feed that we can use as a normal array.

echo "<ul class='twitter'>";
 
	$i = 0;
 
	foreach($x->channel->item as $entry) {
        	if($i == $num) break;
			$i++;

This snippet will make a second variable that will control how many tweets we display using and if statement and the break command. This also starts the foreach segment that will look through our array and pick out our tweets.

Looking at our feed

It took me a little while to figure out exactly how to move through the RSS feed and get out the data we need. If you look at the source code for the RSS feed it looks like this.

<item>
    <title>graphfixpunk: i cant believe how many people are willing to pay for help on in my basic HTML/CSS class</title>
    <description>graphfixpunk: i cant believe how many people are willing to pay for help on in my basic HTML/CSS class</description>
    <pubDate>Wed, 29 Oct 2008 01:17:33 +0000</pubDate>
    <guid>http://twitter.com/graphfixpunk/statuses/979843077</guid>
    <link>http://twitter.com/graphfixpunk/statuses/979843077</link>
  </item>

if you remember the foreach statement about we started with $x and then moved to channel $x->channel and then went into item $x->channel->item and then we executed everything in the foreach statement for every item in the channel.

Back to the code

So what this code does is it fetches the content of the tweet.

$tweet = $entry->title;
 
$tweet = explode(' ', $tweet);
 
$tweet = implode(' ', array_slice($tweet, 1, 140));

Then $tweet is exploded where every word in the string will become its own word in an array. Then implode will compress that array back into a string starting from 1 (skipping 0 which is always @username)

So What that did was get the content of out tweet and cut out the first word.

So what about links?

Up until now everything was fairly easy we could just echo $tweet and stop there but then we wouldn’t have any links which the default twitter badge shows. After a lot of searching on Google and the PHP manual I found substr which lets you use parts of strings without altering the string.

$tweet = explode(" ", $tweet);
			echo "<li>";
 
			foreach ($tweet as $words)	
 
				if ($words[0] == "@") {
					echo "<a href='http://twitter.com/" . substr($words, 1) . "'>" . $words. "</a> ";
				} elseif (substr($words, 0, 7) == "http://") {
					echo "<a href='". $words . "'>" . $words. "</a> ";
				} else {
					echo $words." ";
				};
 
			};
 
			echo "</li>";

For starters we will explode $tweet again so we have an array that contains all the words in our tweet. Then we start a LI element to contain the tweet.

This is where it gets confusing. Start another foreach loop. This loop will check every word to see if the first character is equal to “@” and if it is echo an anchor tag that links to twitter.com/the_word.

If the first character is not “@” then it checks if the first seven characters in the word and if they are equal to “http://” then we echo an anchor that links to whatever the word is.

If both of those tests fail then it just echos the word with a space afterward. This foreach statement will run through this check for every word in a tweet and check for links and echo these statements back.

Lastly close your foreach and echo a close to your LI, end the foreach you started at the top of the script, and end the UL and your done.

Implementation

I had some problems getting this to work out of Wordpress default functions.php file so I made my own user-functions.php and added this code to my header.

<?php include_once (TEMPLATEPATH . '/user-functions.php'); ?>

Then just call the function where you want your twitter list to appear and pass it the url for your feed and the number of tweets to display.

	<?php DisplayTwitterFeed("http://twitter.com/statuses/user_timeline/15374455.rss", 5); ?>

So why is this better then the twitter badge?

The default twitter badge uses script tags which will not display when a user has Javascipt disabled (a little over 10% of my visitors). This code will show up no matter what and still displays links and names of tweeters.

Comment with questions and problems.

1. use wp_enqueue_script to load the Jquery that is packaged with Wordpress.
2. go over how Jquery Cycle works and make The Loop generate the necessary XHTML
3. make a custom query to load only the posts we want
4. configure Jquery Cycle to run the slideshow

1. Enqueue Jquery

The first thing you want to do is to get Jquery to load Wordpress comes with a version of Jquery included so its generally best to load that> The function to load javascript libraries and plugins is wp_enqueue-script. The code to load the jQuery and the jQuery Cycle plugin is below

<?php wp_enqueue_script('jquery.cycle.all.min','/wp-content/themes/upsidedowncity_v_3/jquery.cycle.all.min.js',array('jquery')); ?>
<?php wp_enqueue_script('jquery_script','/wp-content/themes/upsidedowncity_v_3/jquery_script.js'); ?>
<?php wp_head(); ?>

You place this code right above the “wp_head();” line your header.php file. The first wp_enqueue_script calls JQuery cycle which has been uploaded in to my current theme folder. The first section is the name of the script (file name minus the .js) then the path to the script then the array holds the libraries that the script depends on (JQuery in this case).

The next wp_enqueue_script calles “jquery_script” which is the .js file where we can place all of our jquery.

How Jquery Cycle Works

Jquery Cycle is a jquery plugin build for slideshows. To make it work you give it an element and it turns every child of that element into a slide. so to make our slideshow work we need to have a div with some children and in those children will be out images and headers.

So we need to make a containing div with unordered lists that hold 3 images and links. These ULs are the “slides ” Not the LIs.

The Code

Don’t get overwhelmed by the next code block. I’ll go over it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<div id="featured_posts" class="clear">
<a class="prev"></a>
 
<div class="slide_cont">
 
<?php 
$containter = 1; 
$display = 1;
?>
 
  <?php $my_query = new WP_Query('category_name=featured');
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
<?php
if (($containter == 1) and ($display >= 4)) {
	echo "<ul class='slides' style='display:none;'>";
	} elseif  ($containter == 1) {
 	echo "<ul class='slides'>"; 
	} else {}
?>
 
<li>
	<h3 class="long"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<a href="<?php the_permalink() ?>"><img width="260" height="120" src="<?php $values = get_post_custom_values('featured'); echo $values[0]; ?>" alt='<?php the_title(); ?> Thumbnail Image' /></a>
</li>
 
<?php 
$containter++; 
$display++;
?>
 
<?php
if ($containter >= 4) {
echo "</ul>"; $containter = 1;} else {}
?>
 
		<?php endwhile; ?>
</div> <!-- end #slide_cont -->
 
<a class="next"></a>
</div> <!-- end #featured_posts -->

Right, Starting at the top on line 1 we begin a div to wrap this whole section with, we also end this div on line 41.

On line 2 we make an empty anchor tag and give it a class of “prev” this will be the button that make the slideshow go to the previous slide. There is also another anchor with a class of “next” right before the featured_posts div closes.

Lines 6-9 make 2 php variables called “container” and “display” later we will use these variables to control when to make our slide containers.

11-12 creates a new wp_query and tells to get everything from the category called “featured”. If you want your slides to be from a different category you can change that here. This also starts The Loop and everything from here until line 37 will repeat for every post in the “featured” category.

14
15
16
17
18
19
20

<?php
if (($containter == 1) and ($display >= 4)) {
	echo "<ul class='slides' style='display:none;'>";
	} elseif  ($containter == 1) {
 	echo "<ul class='slides'>"; 
	} else {}
?>

This is code that generates the wrappers around our slides. it uses the variables from lines 6-9. Lines 15-16 say if container is equal to 1 and display is equal to or greater then 4, make an unordered list with “display:none;”. You need to have display:none; because otherwise users will see all the slides while the document is still loading and then they all get hidden.

The next 2 lines say if the above test fails (i.e. container is not equal to 1 and display is not equal to or greater than 4) to check if container if equal to 1 if it is them make an unordered list.

If both these test fail nothing happens.

Lines 22-25 generates the header and the images for each post. You can add the images inthe custom field section in the wordpress write panel by putting a path to image as the value and the key as “banner”. For more information you can visit

The PHP chunk on lines 27-30 tells php to add 1 to the value of both of out variables you will see why later.

32
33
34
35

<?php
if ($containter >= 4) {
echo "</ul>"; $containter = 1;} else {}
?>

The above php checks the “counter” variable and if it is equal to or greater then 4 it ends the unordered list that was started above when the UL was started. Then it resets container to 1 so a new list will start next time we go through the loop. If counter is not equal to or greater then 4 it does nothing.

How it works

Here is a visual flow for how the above loop should work.

1. The Loop Starts.
2. The first “if” statement fires counter is equal to 1 so a visible UL is made.
3. An image and link are generated
4. Display and container now equal 2
5. the second “if” statement is checked container equal 2 so nothing happens
6. The first “if” statement fires container and display equal 2 so nothing happens
7. Another image and link is made
8. Display and container now equal 3
9. the second “if” statement is checked container equal 3 so nothing happens
10. The first “if” statement fires container and display equal 3 so nothing happens
11. Another image and link is made
12. Display and container now equal 4
13. the second “if” statement is checked container equal 4 so our first 3 links and images are wrapped in a UL. Counter now equals 1
14. The first “if” statement fires container equals 1 and display equals 4 so a hidden UL is made
15. An image and link are generated
16. Display equals 5 and container equals 2
17. Ect…

What we have now is a DIV that contains unordered lists. each list contains a set of three posts

Make Cycle Work With Our Loop

Now we have our loop configured and it is generating XHTML like the following.

<div class="slide_cont">
<ul>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
</ul>
<ul>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
</ul>
</div>

Now in the jquery_script.js file in out theme folder we can insert the following example from the Cycle documentation.

jQuery(document).ready(function($) {
$('.slide_cont').cycle({
    fx: 'scrollDown'
});
});

Notice that I did not call JQuery with the $ shortcut. By default the jQuery included with wordpress uses jQuery.noConflict( ) so it does not interfere with the Prototype library. Hence using the different (document).ready(function) is needed. You can read more about noConflict here.

Note I use a slightly different cycle on my web page that adds previous and next controls. and adds several other parameters. I also use CSS buttons to make those empty anchors in the previous and next buttons.

Style Your Slideshow

Cycle works best when you fix all of your elements widths and heights. Below are the styles that I have applied to my sideshow

/*Featured Post Slide Show*/
#featured_posts{
width:960px;
margin-left:-10px;
height:140px;
}
 
#featured_posts h3{
font-size:12px;
width:255px;
}
 
#featured_posts ul{
 
}
 
#featured_posts ul li{
float:left;
margin:0 9px 0;
}
 
.slide_cont{
width:835px;
clear:none;
float:left;
margin:0 17px;
}
 
.slide_cont ul li h3 a, .slide_cont ul li h3 a:hover{
color:#fff;
}
 
.prev{
display:block;
width:35px;
height:75px;
background: url('images/left_arrow.png') no-repeat center;
cursor:pointer;
float:left;
margin:35px 0 0 10px;
}
 
.next{
display:block;
width:35px;
height:75px;
background: url('images/right_arrow.png') no-repeat center;
cursor:pointer;
float:right;
margin:35px 10px 0 0;
}
 
h1, h2, h3, h4, h5, h6{
color:#fff;
background:#000;
font-family:"courier new",courier;
padding:3px 0 3px 5px;
}

That should give you some basic styles to get you started.

Bring it all together

This is where it all comes together. I made my life easy by grouping all of the PHP code for the slideshow in featured_post_slideshow.php and used

<?php include('featured_posts_slideshow.php') ?> <!--Adds Featured Posts -->

At the bottom of my header.php to make it work across every page. Also now would be a good time to check if you have Cycle and jquery_script.js in your theme directory and is the wp_enqueue-script calls are correct and placed above the wp_head(); line in your header.php

If you have any questions leave a comment and I’ll help you out.

This also has some bugs. If the number of posts in your “featured” category isn’t evenly divisible by 3 the whole thing will come crashing to a halt.

Includes featued_posts_slideshow.php, CSS, Images and JQuery.

Another interesting tidbit for mac users (like me) is that Apple sets the default gamma of their monitors to be 1.8 instead of 2.2 like most PC so out monitors have slightly less saturation and contrast then most PC monitors would the fix is to calibrate our monitor in the system preferences. Apple has directions on that here.

After completing those 2 steps I noticed a distinct difference in my images and corrected the colors with some hue/sat and levels. Then tested in firefox and fixed everything up. The thumbnail image is my best guess at a before/after look at what exactly was going on.

For our knowledge enhancing pleasure I’ve also dug up some other cheat sheet that I’m saving for when I find time to learn other things, or references that I have found useful.

PHP I keep telling myself I’m going to learn this
MySQL and this
CSS Great referance guide with explainations
JQuery Used this to make some cool effects.
Wordpress my constant companion when I work with wordpress.
Photoshop Favorite new reference guide.