Web Design and Development

Sunday, 19 May 2013

How to avoid iPhone from linking Telephone numbers

Hi Guys,

Today, I'm here with a solution for yet another Rendering problem on iPhone due to the default Styles being applied to particular Elements of your Web App.

Often developers do not want iPhone applying many of the default Styles which makes them look different from the Developers favorite Design.

In this case, iPhone applies default Underlining and default Blue coloring on the Telephone Number. In some cases, if Skype is installed on iPhone - Phone Numbers will also be applied with default Styles of Skype which makes your Telephone Number a Tap-able button along with a Country Flag. Which in turn may break the content flow many time out of all the cases recorded.

To over come this - I have a simple and effective way. I know that most of you may be aware of this. But, still I want to make you believe this is the way to do it.

What you have to do?

You need to command your Browser installed on iPhone - Not to detect Telephone Number. Thus indicating it to allow Telephone Number to be treated as Plain Text. So that it can retain its Original Styles applied as per the Developer Design.

What should be added to Eliminate this issue with iPhone?

You just need to add a <Meta> tag in your HTML page.

Which is that <meta> tag?

Where exactly should the <meta> tag be added?

You need to do to the starting of the HTML page where you will find <title> tag residing. DO not worry if already there is another <meta> tag, just paste it below.

Example:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

What the above <meta> tag do?

When ever iPhone encounters a Telephone Number - It ignores it and treats as plain text and in-turn retaining the Original Styles applied by the Developer.

Please let me know how useful was this to you. Please leave your Words/Questions as comments - I'll try to get back to you.

3 Steps to eliminate default underlining on iphone

Hi Guys,

Today, you will be learning how to Eliminate Default Styling that the iPhone applies to your Web Applications, HTML Email Newsletters etc.

By default - iPhone tends to Underline and Re-Color random Text/Copy. To be yet specific - iPhone considers Address, Date, Tell-Phone Numbers, Web Address/URLs as important Phrases and applies the default Styles that is created prior.

But, do not worry Guys, I got a trick to eliminate them out of your way!!

Follow 3 steps and you're done.

Since, iPhone is a New Platform and hence this issue is a new one for many of us. However, we can eliminate them with the help of Pure CSS. No JavaScript OR jQuery needed. Which is a plus point for Non-jQuery Lovers.

Step1: Find out that Phrase that was Underlined by the default style and wrap it around with a <span> tag as shown in the below code snippet.

Step2: Create a class with a name of your choice which best suits your requirement.

Step3: Apply the following Styles on to that class as shown below:

And you should be done with!!

I know , you guys are in a bit of confusion as to How should this be applied? Where exactly and how this works?

No worries - I'll take you through an example where you'll get that clear cut of what? Where? How's?

For example: You have a Paragraph of content in the Footer section of your Website. Also that Paragraph contain Address of a famous Market/Company.

Now, iPhone will definitely come across the Address and thinks that the Address in too important in the Paragraph. Thinking that - iPhone will apply its default Styles and makes it look as a regular Link.

What you should do?

Follow Step1: Find out that particular Address in the Footer Section and wrap it around with a <span> tag as shown below.

<span>Address</span>

Follow step2: Create a 'class' by name 'applelinks_footer-address' within your External Style Sheet OR if it is Internal/Embedded Styles - then do it as follows and Apply the following styles to the newly created class.

Finally follow the step3: What you should be doing is - Call the above class name to the <span> tag which surrounds the address as follows:

<span class="applelinks_footer-address">Address</span>

You're done!
Now verify you're website on iPhone - you'll be amazed to see that the default Styles are overwritten by you're newly created class.

Likewise - any Copy/Text with default underlining can be made to look as you wanted by using this simple CSS technique.

Hope you got to know something. Please let me know how useful was this to you. Please leave your Words/Questions as comments - I'll try to get back to you.

Monday, 13 May 2013

Bring my Website to the Center of your Browser

Hi Guys,

Today, I'm gonna teach you the very first and important step that you think of taking while you create your very new Websites. But, often you fall back when you encounter challenges.

This tutorial takes you successfully through one of those challenges. From now on - you need not fall back on this challenge. Because, this trick will be taken out of your existing knowledge. Nothing is there to be called a New Stuff.

So guys,I'll teach you[Newbies/Beginners] - How to bring your website to the Center of your Browser, any sort of Monitor irrespective of it width. As and when the monitors width changes, your Website needs to withstand the change. That is what I'm gonna teach you here.

What will you be learning here?

To bring your Website to the center of any Screen/Monitor/Browser.

What will you use to accomplish this task?

Pure CSS2 and HTML4

Here is a preview of what you'll achieve at the end of this tutorial!

Web design and development - Keep your website centered source code

And, here you go:

Step1: First off - Create the Markup needed for this tutorial. We'll keep it very simple and create 2 <div>'s. 1 to act as wrapper for the whole Website and the other as another wrapper to keep all the contents of your Website intact within a specified width.

Here is that simple Markup:

<body>
<div id="Wrapper">
   <div id="Container">
      Your inner Inner Layouts like Header, Sidebar and Footer will start from here...
   </div>
</div>
</body>

What we did?

We created the Outermost <div> Wrapper for your Website, which will and should be able to span through the entire space available on you Monitor screen. It will be accomplished using a Super Simple CSS, which I'll be taking you through in the next step which will follow up shortly.
We created another <div> which comes after the Wrapper <div> and named as Container. This div keeps intact all your inner Layout structures like Header, Sidebar, content area and footer. This <div> will be fixed when it comes to width and will not span through the Monitor screen like the Wrapper <div>.

Step2: As your second step, you need to apply necessary Styles to make your Markup functional.

Here is that simple Style:

<style type="text/css">
body {background: #000000}
#Wrapper {width:100%; height:auto;}
#Container {width: 960px; min-height: 300px; margin: 0 auto; background: #444444}
</style>

Isn't it Super Simple? that's it guys - you should be done by now.
Go-ahead and Run the HTML file in your favorite Browser and you'll see your browser filled with a pitch black color all over and you Website with a lighter variant making itself out of the blues and centered on your Browser. Mind you - it will be the same, even if you Run the HTML file in an even bigger Monitor.

What we did?

We applied Styles for the 1st <div> named Wrapper. We asked the <div> to occupy all the available space in the Monitor screen - so that it can span through the entire Monitor width. For that we had to apply width: 100%. It is % and not px.
We applied Styles to the inner <div> named Container. It stays fixed, we supplied a width of 960px. This time around its pixels and not Percentage.
The major role play is taken care by the Margin. As you can see Margin is set to 0 auto. It says the Container <div> to consider 960px of width out of the 100% space available on your Monitor screen. and also consider top and bottom margin as Zero Left and Right Margin as Auto. Again Auto plays the role here. Auto allows your website to automatically calculate the width of your monitor screen and adjust equally the either sides.

What if I do not use Margin: 0 auto? What will happen?

Here is what you get - when you do not wish to use Margin: 0 auto: You'll see that your Website is left aligned!

Web design and development - Without the use of Margin 0 auto - source code

Here is the Output you get when you use Margin: 0 auto:

Web design and development - Keep your website centered source code

You can even download the complete Source code for free

Hope you'll enjoy this stuff implemented on you own Websites!
Any doubt or Queries just write back to me or leave a comment - I'll surely get back to you with possibilities.

Sunday, 5 May 2013

Free HTML5 tutorials for Web Developers

Hi Guys,

As the Title says - This HTML5 tutorial is for Intermediates who have already learn't the basics of HTML5. If you have no knowledge of HTML5 basics - please, visit this tutorial here 'HTML5 for Beginners/Newbies',

As an Intermediate HTML5 learner - you should be knowing that HTML5 is just not the new Tags/Elements that the Standard has put-forth. It is much more than that. It will be explained below.

Agenda of this Tutorial

What exactly is HTML5 for Developers
Superb HTML5 Example to conclude with - [A Contact Form using HTML5 & CSS3]

Once you finish with this tutorial - you might end up with something like the below beauty!

Web design and development - HTML5 contact form

1) What exactly is HTML5 for Developers

A perfect HTML5 usage would consist of HTML+CSS+Javascript. Finally, what I'd like to tell you people is that - not only using HTML5 tags will get you a HTML5 Output.
A well written HTML5 application should be able to talk or Interact with the user then & there. The Code written should be lighter and shorter. It should be able to exchange Information on the go - then & there in many case.
For you're application - to talk/Interact with the users then & there - You're HTML5 Page should be using a Client Side Scripting Language which will try to get things done without contacting the servers located far away, which is the most important part in HTML5 applications. Making process Easy, Fast and Reliable. I won't be executing JavaScript here in this tutorial. Let me take that to the next tutorial.
HTML5 applications might use AJAX to pull content from else where without Refreshing the current page and in turn the user is happy in Retrieving Content and he is not Interrupted/Disturbed.
You will also need to use the JavaScript Library(jQuery) to make you're user feel the best experience they might get. You can make Mouse Events smoother than all of a sudden using jQuery Animations and Effects like Fade In, Fade Out, Toggle etc.
Appearance should be sleek and styled in such a way that an application should make the user feel that ' Oh! This is much different than the Normal HTML Page '.

2) Superb HTML5 Example to conclude with - [A Contact Form using HTML5 & CSS3]
Here , I'll take you through an example HTML5 Page - where all the Pointers discussed Prior/Above will be implemented. I'll be using:

HTML4 | HTML5 Tags/Elements

HTML5 Required attribute to prompt user to fill in the data

CSS2 | CSS3

The example I would be interested in taking you through will be - A HTML5 Contact Form where in all the above listed Pointers again will be executed and Explained.

Step1: I'll create a neat Markup using HTML4 & HTML5.

Markup used:

There are 2 <div> tags used to bring the form to the center of the Screen.

<div id="Bg_container">
<div id="Container"> </div>
</div>
Then comes the Form Elements. I have used the newly introduced HTML5 Standard Form Elements like:

<input type="email" id="email" placeholder="Your Email address here" required />

which is a self validating tag. Which will not allow you to submit if a valid format of Email Address is not typed into the provided space.

<input type="tel" id="tel" placeholder="Your Mobile Number here" required />

This is another HTML5 Standard Tag which is used to allow users to enter their Telephone Numbers which can be further custom validated to accommodate either Land line Number or Mobile Number as required.
You can notice that there are few bold items in the input types listed above.

Where, HTML5 Standard has introduced new input types which are self explainable types.
- type="email" -- Provides space for users to input a valid email address, if not a valid entry in entered it will highlight it as error then and there spontaneously.
- type="tel" -- Provides space to enter users Telephone numbers.
- Placeholder="" -- Provides space for the developer to enter prior any suggestion content that can make user feel easy to fill out the Form OR Guide the user through the completion of the Form.
- required -- Prompts, when user skips any required field and moves on. This HTML5 require attribute doesn't allow user to submit form without entering the required data.

<div id="Bg_container">
<div id="Container">
    <h2>HTML5 Contact Form</h2>
    <form action="#" method="post" target="_blank">
      <div class="Form-elements_group">
        <label for="name">Name</label>
        <input type="text" id="name" placeholder="Your Name here" required />
      </div>
      <div class="Form-elements_group">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Your Email address here" required />
      </div>
      <div class="Form-elements_group">
        <label for="tel">Mobile</label>
        <input type="tel" id="tel" placeholder="Your Mobile Number here" required />
      </div>
      <div class="Form-elements_group">
        <label for="message">Your Query</label>
        <textarea id="message" placeholder="Type your Query here" required></textarea>
      </div>
      <div class="Form-elements_group">
        <input type="submit" value="Submit Query" />
      </div>
    </form>
</div>
</div>

What if, the user doesn't want to fill the fields and wants to submit the Contact form?
Then, the user will see a nice and sleek prompt asking to 'Please fill out this field'. This is not a JavaScript validation. I'm not using any Script to validate though.

These are the major changes that hTML5 has brought with it. Self validating Form Elements - That which reduces Developers time as well as Page size.

Though the Prompt will be as shown in the below screenshots. There are two steps of Prompting users to enter the required data.

Before submitting - If the user enter non valid format.
For example in the Email field - If the user enters email_email.com instead of email@email.com. That moment itself the Input field will be highlighted with Red color, indicating that there is some mistake happened.
After committing mistake while filing the field - If the user tries to submit the Form - It won't process. It will prompt with a Tool tip asking the user to 'Please fill out this field'. Unless the user fills the correct data - Form doesn't process.

So, here are the Screenshots for the above 2 cases.

Case1: Before Submission

Web design and development - HTML5 Form Element - Self validation Before Submission

Case2: After submission

Web design and development - HTML5 Form Element - Self validation After Submission

Step2: I'll now need to create Styles using CSS2 & CSS3.

Major and useful Styles used:

Firstly, there are Border-radius used to obtain Curved Borders all the sides.
To help users to locate on which input typed they are on - I have used the CSS property : focus.
I have applied Darker Border and Box-shadow - just to highlight the input type where the user is currently on.
Overall - I have used text-shadow to enhance Content's look. Text's will look embossed while text-shadow applied.

html {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   line-height: 16px;
   color: #666666;
   margin: 0;
   padding: 0;
}
body {
   margin: 0;
   padding: 0;
}
#Bg_container {
   width: 100%;
   height: auto;
}
#Container {
   width: 420px;
   margin: 30px auto;
   padding: 20px;
   background: #cccccc;
   border: 1px solid #777777;
   border-radius: 8px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   -webkit-box-shadow: 0px 3px 4px rgba(50, 50, 50, 1);
   -moz-box-shadow: 0px 3px 4px rgba(50, 50, 50, 1);
   box-shadow: 0px 3px 4px rgba(50, 50, 50, 1);
}
form {
   display: inline-block;
}
h2 {
   font-size: 30px;
   color: #555555;
   text-align: center;
   margin: 0 0 20px 0;
   text-shadow: 0px 1px 0px #ffffff;
}
label {
   float: left;
   clear: left;
   margin: 11px 20px 0 0;
   width: 95px;
   text-align: right;
   font-size: 16px;
   color: #333333;
   text-shadow: 0px 1px 0px #ffffff;
}
input {
   width: 260px;
   height: 35px;
   padding: 4px 20px 4px 20px;
   margin: 0 0 20px 0;
   border-radius: 6px;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   color: #666666;
   border: 0;
   border: 1px solid #aaaaaa;
}
textarea {
   width: 280px;
   height: 120px;
   padding: 12px 0px 0px 20px;
   margin: 0 0 20px 0;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 0;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   color: #666666;
   border: 1px solid #aaaaaa;
}
input:focus {
   background: #fafafa;
   border: 1px solid #50504a;
   -moz-box-shadow: 0px 0px 3px 0px #50504a;
   -webkit-box-shadow: 0px 0px 3px 0px #50504a;
   box-shadow: 0px 0px 3px 0px #50504a;
}
textarea:focus {
   background: #fafafa;
   border: 1px solid #50504a;
   -moz-box-shadow: 0px 0px 3px 0px #50504a;
   -webkit-box-shadow: 0px 0px 3px 0px #50504a;
   box-shadow: 0px 0px 3px 0px #50504a;
}
input[type=submit] {
   width: 200px;
   height: 50px;
   font-size: 24px;
   color: #333333;
   float: right;
   padding: 5px 10px;
   margin: 0;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border: 1px solid #777777;
   background: #aaaaaa;
   text-shadow: 0px 1px 0px #ffffff;
}

So, guys - you're done!
You should now see a beautiful HTML5 Contact form as seen in the Screenshot below.

Web design and development - HTML5 contact form

Here is the full working HTML5 tutorials for free to download

Any doubt or Queries just write back to me or leave a comment.

Monday, 29 April 2013

Basic HTML5 tutorial for Beginners

