Author, developer, teacher, speaker and design lover.

My new course: An Introduction to UX Design

Posted on: March 14th, 2014 by patrick

 

I am pleased to say that my new course, An Introduction to UX Design,  through HOW Deisgn University is set to launch in about two weeks. I made a quick video to describe what the course contains and who might be interested in taking it. I hope you join me for this four week adventure in the world of UX design!

If you want to register head over to the HOW U. site.

 

HOW Interactive Design Conference 2013 Presentation

Posted on: November 5th, 2013 by patrick No Comments

 

Many thanks to everyone that attended my Workshop at this year HOW Interactive Design Conference in Chicago. As advertised, I am posting a full PDF of the presentation here.

For those of you that did not attend, please know that this 3 hour session was set up to cover three topics. As such, the presentation is a bit long and has three distinct parts.

Download a full PDF here.

Join me in Chicago this November

Posted on: October 16th, 2013 by patrick No Comments

 

This November I am speaking at the HOW Interactive Design Conference and I wanted to share some details with you about the event. I have spoken at a number of events, and I am particularly excited about this one and the topics being covered.

There are so many conferences to pick from that cover every aspect of the web. But what I love about the HOW event is that we always keep it so tightly focused on designer related issues. Yes, we talk about technology, we weave it into our talks - after all it's the web and you can't avoid it. However, the focus is always on the designer.

Over the years the process of designing for the web has gotten more and more complex. When I look at the line up we have this year I am excited to see the role this three day event can play in a designers growth and value in the marketplace. Gone are the days when designers can flippantly design for the web - and we welcome an era where strategy, planning and best practices win out. If you want to amp up your skills with training from some of the best minds in the industry this is the place for you. Frankly speaking I am humbled to be a part of this amazing crew and I really hope you will join me in Chicago this year.

The event is in Chicago November 5-7. If you do want to attend be sure to use promo code "PATRICK" to save $50.

A video introduction to my new Web Typography course

Posted on: August 28th, 2013 by patrick No Comments

 

I have been getting a lot of questions about what I cover in my new web type course through How Design University. So, I figured I would do a quick screen cast to show everyone what we will cover. I am actually really excited about this course and the practical material we cover. This course beautifully combines classic type principles with web friendly implementations. This will help you avoid embedding text in images and perhaps even worse, requiring specific classes be applied to your HTML to get styles to apply correctly. I hope you join me in this course, and check out the video intro.

Also, be sure to use promo code "PMCNEIL" to get 20% off the course!


 

You can also watch the video here if you prefer: http://screencast.com/t/2RtkZmCuf

Integrating Wufoo with Sendy

Posted on: July 19th, 2013 by patrick 3 Comments

 

I am an avid user of Wufoo amd a new user of Sendy. I have been considering a switch to Sendy from another big name mail service. The reason is simple - money. Sendy is super cheap, and nearly free in contrast to the hosted services. And since my email lists are big, but produce very little direct revenue it is painful to fork over the bucks for a fancy hosted service.

A big key for me to switch is that I can integrate Wufoo forms with the app. So, when a user submits a Wufoo form I want to put them on a mailing list. This is easy to do with other services as it is built into Wufoo. Sendy of course is not. So I had to make use of the Wufoo webhook feature. This combined with a script from Ben at Sendy I was off and running. Here is what I did:

1 Use RequestBin to setup a capture page for the Wufoo webhook request: http://requestb.in/. This will allow you to see what Wufoo is sending over. Instead of named fields (like "name" or "email") they send over messed up sequentially named fields. In my case, the field name for the email address is "Field627". RequestBin makes it crazy simple to figure this out as I presume it is different for every form.

2. Inside of Wufoo add a webhook notification to a form. Point it at your Request Bin url.

3. Fill out your form and submit it

4. Check the results on RequestBin. You should now have the names for your fields.

5. Download my modified version of Bens PHP file (see above for Bens original): Download here

6. Plugin your installation url (Make sure to leave off the trailing /)

7. Get the ID for your list from Sendy and plug it into the PHP file

8. Get the API key from Sendy and plug it into the PHP file.

9. Rename the file and upload it to your web server. You could have a huge set of these interface files to handle the Wufoo to sendy handoff. One for each combination of a form going to a list. So name your files in some intelligent way.

10. Note the URL to your new file on your webserver

11. Inside Wufoo, delete the notification to RequestBin

12. Create a new webhook that points to the PHP file we have created and uses your Sendy API key.

13. Go test your results and see if it works. Anyone submitting the Wufoo form should be added to the target Sendy email list.

I hope this helps. Given that there are not really any Sendy tutorials out there yet, I figured I would share what I did. I am sure there are bigger and better ways of doing this, but at least this works. I also imagine you could extend this to easily map Wufoo fields to custom Sendy fields.

 

 

This year I had the privilege of speaking at HOW Design Live not just once, but twice! Fortunately for me one of the two presentations is a direct spin off of a topic I have covered several times before. That said, I love the feeling that the presentation becomes more and more polished and refined each time I give it. As promised below is a link to a PDF of the full presentation with live links.

PDF of my Web Hosting 101 presentation

 

This year at HOW Design Live I spoke on the topic of going from Print to Interactive. Which is really nothing more then a spin on the classic topic of print to web. In this case I focused on the career options and milestones as well as key skills to focus on. Overall I consider this my farewell to the topic as I believe the idea of moving from print to web is antiquated. Yes you might make the move, but you also might change from being a print designer to an architect or an automotive designer and so on. The point is that it is such a huge change that presuming one starting point is almost silly. The industry has simply changed.

Here is my presentation in PDF form.

HOW Design Live 2013 (and promo code!)

Posted on: March 12th, 2013 by patrick 1 Comment

 

It seems that I keep finding ways to get back to San Francisco. 2013 will be my third year in a row to travel there and speak. I have been invited back to speak at the big HOW Design Live conference this year - and I will actually be speaking twice in the same day!

I will be giving a presentation I developed this last year for teaching the fundamentals of web hosting to designers. Through it you learn how hosting works, what goes into it and a bunch of handy tips that will help you navigate this area. For many designers this is an area of frustration. But as it turns out it isn't all that complex. I hope to shed some light on the topic and turn this point of weakness into one of strength.

The other presentation I am giving is on the interactive design industry. As designers attempt to make the move from print to digital they often wonder what their new career path is, what they should expect, what they should learn and so many other questions. I am thoroughly researching the topic and plan to give some clear and simple direction. This presentation will be a nice change of pace for me from my typical tech and design trend topics.

If you care to join me be sure to use promo code "PATRICK" and save an extra $100. Plus right now is early bird pricing so you can get about the best rate possible.

I hope to see you in San Fran!

http://www.howdesignlive.com

Print to Web Series: Digital Magazines

Posted on: December 4th, 2012 by patrick No Comments

 

One niche in print graphic design that’s been hit hard by the digitization of information is the news industry—and we’re going to focus on a subset of this: magazines. Although printed magazines clearly continue to sell, their sales have been on the decline. And while it might be tempting to suggest that digital versions of these magazines have displaced them, this is not true across the board (though it might be in individual cases).

The reality is that magazine sales and circulation are overall on the decline. (My opinion is that readers are simply going elsewhere for information, particularly on the web.) Despite this, there’s real opportunity for magazines to find a new home in the digital era. And no, it doesn’t include 300MB downloads with layouts that simulate the page-turning experience—an old-fashioned design approach that ignores the real possibilities of the web. Following are some great examples of online publications that marry great magazine content and great user experience design.

-- Read the full article on HOWInteractiveDesign.com

 

Before I dive in I want to give you a quick demonstration of the results of my code. I built a new portal page for Design Meltdown based on the Twitter Bootstrap but I wasn't entirely satisfied with the way the columns collapsed, I wanted more control.

