Detect Mobile Devices on Front-End and Back-end

UPDATE: Webucator created a video about this library. If you’re a visual person, I’m sure you’ll like it 😉 Check it out here!

Depending on each ones needs, we often need ways to detect if our visitors are using an iPad, a smartphone or any other mobile device in order to make out website responsive and even faster by reducing data load. The following are a bunch of classes and snippets you can use to accomplish that, either on the back-end (server side) or on the front-end (client side), depending on each development situation, making it easier to detect mobile devices.

php-mobile-tablet-detect-class

Mobile Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.

You may consider this script as being part of the RESS (Responsive Web Design with Server-Side Component) movement. You can find out more on the topic by reading these articles: Improve Mobile Support With Server-Side-Enhanced Responsive Design and RESS: Responsive Design + Server Side Components.
[Read more…]

Ace: Professional High Performance Code Editor for the Web

ace-editor-preview

Ace is an embeddable code editor developed in JavaScript. It matches the features and performance of native editors including Sublime, Vim and TextMate. It could be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

It’s very useful if you want to edit code online (e.g. PHP, JavaScript files etc.) through a back-end application that contains code and you need to enhance that editor for a better user experience.
[Read more…]

Format User Input to Match a Specified Pattern: For Web Forms

Sometimes it is useful to format user input as they type. It provides a better experience to the user, it shows that you care about visitor’s input and you optimized your web forms like a professional and this way, it’s very unlikely the user will make any typing mistakes as it clearly shows how the input format should be. Here are 2 scripts that you can use to improve the functionality of your forms:

Masket Input Plugin allows a user to easily type in fixed width input in which you would like them to enter the information in a certain format (dates,phone numbers,social security numbers etc). It’s been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome. A mask is determined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined:
a – Represents an alpha character (A-Z,a-z)
9 – Represents a numeric character (0-9)
* – Represents an alphanumeric character (A-Z,a-z,0-9)

jquery-mask-input-plugin-preview

[Read more…]

Fancy & User-Friendly Select DropDowns with Chosen: jQuery Plugin

jquery-chosen-plugin-preview

Chosen is a jQuery plugin that makes long, unwieldy ordinary select boxes much more user-friendly. Comes with a number of options and attributes that allow you to have full control of your select boxes.

The following select types are supported:

  • Standard Select
  • Multiple Select
  • <optgroup> Support
  • Selected and Disabled Support
  • Hide Search on Single Select

There is also available a Prototype version of Chosen.

Setup

Using Chosen is easy as can be.

  1. Download the plugin and copy the chosen files to your app.
  2. Activate the plugin on the select boxes of your choice: $(".chosen-select").chosen();

[Read more…]

Banner Rotators and Sliders Bundle: Multi-Use License for only $29

Use the coupon INKY2013 to get $5 off from this already discounted deal

Inky Deals: Banner Rotators and Sliders Bundle: Multi-Use License

Inky Deals, in partnership with the guys from FlashComponents, offers a bundle loaded with top-quality banner rotators and sliders that you’ll definitely enjoy using!
This bundle is guaranteed to make your website far more eye-catching, thus considerably increasing the chances that a user stays more time on the website.

Each one of these banner rotators and sliders have a lot of powerful features, are simple to set up and incorporate in any project! You are able to customize them as much as you want, until you get that perfect look that fits your needs.

Each item is designed so you can easily change the transition, text, speed plus much more. And if you need some assistance – each folder has a help file regarding how to customize them.

This bundle includes a multi-use license, permitting you to use them in an unlimited number of personal and commercial projects without any extra fees!

Typically you would need to pay $455 for this set, but only for a limited time you can get them for the amazing price of just $29. That’s a massive 94% discount!

[Read more…]

Slow Sites = Less Sales | Importance of Page Load Speed | Infographic

This infographic from Zing! Broadband shows the importance of website speed when it comes to conversion. In 2012, people spent $59.1 billion during the Black Friday weekend and the Cyber Monday sales brought in $1.62 billion. 167 million US consumers shopped online or 53% of the population. Estimated growth is 192 million by 2016.

Average page load time for the top 200 retail sites was 10 seconds, 10% faster than 2011.

[View Infographic]

Solving a Dilemma: Raw JavaScript vs. JS Frameworks

There has been a huge dilemma among web developers as to what to get acquainted with first, the basic JavaScript or the more advanced features that use it such as jQuery, MooTools etc. The popular answer to such a question has always been the latter option. Learning the latter might be the easiest way around. But taking shortcuts always have their repercussions. Learning jQuery without getting acquainted with the basic Java script may lead to the developer running into problems later on.

The Pros and the Cons

Using script libraries is the easier way but not the best way. When one has ready made libraries of scripts in their possession and the library is user friendly and provides good tutorials for the beginners, it may not take a long time to master it. There are some great tutorials that may make even an absolute beginner master it and start working within a short period of time. There is a huge library of codes which can perform a huge range of functions. One does not have to write extensive lines of code as in raw JavaScript or others. The programming can be done with some speed as there is a lot of support for the library such as available plug-ins that speed up the process and can be downloaded readily. Yet all these come for a price.

[Read more…]

Tips to Help You Design an Excellent ‘Contact Us’ Page

Every business needs a website to have a distinct online presence and every website needs to have a ‘Contact Us’ page. It may seem simple on the surface, but designing a ‘Contact Us’ page is not a walk in the park; a simple screw-up can throw users off. Here are some to tips to help you design an excellent ‘Contact US’ page for your website:

Same theme as the rest of the website

Many web designers try to get fancy with the Contact Us page in an attempt to make it stand out. However, all it does is annoy users who have to check the web address bar to ensure that they are at the right website. Keep the page simple and ensure that it follow the same theme as the rest of the website.

[Read more…]