Digital SafarisResponsive Web Design
12-Apr-2011 14:25 | Comments: 0 | Categories:
How to make a website work on a Mobile Device?
Some useful links:
- A List Apart - Responsive Web Design
- Less Framework is a CSS grid system for designing adaptive webÂsites
- An O'Reilly post on Using CSS Media Queries to Style Your iPhone and iPad HTML
- Rachel Andrew, in Smashing Magazine, on How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
- Jon Hicks -Â Finally, a fluid Hicksdesign is a post on The Hickensian
- Quirksmode has lots of good stuff about design for Mobiles
From Less Framework 4; the bare basics, excluding the column grid settings:
HML Header
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug:
http://filamentgroup.com/examples/iosScaleBug/ -->Â
Note these alternatives (not from Less)</>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
This for IE8
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Best put at the end of the <head>, after the CSS links.
CSS
/*Default Layout:
-------------------------------------------------------------------------------*/
/*Tablet Layout: 768px.
-----------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*Mobile Layout: 320px.
Inherits styles from: Default Layout.
---------------------------------------------*/
@media only screen and (max-width: 767px) {
}
/*Wide Mobile Layout: 480px.
Inherits styles from: Default Layout, Mobile Layout.Â
---------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
No Comments
Add a comment: