Here’s the link to the HTML slides: http://patrick-cox.com/talks/WPSLC-UX.js/#/

Here’s the speaker deck version of it…

Animate.css

I just found this and I really wish this was around 5 years ago. This is a great tutorial on how to properly use CSS to layout your web designs. It’s really pretty cool and I highly suggest ya’ll check it out. Starts with the basics of CSS layout properties and continues to dive deeper. The UX is pretty great too!

LEARN CSS LAYOUT!

Check out this Pen!

Well, now you don’t have to worry about that. Here is a freaking great Illustrator Bootstrap template – http://creategery.github.com/bootstrap-illustrator/

Trust me its awesome… I know the guy made it.

I’m excited to be speaking this year and really looking forward to meeting a lot of great developers and web designers. My talk will be similar to my “WordPress Developer’s Toolbag” that I gave last fall at WordCamp here in SLC, but it will be updated and tweaked to better suit the audience. I will also be replacing some of the animated gifs that horribly bombed at WordCamp :)

If you are interested in attending, check out it out. There will be great talks all three days and I think there will even be workshops – the schedule will be announced soon. This years event will be held May 2-4 at Utah Valley University…. go get your tickets.

You can throw tomatoes or rotten eggs at me if you want.

I figured there was probably two ways to create the textured effects. background-gradients or using a mask-image. I know I could probably recreate something similar to the overall background by adding texture effects via background gradients (although I really didn’t want to write it all out). But I wasn’t sure how to create the texture effectively on the text – I also had never used the mask-image property so I went for that.

I remembered that Trent Walton once posted something about using mask-image to create textured effect on text – CSS Mask-Image and Text.

Just as the mighty Mr. Walton created a textured image with filled areas and transparent areas and used mask-image to mask off areas of the text, I did the same thing.

1
2
3
4
5

h2{
color: #fff6d9;
text-shadow: 0 4px 26px #000;
mask-image: url(http://patrick-cox.com/texture.png);
}

But, I realized that just by adding a mask to the text would only give me a two color texture effect and I wanted at least a three color texture to get a look similar The Walking Dead’s title graphic.

Hmmmm…. could I use pseudo content to create a more layered effect?

Turns out you can. So I cut another textured PNG with filled and transparent areas as a mask so that I could create at least a three color texture effect. So, I set the h2 and p color to the lightest brown color, then added the a mask-image to the :before pseudo and colored it darker. To cap it off, I added different mask-image to the :after pseudo and colored it the darkest color …. and Bam! Something close to the title graphic that really only works in the webkit.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

h2{
color: #fff6d9;
z-index: 50;
text-shadow: 0 4px 26px #000;
}
h2:before{
content: "WALKING DEAD";
position: absolute;
color: #8b6b44;
z-index: 0;
mask-image: url(http://patrick-cox.com/texture.png);
}
h2:after{
content: "WALKING DEAD";
position: absolute;
color: #d5bf98;
z-index: 100;
mask-image: url(http://patrick-cox.com/texture-2.png);
left: 1px;
}

Here’s the CodePen result against the real title graphic. Pretty close!?

Check out this Pen!

Aight, so this is just the first pass at this, but I have compiled icons and splash assets ready for your designs – iOSsets. So far, these iOS assets template files are just PSD files set to the correct sizes and named by their preferred Apple build names.

This is just the beginning. I’ve got some better ideas for this little repo to be implemented in the future: (here’s just a few)

• PSD actions to generate final asset files (rounded corners, optimization, more)
• AI and Fireworks templates of all files
• Popular style “themes” or design templates to help out with your custom designs

These icon and splash themes will help you quickly pick a particular visual design style (flat icons, 3D icons, color schemes, etc) and make a few customizations… then BAM!  Drop them into your build!

If you’ve got any ideas to help build out this tiny iOS assets repo be my guest, drop me a line or fork it up!

iOSsets on GitHub

• First Use: yup, the first time a user uses the app.
• User Cleared: when the user empties out an element (like an inbox).
• Errors: the full blown error screen take over

Lessons Learned

Empty states don’t have to be empty, they are really perfect areas to show and tell users what to do to fill up that empty state or even just reinforce user goals. Take advantage of these empty states. Create a better overall experience by using these areas to guide users through your app. Also, just perty-up the app with some nice empty state design.

Read the entire article: Designing for Empty States

Good usability considers comfort and building trust and a good way to hold user trust when implementing a new UX design is to take them on a little tour and show them what the new features are, where they are located and how to use them.

A great tool to add to your website or app is Zurbs Joyride plugin. Basically, it’s a simple little jquery plugin that allows you to create custom tours of your website. Check out the demo. Super awesome plugin for taking your users on a quick new feature tour or even a “hey, we rearranged everything on you… it’s still all there just in different places” tour.

Zurb’s Joyride – Feature Tour

If you have used Centurion drop us a comment and let us know what you think… or if you have just played with it… thoughts?

Let’s argue why this idea should not be considered a ‘best practice’ shall we? Although I agree that some of her arguments for progressive JPEGs might be a valid solution in some cases, it shouldn’t be considered a best practice of developing websites as a whole.

First of all it’s an old idea. Back when the Interwebs were growing up and people first started to build web sites for commercial use and most of us were dropping in a AOL disk in the CDROM drive and taking over the telephone line – websites used progressive JPEGs. Why? Slow connection speeds… kind of like some mobile connections these days.

Essentially Ann offers two arguments for why progressive JPEGs provide a better and ‘faster’ experience:

The progressive scan gives the user a perceived faster speed.This argument is also old and also wrong. Progressive loading of an image actually gives the user a perceived slower (and annoying) speed. Two things happen to the user when a progressive JPEG is loaded: (1) Anticipation (2) Focus.

The user is now forced to watch the image load step-by-step building anticipation. This slow loading anticipation also distracts the user form the other content on the site. Instead of reading the paragraph below, the user is distracted by the pixelated image that is loading… curiosity. This is not the experience you want for the user.

It’s like standing in a huge line at the post office where you can see the desk at the end. That is great that you can see the end fo the long line, but it really sucks to watch the clerk at the desk take their sweet time making small talk with every person in line for five minutes if you actually have some where to go. If you are in a long line, it’s better to be distracted by other things around you rather than focus on the line you are standing in. Look at pretty much any ride line at Disneyland – they build in a line experience that takes the focus away from the line and onto other things.

A sequential JPEG actually provides a faster perceived and faster actual speed as well as a preferred user experience. By displaying either nothing or a loading image icon or something the user can then move to other content and start experiencing the website on slow connection speeds faster and not get distracted by some pixelated loading images that grabs their attention.

The other small user experience thing to consider is what the user is expecting. Since web designers have de-bunked the progressive best practice myth awhile ago the majority of users are expecting and comfortable with a ‘blank’ image with it loads.

Responsive images that should blow your mind.The argument here is just that when the image is shrunk down for mobile via a responsive or adaptive technique that the image will still be viewable while it is loading so that the user still views ‘enough’ image information. Now, this might be a fun trick for a small screen mobile phone, but the desktop or even tablet experience will still be slow and bad for the same reasons as above.

This isn’t an answer for responsive images being that you might be creating a better experience for a small screen while providing a bad experience for larger displays. There are better more effective and truly responsive answers to image loads on slow connection small devices – starting with image optimization.

I’m not trying to be a jerk I promise

Look, I don’t mean to be knit picky about this or sound like jerk, but from a design and user experience standpoint using progressive JPEGs doesn’t make sense and shouldn’t be considered a ‘best practice’. I’m down for revisiting old lost techniques if they make sense and push web design and user experience in a better direction, but using progressive JPEGs hurts the over experience of the web… it’s kind of like the old technique of telling the user to “download a better browser” or “this site best viewed in Chrome”.

If we consider mobile and performance issues as simply different accessibility problems than we can move the web forward and find better solutions and better ‘best practices’ that aren’t just old tricks or gimmicks.

But that’s just my take… I could be wrong.