Hi Guys,

Today, I'm gonna take you through the very basic and simple - Introduction to HTML5. This simple tutorial is for Newbies/Beginners, who are just starting off with HTML5.

This tutorial contains the following:

Definition/Description of HTML5
Difference between HTML4 and HTML5
What's new in HTML5
Working HTML5 example with few new HTML5 standard Tags/Elements

What is HTML5?

HTML5 is the latest standards for Hyper Text Markup Language. Previous standard that is still in practice is

HTML4/XHTML1.0.

Difference between HTML4 and HTML5

These two standards duffer mainly with their Doc-type definition.

HTML4 uses the

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>

Where:
HTML4 Doc-type says - If this particular Doc-type is defined in the HTML Page, then it is going to parse that particular Page as HTML4 page. While parsing, the Parser/processor will look out for HTML4 Elements/Tags.

If any other Elements related to other Standards/Version like HTML5 - Then, they will be judged as Warnings and Errors. Traditional Browsers like Internet Explorer will be the first one's to show them off as Errors and Warnings. Other than that, they differ using their own set of New Elements/Tags. and so on...

What's New in HTML5?

HTML5 has introduced many Elements/Tags to be used as HTML5 Elements. There are regular Markup Elements, Multimedia Elements and many more. Some of them are listed out for your ease.

Markup Tags/Elements like:

<header></header>
<nav></nav>
<article></article>
<summary></summary>
<footer></footer> etc...

Form Tags/Elements like:

Multimedia Tags/Elements like:

Other functionality like:

Local storage
Geo location etc

All the above will be explained in my next tutorial "HTML5 tutorial for intermediates".

Working HTML5 example with few new HTML5 standard Tags/Elements.

This example is a Simple Web Page which will contain some of the Markup Elements used.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Basic Example</title>
<style>
html {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   line-height: 16px;
   color: #555555;
}
</style>
</head>
<body>
<div class="container">

<header>
    <h1>Header region</h1>
</header>


<nav>
    <ul>
      <li><a href="#">Lorem ipsum</a></li>
      <li><a href="#">Lorem ipsum</a></li>
      <li><a href="#">Lorem ipsum</a></li>
      <li><a href="#">Lorem ipsum</a></li>
    </ul>
</nav>


<aside>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore .</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim .</p>
</aside>


<article>
    
    <section>
      <h2>Lorem ipsum dolor sit amet,</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ...</p>
    </section>
    
</article>


<footer>
<p>© Copyright | _Copyright Holder__</p>
</footer>

</div>
</body>
</html>

So guys, As I told you - I have used few HTML5 Elements in the above example. I have Commented on every usage of the HTML5 Elements, so that it would be just as easy as I deliver it out of my mouth!!

Any doubt or Queries just Write back to me or leave a Comment.

Pages

Sunday, 19 May 2013

How to avoid iPhone from linking Telephone numbers

What you have to do?

What should be added to Eliminate this issue with iPhone?

Which is that <meta> tag?

Where exactly should the <meta> tag be added?

What the above <meta> tag do?

3 Steps to eliminate default underlining on iphone

Follow 3 steps and you're done.

No worries - I'll take you through an example where you'll get that clear cut of what? Where? How's?

What you should do?

Monday, 13 May 2013

Bring my Website to the Center of your Browser

What will you be learning here?

What will you use to accomplish this task?

What we did?

What we did?

What if I do not use Margin: 0 auto? What will happen?

Sunday, 5 May 2013

Free HTML5 tutorials for Web Developers

Agenda of this Tutorial

Once you finish with this tutorial - you might end up with something like the below beauty!

1) What exactly is HTML5 for Developers

Major and useful Styles used:

Monday, 29 April 2013

Basic HTML5 tutorial for Beginners

What is HTML5?

Difference between HTML4 and HTML5

What's New in HTML5?

Markup Tags/Elements like:

Form Tags/Elements like:

Multimedia Tags/Elements like:

Other functionality like:

Working HTML5 example with few new HTML5 standard Tags/Elements.