Author, developer, teacher, speaker and design lover.

Introducing BootInspect for Bootstrap

Posted on: October 24th, 2014 by patrick

 

(Jump straight to the BootInspect Github page)

A few semesters back I was teaching my web design course where the students learn to code HTML and CSS. One component of this course is that they learn to make responsive sites using Bootstrap. The biggest problem students had was understanding how the columns were changing based on the various screen sizes. With this in mind we would put background colors on column containers so we could visualize what was happening.

This process became rather tiresome and I looked for a better solution. I hacked together some CSS and jQuery that would inspect the page and mark the page with visual tags showing the bootstrap containers at work. Shown here is an example of how this looks in practice:

basic-columns

In this image you can see that the blue outline shows the container, the red shows the row and each column is outlined in green. Also you will notice the tags in the top right corner of each column indicating the size it is set to.

In preparation for a Bootstrap workshop I am conducting at the Future of Web Design conference in November I decided I would formalize this tool and share it with the world.

I have found this to be a priceless tool when teaching bootstrap. Interestingly I have also found that it is equally useful when I am building my own sites using Bootstrap.

Visit the BootInspect Github project page to see how to put it to work and to get the latest version etc.

I hope you enjoy it. Please do let me know what you think of it!

Introducing the all new Design Meltdown

Posted on: July 9th, 2014 by patrick

 

Visit Design Meltdown

I am very happy to announce that Design Meltdown is back in business. After many years of being dormant I have completely rebuilt and updated the site. After extensive user research I have settled in on a structure and approach radically different from the sites blog style roots. The focus is still on collecting samples based on various attributes. However, instead of browsing single sample sets you can quickly browse the various topics as most of the samples are cross listed. I think you will find the new interface fast and fun to use.

Visit the new site, and let me know what you think.

 

Today I did a three hour workshop at the Univ. of IL Web Conference. It was a whopper of a session packed with a lot of material. I promised to post the PDF, so here it is.

Full PDF of the session.

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 No 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.