Mobify your website

quick breakdown how to mobify your website for smart phones and other small screen devices

redirection to m. subdomain
I suggest to redirect to a mobile subdomain instead of just resizing the layout via media queries to optimize content further for mobile. Sebastiano Armeli-Battana’s excellent redirection javascript

target screen size
up to 800px works well for smartphones, including tablets in vertical position
link rel="stylesheet"
media="all" href="/static/css/base.min.css"

link rel="stylesheet"
media="only screen and (max-width: 800px)" href="/static/css/mobile.min.css"

adjust viewport settings via mobile meta tags
I prefer to set the scaling to 1 and user scalability to “no”, the whole point of a simplified mobile version in my opinion
meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"

Full-screen browsing (iOS)
meta name="apple-mobile-web-app-capable" content="yes"
meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"

minimize http requests to save bandwith

optimize images for smaller screen sizes
Sencha IO is a great tool to automate image resizing (previously tiny src)
timthumb works great for php driven pages including wordpress

“Mobifying” Your HTML5 Site on HTML5Rocks