Mobile Friendly Website ?!

[baselalaya]

Hello,
I'm new in this forum I've seen that here i can get help from designers and developer.
I need your help guys i want to know how i can make a mobile version website because I'm interested to make websites work on Iphone, Ipad, etc ..
without problems.
So any one can help me ?!
Thanks
Regards,

 

[Nate_Weller]

You can use different CSS stylesheets depending on the device width, using the following...

<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 1px) and (max-device-width: 500px)" href="mobile.css">

So if the page is being displayed on a device, with a browser width between 1-500px, it will use that stylesheet.

If you don't want your main stylesheet to work on the mobile pages, use a minimum of 501 and no maximum.

If you want something to be displayed only on desktops, give it a class such as 'mobilehide' and then use the following style in your mobile CSS...

.mobilehide {
display: none;
}

and the same goes for content only to be displayed on mobile devices, except reversed.

When making a mobile site, make sure to make easy to read text, and easy to click links for touchscreen phones.

 

[Phreaddee]

Media Queries...

http://www.w3.org/TR/css3-mediaqueries/

keep your design quite flexible, and instead of relying on device sizes to define your site layout, use break points, ie start fullscreen and drag the browser in, where the design gets compromised, add a breakpoint, keep dragging it smaller and smaller, and at each point where the design "breaks" add a new media query.

alternatively, and more geared towards a mobile first approach, you design the smallest possible layout (usually 320px) and then at each point UP that the design gets compromised, add a media query.