What are the specs for a mobile website?

Question

I am trying to convert my current website to a mobile version. I will be creating different views (I am using codeigniter) but want to make sure the CSS will look perfect on all phones. What are the universal/standard specs for a mobile website?

Also, what language is recommended? I was thinking just changing the CSS to a specific width and redesigning according to that width.

Answer 1

There are many takes on designing sites for mobile devices. The most straightforward, is to build an entirely separate user interface, just for the mobile site.

The next method would be to use CSS media-queries. This allows you to re-use your current UI and styling, but you can tailor it's content to specific widths and devices.

Lastly, is fully responsive design. It's rather similar to media queries, except that it uses percentages, instead of absolute pixels. It's the most seamless way, that a standard width-webpage can scale to fit the screen of a smaller mobile device. It can even scale up easily!

Here's a good place to start learning about responsive web design, and how it applies to mobile devices - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Try scaling the size of your browser while on that site. Notice how the layout changes. That's CSS media queries at work.

Answer 2

A quick google search yields the following:

W3C's thoughts: http://www.w3.org/standards/webdesign/mobilweb.html

Smashing Magazine's thoughts (I have enjoyed some of their comparison articles before): http://www.smashingmagazine.com/guidelines-for-mobile-web-development/

You will want your page to be easy on the fingers, keep the text displayed to a minimum at first (i.e. summary + expanding things), and overall run fast. You will probably want to have multiple levels of fallback on things like CSS so that people running a CSS 1/2 browser can still use the website, even though CSS3 browsers may have a better experience.

Your site could also make use of media queries to choose a stylesheet based on the size of the user's screen (there are several standard sizes, especially if you consider the popular devices).

Javascript and other things like that should also work well for fallbacks. Using things like HTML5 canvases and WebSockets and such are good since they can be assisted directly by the mobile device hardware, but your script should handle those things not being available as well.

And, as always, an easy to navigate page goes a long ways just as it does with normal development. If the user can tell just by looking at the page how to use it intuitively (remember, intuitive for you isn't always the same as someone else), then I would think you are on the right track.

Answer 3

As there is no fixed limit of screen width/height of mobile devices. You must consider using percentage value for sizes. That way your mobile site will be more compatible.

For info on effective mobile websites, ie, what you should include and what not. Take a look here http://www.qsrweb.com/article/202567/3-tips-for-creating-an-effective-mobile-website

For width related queries, see this,

Mobile version of my website, what design width is optimal?