CSS Guide for Mobile Devices

| August 17, 2012

Nokia mobile phone phoneIt is projected that within the next 5 to 10 years, there will be more users accessing the Web and connected to the Internet via mobile devices rather than desktop computers. Note that this is already happening in some countries. Lots of businesses and developers are now mobilizing the desktop web sites they own, just to make sure they do not loose visitors due to awkwardly rendering web pages on mobile devices.

One good resource to get starting creating a mobile CSS file for your website is the Nokia Mobile Web Templates. There are lots of frameworks that are also meant to make creating a mobile website as painless as possible. Here is a good list of 9 Mobile Frameworks to start with.

For those who want to keep it simple, when creating a mobile friendly web page, add these lines between the <head> and </head> of your web pages:

<link media=“Screen” href=“styles.css” type=“text/css” rel=“stylesheet” />

<link media=“handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)” href=“mobile.css” type=“text/css” rel=“stylesheet” />

and

<!–[if IEMobile]>
<link rel=”stylesheet” type=”text/css” href=”mobile.css” media=”screen” />
<![endif]–>

The simple lines of codes above should help you get started making your website mobile friendly. If you need detailed explanations on the above, following this link: http://www.seabreezecomputers.com/tips/mobile-css.htm#viewport

Tags: , , ,

Category: Technology, Web & Programming

About the Author ()

Lionnel Yamentou Ndzogoue is a young African dreamer, with the vision of creating 10,000 or more jobs in Africa by 2035 in contribution to wealth creation on the continent. This blog is a platform for expressing his thoughts on the world, technology, personal development and other subjects as they come to mind. Some content is republished from other online sources.

Comments are closed.

%d bloggers like this: