Beginner Question about Developing Mobile Websites

Mobile
1

I have a basic question about developing mobile sites for clients.

From what I understand, you can create a single site that’s optimized for both desktop and mobile devices, using either a responsive design or some CSS tricks.

Or you can use a service like www.mobisitegalore.com or a WordPress plugin to convert the site on-the-fly for mobile devices.

Or you can create an entirely different mobile site.

Assuming I’ve got that right (please correct me, if not), what are the pros and cons of each and which do you prefer?

Thanks!

2

It’s possible to create a responsive site that views well on a desktop, iPad, and smartphones. By using @media queries, you target screen sizes and adjust the content to fit. For instance, in one case I set it so the site shows two columns in the desktop and iPad, but the right column goes under the left column on a smartphone like the iPhone.

Using a Wordpress plugin is good if you are using a Wordpress site. Some free conversion sites, though, will limit what kind of pages, number of pages, or kind of content you can have in the conversion.

There’s no need to create a mobile-only site unless your visitors are 100% mobile.

You can check out my links for a fluid site in the Mobile Makeover Guidelines section of this page:
http://iphonedevlog.wordpress.com/phonegapcordova-crib-sheet/

3

Thanks for the explanation and the link. When you use @media queries, does that automatically redirect the user to the m. subdomain, if you’ve created one?

4

To redirect a user to a particular site based on their device, you would use a detection script. For instance, this script redirects to the appropriate iPhone or iPad landing page in an universal app made from HTML/CSS. I suppose you could replace the URLs for mobile-formatted URLs in your web site.

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>

<script type=“text/javascript”>
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
window.location = “iPhone/index.html”;
}

if(navigator.userAgent.match(/iPad/i)) {
window.location = “iPad/index.html”;
}
</script>

</head>
<body>

</body>
</html>

5

One nice way is to use www.jquerymobile.com framework which does your job 100%, You dont need to worry about device type, resolution and orientation.

6

If you size your graphics at 2000px for maximum impact for the iPad, then that’ll be a problem for smartphones and cell phones - too much data. Separate files is better (if high-quality graphics warrant it). However, you can use the same code if the content is mostly text.

7

but will the smaller images not have an effect on the look and design of the website…

8

Can you clarify your question? The size of images will make a difference. Small images should not be scaled up too large or they’ll be fuzzy.

9

Hi John,

The idea behind media queries is that you can layout one site that adapts to different devices, feeds different CSS (to not bloat css downloads on phones for example), present already scaled images and video to meet the size of a screen rather than scaling these assets as they typically will look bad when doing so, and move ADs to more prominent positions as device sizes change (advertisers get upset when a dynamic resizing pushes their right column AD to the bottom of a mobile screen. This does not provide ways to route you to m.domain.com, but the point is that you are not feeding a user a different site your are reformatting the layout of one site. In cases where you see m.domain.com they are most likely using browser/device detection like @StevenHu mentioned. Generally detection is a bad idea, as it needs to be updated frequently and there are quite a few things that can trip it up.

Hope this helps,
Steve