Do Your Research

Even if you are not a professional web designer, a little research can help you out in finding the right form builder. Look online for the tools that can help you in creating the right form for your website. Once you have found the right form builder for you, play a little with it to familiarize yourself with it.

Only Ask For What You Really Require

Asking useless information from the visitor will only result in less submissions. If you are designing a contact form then ask yourself do you really need to know the person’s work, cell or fax number or as i have seen somewhere the person’s blood group. This will only make the visitor less comfortable with your website and you will lose a potential future customer in no time. So always ask for the things that you think are absolutely necessary for your website. You can use conditional logic to show and hide the fields of the form that are relevant to the user.

No Need for the Evil CAPTCHA

Yes a few years back CAPTCHA were a necessary “Evil” for protecting your website from spammers. But with the help of the spam filters that work behind the scenes you can increase the security of your website without using CAPTCHA. When i call it an “Evil” i really mean it as it is one of the biggest reasons behind the fewer submissions one receives from their form. If you are not comfortable without CAPTCHAs then use a smart one which only shows up when the web form seems to be abused.

Use Multi-Page Feature When Required

If your intended form is a large one then try to divide it into more than one pages. The visitor to your website will be far more interested in going to the next page to complete the task than to scroll down a long page. Well this is at least what my experience tells me. And when you are using a multipage form, try using progress indicator bars and a save and resume feature as it will make your form far more user friendly.

Help the User & Help Yourself

If your form requires any information from the client that you feel he or she will be reluctant to provide then always explain to them why you require it. For example most people will not be thrilled about giving out their date of births but if you require them then explain to the visitor why exactly you require it. You can use supporting text for this purpose and also to help the visitor in filling out the form.

Earn the User’s Trust

If your form requires sensitive information like credit card or bank details then it is of utmost importance that you provide the users with a sense of security and a feeling that they can trust you. For this the very first step will be the enabling of data encryption and SSL certification.

Make It Pretty

We all like pretty things right? So what’s so different with the forms, they should be eye catching enough to harness the user’s interest. Try out a few css tricks for that and pay special attention towards the button. You can also try out different wordings for your buttons as well to see which one of them gets you the most submissions.

Courtesy After Submission

Never give up on your users once they have submitted the form. Always show a thank you message to let them know that you care about them and value their submissions. Or you can also send a message to the user’s mail account to confirm the submission.

Conclusion

I understand these are simple and common sense tips but i have seen websites that often overlook most of them. Each website is different from the other so you will have to try out a few options to know which one of them works best for yours and provides you with more submissions.

1. Encode Email Address:

The below function takes a string input (the email address), loops through each character replacing the letter with the character’s ASCII value, and returns the encoded email address.

2. Validate email Address:

To check if an email address is valid, the common solution is regular expressions. For instance, to validate an email address in PHP use the following simple code.

3. Get Real IP Address of Client:

In the above PHP function, first attempt is to get the direct IP address of client’s machine, if not available then try for forwarded for IP address using HTTP_X_FORWARDED_FOR. And if this is also not available, then finally get the IP address using REMOTE_ADDR.

4. Convert URLs within String into hyperlinks:

This is very useful function which will convert a string of text and add hyperlinks to all the URLs. We loop through each URL and add a hyperlink.

5. Random password generator:

PHP password generator is a complete, working random password generation function for PHP. It allows the developer to customize the password: set its length and strength. Just include this function anywhere in your code and then use it.

6. How to block multiple IP adresses:

It is sometimes necessary to block people from using your site, dependent on their IP address. A users IP address can be detected by PHP using the $_SERVER superglobal and the parameter REMOTE_ADDR. This PHP function is used to block user with multiple ip adresses.

7. Send a Text Message:

With the help of this PHP function you can send text messeges to your clients or whoever you want.

8. Pagination Function:

The following PHP function creates an array of navigable links which can be easily used to create  pagination. This can be used as a generic pagination function, because it accepts all necessary parameters.

9. Parse XML Data:

PHP has a class called SimpleXML which is simple to use for parsing XML data.

10. Download File Forcefully:

Provide files to the user by forcing them to download. This type of download start automatically when user clicks.

Minimalism entered the western design industry in the 20^th century when the designers started striping their designs to just the absolute essential elements. In the beginning it was the architects who started making minimalism their preferred design style. The two statements that really caught the imagination of designers of that time were “Less is More” and “Doing More with Less”. Later on designers designing movie posters, brochures, business cards and print adverts all became inspired by minimalism.

But the biggest impact that the minimalism has made is in the web design. Apple is one of the trendsetter that has introduced minimalism to the global visitors not only through its website but also through its branding and devices as they were stripped down to show only the essential elements.

