Mobile Web Template / Guidelines

Hi, I’m just about to start designing a mobile version of a site, and i was hoping that maybe someone could help me with the following few questions please:

01 - is a mobile site essentially just a normal website that is designed and coded to work well on mobile browsers, as in can you just design and code a normal HTML / CSS website that has a single column layout with big buttons
02 - is there a mobile web framework out there that a lot of leading mobile sites utilise
03 - is there a generic web standard default width size that the canvas (width of the site) should be… what width should we all design our <body> to be so that it fits all current mobile devices (iPhone and android) or should we just code everything to 100% width in a single column layout

Thanks in advance to anyone who can help with the above questions…

Howdy oo7ml,

Just to answer your questions:

01 - you could get away with just redirecting people to standard webpages with minimal content. However, (this covers point 2 as well) you should take a look at google’s page “Developing mobile sites” within their support section.
03 - you should really use a stylesheet that reacts positively to screen widths and not try and force them.

I hope that helps,

Lee

Heya oo7ml

With regards to designing for a mobile site, and particular to your question (03) - the number of mobile devices that’s out there at the moment is astounding. What is equally astounding is the vast number of screen sizes that are now around, not only because of mobile phones, but also a large variety of tablets and small form factor PCs (Netbooks for example). To this end, I would not recommend designing to a fixed width, but rather take an approach where content can reflow on the page depending on the size of the screen.

Generally when building sites like this, a front-end developer would use a framework of some sort that utilises CSS media queries to adapt the site for various sizes.

There are of course several popular sizes, many of these frameworks will have a breakpoint at those sizes, and fluidly resize between the breakpoints.

Some good examples include:

How your design is put together by a developer is a bit of an art form, it requires some extra thought to translate a design to a mobile site with a responsive layout. (Without the designer needing to design all the possible layouts of course.)

Just my 2c :slight_smile:

Excellent, thanks for your help…