CSS Blog » HowTo

How to optimize a website for Mobile Safari

admin — Fri, 15 Aug 2008 16:38:20 +0000

I though that the iPhone and iPod touch would be not able to play a big role in the development of websites. When you see the developing of mobile market, you will understand, that I was wrong. It is very iportant to optimize websites for mobile browsers, such es Mobile Safari. Although the percentage is still under 1%, but it looks like that this number will be greater with earch day. The new mobile player and mobile phone from Apple are very popular worldwide. The sales numbers growing steadily. Soon, Russia’s will get iPhone officially presented. According to my knowledge is the percentage of cell phone owners, who uses mobile services, in Russia, very high. If China would get iPhone officially than the number of iPhone users will much much bigger. For Internet sites, which designed for international audiences, it is a large market. Exactly that’s why I would like to tell about some interesting and useful tips here:

Viewport:
Mobile Safari is able to show normal websites on the iPhone and iPod Toch. However, for some designs it would be useful, to hide a part of the design. For example, if a website has a design where the real site is oriented to the left and at the right side it has free space, it woulb be useful to hide the free space, so the user could see only an important part of the website.
To achieve this you should use meta-Teg viewport:

The number 480 stands for the number of pixels and the word „width“ for width, where Mobile Safari should center the view.

Favicon:
I think, I don’t need to explain the term favicon, because each web page developer and many users know what it is.
To use favicon in Mobile Safari, you should add this meta tag:

Internal applications:

Most importantly, if you would like to give users a way to dial a number, by clicking it in the browser of the phone, you should use the following tag:
911

To link a location in Google Maps you should write something like this:
Mainz

YouTube video link:
Although iPhone uses a separate program for playing videos from YouTube, you can link those videos with a normal link, as you do it on the PC.

Share and Enjoy:

Google doctype: What do you want to know today?

admin — Sun, 25 May 2008 21:14:07 +0000

Doctype Google is the new ambitious project by Google. It is an attempt to create a free technical encyclopedia for CSS, HTML and DOM. It consists of not only from the articles, it has also the code of the encyclopedia freely accessible. As in the Google video presentation the saying goes, “Google doctype is an encyclopaedia, by the developers and for the developers”.
Although there are a few articles and HowTo’s there, I am sure that Google can find many motivated supporters which will constantly fill the encyclopedia with new knowledge. Anyone who has a google account can participate.
Whether Google Doctype could be a competitor to selfhtml.org? At the moment it is still difficult to say, but the themes are very close to each other. It is important that selfhtml is only in the German language very detailed. The English version and also those in other languages, are less complete.
Therefore, I can say that Google Doctype could not be described as comptetitor for selfhtml.org, it is a device to close the knowledge gap. Previously you had to browse through various sources to find an answer for your question, today, thanks to projects such as Google and Wikipedia, the knowledge in consolidated in a few sources. This saves time and time is money.

Share and Enjoy:

css stuff

admin — Tue, 17 Jul 2007 23:11:05 +0000

Today I have found an interesting web resource with css tutorials. You can reach it at

http://css.maxdesign.com.au/index.htm

Share and Enjoy:

An interesting method to make graphic gradients

admin — Fri, 15 Jun 2007 18:02:36 +0000

Matthew O’Neil wrote an article about a possibility to make gradients with different
colours and only one graphic file.
This method doesn’t work in IE6, but because IE7 will be released by Microsoft on the next time as security update for all windows users, I hope that IE6 will lose a priority.

http://alistapart.com/articles/supereasyblendys

Share and Enjoy:

Round corners without graphic

admin — Wed, 23 May 2007 03:22:33 +0000

•

There are many methods for creating of round corners, but all of them are not perfect. This solution is not perfect too, because if you make the font lager, it will destroy the box, but it has interesting aspects, this solution do not need any graphic or proprietary css and XHTML attributes, so it works in all browser!.

Share and Enjoy:

HowTo: Center of the elements

admin — Mon, 09 Apr 2007 13:02:01 +0000

Center of an element is very simply, but many beginners have problems with it. I was asked about it many times and I would like to present you a little HowTo:

left:50%; width:100px; margin-left:-50px;” >

Attention: the value of margin-top should be a 50% of height-value and value of margin-left = 50% of with.

Share and Enjoy: