Mobile Web Creating Optimization

Technique1:
<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />

Technique2:
"stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

Technique3:
<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>

Technique4:
img.as-text { content: attr(alt); }

Technique5: Clickable Mobile Phone
<a href="tel:15032084566" class="phone-link">(503) 208-4566a>

Technique6: Special input type
<input type="tel" />
<input type="email" />

Technique7:
@import url("portrait.css") all and (orientation:portrait);
@import url("landscape.css") all and (orientation:landscape);

Technique8: Font


@font-face

{   

font-family: 'Comfortaa Regular';   

src: url('Comfortaa.eot');  

src: local('Comfortaa Regular'),

local('Comfortaa'), url('Comfortaa.ttf') format('truetype'), url('Comfortaa.svg#font') format('svg');

}



SVG file: iPhone’s Mobile Safari supporting Chrome, Opera and iPhone

.otf or .ttf for Firefox and Safari

.eot for IE