Here you can view a version of the page where the column structures change to fit the screen size using some JavaScript I plan to share with you: view the dynamic version. Contrast this with a version that only relies on the default collapse of elements using the Twitter Bootstrap: default approach. In order to see the difference it is best to open each in a separate tab in one browser. Size it to a break point where the layout changes and toggle windows.

Here is one pair of screen shots to illustrate the difference.

With my JavaScript changing the columns:

Using the default column collapse:

 

The differences are subtle I suppose. For example, the four buttons turn into a 3 column layout and the sidebar of content sizes to match the button column setup. The issues are much clearer when you get down to the smaller tablet size where the four buttons packed next to each other are simply too tight.

Basically I wanted tighter control over how the columns would adapt. The bootstrap does a great job on some levels, but I suspect I am not the only one that needs to do this. If I were doing a client's site, simply accepting the default breakdown seems unrealistic.

As I approached the problem it seemed there were two possible approaches. Hijack the classnames to force them to behave in different ways. For example, for the span3 used on my call to action buttons could be adjusted in the CSS for specific screen sizes to behave like a span6 to get the 2 column approach on tablets like I have. This is an ok approach but I have a few problems with it. I have one issue in particular based on the fact that the initial layout is set in the HTML via the classname. Hijacking this in the CSS means that the class name won't really specify how it behaves. So in my opinion maintenance becomes very difficult.

With this in mind I decided to use JavaScript to change out the classnames on elements. This means that a span3 will always behave as a span3 in the bootstrap does. The trick is where to store the settings for the changes. For example, if I want my span3 to turn into a span6 where do I store this information? I settled in on the idea of using custom attributes in the HTML.

So I wrote some JavaScript to detect the screen size and change the classes of the columns at the various break points. In order to track things I created specific attribute names on the div tags to store the values I wanted at various sizes. I love that HTML5 allows you to invent attributes and use them in funky ways.

Twitter Bootstrap screen sizes

Twitter Bootstrap keys to 4 different screen sizes for its break point, here is how I am accommodating for each of these.

Screens greater than 1,200
I store the desired class name in an attribute called "tb-g-1200".

Screens between 980 and 1,200
This is the default screen size on the bootstrap and you just apply this as the class for the column as you normally would

Screens between 768 and 980
I used another custom attribute to store the desired class name "tb-768-980"

Screens under 768
Basically I don't have to do anything because the Bootstrap essentially makes everything 1 column, which is just fine.

Sample HTML with custom attributes

Here is a sample of the resulting HTML

1
 <div class="span7" id="logo" tb-g-1200="span8" tb-768-980="span6" >

This container will default to being a 7 column wide container. On screens greater than 1200px wide it will become an 8 column wide container. And for screens between 768 and 980 it will turn into six columns. Below 768 and it will simply use the default 1 column approach in the bootstrap.

The JavaScript

I would love to set this up as a jQuery plugin, but I simply didn't take the time to do so. So here is the JS code and how you might make use of 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
function tbAdaptor(){
	// adjust the span of various columns to match the screen size
	// all adjustments are pulled from the HTML attributes
	//
	// inital 
	var docWidth = $(document).width();
 
	//first save the default value
	$(".span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12").not("div[tb-d]").each(function(index){
		$(this).attr("tb-d",$(this).attr("class"));
	});
 
	if (docWidth>=1200){
		$("div[tb-g-1200]").each(function(index){
			$(this).removeClass("span1 span2 span3 span4 span5 span6 span7 span8 span9 span10 span11 span12 hide").addClass($(this).attr("tb-g-1200"));
		});
	}else if(docWidth>=980){
		$("div[tb-d]").each(function(index){
			$(this).removeClass("span1 span2 span3 span4 span5 span6 span7 span8 span9 span10 span11 span12 hide").addClass($(this).attr("tb-d"));
		});
	}else if(docWidth>=768){
		$("div[tb-768-980]").each(function(index){
			$(this).removeClass("span1 span2 span3 span4 span5 span6 span7 span8 span9 span10 span11 span12 hide").addClass($(this).attr("tb-768-980"));
		});
	}
 
}