Archive results for:

Convert Click to Touch Events

Have you ever noticed the delay that occurs between the time you tap your screen and page activity?

On touchscreen devices, the onclick event doesn’t fire immediately. Instead, the device waits up to a half a second. This provides the user with an opportunity to initiate some other gesture instead of a click.

Use the touchend event instead, which fired immediately when the user taps the screen. You may still want to handle the onclick event to ensure that the browser changes the appearance of the button to show a clicked state, and to support browsers that don’t handle touch events.

To prevent duplicate code of execution when both touched and onclick code fire, add a click event handler that calls preventDefault and stopPropagation if the click was the result of a user tap already handled by touchend.

Note: A jQuery plugin alternative would jquery.tap or touché.


A prototype is a working model of your proposed design – usually interactive mockups that simulate the experience of interacting with your content.

Prototypes can be made in different levels of fidelity, ranging from the ultracrude (interactive sketches) to the highly polished (fully designed HTML prototypes). Unlike static mockups, you can actually load your prototype in browsers and on smartphones, so you can share it with others (clients) to test out.

When you put a prototype in front of someone, your goal shouldn’t be to get it approved but to figure out what yo should change to make it better. It makes sense to work out the kinks early before investing time and money developing a full-fledged solution. Read more ›

Learning PHP Intro Class

phpA self-study class ($25) enabling students to learn at their own pace includes seven lessons training you step-by-step through all of the basic aspects of web development using PHP.

This introduction to PHP class will train students unfamiliar with server-side programming learn to create dynamic web pages. PHP is one of the most widely used programming languages on the web used by most corporations. Students will learn how web pages interact with each other, basic core syntax, how to create interactive forms, web security issues, OOP basics and interacting with a MySQL database. Read more ›

Facebook Open Graph Meta Tags

Facebook’s Open Graph protocol allows for web developers to turn their websites into Facebook “graph” objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is “recommended”, “liked”, or just generally shared.

The information is set via custom META tags:

  • og:image – directs Facebook to use the specified image when the page is shared.
  • og:url – URL should be the canonical address for the given page.
  • og:title – title to accompany the URL.
  • og:site_name – the name that you would like your website to be recognized by.
  • og:type – the type of website that you would like your website to be categorized by.

Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage.


Responsive Retrofit Mobile

Responsive retrofitting has been defined as as finding the fastest and lowest-risk approach to creating a better experience for users of any screen size.

An issue with this is when a site has such complex styles it would be very difficult to undo for smaller layouts. In this type of situation, you may want to serve mobile first styles to viewport widths leading up to the current site’s fixed with resolution.

The goal with this approach is to have zero impact on the original CSS for larger viewport widths, but to use a mobile-first CSS structure leading up to that resolution without having to undo overly complex styles from the original CSS.

We’re using yepnope.js and Modernizr media query test to check if the UA supports media queries (and has JS enabled). Where it does, we serve the responsive CSS. In the cases where it doesn’t, or when we don’t have JS enabled, we serve the original CSS.

Optimize Images for SEO

While metadata and header tags have historically held high importance for SEO, images should be up the priority list as they hold more significance and have a higher presence in universal search than every before.

Done right, optimizing images can be fairly and easy, and significantly affect site rankings too.

  1. image alt tags: Every image on a site should have an alt tag that is short and descriptive.
  2. filenames: Before uploading an image, pick a descriptive filename (different from the alt tag).
  3. Anchor text: Linking to images with text can play a large role in how they rank for keywords.
  4. Surrounding content: A page that contains at least 200 words of quality, relevant content surrounding an image helps define it and is a key component in getting it ranked.

WordPress Tip: Styling for Specific Page

An easy way to have styling for unique Pages is via CSS on the unique page id that is generated for every Page in WordPress:



Page 6 of 17« First...567...10...Last »