building a mobile website

Phreaddee

Super Moderator
Staff member
Media queries is the only "tool" you need to worry about for mobile enabled sites.
 
If you want to build mobile website, here some application that maybe to try : mobdis.com, wapple.net, and gomobi.info. You can try one by one and choose the best according you.
 

Adam Jackson

New Member
If you want to build mobile website, here some application that maybe to try : mobdis.com, wapple.net, and gomobi.info. You can try one by one and choose the best according you.

I checked out wapple.net and it looks like a good option, but I'm not very tech-savvy and might want a more user-friendly tool. What about bMobilized.com, mobify.com, or exai.com?
 

Anjali Banerjee

New Member
bMobilized looks pretty easy to use.. you just enter your URL and you have a mobile website.

I've also heard of the website builder, Exai.com, that she mentioned but didn't know they can convert your website into a mobile one. I was thinking of building my website with them anyway, so that's a definite plus.

One that she didn't mention is MobiSiteGalore, a mobile website builder that guides you through the process with a quick start wizard and tutorial videos.
 

Roddy

New Member
The problem with these online site builders is that they are much like Wordpress in that they generate huge amounts of code for even a simple page.

Smart phone users are often depending on shaky cell phone connections and a lot of them are up against data limits.

Creating a mobile version of a site is fairly straightforward using jQuery Mobile. The help file is comprehensive. You can convert it for use on desktops by centering the layout and setting a max-width.

Customizing themes is done using the online theme roller.

If you want to create a "one size fits all" website, Initializr is a good starting point for getting into responsive design. I use an adaption of this for sidebar and column layouts using blocks to get a better layout on tablets.
 

Phreaddee

Super Moderator
Staff member
its all about the media queries. seriously.
one html, one css, media queries.

its not that hard, and if you do it yourself you know whats going on rather than these blanket coverage and extreme generic layouts that happen when you automate the process.

initializr is a good staring point I'd agree. Ennesus it is boilerplate.
 

chrishirst

Well-Known Member
Staff member
I really don't get the fuss about "mobile devices" all of a sudden. For about eight years I've been creating layouts that work on EVERY "mobile device" I have ever tested with and the list is quite extensive thanks to family and friends being co-opted/coerced into "beta testing".
The approach is quite simple, use relative dimensions for everything. If you want to allow "zooming" to work flawlessly, use em for widths and ex for heights. It is not difficult to visualise the distances when you know that 1em is as wide as an uppercase 'M' and 1ex is as high as an uppercase 'X' at the current font size and family.
 

Roddy

New Member
The whole point in designing for mobile devices is that the end user doesn't have to zoom.
Most mobile designs include this...

<meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

Here's a couple of interesting quotes from a recent survey ...

"15% of mobile users scream at their phones while trying to buy from non mobile friendly sites."

"61% of users won't return to a website if they've had trouble viewing on a phone."
 

chrishirst

Well-Known Member
Staff member
Certainly but if you had poor eyesight and a 30" monitor, it would be doubtful that it was set to a resolution that needed 'zooming', whereas a 5" or a 7" screen might.

I have an eyesight problem and use two 19" monitors (1280x1024 and 1440x900) on my desktop and don't need to zoom anything, but on my Dell streak 800x480 5" screen and 7" Android tablet (1024x768) I do occasionally need to.


It is NOT the monitor size or the screen resolution currently set that determines whether a user needs to 'zoom' or not. It is the physical pixel size on the device in use. So zooming means that more screen pixels are used to display something that is set at 1 [CSS] pixel.
 

Phreaddee

Super Moderator
Staff member
this bit at least,
<meta name="viewport" content="width=device-width" />
And does that automagically compensate for each individual user's eyesight?
To some degree yes...
theoretically, and correct me if I am wrong as I'm still trying to get my head around virtual and physical pixels and retina displays and the like and how that works with the design.
but what this guy says
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
and what this says
http://www.w3.org/TR/css3-values/#absolute-lengths
pixels; 1px is equal to 1/96th of 1in
(or 96DPI)...
iphone4 326pdi
http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport
???
or something
 
Last edited:

pisarek

New Member
I n my opinion you could try 'responsive design' - media queries. This is the best way to achieve nice result.
 
Top