How Minimal a Web Design Should Be?

Each designer has its own idea of just how minimal is minimal. For some of them it’s the usage of subtle and mute colors while for others its the presence of less visual elements that makes a web design minimal. What most if not all the designers do while designing a minimal website is that they design a layout and then take out the unnecessary elements until nothing more can taken out of the layout. As simple as it all may seem a lot of effort and planning goes in handpicking the design elements that can make a web design function and thus needs to be visible.

White Space Usage in Minimal Design

Having enough white space between the elements make the users believe that the web design is large enough and it also gives an impression of clarity and ease of the content for the users. White space also known as negative or empty space always plays an important role in any web design but it is more important when it comes to minimal design. So always use white space intelligently as it may make or break your website.

Using Alignment Properly

Alignment of element s in minimalism is another important factor as it organizes and arranges your design. Alignment helps in providing the white space required for a balanced design and also makes it easier for the users to absorb key information. One of the easier ways of achieving effective alignment is using the grid layouts.

Colors of Minimalist Design

Some people take the meaning of minimalism as the lack of colours. While the principle of less is more is true here as well, the use of colours is necessary to reinforce specific elements, emphasising those that require more attention than others. What’s important here is that you use a few a simple colour palette. On most of the minimalist websites you will find just a single colour that contrast beautifully and tremendously increase the visual appeal of the design.

Emphasizing the Essential Elements

As in minimalist web design you will be taking out most of the elements so it is necessary that you emphasize the rest of the elements. This is can be done in a number of ways for example by using different colours, typography styles an size of all these elements.

Repetition in Minimalism

Repeating some of the design elements helps in providing the design with a sense of consistency. Repetition can be used in almost all of the areas of your design and should be used to reinforce shapes and icons.

Conclusion

I hope by using the above guidelines you will be able to create a impressive looking minimalist website for yourself or for your client. The thing to keep in mind here is that although it is important to strip the design of all the unnecessary elements but it is also as important to create a balanced layout by using all the remaining elements in a proper manner.

<audio>

The new <audio> element provides the webmasters with a easy way to add audio to their webpages. If i become its marketing representative the biggest selling point of <audio> element for me will be its simplicity and just how quickly one can add the audio content through it. It can be as simple as adding a <img> element as all you will be required is to use the src attribute to link to your file.

<audio src=”abc.mp3″>

</audio>

Simple is’nt it? For the browsers that still do not support <audio> element  you can add a fall back solution like a Flash Player or a fall back message.

<audio src”abc.mp3″>

<p> Fallback message – Your browser does not support the audio element. </p>

</audio>

Here are a few of the options that the audio element comes with.

preload

This nice little option allows the browser to start buffering the audio file without the visitor hitting the play button. What it does is that the visitor can enjoy the smooth playback without loading times. But you have to be a little cautious about using this option as you might not want to buffer data that the vistor might never use.

Three values can be associated with the preload option, these are “auto”, “none” and “metadata”.

<audio src=”abc.mp3″ preload=”auto”>

</audio>

If you are not in a mood to preload your audio file then you might want to set it to none as browsers like safari sets the default value of preload to auto.

autoplay

Have you ever went on a web page that started playing music as soon as you are on it and then you have to find the tab that will close it? Well if you want to include this annoying into your web page then autoplay can achieve that for you.

<audio src=”abc.mp3″ autoplay>

</audio>

controls

You can use your own control buttons with the help of some Javascript but with the use of controls you can enable the visitor to use the native controls that their browser provides for the playback of an audio file.

<audio src=”abc.mp3″ controls>

</audio>

Notice that both controls and autoplay are Boolean attributes so need for controls=”true” or autoplay=”true”.

loop

This Boolean attribute makes the audio file loop forever.

<audio src=”abc.mp3″ loop>

</audio>

filetypes

The only real issue that one can face while using both the <audio> and <video> elements is that each of the browsers support its own filetypes and encoding for the reasons that are beyond me. So what a developer has to do is plan ahead and provide the same audio file in different filetypes and encodings so that it stays compatiable with all the browsers.

For adding multiple sources you will have to use the <source> tag.

<audio controls>

           <source src=”abc.ogg” type=”audio/ogg” />

           <source src=”abc.mp3″ type=”audio/mp3″ />

</audio>

<video>

<video> element has the same syntax as the <audio> element.

As with the <audio> element, the syntax is the same with the <video> element.

<video controls>

           <source src=”abc.ogv” type=”video/ogv” />

           <source src=”abc.mp4″ type=”video/mp4″ />

</video>

Again, as is the case with <audio> element you will have to use multiple sources and filetypes of the same video file to support all the compatible browser.

height/width

The attributes like autoplay, loop and preload work the same way for both audio and video elements. There are a few attributes that are specific to the video elements, height and width being one of them. They work as the same way as they do for the img element.

     <video controls height=”360″ width=”580″>             <source src=”abc.ogv” type=”video/ogv” />

           <source src=”abc.mp4″ type=”video/mp4″ />

</video>

poster

You can use poster attribute to link to a thumbnail to display it when the video is not plying instead of just displaying the first frame of the video.

<video controls poster=”abc-thumbnail.jpg>

           <source src=”abc.ogv” type=”video/ogv” />

           <source src=”abc.mp4″ type=”video/mp4″ />

</video>

I hope you will enjoy your using these two elements as they have made embedding multimedia into the web pages a far more easier task than ever before.

1.A Beginner’s Guide To WordPress Theme Development:

The is a free eBook by WPShout, in five chapters, 3,508 words and twenty one pages and this will give you a brilliant start with WordPress theme development. Only the most basic of WordPress knowledge is assumed, so literally anyone can read this and get a basic idea of WordPress development.

2.Build Your Own WordPress Site Guide:

Creating your own website, even using WordPress, is not something that should be taken lightly. To assist you, MakeUseOf presents you this free PDF guide. Inside, you will find everything you need to know to get your first, second, or tenth website successfully off the ground, ranging from setting up your blog or website to designing a simple banner!

3.Bulletproof Blogging with WordPress:

They have put together a free eBook on configuring WordPress called Bulletproof Blogging with WordPress (pdf, 2.1MB). This eBook is aimed at someone who is new to WordPress and is hosting their own blog for the first time. Most of the information in Bulletproof Blogging with WordPress comes from blog posts, from TaB.

4.Getting Started with WordPress:

This “Getting Started” handbook offers an introduction to WordPress, the amazing open-source website platform. Learn the benefits of using WordPress, as well as step-by-step instructions on how to set up your domain name, install WordPress and get familiar with the WordPress Dashboard. You’ll also learn about WordPress themes and plugins, how to create your first post or page, and optimize your site for search engines—all with helpful links to video tutorials.

5.Getting Started with WordPress Plugins:

This is a free eBook from PluginBuddy.com to learn the critical Best Practices for plugins, regardless of whether they are free or fee. This 21-page guide gives you the scoop on the Best Practices for working with plugins – what to do, what not do, when to worry and what to do when things go wrong.

6.Learn WordPress:

WordPress is your simple and easy way to set up a blog with minimal programming requirements and this eBook will help you learn how to use WordPress to setup your own blog within minutes.

They want you to have control over your website! That’s why they created the guide Using WordPress – all you need to get up and running with WordPress. It goes through the basics of what you’ll find in the WordPress admin, explaining in your terms how to write and edit Posts and Pages. It delves into optimising the settings of your WordPress site, shows you how to install plugins and even includes a list top recommended plugins.

8.WordPress SEO:

WordPress SEO guide for beginners – The Blog Oh! Blog way can be considered as a crash course for all the people who are struggling to get better search engine results with their WordPress blogs. This eBook will guide you how to rapidly configure your WordPress blog with maximum SEO benefits.

9.How to Create Small Business Websites Using the Thesis WordPress Theme:

This eBook is a beginner’s guide to using WordPress and the Thesis WordPress Theme to set up highly effective small business websites that get great local search results. Small Business owners are in need of a cost-effective way to set up a professional looking website to help them promote their business in Google and Yahoo local searches. If you are a small business owner, or a consultant who helps small businesses, this guide is for you.

If you are one of the developers that is considering Android as a platform for creating new apps then you will find Android a lot more accommodating than iOS. The reason is the fact that its Linux based and it being open source. By using the platform one can create all new apps for the personal use and by using many of the smartphone devices you can built applications for your users. Today we will be sharing with you some helpful tools that can make the design and development of Android apps a lot more easier.

Dorid Draw

This is an online tool that can help you in building graphical user interfaces for the Android smart phone platform. But you can also use the standalone executable of Dorid Draw that is available for Mac OS X, Windows and Linux.

Google Android

This is a good stencil set for Google Android prototyping.

iDroid Icon Set

This is an elegant set of replacement icons for the Android operating system. These icons are available as 48×48 png images that can be used by replacement applications like OpenHome, dxTop, PandaHome and Bettercut.

Android Honeycomb Stencils and Sketches

Android Honeycomb is the OS that is specifically designed by Google for the tablets. This set of stencil and sketchsheets that has been created using the Motorola Xoom as a frame can help you in getting started with mocking up your GUI’s.

Fireworks Template for Android

In this template you will find vector images of Android user interface elements. The best part is that the elements are already labelled according to the Android vocabulary.

App Inventor

With App inventor you can start designing an Android app in your browser and then set its behaviour like fitting together puzzle pieces. During the process you can see the live version of the app on your phone through a live connection between it and your computer.

Sketch style Android OmniGraffle template

This sketch style wireframe encourages the users to focus on the functionality and behaviour of the app rather than on the visual design.

Sensor simulator

This java based standalone application simulates sensor data and transmits them to the Android emulator.

Android Phone GUI Kit

This Photoshop file that features elements of the Android OS 1.5 GUI is great of application mockup adn conception.

Android Interaction Design Patterns

On androidpatterns.com you can find a set of design patterns that can help you design a better android application. But as the site says itself use them as inspiration not a law.

Breathe

This is another and a newer set of replacement icon for the Android OS. The rounded corners of the icon means that the designer was inspired by the iphone.

1.Bg Patterns:

2.ColourLovers Color This Pattern:

3.Dynamic Drive Gradient Image Maker:

4.Grsites Generator:

5.Pixelknete Dotter:

6.Rails2u Bg Maker:

7.SecretGeek’s Gradient Maker:

8.Stripe Generator:

9.Stripe Mania:

10.Striped Bgs:

11.Tartan Maker:

12.Ventdaval Bg Maker:

This feature was originally designed by Apple for creating lightweight widgets for its mobile devices but now it is openly developed under the W3C standards. This has provided the <canvas> element a unique flexibility and application. By working with Javascript and CSS3, <canvas> can create charts & graphs, web based games & animations and interactive websites.

One can easily integrate Canvas into the webpages and the process is as simple as adding any other markup. But you will require some programming and mathematical skills for creating the interactive effects, graphs, games, animations and functions. Here are a few tools that are available to you with the Canvas element.

Drawing tools

• Rectangles
• Arcs
• Paths and line drawing
• Bezier and quadratic curves

Effects

• Fills and strokes
• Shadows
• Linear and radial gradients
• Alpha transparency
• Compositing

Transformations

• Scaling
• Rotation
• Translation
• Transformation matrix

Getting data in and out

• Loading external images by URL, other canvases or data URI
• Retrieving a PNG representation of the current canvas as a data URI

Here are a few examples of the usage of HTML5 Canvas, although most of them are mere basic concepts, i am confident that you can take them to the next levels through your creativity.

Creating an interactive bubblechart with HTML5 canvas

Canvas can help you to create an interactive bubble chart which you can use to visualize up to five dimensions of data at once. In this tutorial Josh Marinacci, a software engineer explains how to use HTML5 canvas to build an interactive chart that works on desktop mobile and then populate it with real data.

This tutorial will teach you how to create basic charts which you can improve and create your own charts. It also provides you with a downloadable full source file of the project which can be quite helpful in your learning process.

Interactive Typography Effects

You can use HTML5 Canvas to create some gorgeous looking typographic effects which will add a unique style to your design. In this tutorial codrops teaches about basic interactive type manipulation through the Canvas an covers development of dynamic type effects.  This effect can have multiple uses as you can use it for animating logo or even for  making a unique coming soon page.

3D Slideshow

This 3D Slideshow tutorial is done by Hakim el-Hattab who is known for his awesome application of Javascript and HTML5 Canvas. You can use this concept to produce a image slider for your portfolio page or create a unique gallery showcase. 3D Slideshow effect can be used to present content, introductory text or to create an interactive learning experience.

Drag and Drop

This is one of the most awesome effects that one can achieve with HTML5 Canvas. Because of its draggable attribute HTML5 Canvas supports interacting with imaes. When you combine it with kinetic.js, you can create anything ranging from a visual categorization app to an interactive pinboard for arranging and displaying images. This example will show how the image board can be one.

There are a plenty of uses for this effect, you can use them for arranging content, creating agile project management tools or a unique way for clients to drop products into a shopping cart.

Image Effects

In this tutorial Ilmari Heikkinen will take you through some examples of HTML5 Canvas’s most powerful feature, and that is its pixel interpretation. You can use this feature to recreate any image filter or effect and apply it to themes or apps.

But one thing always remains constant and that is the fact that it takes a very strong designer’s eye to create a landing page that will catch the imagination of the potential clients. While the main goal behind the design of most of the web pages is the user experience and brand representation, landing pages instead emphasize using some deep psychological marketing techniques to enhance the chances of making a sale. Today we will be sharing with you some awesome techniques for a landing page and what a designer can do to increase the sales of the product.

Use Unique Ad Copy

Truth is that the users around the globe are almost fed up of the classic ad copy sales pitch and one should not really expect any extraordinary results from it anymore. If you take a look at some of the most successful landing pages online then you will come to know that nearly all of them are using some creative Ad Copy to get the attention of their clients.

Using flashy graphics can make your page aesthetically more appalling to your user’s eye but it will also take their attention away from the main objective, that is your product. You can use some of these graphics in the header area and they should always represent your brand. Your ad copy should be well written, yes the writing process can take quite a lot of your working hours and it should. Keep in mind that your message must be clear and to the point, this is not your thesis for a masters degree in English Literature so just keep it simple. Never underline your essential message to emphasize, as any underlined text other than the links will just confuse the visitors.

Keep the Actions Above the Fold

Now this is perhaps the most crucial point. Never expect the visitor to have enough spare time which he or she can spend to scroll down to find the information about your product. If you already have such a landing page then just put a analytical tool in it (Google Analytics can be a good option) and you will get an idea of just how fast the visitors are leaving your page.

Studies have shown that if the actions seem too confusing on your page then the visitors will leave it within seconds. Keep in mind that visitors of your page are looking for something to do there, if you don’t provide them with something interesting to read, watch or listen then you will losing them in seconds.

Providing all the vital information and call to actions above the fold can tremendously increase the chances for scoring a sale on your page. Provide your visitors with a plan to action. You can provide them with an option to sign up in your header area so that they can get updates regarding your product, this can be helpful in generating sales in the long term.

Proper Usage of Digital Media

Using digital media to properly convey your message to the users can be a great technique but i have seen a number of designers over doing it. Remember the purpose behind the creation of a landing page is to present a product and provide as much information as required to entice a user for making a sale. So you should use each part of the page to its fullest for the presentation of the message.

The point is using only the relatable media, this can be anything ranging from audio or video presentations, podcasts or infographics that explains the benefits of your product. Most landing pages contain stock imagery that relates to the product but i will hardly call it a proper use of the space as most of the time they don’t have any underlying message that helps the user in understanding your product. But if you think you have already provided enough information for the user then you can use stock imagery, icons or illustration for filling the empty spaces and improving the look of the page.

Choosing the Right Colors

No matter what medium you are designing for, color choice is always one of the most important aspects. This is also true for designing landing pages as colors invoke a set mood into the visitors of your page.

The color scheme that you choose for your page should be based on your end goals and will vary according to the product for which you are designing the landing page for. If it is for a financial institution then you should opt for black and/or green as both of them offer simulations of wealth and power.

If you are designing it for a professional service then blue can be a smart choice as it seen as a professional color and it creates a sense of security and trust. Yellow is great for pages that targets youth and purple is a good choice for beauty or glamour product pages.

1.Adobe Font Finder:

Adobe’s Font Finder is an amazing tool that help you discover your desirable font. It is simple to use just enter some text as a sample to display and discover the font you are looking for. Adobe’s Font Finder has many font option that help you in your search.

2.Bowfin PrintWorks Font Spotter:

Bowfin Printwork font spotter online tool help you find your font, by answering questions on the shape of the glyphs of the font. It also Includes guides for Script Fonts, Bauhaus-style Fonts, Sans Serif, Serif Fonts and Lined Fonts. The webmaster is always avalible to answer any font ID questions for free via email.

3.Flickr Typeface Identification:

Flickr has a group dedicated to identifying fonts. Just take a picture of your font and some font guru will be along to suggest its name. Its quick and easy give it a try.

4.FontShop:

Fontshop is a dedicated place for fonts. You can shop almost any kind of font here. Fontshop has aslo an online tool that help you identify fonts which works like bowfint system by asking questions about the shape of the characters.

5.IdentiFont:

Identifont is another online font identification tool that claims to find your font by asking a number of questions about the font. If you don,t have a picture of the font then you can totally rely on this service.

6.Linotype Font Identifier:

They ask you a series of questions relating to the characterics of the font you’re trying to identify and suggest the most likely font names.

7.Typophile Type ID Board:

This is one the greatest and largest community of font experts. You get your answers simply by posting an image of the font you’re looking for in their forum.

8.What Font Is:

What Font is can identify the font you are looking for. Its simple just submit the image of the font you are looking for and it will show all the information on the font. Please note the text must be writen in one line and saved in jpeg, gif or png format.

9.What The Font:

What The Font is my favorite tool for identifying fonts. Simply upload an image of the font to their servers or add a link to the image on the WTF interface, and the system will show you multiple font results. If unable to find it, it will prompt you to go to their Font Forum where you can post the image and wait for feedback from font experts.