Three Code Tips for Going Mobile

Posted December 12, 2011 - 6:59 pm. By Ryan Feyer. comments

You may have noticed, if you’ve visited FeyerMarketing.com from a mobile device recently, that we’re now mobile friendly (except our blog). In the world of mobile website optimization, there are two ways you can make your website mobile friendly:

1. Use a mobile stylesheet РThis is where you’d create styles that are only applicable for mobile devices. The mobile devices would read the same HTML code from your website, but it would style differently for the smaller screens. This would be done using some code like below:

<link rel="stylesheet" href="/css/style.css" type="text/css" media="handheld" />

2. Have a separate mobile website – This is where you’d have different HTML served to mobile devices as you would to traditional web browsers. Most of the time you’ll see this on your mobile device as a different sub-domain, such as: m.feyermarketing.com (as compared to www.feyermarketing.com). This would be done server-side, where the server would determine if the user was using a mobile browser or not (it would look at the “user-agent”). Below is a snippet of PHP code for finding some specific user agents:


<?
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone || $android || $palmpre || $ipod || $berry == true) {
header("Location: http://m.website.com");
exit();
}
?>

There are advantages and disadvantages to each route above. For FeyerMarketing.com we decided to go with route #2 as we wanted to take full advantage of mobile features, while still keeping our desktop site code slim.

For our third code tip, we’d like to introduce the viewport meta tag. Most mobile browsers essentially render web pages in a virtual window, or “viewport.” A viewport surrounds all the content on a page. When you scale and move around a website in a mobile browser, you’re actually scaling and moving the viewport, not the actual content. Resizing a viewport is similar to resizing a browser window on your desktop. If you change the size of the viewport, it could adjust how to web page is displayed. The viewport meta tag is used by (most) mobile devices to determine if the viewport should be scalable, what the initial/minimum/maximum scale should be and what width the viewport should be set at. Here is some sample viewport code:

<meta name="viewport" content="user-scalable=no, width=device-width" />

The above code is telling the mobile browser that the viewport should not be scalable (zoom in/out) and that the width of the viewport should be the same as the width of the device. If you’d like to learn more about the viewport, you can read more on Apple’s website.

If you’d like to learn more about how your business can go mobile, contact us here.

Leave a comment: