Comics of the week #231

Go to Source

thumbEvery week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Tight squeeze

Comics of the week #231

 

Productive while working at home

Comics of the week #231

 

Send backup

Comics of the week #231

Can you relate to these situations? Please share your funny stories and comments below…

Smarty Bundle: Crests Logo Templates and Badges – only $15!
Comics of the week #231

Source

Modify WordPress img src for the “get_the_post_thumbnail”

Go to source

Expose the WordPressimg src” part from the get_the_post_thumbnail, to modify the “img src” syntax.

Instructions
Add the following code to your functions.php file of the theme you wish to use the custom image sizes for.

<?php $imgs = get_the_post_thumbnail($post->ID);
    /*get the img URL, delete the <img /> tag */    
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $imgs, $matches);
    /*the image URL*/
    $img = $matches [1] [0];
    /*echo the full img*/
    echo '<img src="' . $img . '" alt="" />';
?>

*note, for adding complimentary markup, classes and ID’s, you can do so by using regular expressions such as class="img-responsive"

Related Links:
Source: http://chono.com/notes/modify-wordpress-img-src-get_the_post_thumbnail

Deal of the week: 50% off the amazing Typo-painter

Go to Source

thumbnailTypographic art is all the rage, with everyone from politicians to pop-stars finding their speeches, lyrics and quotes transformed into portraits of themselves.

The trouble is, the old saying that a picture is worth a thousand words tends to be true; it takes a lot of time to rearrange words and letters convincingly so that they form a realistic image. So we’re delighted that our sister-site, MightyDeals.com, has found a way to speed up the process by arranging a fantastic deal on Typo-Painter.

Typo-painter is an amazing Photoshop plugin that will do all this hard work for you, leaving you to simply select your text and image.

Typo-painter works with any image, and outputs in eps format, allowing you to easily move from Photoshop into a vector program. It also accepts any text at all, so you can say exactly what you wanted to say.

Imagine Dr. Martin Luther King Jr’s “I have a dream” speech arranged into a portrait of his face, or the lyrics to “Born to Run” arranged into the face of Bruce Springsteen, the possibilities are endless!

Deal of the week: 50% off the amazing Typo painter

Deal of the week: 50% off the amazing Typo painter

Deal of the week: 50% off the amazing Typo painter

Deal of the week: 50% off the amazing Typo painter

This incredible plugin normally retails for $10, but for a limited time you can get it at 50% off, just $5! Head over to MightyDeals right now to grab this offer while it lasts.

Smarty Bundle: Crests Logo Templates and Badges – only $15!
Deal of the week: 50% off the amazing Typo painter

Source

Perfect your website with 3 simple UX research methods

Go to Source

thumbnailUser testing doesn’t have to be difficult at all. I’m going to talk about three lean research methods that are neither extensive nor expensive to carry out but will in turn provide you with valuable feedback.

The methods can be used for anything, test a landing page or test a whole mobile app. The important thing is to gather feedback: design for yourself, and only your point of view counts; design for others, and you need to hear their thoughts.

Which method, or methods, you choose will have significant consequences for your design, and different methods are more suitable for different objectives.

Experience sampling

This technique is used to ask participants a single question throughout their day to note their experiences. Keep it very simple like “What events do you input into your calendar app?” The idea is to get a number of people answering at different times of the day to yield various responses. You then collect the answers into a spreadsheet and analyze.

Results

The results provide insight about what the user needs, identify pain points and delight, currently in your product. It can bring inspiration about new features—things currently missing in your current version.

Preparations

You’ll need to figure out a bunch of things in order to run the test. First, what question are you trying to find the answer to? How many times in the day will you ask it? How you’ll you be asking—email, text message, phone call, online survey? You need to decide how to collect this data. You’ll also need to figure out who will be in charge of collecting this data and analyzing it.

You will also need to figure out who the participants are, how many of them will be in your study? Make sure that they can receive your question—not everyone has access to iMessage, so you can’t send it over from your computer. When it comes to the participants, you’ll need to make sure they are prepped themselves. Go over the test expectations, ie. the question will be asked 4 times through out the day. It’s also a good idea to run a practice test to make sure the participants can follow along throughout the test. This will wrinkle out any concerns or questions about it.

Running the test

It’s great to let the participants know they are doing well. You should be monitoring the answers as they come in and let the participants know if they have not answered the question correctly, they may have misread or misunderstood it. And of course, on conclusion thank them for their time.

 

Card sorting

This research method is meant to uncover the best way to structure information within your design. In the test, participants will group items into a sequence that is logical to them. If you are not sure about the navigation of your site, or the categories for your app, this test is perfect for you.

Results

