Trendy/ Professional Contact Form Designs

Posted By admin   |   Posted On June 29th, 2012

What is the purpose to build a good website and showcase the works? Obviously to get clients. The “Contact Us” page helps to establish a relation between you and your visitors.

A “Contact Us” page is an effective way to show your physical presence and to prove you are real. Thus it eliminates the customer’s fear in buying from you.

Here we are showcasing some collections of trendy and professional Contact page designs. Hope it would be helpful to get some design inspiration.

10 Professional Contact Page Designs

1Ngenworks

contact1

Heyindy

contact2

Electricpulp

contact3

Madewithlove

contact4

Neutroncreations

contact5

Oliverspencer

contact6

Campbellharrison

contact7

Levelbrand

contact8

Ineo

contact9

Wearefo

contact10

10 Trendy Contact Page Designs

Indofolio

contact1

Infinvision

contact2

Beakable

contact3

Gpacheco

contact4

Ilovecolors

contact5

Bio-bak

contact6

Weloveicons

contact7

Enviramedia

contact8

Svn2ftp

contact9

Syropia

contact10

  • Share/Bookmark

jsdo.it – Write and Share JS/ HTML5/ CSS

Posted By admin   |   Posted On June 28th, 2012

jsdoit-homepage

Jsdo.it is a free online editing tool which helps web developers to fork and play around with HTML5/JS/CSS. Developers are allowed to showcase their works to the community and get feedback/ guidance from others. They can collaborate on a project as a group and learn from each other.

Highlights about this site:

1. Discussion:

jsdoit-discussions

If you have any technical queries starting from the beginners to advance level, you can get the answers quickly in discussion board.

2. Event and Topics:

jsdoit-eventtopics

Jsdo.it often conducts events and offer weekly topics to make the site more interactive and lively.

3. JS/ HTML/ CSS Editor:

jsdoit-editor

In this section, you can edit HTML/CSS/ JS and view the real time output of how your code looks like as you type.

4. Hot Code :

This site exhibits the hot codes from successful completed projects, with concern of the contributor you are allowed to use the code.

  • Share/Bookmark

Guidelines for effective homepage

Posted By admin   |   Posted On June 27th, 2012

Homepage is the blueprint for any website and it makes the first impression to the world. It acts like a window to show visitors what there is to offer. Following are some of the guidelines for an effective homepage,

1. Don’t be too wordy :

You have only 3 seconds to sell your products/ services/ ideas. So to mark an impression within 3 seconds pictorial representation is the perfect choice.

apple

magento

2. Keep it simple:

Don’t jam-pack the homepage with too much information as the users will lose their interest. Keep it very simple.

html5

3. Establish Your Trust:

In order to establish your trust and credibility especially for start-ups, homepage should highlight the following factors,

  • Client’s Testimonials
  • Case Studies
  • Awards
  • Genuine contact details

4. Customer engagement:

In order to have a constant touch with the customers, having the options like newsletter, social networking links etc., are inevitable.

joomlart

Apart from above factors SEO friendly home page, a good design and loading time are also essentials for an effective home page

  • Share/Bookmark

CSS Desk

Posted By admin   |   Posted On June 26th, 2012

cssdesk

CSS Desk is an online free editing tool that combines the HTML and CSS concurrently. It’s very helpful for the beginners who are passionate towards web designing. This nifty tool provides you a real time output of how your code looks like as you type.

You can edit the CSS and HTML on the left panel and view the output on right. CSS Desk provides options to choose a default background color, reset your document and download your work as an HTML file. It also allows you to share the code with others.

Try this free handy tool !!

  • Share/Bookmark

Type Tester Tool

Posted By admin   |   Posted On June 25th, 2012

The web designers who are using Photoshop will need to know about the font rendering in web browsers as the font style, size, variant etc., will vary from the output of Photoshop.

One fine solution for the above mentioned issue is “Type Tester Tool”.

About Type Tester Tool:

typetester

The Type Tester is an online free tool that allows us to preview the output of fonts in web browsers at various sizes, weights and styles.

Additionally, it helps to make best decision by comparing three different font families simultaneously.

Type Tester has different set of font previews like Regular, Bold, Italic, Bold Italic, Uppercase Regular, Uppercase Bold, Uppercase Italic, Uppercase Italic Bold, Small Caps Regular, Small Caps Bold, Small Caps Italic and Small Caps Italic Bold. It also allows us to insert color for fonts and background.

typetester1

  • Share/Bookmark

Pixlr Editor / Express

Posted By admin   |   Posted On June 22nd, 2012

Pixlr Editor:

pixlr-editor

For image editing most often we use Adobe Photoshop but it’s very difficult to carry the software where ever we go. So what’s the alternative solution especially when we are using another computer? Answer is Pixlr online editor.

Pixlr is a cloud based image editor tool which basically has an appearance like Adobe Photoshop, Paint Shop etc. Pixlr allows us to upload images and edit them in browser.

Highlights of PIxlr Editor:

  • It’s free and no need to register
  • User friendly interface
  • Have many ranges of filters, effects and custom brushes

Pixlr Express:

pixlr-express

Pixlr Express is mainly focused for digital photo editing with almost 250 cool effects like borders, stickers, overlay etc. It’s very simple tool with many interesting features, anyone can master within a couple of minutes.

pixlr-express-effects

  • Share/Bookmark

kuler color palette

Posted By admin   |   Posted On June 21st, 2012

Kuler, the coolest way to create and share color themes. Kuler is a product from Adobe, which is mainly focused to attract design crowd.

The site provides capability to create color palettes and search through color palettes created by others. To put it very simple, it is an users’ submitted database of color themes.

Home page:

kuler-homepage

To use Kuler we need web browser with Flash player 9 or above as it’s a Flash based site.

You can explore the themes created by others and can filter by Newest, Most Popular, Highest Rated and Random options. You can even search by tags, titles, creators.

One of the unique features of Kuler is Social Networking, wherein color themes are shared to the public to get their feedback and add comments.

Theme creation:

There are two options to create color themes,

1.Create theme from a Color

kuler-create-colorjpg

By using color wheel, we can easily adjust the color. Color values are generated using HSB, RGB, CMYK, LAB, or HEX color models.

2.Create theme from an Image

kuler-create-image

This is a special feature in Kuler, where color themes are generated from an image. Images can be uploaded via desktop or Flickr. Kuler supports TIFF, JPEG, GIF, PNG, and BMP image formats.

Using the Kuler Extension in Photoshop:

How to open the Kuler Extension:

Go to Window -> Extensions -> Kuler

kuler-photoshop

After selecting the Kuler, a dialogue box will appear with three tabs About, Browse, Create.

kuler-photoshop-boxkuler-photoshop-create

About: This tab explains about the Kuler

Browse: This tab allows you to view the list of uploaded and available color themes. It allows to browse by Highest Rated, Most Popular, Newest, Random, Saved and Custom.

Create: This tab allows you to create your own color themes.

  • Share/Bookmark

Responsive Web Design

Posted By admin   |   Posted On June 20th, 2012

responsive

How do you design a website which will fit to any type of devices and screen sizes? The solution is RESPONSIVE DESIGN.

Responsive design is a kind of web design technique in which content responds according to the devices that is being used to view it.

Couples of years before, designers have coded a different site for desktop and mobile but with this new technique all can be achieved with a single site.

Benefits of responsive design,

  • Viewable on all smartphones, tablets, websites, TV etc
  • Improves the website speed
  • Google and Bing have highly recommended it
  • Less maintenance and upgrading is very easy
  • Easy navigation
  • Highly recommended for SEO
  • Share/Bookmark

Adding a Twitter feed in Magento

Posted By admin   |   Posted On January 19th, 2012

As most of the Magento users would be aware of, there is no default option for twitter feed in Magento. If you wish to have twitter feed in your site, you will need to create it manually.  We have discussed in this Blog the simple steps of adding a twitter feed in magento.

Step 1:

Go to the following site and include your Twitter Username: http://twitter.com/about/resources/widgets/widget_profile. Once done, click finish and grab the code. The script code will generate a copy of it.

Step 2:

The next step will be creating a static block for your twitter feed.

In magento admin panel:

Go-> CMS->Static block->add new block

Name : twitter

Id : twitter

Status : enabled

Step 3:

If you wish to show the twitter feed in homepage, you will need to copy and paste the code given below in CMS->Page->Homepage->content

Code:

Code:

  1. {{block type="cms/block" block_id="twitter"}}

In a similar fashion, you will need to call a static block in sidebar as well.

For left sidebar: app/design/frontend/default/yourtheme/layout/catalog.xml

  1. <reference name=”left”>
  2.  
  3. <block type="cms/block"> <actionmethod="setBlockId"><block_id>twitter</block_id></action></block>
  4.  
  5. </reference>

Output:

magentotwitter

Stay tuned to our Cogzidel templates Blog for more sparkling news and updates!!

  • Share/Bookmark

New PHPMotion 3.5 Template: Love Videos

Posted By admin   |   Posted On January 19th, 2012

Cogzideltemplates.com known for offering bulk of templates flooded with rocking designs and bright colors has added a new theme titled Love Videos in PHPmotion 3.5 category. This crisp template has been designed to look clean and high-tech which is meant to attract the customers on their first visit to the site. This template will turn out to be an excellent choice for building social network sites where people can meet and share the videos, images and much more.

love_birds(1)

As this template is custom friendly, you can customize it as per your requirement and we can guarantee that your members will totally love this one! You can submit your suggestions on this fresh template to us.
To purchase this Php motion template, please follow this link, http://www.cogzideltemplates.com/templates/view/469

  • Share/Bookmark