What you can expect from this test is to figure out the way your target audience perceives your content. You’ll have a new way to think about terminology, the relationships between the items, and any missing features; all thanks to a dendrogram structure resulting from the test.

Preparations

This test can run in so many different ways! You’ll need to decide what content you want the participants to test, it can be current content or future content you’d like to create. You should not have more then 100 items to sort through; it can be quiet complex to sort things so the golden rule is less than 100.

There are various ways in which the participants can partake in a card sorting test; you can organize it in person with index cards or create the test online and send out a link. If you do this online, analyzing results can be much easier. Some well know online tools include SimpleCardSort, Optimal Workshop, and UX Punk.

There is more to consider: do you want the participants to preform the test individually or as a group of 3-4 people? Is the card sort going to be open or close sort? (Open sort means that you allow the participants to create and name the groups themselves, as many as they see if. A close sort means that you provide the categories and they’ll have to fit the items into them.)

Running the test

This only works if you are conducting the test in person, but you need to take notes. Write down when the users are confused about an item; if they are unsure help clarify, but don’t lead them with your own suggestions just explain what the item is—make a note that they were confused. If they seem to have trouble placing an item into a group where you see it jumping from one category to another, make a note of it.

 

Usability testing

This is a research method that gives you insight about how users use your product by observing their behavior. This testing is usually done one-on-one where you observe the users’ actions and listen to them comment as they go through the test.

Results

Usability testing points out the flaws and delights in your products. You’ll be able to take away things that currently work well, areas to improve upon, data about satisfaction, currently missing features and user input. It’s much more convincing to bring a quote from a user about a frustration point to your boss than just to say that the frustration point exists. Users are such a powerful motivator!

Preparations

A usability test is a walk-through your site. It usually tests a small portion, like the sign up process or maybe using the core feature of your site for the first time; if you were designing Facebook, it could be the process of signing up and adding a few friends in a couple of different ways.

You’ll need to figure out a bunch more for this test then the previous two. First, what are you testing? What are the steps you want the participants to take? For example, ‘You want to add a friend by email.’ You should also have a bunch of warm up questions just to get the participant familiar.

Additionally, you will be to figure out who will be taking the participant through the test and who will be taking notes. It’s impossible for one person to do both, as notes will be missed. It’s also recommended to record the session on top of that. Allow enough time for one participant to go through the test without rushing them before the next appointment is up; ideal test time is 30 min, so allow for a 45 min session.

Running the test

You should also provide a quick brief to the participant telling them why are they here and what they will be doing, you need to make them as comfortable as you can because being observed is not easy for most people. While the participants are going through the scenarios, insist they think out loud, that’s the only way you’ll be able to get access to their reaction, impression and thoughts; observing is not actually enough. Lastly, don’t help them out! Do not lead them; allow them to figure it out. It’s okay if they fail, or keep on failing. The point of the test is for you to find out where the participants trip up and not to get them from point A to B by holding their hand.

Smarty Bundle: Crests Logo Templates and Badges – only $15!
Perfect your website with 3 simple UX research methods

Source

5 fundamentals every web designer needs to understand

Go to Source

thumbnailWe all know intuitively what makes a website look bad: overused bevel effects, corny clip art, overcrowded layouts. These annoyances are easily corrected by developing with design fundamentals in mind—the same principles used by professional designers and artists alike.

Great websites bring together form and function. In fact, well-designed websites are seen as more credible, according to a Stanford study and are actually easier to use (as studied by researcher Don Norman). So here are five fundamentals to help you keep quality design at the forefront of your practice.

1) Follow the rules…mostly

In design school, they’ll give you a list of principles to abide by that assign rules to beauty—elements like layout, order and symmetry. But as you advance, you’re then told to break the rules a bit to create places for a viewer’s eyes to look by employing elements like variety, tension or contrast.

Here’s an example of a page I did in Edge Reflow CC. Can you spot the different design elements being employed, then played with?

 

2) Use imagery and icons to communicate when possible

There are some universal icons that people are trained to respond to. The magnifying glass (search), the house (home page) and floppy disk (save) are ingrained into your users already. Take advantage of those visual shortcuts; all those road signs should be immediately recognizable to you.

 

3) Color as a design element, not as decoration

Color makes all the difference, especially as our screens get better on our phones and tablets. It’s a facet of design that can be a really key part of the story your website wants to tell. Just use color to support content, not decorate a page. And often if you’re using a photo, the colors in the design should be sampled from the photos used so your design has a nice unified feel.

I quite like pulling color examples with color swatches – and the Adobe Kuler Web app is a great way to play with different themes and then import them into your design tools. One of the best rules to go with is to use complimentary colors. Which is basically using warm colors and cool colors together to provide balance.

 

4) Choose fonts that support content

There are literally thousands of fonts to choose from.

It’s up to you to mix and match – but remember that it’s best practice to use only up to three fonts at a time—a nice headline font, one for the main body of text, then one for any sort of call-out you might need. Often, that means using a sans-serif for the body copy, and for headlines you can get more interesting with either serif or sans-serif.

 

5) Help from others

All right, you’ve got your basic design elements, with pretty icons and pictures, with a sound color scheme and fun fonts. What’s next?

Getting help from others, of course! And not just random people on the street, but constructive critique from people who really know their stuff, like other designers/developers. This can be instrumental to go from an OK website to one that really pops. If you’ve never used Behance to post a work-in-progess, I recommend giving it a try. The active community will do more than just tell you “to make the logo bigger” – but give you advice that can make the difference between a good website and a great one.

 

To dive deeper into how to apply design elements to web development, check out my presentation from SXSW:

Bundle of Gorgeous Handmade Image Fonts – only $39!
5 fundamentals every web designer needs to understand

Source

Working with touch events

Working with touch events

touchLast month I was attending the jQuery Europe conference in Vienna with the Mobiscroll team.
There was a session called Getting touchywhich gave an insight into touch events and talked about why we need them.

There is a lot of ground that the presentation covers, so make sure to check out the slides. I would like to build on top of it and share my experience on the topic.

So why do we need touch events?

We don’t always need to use touch events in our apps or websites. Turns out that mostly we can get away of using the regular click events because mobile browsers emulate the mouse events rather well.
While emulation works in many cases, the functionality is limited.

The usual problems are:

 

  • Delayed event dispatch: mouse events are usually fired with a delay, which makes the app feel unresponsive.
  • Mousemove doesn’t track, only a single emulated mousemove event is fired. This makes impossible to make complex UI interfaces with gestures.

 

 

There are a ton of resources on the web targeting these issues, so I’m not reinventing the wheel here, I will just share my own personal experience on how I combined and extended different solutions to match our needs while building Mobiscroll.

The click delay

As you probably know, there is a delay between the actual tap and the firing of the click event. I’m not going into details on why this happens, you can read about it in the slides mentioned before.

A common technique to prevent the delay is to bind the handler to both touchend and clickevents. The challenge here is to prevent the so called “phantom click”, meaning that if your handler was called on touch end, don’t execute it again when the click event is emulated by the browser. The proposed solution here is to call e.preventDefault() either on touchstart ortouchend which will prevent the firing of emulated mouse events.

However I find this problematic because:

 

  • Calling it on touchstart will kill native page scroll
  • Calling it on touchend will kill momentum scroll on some devices
  • It does not prevent at all emulated events on Android 4.x stock browsers

 

The solution we are using in Mobiscroll does the following:

  1. Attach touchstarttouchend and click events
  2. Remember start and end coordinates
  3. Call the handler e.preventDefault() on touchend, but only if movement was less then 20px in any direction (so the user did not have the intention to scroll)
  4. Set a flag to prevent executing the handler again in the emulated click event
  5. Start a timeout which will clear the flag in case when the click event was not emulated

Putting everything together:

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
var startX,
    startY,
    tap;

function getCoord(e, c) {
    return /touch/.test(e.type) ? (e.originalEvent || e).changedTouches[0]['page' + c] : e['page' + c];
}

function setTap() {
    tap = true;
    setTimeout(function () {
        tap = false;
    }, 500);
}

element.on('touchstart', function (ev) {
    startX = getCoord(ev, 'X');
    startY = getCoord(ev, 'Y');
}).on('touchend', function (ev) {
    // If movement is less than 20px, execute the handler
    if (Math.abs(getCoord(ev, 'X') - startX) < 20 && Math.abs(getCoord(ev, 'Y') - startY) < 20) {
        // Prevent emulated mouse events
        ev.preventDefault();
        handler.call(this, ev);
    }
    setTap();
}).on('click', function (ev) {
    if (!tap) {
        // If handler was not called on touchend, call it on click;
        handler.call(this, ev);
    }
    ev.preventDefault();
});

Working with gestures

When we started building the Listview, we imagined a widget with heavy gesture support. And this is where it shines.

slide-16-touch-gestures

We needed support of following:

 

  • Use native vertical scrolling
  • Handle left and right swipe gestures, disable page scroll during swipe gestures
  • Handle tap
  • Handle tap and hold (activate sort mode)

 

Native scroll

If we want to keep using native touch scrolling, this involves that we cannot calle.preventDefault() on any of the touch events unconditionally.

Horizontal swipe

We need to listen to the touchmove event and decide on the fly whether it will be a vertical or horizontal swipe. If it’s horizontal swipe, kill the page scroll with calling e.preventDefault(). The following thresholds are used:

 

  • If the horizontal movement is more than 7px, we consider it a swipe
  • If the vertical movement is more than 10px, we consider it a scroll

 

 

Tap

We need to decide if the user is tapping on a list item or intends to swipe or scroll. If movement was less than 5px in any direction tap is being honored. We also need to take care of the duplicate firing of the events, so a flag is being set – similar to the one we used for the click delay.

Tap & hold

On touchstart we will start a timer which activates the “sort/reorder” mode after a delay. This timer is being reset in case of a scroll, swipe, or touchend.

Let’s take a look at our event handlers. Also note that we attach the touch events and themousedown to the element itself, while the mousemove and mouseup events are attached to the document element dynamically and removed at the end. That is because they behave differently: the touchmove and touchend will still be fired if the finger leaves the element, while themousemove and mouseend event will not fire once the mouse pointer has left the element.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
var touch,
    action,
    diffX,
    diffY,
    endX,
    endY,
    scroll,
    sort,
    startX,
    startY,
    swipe,

function testTouch(e) {
    if (e.type == 'touchstart') {
        touch = true;
    } else if (touch) {
        touch = false;
        return false;
    }
    return true;
}

function onStart(ev) {
    if (testTouch(ev) && !action) {
        action = true;

        startX = getCoord(ev, 'X');
        startY = getCoord(ev, 'Y');
        diffX = 0;
        diffY = 0;

        sortTimer = setTimeout(function () {
            sort = true;
        }, 200);

        if (ev.type == 'mousedown') {
            $(document).on('mousemove', onMove).on('mouseup', onEnd);
        }
    }
}

function onMove(ev) {
    if (action) {
        endX = getCoord(ev, 'X');
        endY = getCoord(ev, 'Y');
        diffX = endX - startX;
        diffY = endY - startY;

        if (!sort && !swipe && !scroll) {
            if (Math.abs(diffY) > 10) { // It's a scroll
                scroll = true;
                // Android 4.0 will not fire touchend event
                $(this).trigger('touchend');
            } else if (Math.abs(diffX) > 7) { // It's a swipe
                swipe = true;
            }
        }

        if (swipe) {
            ev.preventDefault(); // Kill page scroll
            // Handle swipe
            // ...
        }

        if (sort) {
            ev.preventDefault(); // Kill page scroll
            // Handle sort
            // ....
        }

        if (Math.abs(diffX) > 5 || Math.abs(diffY) > 5) {
            clearTimeout(sortTimer);
        }
    }
}

function onEnd(ev) {
    if (action) {
        action = false;

        if (swipe) {
            // Handle swipe end
            // ...
        } else if (sort) {
            // Handle sort end
            // ...
        } else if (!scroll && Math.abs(diffX) < 5 && Math.abs(diffY) < 5) { // Tap
            if (ev.type === 'touchend') { // Prevent phantom clicks
                ev.preventDefault();
            }
            // Handle tap
            // ...
        }

        swipe = false;
        sort = false;
        scroll = false;

        clearTimeout(sortTimer);

        if (ev.type == 'mouseup') {
            $(document).off('mousemove', onMove).off('mouseup', onEnd);
        }
    }
}

element
    .on('touchstart mousedown', onStart)
    .on('touchmove', onMove)
    .on('touchend touchcancel', onEnd)

Problems that are still unsolved

Android ICS

On Android ICS if no preventDefault is called on touchstart or the first touchmove, furthertouchmove events and the touchend will not be fired. As a workaround we need to decide in the first touchmove if this is a scroll (so we don’t call preventDefault) and then manually triggertouchend – see the code above.

Windows Phone

In WP8 there is no way to prevent native scroll on the fly. To be able to listen to touch events, you need to set the following css property:

touch-action: none;

However this will kill all default behavior, like native page scroll. Fortunately this can be fine tuned, so for the Listview we use the following:

touch-action: pan-y;

Which tells to browser that vertical swipe will be handled by the browser, while our code will take care of the horizontal swipe. Unfortunately sorting won’t be working, because it will not prevent native scroll while dragging an element. So in WP8 the only way to implement sorting is to use a “sort handle” element which has the touch-action: none; rule applied. So when the user “picks” up an item from the sort handle, we know he intends to reorder.

Firefox Mobile

In Firefox Mobile the native scroll can be killed only if preventDefault() is called on thetouchstart event. Unfortunately at touchstart we don’t really know if we want scroll or not. This has two consequences:

 

  • sort will work with the above mentioned sort handle only (by calling preventDefault()on touchstart if dragged by the handle)
  • while swiping an item left or right vertical scroll will still work

 

 

These issues can easily disappear in upcoming browser updates or releases, until then we need to come up with workarounds.

What are your hacks and workarounds for dealing with complex gestures? Let us know in the comment section below.

Tags: